do not use full tab path as a tab key

layerok · Nov 11, 2024 · 7b25b93 · 7b25b93
1 parent 7438074
commit 7b25b93
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 150 deletions.
diff --git a/src/examples/basic/components/AdminLayout/AdminLayout.tsx b/src/examples/basic/components/AdminLayout/AdminLayout.tsx
@@ -14,7 +14,6 @@ import { homeRoute } from "../../constants/routes.constants.ts";
 import { css } from "@emotion/react";
 import { useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
 import { convertRouteTreeToRouterTabsConfig } from "src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.tsx";
-import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
 import { TabsApi } from "src/lib/tabs-ui/useTabs.tsx";
 
 const persistStoreKey = {
@@ -44,24 +43,19 @@ export function AdminLayout() {
     [router],
   );
 
-  const { tabs, activeTab, setActivePath } = useRouterTabs({
+  const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
     router,
     paths,
     onPathsChange: setPaths,
-    undefinedPath: homeRoute,
+    undefinedKeyPath: homeRoute,
     config: config,
+    getUiModelKey: (model) => model.id,
   });
 
   useEffect(() => {
     return persistTabs(paths);
   }, [paths, persistTabs]);
 
-  const setTabs = (tabs: TabModel[]) => {
-    setPaths(tabs.map((tab) => tab.id));
-  };
-
-  const activeTabId = activeTab?.id;
-
   return (
     <div css={layoutStyles}>
       <Sidebar />
@@ -73,8 +67,8 @@ export function AdminLayout() {
           initialTabs={tabs}
           onTabsChange={setTabs}
           hasControlledActiveTabId
-          activeTabId={activeTabId}
-          onActiveTabIdChange={setActivePath}
+          activeTabId={activeTabKey}
+          onActiveTabIdChange={setActiveTabKey}
         />
       </div>
     </div>

diff --git a/src/examples/basic/routes/CategoriesRoute.tsx b/src/examples/basic/routes/CategoriesRoute.tsx
@@ -2,8 +2,6 @@ import { Link, useParams } from "react-router-dom";
 import { useEffect, useMemo, useState } from "react";
 import { Tabs } from "src/examples/basic/components/Tabs/Tabs.tsx";
 import { RouterTabPath, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
-
-import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
 import { usePersistTabs } from "src/lib/tabs/usePersistTabs.tsx";
 import { localStorageDriver } from "src/lib/storage/local-storage.ts";
 import { validateTabPaths } from "src/lib/tabs/validateTabPaths.ts";
@@ -48,25 +46,20 @@ export function CategoriesRoute() {
     [router],
   );
 
-  const { tabs, activeTab, setActivePath } = useRouterTabs({
+  const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
     router,
     config,
     paths,
     onPathsChange: setPaths,
-    undefinedPath: homeRoute,
+    undefinedKeyPath: homeRoute,
+    getUiModelKey: (model) => model.id,
   });
 
-  const setTabs = (tabs: TabModel[]) => {
-    setPaths(tabs.map((tab) => tab.id));
-  };
-
-  const activeTabId = activeTab?.id;
-
   return (
     <div>
       <Tabs
-        activeTabId={activeTabId}
-        onActiveTabIdChange={setActivePath}
+        activeTabId={activeTabKey}
+        onActiveTabIdChange={setActiveTabKey}
         tabs={tabs}
         initialTabs={tabs}
         onTabsChange={setTabs}

diff --git a/src/examples/basic/routes/ProductsRoute.tsx b/src/examples/basic/routes/ProductsRoute.tsx
@@ -1,6 +1,5 @@
 import { Tabs } from "src/examples/basic/components/Tabs/Tabs.tsx";
 import { replacePathParams } from "src/utils/replacePathParams.ts";
-import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
 
 import { Link, useParams } from "react-router-dom";
 import { useEffect, useMemo, useState } from "react";
@@ -45,33 +44,28 @@ export function ProductsRoute() {
     [router],
   );
 
-  const { tabs, activeTab, setActivePath } = useRouterTabs({
+  const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
     router,
     config,
     paths,
     onPathsChange: setPaths,
-    undefinedPath: homeRoute,
+    undefinedKeyPath: homeRoute,
+    getUiModelKey: (model) => model.id,
   });
 
   useEffect(() => {
     return persistTabs(paths);
   }, [paths, persistTabs]);
 
-  const setTabs = (tabs: TabModel[]) => {
-    setPaths(tabs.map((tab) => tab.id));
-  };
-
-  const activeTabId = activeTab?.id;
-
   return (
     <div>
       <Tabs
         tabs={tabs}
         initialTabs={tabs}
         onTabsChange={setTabs}
         hasControlledActiveTabId
-        activeTabId={activeTabId}
-        onActiveTabIdChange={setActivePath}
+        activeTabId={activeTabKey}
+        onActiveTabIdChange={setActiveTabKey}
       />
     </div>
   );

diff --git a/src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.tsx b/src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.tsx
@@ -9,20 +9,20 @@ import { whenRoutePathIs } from "src/lib/tabs/whenRoutePathIs.ts";
 export const convertRouteTreeToRouterTabsConfig = (
   tree: RouteObject[],
   key: any,
-) => {
+): TabDefinition<TabModel>[] => {
   const flatRoutes = flattenRoutes(tree);
 
   const matchedRoutes = flatRoutes.filter((route) => {
     return (route.handle as Handle)?.tabs.find((tab) => tab.key === key);
   });
 
-  const config: TabDefinition<TabModel>[] = matchedRoutes.map((route) => {
+  return matchedRoutes.map((route) => {
     const handle = route.handle as Handle;
     const tabMeta = handle.tabs.find((tab) => (tab.key = key));
 
     return {
-      mapToUiState: (match, path) => ({
-        id: path,
+      mapToUiModel: (key, match) => ({
+        id: key,
         title: tabMeta!.title(match),
         isClosable: true,
         content: <Outlet />,
@@ -31,5 +31,4 @@ export const convertRouteTreeToRouterTabsConfig = (
       insertAt: tabMeta!.insertAt || theBeginning,
     };
   });
-  return config;
 };
diff --git a/src/examples/clip-one/components/AdminLayout/AdminLayout.tsx b/src/examples/clip-one/components/AdminLayout/AdminLayout.tsx
@@ -42,8 +42,8 @@ export function AdminLayout() {
 
   const [config] = useState<TabDefinition<TabModel>[]>(() => [
     {
-      mapToUiState: (_, path) => ({
-        id: path,
+      mapToUiModel: (key) => ({
+        id: key,
         title: "Dashboard",
         content: <Outlet />,
         isClosable: true,
@@ -52,8 +52,8 @@ export function AdminLayout() {
       insertAt: theBeginning,
     },
     {
-      mapToUiState: (_, path) => ({
-        id: path,
+      mapToUiModel: (key) => ({
+        id: key,
         title: "Categories",
         content: <Outlet />,
         isClosable: true,
@@ -62,8 +62,8 @@ export function AdminLayout() {
       insertAt: theBeginning,
     },
     {
-      mapToUiState: (_, path) => ({
-        id: path,
+      mapToUiModel: (key) => ({
+        id: key,
         title: "Products",
         content: <Outlet />,
         isClosable: true,
@@ -72,8 +72,8 @@ export function AdminLayout() {
       insertAt: theBeginning,
     },
     {
-      mapToUiState: (_, path) => ({
-        id: path,
+      mapToUiModel: (key) => ({
+        id: key,
         title: "Suppliers",
         content: <Outlet />,
         isClosable: true,
@@ -83,24 +83,19 @@ export function AdminLayout() {
     },
   ]);
 
-  const { tabs, activeTab, setActivePath } = useRouterTabs({
+  const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
     router,
     config,
     paths,
-    undefinedPath: homeRoute,
+    undefinedKeyPath: homeRoute,
     onPathsChange: setPaths,
+    getUiModelKey: (model) => model.id,
   });
 
   useEffect(() => {
     return persistTabs(paths);
   }, [paths, persistTabs]);
 
-  const activeTabId = activeTab?.id;
-
-  const setTabs = (tabs: TabModel[]) => {
-    setPaths(tabs.map((tab) => tab.id));
-  };
-
   return (
     <div css={layoutStyles}>
       <header css={headerStyles}>John Doe</header>
@@ -111,11 +106,11 @@ export function AdminLayout() {
             <Tabs
               tabs={tabs}
               onTabsChange={setTabs}
-              initialActiveTabId={activeTabId}
+              initialActiveTabId={activeTabKey}
               initialTabs={tabs}
               hasControlledActiveTabId
-              activeTabId={activeTabId}
-              onActiveTabIdChange={setActivePath}
+              activeTabId={activeTabKey}
+              onActiveTabIdChange={setActiveTabKey}
             />
           </div>
         </div>

diff --git a/src/examples/clip-one/routes/CategoriesRoute.tsx b/src/examples/clip-one/routes/CategoriesRoute.tsx
@@ -46,8 +46,8 @@ export function CategoriesRoute() {
   const config = useMemo<TabDefinition<TabModel>[]>(
     () => [
       {
-        mapToUiState: (_, path) => ({
-          id: path,
+        mapToUiModel: (key) => ({
+          id: key,
           title: "All Categories",
           content: <Outlet />,
           isClosable: false,
@@ -56,8 +56,8 @@ export function CategoriesRoute() {
         insertAt: theBeginning,
       },
       {
-        mapToUiState: (match, path) => ({
-          id: path,
+        mapToUiModel: (key, match) => ({
+          id: key,
           title: (() => {
             const category = categories.find(
               (category) => String(category.id) == match.params.id,
@@ -74,28 +74,25 @@ export function CategoriesRoute() {
     [],
   );
 
-  const { tabs, activeTab, setActivePath } = useRouterTabs({
+  const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
     router,
     config,
     paths,
     onPathsChange: setPaths,
-    undefinedPath: homeRoute,
+    undefinedKeyPath: homeRoute,
+    getUiModelKey: (model) => model.id,
   });
 
   useEffect(() => {
     return persistTabs(paths);
   }, [paths, persistTabs]);
 
-  const setTabs = (tabs: TabModel[]) => {
-    setPaths(tabs.map((tab) => tab.id));
-  };
-
   return (
     <div css={layoutStyles}>
       <Tabs
-        activeTabId={activeTab?.id}
-        initialActiveTabId={activeTab?.id}
-        onActiveTabIdChange={setActivePath}
+        activeTabId={activeTabKey}
+        initialActiveTabId={activeTabKey}
+        onActiveTabIdChange={setActiveTabKey}
         tabs={tabs}
         initialTabs={tabs}
         onTabsChange={setTabs}