inversion of control for where to insert tab at

Author: layerok

src/examples/basic/components/AdminLayout/AdminLayout.tsx

@@ -50,8 +50,6 @@ export function AdminLayout() {
     router,
     tabs,
     onTabsChange: setTabs,
-    startPinnedTabs,
-    endPinnedTabs: useMemo(() => [], []),
     config: config,
     fallbackPath: homeRoute,
   });

src/examples/basic/routes.tsx

@@ -70,8 +70,8 @@ const productRoutes = [
           tabs: [
             {
               key: TabStoreKey.Products,
-              title: ({ params }: { params: { id: string } }) =>
-                `product ${params.id}`,
+              title: (match) => `product ${match.params.id}`,
+              insertAt: () => 1,
             },
           ],
         } as Handle,
@@ -115,8 +115,8 @@ const categoryRoutes = [
           tabs: [
             {
               key: TabStoreKey.Categories,
-              title: ({ params }: { params: { id: string } }) =>
-                `category ${params.id}`,
+              title: (match) => `category ${match.params.id}`,
+              insertAt: () => 1,
             },
           ],
         } as Handle,

src/examples/basic/routes/CategoriesRoute.tsx

@@ -66,8 +66,6 @@ export function CategoriesRoute() {
     router,
     config: config,
     fallbackPath: homeRoute,
-    endPinnedTabs: useMemo(() => [], []),
-    startPinnedTabs,
     tabs,
     onTabsChange: setTabs,
   });

src/examples/basic/routes/ProductsRoute.tsx

@@ -62,8 +62,6 @@ export function ProductsRoute() {
     router,
     config: config,
     fallbackPath: homeRoute,
-    startPinnedTabs,
-    endPinnedTabs: useMemo(() => [], []),
     tabs,
     onTabsChange: setTabs,
   });

src/examples/basic/types.ts

@@ -1,8 +1,10 @@
-import { Params } from "react-router-dom";
+import { DataRouteMatch } from "react-router-dom";
+import { RouterTabModel } from "src/lib/tabs/useRouterTabs.tsx";
 
 export type TabHandle = {
   key: any;
-  title: (props: { params: Params }) => string;
+  title: (match: DataRouteMatch) => string;
+  insertAt?: (models: RouterTabModel[]) => number;
 };
 
 export type Handle = {

src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.ts

@@ -1,7 +1,8 @@
 import { RouteObject } from "react-router-dom";
 import { flattenRoutes } from "src/lib/tabs/flattenRoutes.ts";
 import { Handle } from "src/examples/basic/types.ts";
-import { InsertMethod, TabConfig } from "src/lib/tabs/useRouterTabs.tsx";
+import { TabConfig } from "src/lib/tabs/useRouterTabs.tsx";
+import { theBeginning } from "src/lib/tabs/theBeginning.ts";
 
 export const convertRouteTreeToRouterTabsConfig = (
   tree: RouteObject[],
@@ -20,7 +21,7 @@ export const convertRouteTreeToRouterTabsConfig = (
     return {
       title: tabMeta!.title,
       shouldOpen: (match) => match.route.id === route.id!,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: tabMeta!.insertAt || theBeginning,
     };
   });
   return config;

src/examples/clip-one/components/AdminLayout/AdminLayout.tsx

@@ -1,6 +1,6 @@
 import { Sidebar } from "../Sidebar/Sidebar.tsx";
 import { Tabs } from "../Tabs/Tabs.tsx";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { localStorageDriver } from "src/lib/storage/local-storage.ts";
 
 import { validateTabs, usePersistTabs } from "src/lib/tabs";
@@ -13,14 +13,11 @@ import {
   productsRoute,
   suppliersRoute,
 } from "../../constants/routes.constants.ts";
-import {
-  InsertMethod,
-  TabConfig,
-  useRouterTabs,
-} from "src/lib/tabs/useRouterTabs.tsx";
+import { TabConfig, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
 import { css } from "@emotion/react";
 import { Outlet } from "react-router-dom";
 import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
+import { theBeginning } from "src/lib/tabs/theBeginning.ts";
 
 const persistStoreKey = {
   name: "clip-one__main-tabs",
@@ -45,32 +42,30 @@ export function AdminLayout() {
     {
       title: () => "Dashboard",
       shouldOpen: (match) => match.route.path === dashboardRoute,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: theBeginning,
     },
     {
       title: () => "Categories",
       shouldOpen: (match) => match.route.path === categoriesRoute,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: theBeginning,
     },
     {
       title: () => "Products",
       shouldOpen: (match) => match.route.path === productsRoute,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: theBeginning,
     },
     {
       title: () => "Suppliers",
       shouldOpen: (match) => match.route.path === suppliersRoute,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: theBeginning,
     },
   ]);
 
   const { activeTabId, setActiveTabId, getTabTitleByTabPath } = useRouterTabs({
     router,
     config,
     tabs,
-    endPinnedTabs: useMemo(() => [], []),
     onTabsChange: setTabs,
-    startPinnedTabs,
     fallbackPath: homeRoute,
   });
 

src/examples/clip-one/routes/CategoriesRoute.tsx

@@ -3,7 +3,6 @@ import { Outlet, useNavigate, useParams } from "react-router-dom";
 import { useEffect, useMemo, useState } from "react";
 import { Tabs } from "../components/Tabs/Tabs.tsx";
 import {
-  InsertMethod,
   RouterTabModel,
   TabConfig,
   useRouterTabs,
@@ -22,6 +21,7 @@ import {
 } from "../constants/routes.constants.ts";
 import { css } from "@emotion/react";
 import { Table } from "src/examples/clip-one/components/Table/Table.tsx";
+import { theBeginning } from "src/lib/tabs/theBeginning.ts";
 
 const persistStoreKey = {
   name: "clip-one__category-tabs",
@@ -58,14 +58,12 @@ export function CategoriesRoute() {
     categoriesRoute,
   ]);
 
-  const [endPinnedTabs] = useState<string[]>([]);
-
   const config = useMemo<TabConfig[]>(
     () => [
       {
         title: () => "All Categories",
         shouldOpen: (match) => match.route.path === categoriesRoute,
-        insertMethod: InsertMethod.Prepend,
+        insertAt: theBeginning,
       },
       {
         title: ({ params }) => {
@@ -75,7 +73,7 @@ export function CategoriesRoute() {
           return category!.title;
         },
         shouldOpen: (match) => match.route.path === categoryDetailRoute,
-        insertMethod: InsertMethod.Prepend,
+        insertAt: () => startPinnedTabs.length,
       },
     ],
     [],
@@ -85,8 +83,6 @@ export function CategoriesRoute() {
     router,
     config: config,
     fallbackPath: homeRoute,
-    endPinnedTabs,
-    startPinnedTabs,
     tabs,
     onTabsChange: setTabs,
   });

src/examples/clip-one/routes/ProductsRoute.tsx

@@ -18,14 +18,15 @@ import {
   productsRoute,
 } from "../constants/routes.constants.ts";
 import {
-  InsertMethod,
   RouterTabModel,
   TabConfig,
   useRouterTabs,
 } from "src/lib/tabs/useRouterTabs.tsx";
 import { css } from "@emotion/react";
 import { Table } from "src/examples/clip-one/components/Table/Table.tsx";
 import { Button } from "src/examples/clip-one/components/Button/Button.tsx";
+import { theBeginning } from "src/lib/tabs/theBeginning.ts";
+import { theEnd } from "src/lib/tabs/theEnd.ts";
 
 type DetailParams = { id: string };
 
@@ -53,7 +54,7 @@ export function ProductsRoute() {
     {
       title: () => "All products",
       shouldOpen: (match) => match.route.path === productsRoute,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: theBeginning,
     },
     {
       title: (match) => {
@@ -63,12 +64,12 @@ export function ProductsRoute() {
         return product!.title;
       },
       shouldOpen: (match) => match.route.path === productDetailRoute,
-      insertMethod: InsertMethod.Prepend,
+      insertAt: () => startPinnedTabs.length,
     },
     {
       title: () => "New product",
       shouldOpen: (match) => match.route.path === productsCreateRoute,
-      insertMethod: InsertMethod.Append,
+      insertAt: theEnd,
     },
   ]);
 
@@ -86,9 +87,7 @@ export function ProductsRoute() {
     router,
     config,
     fallbackPath: homeRoute,
-    startPinnedTabs,
     tabs,
-    endPinnedTabs,
     onTabsChange: setTabs,
   });
 
@@ -223,13 +222,13 @@ export function ProductDetailRoute() {
       {
         title: () => "General",
         shouldOpen: (match) => match.route.path === productDetailRoute,
-        insertMethod: InsertMethod.Prepend,
+        insertAt: theBeginning,
       },
       {
         title: () => "Settings",
         shouldOpen: (match) =>
           match.route.path === productDetailSettingTabsRoute,
-        insertMethod: InsertMethod.Prepend,
+        insertAt: theBeginning,
       },
     ],
     [],
@@ -240,8 +239,6 @@ export function ProductDetailRoute() {
     config,
     fallbackPath: homeRoute,
     tabs,
-    startPinnedTabs: useMemo(() => [], []),
-    endPinnedTabs: useMemo(() => [], []),
     onTabsChange: setTabs,
   });
 

src/lib/tabs/theBeginning.ts

@@ -0,0 +1 @@
+export const theBeginning = () => 0;

src/lib/tabs/theEnd.ts

@@ -0,0 +1,3 @@
+import { RouterTabModel } from "src/lib/tabs/useRouterTabs.tsx";
+
+export const theEnd = (tabs: RouterTabModel[]) => tabs.length - 1;

src/lib/tabs/useRouterTabs.tsx

@@ -6,15 +6,10 @@ import { Router } from "@remix-run/router";
 
 export type TabConfig = {
   shouldOpen: (match: DataRouteMatch) => boolean;
-  insertMethod: InsertMethod;
+  insertAt: (tabs: RouterTabModel[]) => number;
   title: (match: DataRouteMatch) => string;
 };
 
-export enum InsertMethod {
-  Append = "append",
-  Prepend = "prepend",
-}
-
 export type RouterTabModel = {
   id: string;
   route: {
@@ -53,19 +48,9 @@ export const useRouterTabs = (options: {
   config: TabConfig[];
   onTabsChange?: TabsChangeCallback;
   tabs: RouterTabModel[];
-  startPinnedTabs: string[];
-  endPinnedTabs: string[];
   fallbackPath: string;
 }) => {
-  const {
-    fallbackPath,
-    onTabsChange,
-    tabs = [],
-    startPinnedTabs,
-    endPinnedTabs,
-    config,
-    router,
-  } = options;
+  const { fallbackPath, onTabsChange, tabs = [], config, router } = options;
 
   const updateTabs = useCallback(
     (state: RouterState) => {
@@ -99,31 +84,19 @@ export const useRouterTabs = (options: {
             path,
           });
         } else {
-          const prepend = definition.insertMethod === InsertMethod.Prepend;
-
           const newTab: RouterTabModel = {
             id: match.pathname,
             route: {
               id: match.route.id,
             },
             path,
           };
-
-          // prepend a new tab
-          if (prepend) {
-            return insertAt(prevTabs, startPinnedTabs.length, newTab);
-          } else {
-            return insertAt(
-              prevTabs,
-              prevTabs.length - endPinnedTabs.length,
-              newTab,
-            );
-          }
+          return insertAt(prevTabs, definition.insertAt(prevTabs), newTab);
         }
       };
       onTabsChange?.(handleTabsUpdate);
     },
-    [startPinnedTabs, config, onTabsChange, endPinnedTabs],
+    [config, onTabsChange],
   );
 
   useEffect(() => {