From 26b41456d2d76c7e3d1b44871696d772fe604717 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Tue, 17 Oct 2023 10:32:34 -0700 Subject: [PATCH] Remove RNTester Bookmarks (#41016) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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 | 33 ++------- .../rn-tester/js/assets/bookmark-filled.png | Bin 217 -> 0 bytes .../js/assets/bookmark-outline-blue.png | Bin 1034 -> 0 bytes .../js/assets/bookmark-outline-gray.png | Bin 1076 -> 0 bytes .../rn-tester/js/assets/bookmark-outline.png | Bin 260 -> 0 bytes .../js/components/RNTPressableRow.js | 3 - .../js/components/RNTesterBookmarkButton.js | 60 --------------- .../components/RNTesterEmptyBookmarksState.js | 69 ------------------ .../js/components/RNTesterExampleFilter.js | 2 +- .../js/components/RNTesterModuleList.js | 34 +-------- .../rn-tester/js/components/RNTesterNavbar.js | 47 ------------ packages/rn-tester/js/types/RNTesterTypes.js | 5 +- .../js/utils/RNTesterNavigationReducer.js | 42 ----------- .../rn-tester/js/utils/testerStateUtils.js | 32 +------- 14 files changed, 12 insertions(+), 315 deletions(-) delete mode 100755 packages/rn-tester/js/assets/bookmark-filled.png delete mode 100644 packages/rn-tester/js/assets/bookmark-outline-blue.png delete mode 100644 packages/rn-tester/js/assets/bookmark-outline-gray.png delete mode 100755 packages/rn-tester/js/assets/bookmark-outline.png delete mode 100644 packages/rn-tester/js/components/RNTesterBookmarkButton.js delete mode 100644 packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js 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 a6e5075de537a83a2a122b65f0e84021decc5ec9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbB7I?ZihEy=VIcF%?;2>}`fJK3k zljDHk)2ZR>cv^yjSoq(_uS!w-8-3;|K0LF5SF4pE)cpHaC??X;h8UF!X1CV<^=WXu!qLw`XqpOnnUz Qpj#O{UHx3vIVCg!01o3z%>V!Z 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 a17ef85991fba10b0f19f2c8444023184cdb3a4a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1034 zcmeAS@N?(olHy`uVBq!ia0vp^5kQ>J!3HEVUa>0zDb50q$YKTtZeb8+WSBKa0w~B> z9OUlAubB-sOe zhqzv-uj1g<)>yM3k@bS;1hKAP;k%e#a3!#BU|CYP>}1J2^)LrTMdNRqk3W$+8PxJN zL4IcQ#tYmI9EvRhP9P#kmd*9%X4&t0)_Fe}y2b7>v6a7zdAFf2ndb~Mmw^6`baMl@ z`?4p}_vEtqeVHiyw}aymOZCp{e(%)67agqrbD#Bz9fEC(9|?GtM|1JQc9PNMsEUtG4riFnu<&e1EenIx0iptbk7Ot#5BN z-FB3ow%zq@jpm}u;&-;TOIWWwug>#r)4_^OdWDxnbw1zxww6bIl46Cl@$0{H&P>jk zT|4{Dij7}bPWRVck4r!Neww72*6j$MptEjPP0Qy_UA?Wjpi1+bCGSD~ax<~}&s{bJ z0>kcR^qJQ=I+bQM^UDL2zjD;wyE!4Smw$4q<(?O-tu_a)1*)iXNtd6y!tP%Z_w!|Q z_fA{STJzjP=k5`h0G#d#Rb&%g?*At1ISn2gfR@u>Zd^ zHRQX*ryF+9Ri<+YYL^R7Y8FY`^ZWKL<{#E`*fkbwMidpSxOX$+$qcO*oBJN@*)0A{ zJIMW)&5>=S#ZEg|V0tF$VCS(m}n L)z4*}Q$iB}-J!3HEVUa>0zDb50q$YKTtZeb8+WSBKa0w~B> z9OUlAuNG zH~00|ia8Hdvqcx*eRJ1h-n@By-@biwvpe2$=E3<*3p2X+p1&Kt;oLo6ufy>f?bVMw zz5hgNSJ=(p{(0Zpl~TS5izdHFJp0bYhO>5J_0(ObO~1@N6vDM6;NTNg5uUcDg8>E- zTx`w<6Eq}vSeq9n7|=&><Nj$Z#NrSncZ4?%qeVc zQ_^a?mv@(*yA^lLIcMsMh3B5d33gYC`I;D4T#Y>4*na2!jvSZk&ox-~U%MF)R@iDckOId`wo>mp^Wk zC@HV5-kp2d!zLD!RSSzBADuV$T;dpqTI?u*Y6R{wUq zv8!G$za}<%&F$rzUmtzE)AXJ{bCJQN+Ya)dpGP;}Nt(B9UZGN*PiRH_{4E#vTi2Zb zsGGoh?sBB<$HsX-w(B(CO`4ax*QxK$)rlTv)BJgMoo`iFx_YxPBYpEJ-^Dj2mi?MD zGh{ydx6R%MMP_l>?yNfztyjJDdSpq^6`i8+{?wNqe+ul+4$t`QDg@qoc?(!$LP zSG?#u^-GVDTYJ6oEVlpcGxsiPUvhxG_D^Ta*PRBZ{;6z#l_RZd-uw0Dt#`MdD`^-D zF8*0_Z~d>^>tt%-@QysNrW*SWSyOV5X@9=gXTd;D5t{GH?P_I2$GIw>CHVD?GvkX3fl?$YVA z-CX|{$nXCB>ACd_g(lY9#xc{+wQYK}`Tg}pJ1?-sUw^wjyX(NOHQT+Rc?_J|k1|%Oc%$NbBPJ6mIhEy=Vy`-4KWGK?`(DMk3 z-4CA!#YstdO!I&GDEKS+`#dmi4Chc`YIIN%^w{I1|_sz`AQ`?J5Esk7HtzSr%V zC#ZELL(V36&-6n&Q(iVj>ZP@W-8^QwVCEIQFn*<8(prNXY^_Iz02>H|1*`j^mf&B}%=-;ir zYX71kp6A^TYnR^O$N;I+>Bp>vbG#c?nN0g*;3xljxyCLgHI}O%OeR;d0KLWF>FVdQ I&MBb@0CALIeE 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);