From cf2cc9e285b1196f2cc844857e909b4f9b614bb0 Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@fb.com>
Date: Wed, 7 Jul 2021 13:57:01 -0700
Subject: [PATCH] Update title to example

Summary: Changelog: [Internal] Update title when navigating to an example

Reviewed By: kacieb

Differential Revision: D29545092

fbshipit-source-id: 7ce2f7d978601a5e11e2d60a8fd17be0249ce122
---
 packages/rn-tester/js/RNTesterAppShared.js     | 18 +++++++++++-------
 .../js/components/RNTesterModuleList.js        | 11 +++++++++--
 packages/rn-tester/js/types/RNTesterTypes.js   |  1 +
 packages/rn-tester/js/utils/RNTesterReducer.js |  4 ++++
 .../rn-tester/js/utils/testerStateUtils.js     |  2 ++
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js
index 0909e27e9a1..1f4e01962ea 100644
--- a/packages/rn-tester/js/RNTesterAppShared.js
+++ b/packages/rn-tester/js/RNTesterAppShared.js
@@ -50,6 +50,7 @@ const RNTesterApp = (): React.Node => {
 
   const {
     activeModuleKey,
+    activeModuleTitle,
     activeModuleExampleKey,
     screen,
     bookmarks,
@@ -100,10 +101,10 @@ const RNTesterApp = (): React.Node => {
   }, [activeModuleKey, handleBackPress]);
 
   const handleModuleCardPress = React.useCallback(
-    ({exampleType, key}) => {
+    ({exampleType, key, title}) => {
       dispatch({
         type: RNTesterActionsType.MODULE_CARD_PRESS,
-        data: {exampleType, key},
+        data: {exampleType, key, title},
       });
     },
     [dispatch],
@@ -151,11 +152,14 @@ const RNTesterApp = (): React.Node => {
     activeModuleExampleKey != null
       ? activeModule?.examples.find(e => e.name === activeModuleExampleKey)
       : null;
-  const title = Screens.COMPONENTS
-    ? 'Components'
-    : Screens.APIS
-    ? 'APIs'
-    : 'Bookmarks';
+  const title =
+    activeModuleTitle != null
+      ? activeModuleTitle
+      : screen === Screens.COMPONENTS
+      ? 'Components'
+      : screen === Screens.APIS
+      ? 'APIs'
+      : 'Bookmarks';
 
   const activeExampleList =
     screen === Screens.COMPONENTS
diff --git a/packages/rn-tester/js/components/RNTesterModuleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js
index fe370272612..05e1bf5e601 100644
--- a/packages/rn-tester/js/components/RNTesterModuleList.js
+++ b/packages/rn-tester/js/components/RNTesterModuleList.js
@@ -39,7 +39,10 @@ const ExampleModuleRow = ({
     <TouchableHighlight
       style={styles.imageViewStyle}
       onPress={() =>
-        toggleBookmark({exampleType: item.exampleType, key: item.key})
+        toggleBookmark({
+          exampleType: item.exampleType,
+          key: item.key,
+        })
       }>
       <Image
         style={styles.imageStyle}
@@ -84,7 +87,11 @@ const ExampleModuleRow = ({
         </View>
       }
       onPress={() =>
-        handlePress({exampleType: item.exampleType, key: item.key})
+        handlePress({
+          exampleType: item.exampleType,
+          key: item.key,
+          title: item.module.title,
+        })
       }
     />
   );
diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js
index af46c2554e8..34c59dc5925 100644
--- a/packages/rn-tester/js/types/RNTesterTypes.js
+++ b/packages/rn-tester/js/types/RNTesterTypes.js
@@ -61,6 +61,7 @@ export type ComponentList = null | {components: string[], apis: string[]};
 
 export type RNTesterState = {
   activeModuleKey: null | string,
+  activeModuleTitle: null | string,
   activeModuleExampleKey: null | string,
   screen: ScreenTypes,
   bookmarks: ComponentList,
diff --git a/packages/rn-tester/js/utils/RNTesterReducer.js b/packages/rn-tester/js/utils/RNTesterReducer.js
index b4edec79469..dc54ab77a80 100644
--- a/packages/rn-tester/js/utils/RNTesterReducer.js
+++ b/packages/rn-tester/js/utils/RNTesterReducer.js
@@ -78,6 +78,7 @@ export const RNTesterReducer = (
       return {
         ...state,
         activeModuleKey: null,
+        activeModuleTitle: null,
         activeModuleExampleKey: null,
         screen: action.data.screen,
       };
@@ -85,6 +86,7 @@ export const RNTesterReducer = (
       return {
         ...state,
         activeModuleKey: action.data.key,
+        activeModuleTitle: action.data.title,
         activeModuleExampleKey: null,
         recentlyUsed: getUpdatedRecentlyUsed({
           exampleType: action.data.exampleType,
@@ -113,6 +115,8 @@ export const RNTesterReducer = (
         activeModuleExampleKey: null,
         activeModuleKey:
           state.activeModuleExampleKey != null ? state.activeModuleKey : null,
+        activeModuleTitle:
+          state.activeModuleExampleKey != null ? state.activeModuleTitle : null,
       };
     default:
       throw new Error(`Invalid action type ${action.type}`);
diff --git a/packages/rn-tester/js/utils/testerStateUtils.js b/packages/rn-tester/js/utils/testerStateUtils.js
index fba305784bc..584bbffee73 100644
--- a/packages/rn-tester/js/utils/testerStateUtils.js
+++ b/packages/rn-tester/js/utils/testerStateUtils.js
@@ -26,6 +26,7 @@ export const Screens = {
 
 export const initialState: RNTesterState = {
   activeModuleKey: null,
+  activeModuleTitle: null,
   activeModuleExampleKey: null,
   screen: null,
   bookmarks: null,
@@ -135,6 +136,7 @@ export const getInitialStateFromAsyncStorage = async (
   if (!initialStateString) {
     return {
       activeModuleKey: null,
+      activeModuleTitle: null,
       activeModuleExampleKey: null,
       screen: Screens.COMPONENTS,
       bookmarks: {components: [], apis: []},