StackContainer refactor analagous to TabsContainer

also small change in TabsContainer

Author: sgaczol

apps/src/shared/gamma/containers/stack/StackContainer.tsx

@@ -61,33 +61,40 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
 
   return (
     <Stack.Host ref={hostRef}>
-      {stackNavState.stack.map(
-        ({ Component, options, activityMode, routeKey }) => {
-          const stackNavigationContext: StackNavigationContextPayload = {
-            routeKey,
-            routeOptions: { ...options },
-            push: navMethods.pushAction,
-            pop: navMethods.popAction,
-            preload: navMethods.preloadAction,
-            batch: navMethods.batchAction,
-            setRouteOptions: navMethods.setRouteOptions,
-          };
+      {stackNavState.stack.map(({ options, activityMode, routeKey, name }) => {
+        const stackNavigationContext: StackNavigationContextPayload = {
+          routeKey,
+          routeOptions: { ...options },
+          push: navMethods.pushAction,
+          pop: navMethods.popAction,
+          preload: navMethods.preloadAction,
+          batch: navMethods.batchAction,
+          setRouteOptions: navMethods.setRouteOptions,
+        };
 
-          return (
-            <Stack.Screen
-              key={routeKey}
-              {...options}
-              activityMode={activityMode}
-              screenKey={routeKey}
-              onDismiss={onScreenDismissed}
-              onNativeDismiss={onScreenNativelyDismissed}>
-              <StackNavigationContext.Provider value={stackNavigationContext}>
-                <Component />
-              </StackNavigationContext.Provider>
-            </Stack.Screen>
-          );
-        },
-      )}
+        const matchingConfig = routeConfigs.find(
+          config => config.name === name,
+        );
+        if (!matchingConfig) {
+          throw new Error(`[Stack] No config matches the "${name}" route name`);
+        }
+
+        const Component = matchingConfig.Component;
+
+        return (
+          <Stack.Screen
+            key={routeKey}
+            {...options}
+            activityMode={activityMode}
+            screenKey={routeKey}
+            onDismiss={onScreenDismissed}
+            onNativeDismiss={onScreenNativelyDismissed}>
+            <StackNavigationContext.Provider value={stackNavigationContext}>
+              <Component />
+            </StackNavigationContext.Provider>
+          </Stack.Screen>
+        );
+      })}
     </Stack.Host>
   );
 }

apps/src/shared/gamma/containers/stack/StackContainer.types.tsx

@@ -17,10 +17,10 @@ export type StackRouteConfig = {
   options: StackRouteOptions;
 };
 
-export type StackRoute = StackRouteConfig & {
+export type StackRoute = Omit<StackRouteConfig, 'Component'> & {
   activityMode: StackScreenProps['activityMode'];
   routeKey: StackScreenProps['screenKey'];
-  isMarkedForDismissal: Boolean, // whether this route is during or after dismissal process
+  isMarkedForDismissal: Boolean; // whether this route is during or after dismissal process
 };
 
 /// StackContainer props

apps/src/shared/gamma/containers/stack/reducer.tsx

@@ -81,7 +81,9 @@ function navigationActionPushHandler(
   const stack = state.stack;
   const renderedRouteIndex = stack.findIndex(
     route =>
-      route.name === action.routeName && route.activityMode === 'detached' && !route.isMarkedForDismissal,
+      route.name === action.routeName &&
+      route.activityMode === 'detached' &&
+      !route.isMarkedForDismissal,
   );
 
   if (renderedRouteIndex !== NOT_FOUND_INDEX) {
@@ -162,10 +164,14 @@ function navigationActionPopHandler(
   }
 
   // Pop operation on not-top screen is forbidden and might crash.
-  const topAttachedRouteIndex = state.stack.findLastIndex(r => r.activityMode === 'attached');
+  const topAttachedRouteIndex = state.stack.findLastIndex(
+    r => r.activityMode === 'attached',
+  );
 
   if (topAttachedRouteIndex > routeIndex) {
-    console.warn(`[Stack] Can not perform pop action on route: ${action.routeKey} - not a top screen`);
+    console.warn(
+      `[Stack] Can not perform pop action on route: ${action.routeKey} - not a top screen`,
+    );
     return state;
   }
 
@@ -271,8 +277,10 @@ function createRouteFromConfig(
   config: StackRouteConfig,
   activityMode: StackScreenActivityMode = 'detached',
 ): StackRoute {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { Component, ...rest } = config;
   return {
-    ...config,
+    ...rest,
     activityMode,
     routeKey: generateRouteKeyForRouteName(config.name),
     isMarkedForDismissal: false,

apps/src/shared/gamma/containers/tabs/TabsContainer.tsx

@@ -25,12 +25,7 @@ import { TabsContainerItem } from './TabsContainerItem';
 export function TabsContainer(props: TabsContainerProps) {
   RNSLog.info('TabsContainer render');
 
-  const {
-    routeConfigs,
-    defaultRouteName,
-    onTabSelected,
-    ...restProps
-  } = props;
+  const { routeConfigs, defaultRouteName, onTabSelected, ...restProps } = props;
 
   useSanitizeRouteConfigs(routeConfigs);
 
@@ -85,11 +80,11 @@ export function TabsContainer(props: TabsContainerProps) {
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
         const matchingConfig = routeConfigs.find(
-          config => config.name === route.routeKey,
+          config => config.name === route.name,
         );
         if (!matchingConfig) {
           throw new Error(
-            `[Tabs] None config matches the "${route.routeKey}" routeKey`,
+            `[Tabs] No config matches the "${route.name}" route name`,
           );
         }
 
@@ -138,7 +133,9 @@ function useSanitizeRouteConfigs(routeConfigs: TabRouteConfig[]) {
   }
 }
 
-function useTabsNavigationMethods(dispatch: React.Dispatch<TabsNavigationAction>): TabsNavigationMethods {
+function useTabsNavigationMethods(
+  dispatch: React.Dispatch<TabsNavigationAction>,
+): TabsNavigationMethods {
   const setRouteOptions = React.useCallback(
     (routeKey: string, options: Partial<TabRouteOptions>) => {
       dispatch({ type: 'set-options', routeKey, options });
@@ -153,9 +150,11 @@ function useTabsNavigationMethods(dispatch: React.Dispatch<TabsNavigationAction>
     [dispatch],
   );
 
-
-  return React.useMemo(() => ({
-    setRouteOptions,
-    selectTab
-  }), [setRouteOptions, selectTab]);
+  return React.useMemo(
+    () => ({
+      setRouteOptions,
+      selectTab,
+    }),
+    [setRouteOptions, selectTab],
+  );
 }