Back out "Remove AsyncStorage from rn-tester and fix InternalSettings…

… Example" Summary: This diff breaks the RNTester app at runtime and it prevents us from cutting RN 0.69. Original commit changeset: a879787d8683 Original Phabricator Diff: D35435562 (f4c4f44) ## Changelog [General][Fixed] - Revert change which breaks RNTester Reviewed By: cortinico, kacieb Differential Revision: D35936298 fbshipit-source-id: c4ec92002fde9c1de691bcda17ebc5d0747914f6
facebook · Apr 27, 2022 · ecf3293 · ecf3293
1 parent b4ebc98
commit ecf3293
Show file tree

Hide file tree

Showing 11 changed files with 322 additions and 323 deletions.
diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js
@@ -23,29 +23,29 @@ import RNTesterNavBar, {navBarHeight} from './components/RNTesterNavbar';
 import RNTesterList from './utils/RNTesterList';
 import {
   Screens,
-  initialNavState,
+  initialState,
   getExamplesListWithBookmarksAndRecentlyUsed,
+  getInitialStateFromAsyncStorage,
 } from './utils/testerStateUtils';
-import {
-  RNTesterNavReducer,
-  RNTesterNavActionsType,
-} from './utils/RNTesterNavReducer';
+import {useAsyncStorageReducer} from './utils/useAsyncStorageReducer';
+import {RNTesterReducer, RNTesterActionsType} from './utils/RNTesterReducer';
 import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
 import RNTTitleBar from './components/RNTTitleBar';
 import {RNTesterEmptyBookmarksState} from './components/RNTesterEmptyBookmarksState';
-import {RNTesterJsStallsProvider} from './utils/RNTesterJsStallsContext';
 
-// RNTester App currently uses in memory storage for storing navigation state
+const APP_STATE_KEY = 'RNTesterAppState.v3';
+
+// RNTester App currently uses AsyncStorage from react-native for storing navigation state
 // and bookmark items.
-// TODO: Identify/implement solution for async device storage.
+// TODO: Vendor AsyncStorage or create our own.
 LogBox.ignoreLogs([/AsyncStorage has been extracted from react-native/]);
 
 const RNTesterApp = (): React.Node => {
-  const [state, dispatch] = React.useReducer<Function, Object>(
-    RNTesterNavReducer,
-    initialNavState,
+  const [state, dispatch] = useAsyncStorageReducer(
+    RNTesterReducer,
+    initialState,
+    APP_STATE_KEY,
   );
-
   const colorScheme = useColorScheme();
 
   const {
@@ -57,6 +57,17 @@ const RNTesterApp = (): React.Node => {
     recentlyUsed,
   } = state;
 
+  React.useEffect(() => {
+    getInitialStateFromAsyncStorage(APP_STATE_KEY).then(
+      initialStateFromStorage => {
+        dispatch({
+          type: RNTesterActionsType.INIT_FROM_STORAGE,
+          data: initialStateFromStorage,
+        });
+      },
+    );
+  }, [dispatch]);
+
   const examplesList = React.useMemo(
     () =>
       getExamplesListWithBookmarksAndRecentlyUsed({bookmarks, recentlyUsed}),
@@ -65,7 +76,7 @@ const RNTesterApp = (): React.Node => {
 
   const handleBackPress = React.useCallback(() => {
     if (activeModuleKey != null) {
-      dispatch({type: RNTesterNavActionsType.BACK_BUTTON_PRESS});
+      dispatch({type: RNTesterActionsType.BACK_BUTTON_PRESS});
     }
   }, [dispatch, activeModuleKey]);
 
@@ -92,7 +103,7 @@ const RNTesterApp = (): React.Node => {
   const handleModuleCardPress = React.useCallback(
     ({exampleType, key, title}) => {
       dispatch({
-        type: RNTesterNavActionsType.MODULE_CARD_PRESS,
+        type: RNTesterActionsType.MODULE_CARD_PRESS,
         data: {exampleType, key, title},
       });
     },
@@ -102,7 +113,7 @@ const RNTesterApp = (): React.Node => {
   const handleModuleExampleCardPress = React.useCallback(
     exampleName => {
       dispatch({
-        type: RNTesterNavActionsType.EXAMPLE_CARD_PRESS,
+        type: RNTesterActionsType.EXAMPLE_CARD_PRESS,
         data: {key: exampleName},
       });
     },
@@ -112,7 +123,7 @@ const RNTesterApp = (): React.Node => {
   const toggleBookmark = React.useCallback(
     ({exampleType, key}) => {
       dispatch({
-        type: RNTesterNavActionsType.BOOKMARK_PRESS,
+        type: RNTesterActionsType.BOOKMARK_PRESS,
         data: {exampleType, key},
       });
     },
@@ -122,7 +133,7 @@ const RNTesterApp = (): React.Node => {
   const handleNavBarPress = React.useCallback(
     args => {
       dispatch({
-        type: RNTesterNavActionsType.NAVBAR_PRESS,
+        type: RNTesterActionsType.NAVBAR_PRESS,
         data: {screen: args.screen},
       });
     },
@@ -159,42 +170,40 @@ const RNTesterApp = (): React.Node => {
 
   return (
     <RNTesterThemeContext.Provider value={theme}>
-      <RNTesterJsStallsProvider>
-        <RNTTitleBar
-          title={title}
-          theme={theme}
-          onBack={activeModule ? handleBackPress : null}
-          documentationURL={activeModule?.documentationURL}
-        />
-        <View
-          style={StyleSheet.compose(styles.container, {
-            backgroundColor: theme.GroupedBackgroundColor,
-          })}>
-          {activeModule != null ? (
-            <RNTesterModuleContainer
-              module={activeModule}
-              example={activeModuleExample}
-              onExampleCardPress={handleModuleExampleCardPress}
-            />
-          ) : screen === Screens.BOOKMARKS &&
-            examplesList.bookmarks.length === 0 ? (
-            <RNTesterEmptyBookmarksState />
-          ) : (
-            <RNTesterModuleList
-              sections={activeExampleList}
-              toggleBookmark={toggleBookmark}
-              handleModuleCardPress={handleModuleCardPress}
-            />
-          )}
-        </View>
-        <View style={styles.bottomNavbar}>
-          <RNTesterNavBar
-            screen={screen || Screens.COMPONENTS}
-            isExamplePageOpen={!!activeModule}
-            handleNavBarPress={handleNavBarPress}
+      <RNTTitleBar
+        title={title}
+        theme={theme}
+        onBack={activeModule ? handleBackPress : null}
+        documentationURL={activeModule?.documentationURL}
+      />
+      <View
+        style={StyleSheet.compose(styles.container, {
+          backgroundColor: theme.GroupedBackgroundColor,
+        })}>
+        {activeModule != null ? (
+          <RNTesterModuleContainer
+            module={activeModule}
+            example={activeModuleExample}
+            onExampleCardPress={handleModuleExampleCardPress}
           />
-        </View>
-      </RNTesterJsStallsProvider>
+        ) : screen === Screens.BOOKMARKS &&
+          examplesList.bookmarks.length === 0 ? (
+          <RNTesterEmptyBookmarksState />
+        ) : (
+          <RNTesterModuleList
+            sections={activeExampleList}
+            toggleBookmark={toggleBookmark}
+            handleModuleCardPress={handleModuleCardPress}
+          />
+        )}
+      </View>
+      <View style={styles.bottomNavbar}>
+        <RNTesterNavBar
+          screen={screen || Screens.COMPONENTS}
+          isExamplePageOpen={!!activeModule}
+          handleNavBarPress={handleNavBarPress}
+        />
+      </View>
     </RNTesterThemeContext.Provider>
   );
 };

diff --git a/packages/rn-tester/js/components/RNTesterSettingSwitchRow.js b/packages/rn-tester/js/components/RNTesterSettingSwitchRow.js
@@ -8,33 +8,54 @@
  * @flow strict-local
  */
 
+'use strict';
+
+const RNTesterStatePersister = require('../utils/RNTesterStatePersister');
 const React = require('react');
 
 const {StyleSheet, Switch, Text, View} = require('react-native');
 
+class RNTesterSettingSwitchRow extends React.Component<
+  $FlowFixMeProps,
+  $FlowFixMeState,
+> {
+  UNSAFE_componentWillReceiveProps(newProps: $FlowFixMeProps) {
+    const {onEnable, onDisable, persister} = this.props;
+    if (newProps.persister.state !== persister.state) {
+      newProps.persister.state ? onEnable() : onDisable();
+    }
+  }
+  render(): React.Node {
+    const {label, persister} = this.props;
+    return (
+      <View style={styles.row}>
+        <Text>{label}</Text>
+        <Switch
+          value={persister.state}
+          onValueChange={value => {
+            persister.setState(() => value);
+          }}
+        />
+      </View>
+    );
+  }
+}
 const styles = StyleSheet.create({
   row: {
     padding: 10,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
 });
-
-export const RNTesterSettingSwitchRow = ({
-  label,
-  onEnable,
-  onDisable,
-  active,
-}: $FlowFixMeProps): React.Node => {
-  return (
-    <View style={styles.row}>
-      <Text>{label}</Text>
-      <Switch
-        value={active}
-        onValueChange={() => {
-          active ? onDisable() : onEnable();
-        }}
-      />
-    </View>
-  );
-};
+/* $FlowFixMe[cannot-reassign-export] (>=0.85.0 site=react_native_fb) This
+ * comment suppresses an error found when Flow v0.85 was deployed. To see the
+ * error, delete this comment and run Flow. */
+// $FlowFixMe[cannot-reassign]
+RNTesterSettingSwitchRow = RNTesterStatePersister.createContainer(
+  RNTesterSettingSwitchRow,
+  {
+    cacheKeySuffix: ({label}) => 'Switch:' + label,
+    getInitialState: ({initialValue}) => initialValue,
+  },
+);
+module.exports = RNTesterSettingSwitchRow;
diff --git a/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js b/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js
@@ -158,45 +158,74 @@ class LoopExample extends React.Component<{...}, $FlowFixMeState> {
   }
 }
 
-const RNTesterSettingSwitchRow =
-  require('../../components/RNTesterSettingSwitchRow').RNTesterSettingSwitchRow;
-const RNTesterJsStallsContext = require('../../utils/RNTesterJsStallsContext');
-
-const InternalSettings = () => {
-  const {
-    state,
-    onDisableForceJsStalls,
-    onEnableForceJsStalls,
-    onEnableJsStallsTracking,
-    onDisableJsStallsTracking,
-  } = React.useContext(RNTesterJsStallsContext.RNTesterJsStallsContext);
-
-  const {stallInterval, busyTime, filteredStall, tracking} = state;
-  return (
-    <View>
-      <RNTesterSettingSwitchRow
-        initialValue={false}
-        label="Force JS Stalls"
-        active={stallInterval !== null}
-        onEnable={onEnableForceJsStalls}
-        onDisable={onDisableForceJsStalls}
-      />
-      <RNTesterSettingSwitchRow
-        initialValue={false}
-        label="Track JS Stalls"
-        active={tracking}
-        onEnable={onEnableJsStallsTracking}
-        onDisable={onDisableJsStallsTracking}
-      />
-      {tracking && (
-        <Text>
-          {`JS Stall filtered: ${Math.round(filteredStall)}, `}
-          {`last: ${busyTime !== null ? busyTime.toFixed(8) : '<none>'}`}
-        </Text>
-      )}
-    </View>
-  );
-};
+const RNTesterSettingSwitchRow = require('../../components/RNTesterSettingSwitchRow');
+class InternalSettings extends React.Component<
+  {...},
+  {
+    busyTime: number | string,
+    filteredStall: number,
+    ...
+  },
+> {
+  _stallInterval: ?number;
+  render() {
+    return (
+      <View>
+        <RNTesterSettingSwitchRow
+          initialValue={false}
+          label="Force JS Stalls"
+          onEnable={() => {
+            /* $FlowFixMe[incompatible-type] (>=0.63.0 site=react_native_fb)
+             * This comment suppresses an error found when Flow v0.63 was
+             * deployed. To see the error delete this comment and run Flow. */
+            this._stallInterval = setInterval(() => {
+              const start = Date.now();
+              console.warn('burn CPU');
+              while (Date.now() - start < 100) {}
+            }, 300);
+          }}
+          onDisable={() => {
+            /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb)
+             * This comment suppresses an error found when Flow v0.63 was
+             * deployed. To see the error delete this comment and run Flow. */
+            clearInterval(this._stallInterval || 0);
+          }}
+        />
+        <RNTesterSettingSwitchRow
+          initialValue={false}
+          label="Track JS Stalls"
+          onEnable={() => {
+            require('react-native/Libraries/Interaction/JSEventLoopWatchdog').install(
+              {
+                thresholdMS: 25,
+              },
+            );
+            this.setState({busyTime: '<none>'});
+            require('react-native/Libraries/Interaction/JSEventLoopWatchdog').addHandler(
+              {
+                onStall: ({busyTime}) =>
+                  this.setState(state => ({
+                    busyTime,
+                    filteredStall:
+                      (state.filteredStall || 0) * 0.97 + busyTime * 0.03,
+                  })),
+              },
+            );
+          }}
+          onDisable={() => {
+            console.warn('Cannot disable yet....');
+          }}
+        />
+        {this.state && (
+          <Text>
+            {`JS Stall filtered: ${Math.round(this.state.filteredStall)}, `}
+            {`last: ${this.state.busyTime}`}
+          </Text>
+        )}
+      </View>
+    );
+  }
+}
 
 class EventExample extends React.Component<{...}, $FlowFixMeState> {
   state = {

diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js
@@ -59,18 +59,11 @@ export type ScreenTypes = 'components' | 'apis' | 'bookmarks' | null;
 
 export type ComponentList = null | {components: string[], apis: string[]};
 
-export type RNTesterNavState = {
+export type RNTesterState = {
   activeModuleKey: null | string,
   activeModuleTitle: null | string,
   activeModuleExampleKey: null | string,
   screen: ScreenTypes,
   bookmarks: ComponentList,
   recentlyUsed: ComponentList,
 };
-
-export type RNTesterJsStallsState = {
-  stallInterval: null | number,
-  busyTime: null | number,
-  filteredStall: number,
-  tracking: boolean,
-};