TabsContainer refactor

now, instead of keeping a Component in state, we find one in routeConfigs prop, basing on routeKey

Author: sgaczol

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

@@ -84,7 +84,27 @@ export function TabsContainer(props: TabsContainerProps) {
         const pendingForUpdate =
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
-        return <TabsContainerItem key={route.routeKey} route={route} navMethods={navMethods} isSelected={isSelected} pendingForUpdate={pendingForUpdate} />
+        const matchingConfig = routeConfigs.find(
+          config => config.name === route.routeKey,
+        );
+        if (!matchingConfig) {
+          throw new Error(
+            `[Tabs] None config matches the "${route.routeKey}" routeKey`,
+          );
+        }
+
+        const Component = matchingConfig.Component;
+
+        return (
+          <TabsContainerItem
+            key={route.routeKey}
+            route={route}
+            navMethods={navMethods}
+            isSelected={isSelected}
+            pendingForUpdate={pendingForUpdate}
+            Component={Component}
+          />
+        );
       })}
     </Tabs.Host>
   );

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

@@ -27,7 +27,7 @@ export type TabRouteConfig = {
 /**
  * Runtime instance of a tab route. Created from a TabRouteConfig blueprint.
  */
-export type TabRoute = TabRouteConfig & {
+export type TabRoute = Omit<TabRouteConfig, 'Component'> & {
   routeKey: string;
 };
 

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

@@ -37,7 +37,7 @@ function TabsContainerItemImpl(props: TabsContainerItemProps) {
       {...nativeOptions}
       screenKey={screenKey}>
       <TabsNavigationContext value={tabsNavigationContext}>
-        {getContent(props.route.Component, safeAreaConfiguration)}
+        {getContent(props.Component, safeAreaConfiguration)}
       </TabsNavigationContext>
     </Tabs.Screen>
   );

apps/src/shared/gamma/containers/tabs/TabsContainerItem.types.ts

@@ -5,5 +5,6 @@ export type TabsContainerItemProps = {
   navMethods: TabsNavigationMethods;
   isSelected: boolean;
   pendingForUpdate: boolean;
+  Component: React.ComponentType;
 }
 

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

@@ -135,8 +135,10 @@ function tabsActionSetOptionsHandler(
 }
 
 function createTabRouteFromConfig(config: TabRouteConfig): TabRoute {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { Component, ...rest } = config;
   return {
-    ...config,
+    ...rest,
     // Tab names are required to be unique (enforced by useSanitizeRouteConfigs),
     // so the name itself serves as a stable unique key.
     routeKey: config.name,
@@ -205,4 +207,3 @@ function navStateWithConfirmedState(
     suggestedState: state.suggestedState,
   };
 }
-