Remove RNTester Bookmarks (facebook#41016)

Summary:
Pull Request resolved: facebook#41016

This hasn't been very useful since AsyncStorage/persistence was removed, but takes up a good amount of usable screen real-estate for information in the center of the screen. Remove it.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D50297980

fbshipit-source-id: 296a377dffc89c5c203ca6264351a2a1a8281cc3

packages/rn-tester/js/RNTesterAppShared.js

@@ -8,7 +8,6 @@
  * @flow
  */
 
-import {RNTesterEmptyBookmarksState} from './components/RNTesterEmptyBookmarksState';
 import RNTesterModuleContainer from './components/RNTesterModuleContainer';
 import RNTesterModuleList from './components/RNTesterModuleList';
 import RNTesterNavBar, {navBarHeight} from './components/RNTesterNavbar';
@@ -21,7 +20,7 @@ import {
 } from './utils/RNTesterNavigationReducer';
 import {
   Screens,
-  getExamplesListWithBookmarksAndRecentlyUsed,
+  getExamplesListWithRecentlyUsed,
   initialNavigationState,
 } from './utils/testerStateUtils';
 import * as React from 'react';
@@ -41,14 +40,12 @@ const RNTesterApp = (): React.Node => {
     activeModuleTitle,
     activeModuleExampleKey,
     screen,
-    bookmarks,
     recentlyUsed,
   } = state;
 
   const examplesList = React.useMemo(
-    () =>
-      getExamplesListWithBookmarksAndRecentlyUsed({bookmarks, recentlyUsed}),
-    [bookmarks, recentlyUsed],
+    () => getExamplesListWithRecentlyUsed({recentlyUsed}),
+    [recentlyUsed],
   );
 
   const handleBackPress = React.useCallback(() => {
@@ -97,16 +94,6 @@ const RNTesterApp = (): React.Node => {
     [dispatch],
   );
 
-  const toggleBookmark = React.useCallback(
-    ({exampleType, key}: any) => {
-      dispatch({
-        type: RNTesterNavigationActionsType.BOOKMARK_PRESS,
-        data: {exampleType, key},
-      });
-    },
-    [dispatch],
-  );
-
   const handleNavBarPress = React.useCallback(
     (args: {screen: string}) => {
       dispatch({
@@ -134,16 +121,10 @@ const RNTesterApp = (): React.Node => {
       ? activeModuleTitle
       : screen === Screens.COMPONENTS
       ? 'Components'
-      : screen === Screens.APIS
-      ? 'APIs'
-      : 'Bookmarks';
+      : 'APIs';
 
   const activeExampleList =
-    screen === Screens.COMPONENTS
-      ? examplesList.components
-      : screen === Screens.APIS
-      ? examplesList.apis
-      : examplesList.bookmarks;
+    screen === Screens.COMPONENTS ? examplesList.components : examplesList.apis;
 
   return (
     <RNTesterThemeContext.Provider value={theme}>
@@ -163,13 +144,9 @@ const RNTesterApp = (): React.Node => {
             example={activeModuleExample}
             onExampleCardPress={handleModuleExampleCardPress}
           />
-        ) : screen === Screens.BOOKMARKS &&
-          examplesList.bookmarks.length === 0 ? (
-          <RNTesterEmptyBookmarksState />
         ) : (
           <RNTesterModuleList
             sections={activeExampleList}
-            toggleBookmark={toggleBookmark}
             handleModuleCardPress={handleModuleCardPress}
           />
         )}

packages/rn-tester/js/components/RNTPressableRow.js

@@ -20,7 +20,6 @@ type Props = {
   testID?: ?string,
   onPressIn?: ?() => mixed,
   onPressOut?: ?() => mixed,
-  rightAddOn?: ?React.Node,
   bottomAddOn?: ?React.Node,
   children?: ?React.Node,
   title: string,
@@ -34,7 +33,6 @@ export default function RNTPressableRow({
   onPressOut,
   title,
   description,
-  rightAddOn,
   bottomAddOn,
   onPress,
   style,
@@ -58,7 +56,6 @@ export default function RNTPressableRow({
       onPress={onPress}>
       <View style={styles.topRowStyle}>
         <RNTesterComponentTitle>{title}</RNTesterComponentTitle>
-        {rightAddOn}
       </View>
       <Text
         style={[styles.descriptionText, {color: theme.SecondaryLabelColor}]}>

packages/rn-tester/js/components/RNTesterExampleFilter.js

@@ -28,7 +28,7 @@ type Props<T> = {
   disableSearch?: boolean,
   testID?: string,
   hideFilterPills?: boolean,
-  page: 'examples_page' | 'components_page' | 'bookmarks_page',
+  page: 'examples_page' | 'components_page',
   sections: $ReadOnlyArray<SectionData<T>>,
   ...
 };

packages/rn-tester/js/components/RNTesterModuleList.js

@@ -12,15 +12,7 @@ const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 import RNTPressableRow from './RNTPressableRow';
 const React = require('react');
 
-const {
-  Platform,
-  SectionList,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  Image,
-  View,
-} = require('react-native');
+const {Platform, SectionList, StyleSheet, Text, View} = require('react-native');
 
 import {RNTesterThemeContext} from './RNTesterTheme';
 
@@ -30,32 +22,12 @@ const ExampleModuleRow = ({
   onShowUnderlay,
   onHideUnderlay,
   item,
-  toggleBookmark,
   handlePress,
 }) => {
   const theme = React.useContext(RNTesterThemeContext);
   const platform = item.module.platform;
   const onIos = !platform || platform === 'ios';
   const onAndroid = !platform || platform === 'android';
-  const rightAddOn = (
-    <TouchableHighlight
-      style={styles.imageViewStyle}
-      onPress={() =>
-        toggleBookmark({
-          exampleType: item.exampleType,
-          key: item.key,
-        })
-      }>
-      <Image
-        style={styles.imageStyle}
-        source={
-          item.isBookmarked
-            ? require('../assets/bookmark-outline-blue.png')
-            : require('../assets/bookmark-outline-gray.png')
-        }
-      />
-    </TouchableHighlight>
-  );
   return (
     <RNTPressableRow
       title={item.module.title}
@@ -64,7 +36,6 @@ const ExampleModuleRow = ({
       onPressIn={onShowUnderlay}
       onPressOut={onHideUnderlay}
       accessibilityLabel={item.module.title + ' ' + item.module.description}
-      rightAddOn={rightAddOn}
       bottomAddOn={
         <View style={styles.bottomRowStyle}>
           <Text style={{color: theme.SecondaryLabelColor, width: 65}}>
@@ -119,7 +90,7 @@ const renderSectionHeader = ({section}: {section: any, ...}) => (
 );
 
 const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
-  ({sections, toggleBookmark, handleModuleCardPress}) => {
+  ({sections, handleModuleCardPress}) => {
     const filter = ({example, filterRegex, category}: any) =>
       filterRegex.test(example.module.title) &&
       (!category || example.category === category);
@@ -133,7 +104,6 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
           section={section}
           onShowUnderlay={separators.highlight}
           onHideUnderlay={separators.unhighlight}
-          toggleBookmark={toggleBookmark}
           handlePress={handleModuleCardPress}
         />
       );

packages/rn-tester/js/components/RNTesterNavbar.js

@@ -15,42 +15,6 @@ import {Text, View, StyleSheet, Image, Pressable} from 'react-native';
 
 import {RNTesterThemeContext} from './RNTesterTheme';
 
-const BookmarkTab = ({
-  handleNavBarPress,
-  isBookmarkActive,
-  theme,
-}: {
-  handleNavBarPress: (data: {screen: string}) => void,
-  isBookmarkActive: boolean,
-  theme: RNTesterTheme,
-}) => (
-  <View style={styles.centerBox}>
-    <View
-      style={[
-        styles.centralBoxCutout,
-        {backgroundColor: theme.BackgroundColor},
-      ]}
-    />
-    <View style={styles.floatContainer}>
-      <Pressable
-        testID="bookmarks-tab"
-        onPress={() => handleNavBarPress({screen: 'bookmarks'})}>
-        <View
-          style={[styles.floatingButton, {backgroundColor: theme.BorderColor}]}>
-          <Image
-            style={styles.bookmarkIcon}
-            source={
-              isBookmarkActive
-                ? require('../assets/bottom-nav-bookmark-fill.png')
-                : require('../assets/bottom-nav-bookmark-outline.png')
-            }
-          />
-        </View>
-      </Pressable>
-    </View>
-  </View>
-);
-
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
 const NavbarButton = ({
@@ -138,7 +102,6 @@ const RNTesterNavbar = ({
 
   const isAPIActive = screen === 'apis' && !isExamplePageOpen;
   const isComponentActive = screen === 'components' && !isExamplePageOpen;
-  const isBookmarkActive = screen === 'bookmarks' && !isExamplePageOpen;
 
   return (
     <View>
@@ -148,11 +111,6 @@ const RNTesterNavbar = ({
           handleNavBarPress={handleNavBarPress}
           theme={theme}
         />
-        <BookmarkTab
-          isBookmarkActive={isBookmarkActive}
-          handleNavBarPress={handleNavBarPress}
-          theme={theme}
-        />
         <APITab
           isAPIActive={isAPIActive}
           handleNavBarPress={handleNavBarPress}
@@ -190,11 +148,6 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
     elevation: 5,
   },
-  bookmarkIcon: {
-    width: 30,
-    height: 30,
-    margin: 10,
-  },
   componentIcon: {
     width: 20,
     height: 20,