diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js index 3cd8e9d9afad5a..04c17f58f32596 100644 --- a/packages/rn-tester/js/RNTesterAppShared.js +++ b/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 ( @@ -163,13 +144,9 @@ const RNTesterApp = (): React.Node => { example={activeModuleExample} onExampleCardPress={handleModuleExampleCardPress} /> - ) : screen === Screens.BOOKMARKS && - examplesList.bookmarks.length === 0 ? ( - ) : ( )} diff --git a/packages/rn-tester/js/assets/bookmark-filled.png b/packages/rn-tester/js/assets/bookmark-filled.png deleted file mode 100755 index a6e5075de537a8..00000000000000 Binary files a/packages/rn-tester/js/assets/bookmark-filled.png and /dev/null differ diff --git a/packages/rn-tester/js/assets/bookmark-outline-blue.png b/packages/rn-tester/js/assets/bookmark-outline-blue.png deleted file mode 100644 index a17ef85991fba1..00000000000000 Binary files a/packages/rn-tester/js/assets/bookmark-outline-blue.png and /dev/null differ diff --git a/packages/rn-tester/js/assets/bookmark-outline-gray.png b/packages/rn-tester/js/assets/bookmark-outline-gray.png deleted file mode 100644 index 2b2281e5373db0..00000000000000 Binary files a/packages/rn-tester/js/assets/bookmark-outline-gray.png and /dev/null differ diff --git a/packages/rn-tester/js/assets/bookmark-outline.png b/packages/rn-tester/js/assets/bookmark-outline.png deleted file mode 100755 index a939dac5740acc..00000000000000 Binary files a/packages/rn-tester/js/assets/bookmark-outline.png and /dev/null differ diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js index 805b7c57fd1d7b..77778d4d3b2d6b 100644 --- a/packages/rn-tester/js/components/RNTPressableRow.js +++ b/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}> {title} - {rightAddOn} diff --git a/packages/rn-tester/js/components/RNTesterBookmarkButton.js b/packages/rn-tester/js/components/RNTesterBookmarkButton.js deleted file mode 100644 index b8f69eb36adfe8..00000000000000 --- a/packages/rn-tester/js/components/RNTesterBookmarkButton.js +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -const React = require('react'); - -import {TouchableOpacity, Image, StyleSheet} from 'react-native'; - -type Props = {| - isActive: boolean, - onPress: Function, - size: number, -|}; - -class RNTesterBookmarkButton extends React.Component { - constructor(props: Props) { - super(props); - } - - render(): React.Node { - const {size, onPress, isActive} = this.props; - return ( - - - - ); - } -} - -const styles = StyleSheet.create({ - imageViewStyle: { - backgroundColor: 'blue', - justifyContent: 'center', - alignItems: 'center', - }, -}); - -module.exports = RNTesterBookmarkButton; diff --git a/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js b/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js deleted file mode 100644 index 41cc5b7a9960cc..00000000000000 --- a/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -import * as React from 'react'; -import {View, Image, Text, StyleSheet} from 'react-native'; -import {RNTesterThemeContext} from './RNTesterTheme'; - -export const RNTesterEmptyBookmarksState = (): React.Node => { - const theme = React.useContext(RNTesterThemeContext); - return ( - - - - - Bookmarks are empty - - - Please tap the{' '} - {' '} - icon to bookmark examples. - - - - - ); -}; - -const styles = StyleSheet.create({ - emptyContainer: { - flex: 1, - paddingHorizontal: 40, - justifyContent: 'center', - alignItems: 'center', - }, - emptyContainerInner: { - marginTop: -150, - }, - emptyImage: { - maxWidth: '100%', - height: 300, - }, - heading: { - fontSize: 24, - textAlign: 'center', - }, - subheading: { - fontSize: 16, - textAlign: 'center', - }, - bookmarkIcon: { - width: 24, - height: 24, - transform: [{translateY: 4}], - }, -}); diff --git a/packages/rn-tester/js/components/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js index 5947f121477d3e..530a42c2b8771e 100644 --- a/packages/rn-tester/js/components/RNTesterExampleFilter.js +++ b/packages/rn-tester/js/components/RNTesterExampleFilter.js @@ -28,7 +28,7 @@ type Props = { disableSearch?: boolean, testID?: string, hideFilterPills?: boolean, - page: 'examples_page' | 'components_page' | 'bookmarks_page', + page: 'examples_page' | 'components_page', sections: $ReadOnlyArray>, ... }; diff --git a/packages/rn-tester/js/components/RNTesterModuleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js index 04421e3cf229fe..6e601b2f1ae337 100644 --- a/packages/rn-tester/js/components/RNTesterModuleList.js +++ b/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 = ( - - toggleBookmark({ - exampleType: item.exampleType, - key: item.key, - }) - }> - - - ); return ( @@ -119,7 +90,7 @@ const renderSectionHeader = ({section}: {section: any, ...}) => ( ); const RNTesterModuleList: React$AbstractComponent = 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 = React.memo( section={section} onShowUnderlay={separators.highlight} onHideUnderlay={separators.unhighlight} - toggleBookmark={toggleBookmark} handlePress={handleModuleCardPress} /> ); diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js index 9dc31eaeb7e087..c89ede9bfcfd79 100644 --- a/packages/rn-tester/js/components/RNTesterNavbar.js +++ b/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, -}) => ( - - - - handleNavBarPress({screen: 'bookmarks'})}> - - - - - - -); - /* $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 ( @@ -148,11 +111,6 @@ const RNTesterNavbar = ({ handleNavBarPress={handleNavBarPress} theme={theme} /> - ; @@ -51,10 +50,9 @@ export type SectionData = { export type ExamplesList = $ReadOnly<{| components: $ReadOnlyArray>, apis: $ReadOnlyArray>, - bookmarks: $ReadOnlyArray>, |}>; -export type ScreenTypes = 'components' | 'apis' | 'bookmarks' | null; +export type ScreenTypes = 'components' | 'apis' | null; export type ComponentList = null | {components: string[], apis: string[]}; @@ -63,7 +61,6 @@ export type RNTesterNavigationState = { activeModuleTitle: null | string, activeModuleExampleKey: null | string, screen: ScreenTypes, - bookmarks: ComponentList, recentlyUsed: ComponentList, }; diff --git a/packages/rn-tester/js/utils/RNTesterNavigationReducer.js b/packages/rn-tester/js/utils/RNTesterNavigationReducer.js index ff08d7b9312814..a21aa40dfe6392 100644 --- a/packages/rn-tester/js/utils/RNTesterNavigationReducer.js +++ b/packages/rn-tester/js/utils/RNTesterNavigationReducer.js @@ -15,42 +15,11 @@ import type { export const RNTesterNavigationActionsType = { NAVBAR_PRESS: 'NAVBAR_PRESS', - BOOKMARK_PRESS: 'BOOKMARK_PRESS', BACK_BUTTON_PRESS: 'BACK_BUTTON_PRESS', MODULE_CARD_PRESS: 'MODULE_CARD_PRESS', EXAMPLE_CARD_PRESS: 'EXAMPLE_CARD_PRESS', }; -const getUpdatedBookmarks = ({ - exampleType, - key, - bookmarks, -}: { - exampleType: 'apis' | 'components' | null, - key: string | null, - bookmarks: ComponentList, -}) => { - const updatedBookmarks = bookmarks - ? {...bookmarks} - : // $FlowFixMe[missing-empty-array-annot] - {components: [], apis: []}; - - if (!exampleType || !key) { - return null; - } - - if (updatedBookmarks[exampleType].includes(key)) { - updatedBookmarks[exampleType] = updatedBookmarks[exampleType].filter( - k => k !== key, - ); - } else { - // $FlowFixMe[incompatible-call] - updatedBookmarks[exampleType].push(key); - } - - return updatedBookmarks; -}; - const getUpdatedRecentlyUsed = ({ exampleType, key, @@ -120,17 +89,6 @@ export const RNTesterNavigationReducer = ( activeModuleExampleKey: key, }; - case RNTesterNavigationActionsType.BOOKMARK_PRESS: - return { - ...state, - // $FlowFixMe[incompatible-return] - bookmarks: getUpdatedBookmarks({ - exampleType: exampleType, - key: key, - bookmarks: state.bookmarks, - }), - }; - case RNTesterNavigationActionsType.BACK_BUTTON_PRESS: // Go back to module or list return { diff --git a/packages/rn-tester/js/utils/testerStateUtils.js b/packages/rn-tester/js/utils/testerStateUtils.js index a7ec6ae7c4d08c..c3239adeab9737 100644 --- a/packages/rn-tester/js/utils/testerStateUtils.js +++ b/packages/rn-tester/js/utils/testerStateUtils.js @@ -21,7 +21,6 @@ import RNTesterList from './RNTesterList'; export const Screens = { COMPONENTS: 'components', APIS: 'apis', - BOOKMARKS: 'bookmarks', }; export const initialNavigationState: RNTesterNavigationState = { @@ -29,15 +28,12 @@ export const initialNavigationState: RNTesterNavigationState = { activeModuleTitle: null, activeModuleExampleKey: null, screen: Screens.COMPONENTS, - bookmarks: {components: [], apis: []}, recentlyUsed: {components: [], apis: []}, }; const filterEmptySections = (examplesList: ExamplesList): any => { const filteredSections: { - ['apis' | 'bookmarks' | 'components']: Array< - SectionData, - >, + ['apis' | 'components']: Array>, } = {}; const sectionKeys = Object.keys(examplesList); @@ -50,22 +46,19 @@ const filterEmptySections = (examplesList: ExamplesList): any => { return filteredSections; }; -export const getExamplesListWithBookmarksAndRecentlyUsed = ({ - bookmarks, +export const getExamplesListWithRecentlyUsed = ({ recentlyUsed, }: { - bookmarks: ComponentList, recentlyUsed: ComponentList, }): ExamplesList | null => { // Return early if state has not been initialized from storage - if (!bookmarks || !recentlyUsed) { + if (!recentlyUsed) { return null; } const components = RNTesterList.Components.map( (componentExample): RNTesterModuleInfo => ({ ...componentExample, - isBookmarked: bookmarks.components.includes(componentExample.key), exampleType: Screens.COMPONENTS, }), ); @@ -76,13 +69,8 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({ ) .filter(Boolean); - const bookmarkedComponents = components.filter( - component => component.isBookmarked, - ); - const apis = RNTesterList.APIs.map((apiExample): RNTesterModuleInfo => ({ ...apiExample, - isBookmarked: bookmarks.apis.includes(apiExample.key), exampleType: Screens.APIS, })); @@ -92,8 +80,6 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({ ) .filter(Boolean); - const bookmarkedAPIs = apis.filter(apiExample => apiExample.isBookmarked); - const examplesList: ExamplesList = { [Screens.COMPONENTS]: [ { @@ -119,18 +105,6 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({ title: 'APIs', }, ], - [Screens.BOOKMARKS]: [ - { - key: 'COMPONENTS', - data: bookmarkedComponents, - title: 'Components', - }, - { - key: 'APIS', - data: bookmarkedAPIs, - title: 'APIs', - }, - ], }; return filterEmptySections(examplesList);