Minor Code Improvements in RNTester (#29868)

Summary: * Update single-letter variable names to be more descriptive * Remove event listener on component unmount * Add flow types * Refactor RNTesterNavbar to use descriptive component names Pull Request resolved: https://github.com/facebook/react-native/pull/29868 Reviewed By: hramos Differential Revision: D23598579 Pulled By: rickhanlonii fbshipit-source-id: c5cfc61d7b2fcb2942bf149d0a8ba0b58b0192e6
2020-09-23 19:55:33 -07:00 · 2020-09-23 19:55:33 -07:00 · 99db9f2a42
--- a/packages/rn-tester/js/RNTesterAppShared.js
+++ b/packages/rn-tester/js/RNTesterAppShared.js
@ -139,13 +139,22 @@ const RNTesterApp = (): React.Node => {

  // Setup hardware back button press listener
  React.useEffect(() => {
-    BackHandler.addEventListener('hardwareBackPress', () => {
+    const handleHardwareBackPress = () => {
      if (openExample) {
        handleBackPress();
        return true;
      }
      return false;
-    });
+    };
+
+    BackHandler.addEventListener('hardwareBackPress', handleHardwareBackPress);
+
+    return () => {
+      BackHandler.removeEventListener(
+        'hardwareBackPress',
+        handleHardwareBackPress,
+      );
+    };
  }, [openExample, handleBackPress]);

  const handleExampleCardPress = React.useCallback(
--- a/packages/rn-tester/js/components/RNTesterBookmark.js
+++ b/packages/rn-tester/js/components/RNTesterBookmark.js
@ -1,38 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- * @format
- */
-
-'use strict';
-
-import * as React from 'react';
-import type {RNTesterExample} from '../types/RNTesterTypes';
-
-export type RNTesterBookmark = {
-  Components: {...},
-  Api: {...},
-  AddApi: (apiName: string, api: RNTesterExample) => mixed,
-  AddComponent: (componentName: string, component: RNTesterExample) => mixed,
-  RemoveApi: (apiName: string) => mixed,
-  RemoveComponent: (componentName: string) => mixed,
-  checkBookmark: (title: string, key: string) => mixed,
-};
-
-export const bookmarks: RNTesterBookmark = {
-  Components: {},
-  Api: {},
-  AddComponent: () => {},
-  RemoveComponent: () => {},
-  AddApi: () => {},
-  RemoveApi: () => {},
-  checkBookmark: () => {},
-};
-
-export const RNTesterBookmarkContext: React.Context<RNTesterBookmark> = React.createContext(
-  bookmarks,
-);
--- a/packages/rn-tester/js/components/RNTesterDocumentationURL.js
+++ b/packages/rn-tester/js/components/RNTesterDocumentationURL.js
@ -5,15 +5,20 @@
 * LICENSE file in the root directory of this source tree.
 *
 * @format
+ * @flow
 */

 'use strict';

-import React from 'react';
+import * as React from 'react';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';

-const RNTesterDocumentationURL = ({documentationURL}) => (
+type Props = $ReadOnly<{|
+  documentationURL: string,
+|}>;
+
+const RNTesterDocumentationURL = ({documentationURL}: Props): React.Node => (
  <TouchableOpacity
    style={styles.container}
    onPress={() => openURLInBrowser(documentationURL)}>
@ -28,7 +33,6 @@ export default RNTesterDocumentationURL;

 const styles = StyleSheet.create({
  container: {
-    textDecorationLine: 'underline',
    position: 'absolute',
    bottom: 0,
    right: -15,
--- a/packages/rn-tester/js/components/RNTesterNavbar.js
+++ b/packages/rn-tester/js/components/RNTesterNavbar.js
@ -13,6 +13,86 @@ import {Text, View, StyleSheet, Image, Pressable} from 'react-native';

 import {RNTesterThemeContext} from './RNTesterTheme';

+const BookmarkTab = ({handleNavBarPress, isBookmarkActive, theme}) => (
+  <View style={styles.centerBox}>
+    <Image
+      style={styles.centralBoxCutout}
+      source={require('./../assets/bottom-nav-center-box.png')}
+    />
+    <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>
+);
+
+const NavbarButton = ({
+  testID,
+  theme,
+  isActive,
+  activeImage,
+  inactiveImage,
+  label,
+  handlePress,
+  iconStyle,
+}) => (
+  <Pressable
+    testID={testID}
+    onPress={handlePress}
+    style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
+    <View
+      style={[styles.pressableContent, isActive ? styles.activeBar : null]}
+      collapsable={false}>
+      <Image
+        style={iconStyle}
+        source={isActive ? activeImage : inactiveImage}
+      />
+      <Text style={isActive ? styles.activeText : styles.inactiveText}>
+        {label}
+      </Text>
+    </View>
+  </Pressable>
+);
+
+const ComponentTab = ({isComponentActive, handleNavBarPress, theme}) => (
+  <NavbarButton
+    testID="components-tab"
+    label="Components"
+    handlePress={() => handleNavBarPress({screen: 'components'})}
+    activeImage={require('./../assets/bottom-nav-components-icon-active.png')}
+    inactiveImage={require('./../assets/bottom-nav-components-icon-inactive.png')}
+    isActive={isComponentActive}
+    theme={theme}
+    iconStyle={styles.componentIcon}
+  />
+);
+
+const APITab = ({isAPIActive, handleNavBarPress, theme}) => (
+  <NavbarButton
+    testID="apis-tab"
+    label="APIs"
+    handlePress={() => handleNavBarPress({screen: 'apis'})}
+    activeImage={require('./../assets/bottom-nav-apis-icon-active.png')}
+    inactiveImage={require('./../assets/bottom-nav-apis-icon-inactive.png')}
+    isActive={isAPIActive}
+    theme={theme}
+    iconStyle={styles.apiIcon}
+  />
+);
+
 type Props = $ReadOnly<{|
  handleNavBarPress: (data: {screen: string}) => void,
  screen: string,
@ -33,84 +113,21 @@ const RNTesterNavbar = ({
  return (
    <View>
      <View style={styles.buttonContainer}>
-        <Pressable
-          testID="components-tab"
-          onPress={() => handleNavBarPress({screen: 'components'})}
-          style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
-          <View
-            style={[
-              styles.pressableContent,
-              isComponentActive ? styles.activeBar : null,
-            ]}
-            collapsable={false}>
-            <Image
-              style={styles.componentIcon}
-              source={
-                isComponentActive
-                  ? require('./../assets/bottom-nav-components-icon-active.png')
-                  : require('./../assets/bottom-nav-components-icon-inactive.png')
-              }
-            />
-            <Text
-              style={
-                isComponentActive ? styles.activeText : styles.inactiveText
-              }>
-              Components
-            </Text>
-          </View>
-        </Pressable>
-
-        <View style={styles.centerBox}>
-          <Image
-            style={styles.centralBoxCutout}
-            source={require('./../assets/bottom-nav-center-box.png')}
-          />
-
-          <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>
-
-        <Pressable
-          testID="apis-tab"
-          onPress={() => handleNavBarPress({screen: 'apis'})}
-          style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
-          <View
-            style={[
-              styles.pressableContent,
-              isAPIActive ? styles.activeBar : null,
-            ]}
-            collapsable={false}>
-            <Image
-              style={styles.apiIcon}
-              source={
-                isAPIActive
-                  ? require('./../assets/bottom-nav-apis-icon-active.png')
-                  : require('./../assets/bottom-nav-apis-icon-inactive.png')
-              }
-            />
-            <Text style={isAPIActive ? styles.activeText : styles.inactiveText}>
-              APIs
-            </Text>
-          </View>
-        </Pressable>
+        <ComponentTab
+          isComponentActive={isComponentActive}
+          handleNavBarPress={handleNavBarPress}
+          theme={theme}
+        />
+        <BookmarkTab
+          isBookmarkActive={isBookmarkActive}
+          handleNavBarPress={handleNavBarPress}
+          theme={theme}
+        />
+        <APITab
+          isAPIActive={isAPIActive}
+          handleNavBarPress={handleNavBarPress}
+          theme={theme}
+        />
      </View>
    </View>
  );
--- a/packages/rn-tester/js/utils/testerStateUtils.js
+++ b/packages/rn-tester/js/utils/testerStateUtils.js
@ -58,29 +58,33 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({
    return null;
  }

-  const components = RNTesterList.ComponentExamples.map(c => ({
-    ...c,
-    isBookmarked: bookmarks.components.includes(c.key),
+  const components = RNTesterList.ComponentExamples.map(componentExample => ({
+    ...componentExample,
+    isBookmarked: bookmarks.components.includes(componentExample.key),
    exampleType: Screens.COMPONENTS,
  }));

  const recentlyUsedComponents = recentlyUsed.components
-    .map(k => components.find(c => c.key === k))
+    .map(recentComponentKey =>
+      components.find(component => component.key === recentComponentKey),
+    )
    .filter(Boolean);

-  const bookmarkedComponents = components.filter(c => c.isBookmarked);
+  const bookmarkedComponents = components.filter(
+    component => component.isBookmarked,
+  );

-  const apis = RNTesterList.APIExamples.map(c => ({
-    ...c,
-    isBookmarked: bookmarks.apis.includes(c.key),
+  const apis = RNTesterList.APIExamples.map(apiExample => ({
+    ...apiExample,
+    isBookmarked: bookmarks.apis.includes(apiExample.key),
    exampleType: Screens.APIS,
  }));

  const recentlyUsedAPIs = recentlyUsed.apis
-    .map(k => apis.find(c => c.key === k))
+    .map(recentAPIKey => apis.find(apiEample => apiEample.key === recentAPIKey))
    .filter(Boolean);

-  const bookmarkedAPIs = apis.filter(c => c.isBookmarked);
+  const bookmarkedAPIs = apis.filter(apiEample => apiEample.isBookmarked);

  const examplesList: ExamplesList = {
    [Screens.COMPONENTS]: [