lots of cleaning up

src/App.tsx

@@ -1,14 +1,14 @@
 import ScrollToTop from '@/components/default/scroll-to-top';
 import '@/config/firebase';
 import routes from '@/config/routes';
-import { FirebaseAuthProvider } from '@/libs/auth';
 import LocalStorageDataSource from '@/libs/data-sources/data-sources/LocalStorageDataSource';
 
 import theme from '@/theme/paperbase/theme';
 import './App.css';
 import config from './config';
 import { getPath } from './config/paths';
 import Dashboard from './Dashboard';
+import FirebaseAuthProvider from './libs/auth/auth-providers/FirebaseAuthProvider';
 
 const firebaseProvider = new FirebaseAuthProvider({
   login: getPath('login').to,

src/Dashboard.tsx

@@ -2,7 +2,6 @@ import { Seo, setPageTitleSuffix } from '@/components/default/seo';
 import { SplashScreen } from '@/components/default/splash-screen';
 import config from '@/config';
 import useHttpsRedirect from '@/hooks/use-https-redirect';
-import { AuthConsumer, AuthProvider } from '@/libs/auth';
 import '@/libs/i18n';
 import defaultRoutes from '@/routes/defaultRoutes';
 import { Theme, ThemeProvider } from '@mui/material';
@@ -15,6 +14,7 @@ import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 import ErrorBoundary from './components/default/error-boundary';
 import useRouter from './hooks/use-router';
+import { AuthConsumer, AuthProvider } from './libs/auth/context';
 import { DataProvider, DataSourceObject } from './libs/data-sources';
 
 interface DashboardProps {

src/components/default/json-editor.tsx

@@ -34,7 +34,7 @@ const JsonEditor = (props: { data: any; options?: Partial<JsonEditorProps> }) =>
   const { validationSchema, ...jsonEditorOptions } = { ...defaultProps, ...options };
 
   const handleAdd = (data: InteractionProps) => {
-    //validationSchema.validate(data)
+    validationSchema?.validate(data);
     console.log('handleAdd', data);
   };
 

src/components/default/layout/user-menu.tsx

@@ -1,7 +1,7 @@
 import { getPath } from '@/config/paths';
 import { usePopover } from '@/hooks/use-popover';
 import useRouter from '@/hooks/use-router';
-import { useAuth } from '@/libs/auth';
+import useAuth from '@/libs/auth/use-auth';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import LogoutIcon from '@mui/icons-material/Logout';
 import SettingsIcon from '@mui/icons-material/Settings';

src/config/routes.tsx

@@ -7,6 +7,7 @@ import SignIn from '@/pages/default/SignIn';
 import TestAuthProviders from '@/pages/default/test/auth-providers';
 import DataSources from '@/pages/default/test/data-sources/index';
 import FileUploads from '@/pages/default/test/file-uploads';
+import FiltersPage from '@/pages/default/test/filters-page';
 import Forms from '@/pages/default/test/forms';
 import Translations from '@/pages/default/test/translations';
 import { CustomRouteObject, routes as routesImport } from './routing';
@@ -20,33 +21,12 @@ const routeElements: { [key: string]: JSX.Element } = {
     </PaperbaseLayout>
   ),
   homeIndex: <>Home</>,
-  // Recipe pages
-  // homeIndex: <HomePage />,
-  // recipesIndex: <RecipeOverviewPage />,
-  // myRecipes: <MyRecipeOverviewPage />,
-  // myRecipesIndex: <MyRecipeOverviewPage />,
-  // recipeDetails: <RecipeDetailsPage />,
-  // myRecipeDetails: <RecipeDetailsPage />,
-  // Satisfactory pages
-  // satisfactoryIndex: <>TEST</>,
-  // products: <Products />,
-  // recipes: <Recipes />,
-  // rawData: <RawData />,
-  // generators: <Generators />,
-  // buildables: <Buildables />,
-  // buildings: <Buildings />,
-  // schematics: <Schematics />,
-  // belts: <Belts />,
-  // miners: <Miners />,
-  // resources: <Resources />,
-  // calculator: <Calculator />,
-  // games: <Games />,
-  // Test pages
   testDataSources: <DataSources />,
   testFileUploads: <FileUploads />,
   testAuthProviders: <TestAuthProviders />,
   testForms: <Forms />,
   testTranslations: <Translations />,
+  testFilters: <FiltersPage />,
   // Default pages
   login: <SignIn mode="signin" />,
   signup: <SignIn mode="signup" />,

src/config/routing.tsx

@@ -1,14 +1,6 @@
-// import { Outlet, RouteObject } from 'react-router-dom';
-
-// import PaperbaseLayout from '@/layouts/paperbase/Layout';
-// import HomePage from '@/pages/home';
-// import MyRecipeOverviewPage from '@/pages/recipes/my-recipe-overview';
-// import RecipeDetailsPage from '@/pages/recipes/recipe-details';
-// import RecipeOverviewPage from '@/pages/recipes/recipe-overview';
 import appRoutes from '@/routes/appRoutes';
 import { Home as HomeIcon } from '@mui/icons-material';
 import { RouteObject } from 'react-router-dom';
-//import { PathItem } from './paths';
 
 export type CustomRouteObject = RouteObject & {
   id: string;
@@ -30,173 +22,12 @@ export const routes: CustomRouteObject[] = [
         id: 'homeIndex',
         index: true,
       },
-      // {
-      //   id: 'recipes',
-      //   label: 'Recipes',
-      //   translationKey: 'foodhub:menu.allrecipes',
-      //   Icon: <FlatwareIcon fontSize="inherit" />,
-      //   category: 'recipes',
-      //   path: 'recipes',
-      //   element: <Outlet />,
-      //   children: [
-      //     {
-      //       id: 'recipesIndex',
-      //       index: true,
-      //     },
-      //     {
-      //       id: 'myRecipes',
-      //       label: 'My recipes',
-      //       translationKey: 'foodhub:menu.myRecipes',
-      //       Icon: <FlatwareIcon fontSize="inherit" />,
-      //       category: 'recipes',
-      //       path: 'my',
-      //       element: <Outlet />,
-      //       children: [
-      //         {
-      //           id: 'myRecipesIndex',
-      //           index: true,
-      //         },
-      //         {
-      //           id: 'myRecipeDetails',
-      //           label: 'Recipe details',
-      //           Icon: <FlatwareIcon fontSize="inherit" />,
-      //           path: ':id',
-      //         },
-      //       ],
-      //     },
-      //     {
-      //       id: 'recipeDetails',
-      //       label: 'Recipe details',
-      //       Icon: <FlatwareIcon fontSize="inherit" />,
-      //       path: ':id',
-      //     },
-      //   ],
-      // },
-      // {
-      //   id: 'satisfactory',
-      //   label: 'Satisfactory',
-      //   Icon: <BarChartIcon fontSize="inherit" />,
-      //   // category: 'satisfactory',
-      //   path: 'satisfactory',
-      //   element: <Outlet />,
-      //   children: [
-      //     {
-      //       id: 'satisfactoryIndex',
-      //       index: true,
-      //     },
-      //     {
-      //       id: 'satisfactoryCodex',
-      //       label: 'Codex',
-      //       Icon: <BarChartIcon fontSize="inherit" />,
-      //       // category: 'satisfactory',
-      //       path: 'codex',
-      //       element: <Outlet />,
-      //       children: [
-      //         {
-      //           id: 'codexIndex',
-      //           index: true,
-      //         },
-      //         {
-      //           id: 'products',
-      //           label: 'Products',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'products',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'recipes',
-      //           label: 'Recipes',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'recipes',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'generators',
-      //           label: 'Generators',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'generators',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'buildables',
-      //           label: 'Buildables',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'buildables',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'buildings',
-      //           label: 'Buildings',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'buildings',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'schematics',
-      //           label: 'Schematics',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'schematics',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'belts',
-      //           label: 'Belts',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'belts',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'miners',
-      //           label: 'Miners',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'miners',
-      //           category: 'satisfactory',
-      //         },
-      //         {
-      //           id: 'resources',
-      //           label: 'Resources',
-      //           Icon: <BarChartIcon fontSize="inherit" />,
-      //           path: 'resources',
-      //           category: 'satisfactory',
-      //         },
-      //       ],
-      //     },
-      //     {
-      //       id: 'calculator',
-      //       label: 'Calculator',
-      //       Icon: <BarChartIcon fontSize="inherit" />,
-      //       path: 'calculator',
-      //       category: 'satisfactory',
-      //     },
-      //     {
-      //       id: 'games',
-      //       label: 'Games',
-      //       Icon: <BarChartIcon fontSize="inherit" />,
-      //       path: 'games',
-      //       category: 'satisfactory',
-      //     },
-      //     {
-      //       id: 'rawData',
-      //       label: 'Raw data',
-      //       Icon: <BarChartIcon fontSize="inherit" />,
-      //       path: 'raw-data',
-      //       category: 'satisfactory',
-      //     },
-      //   ],
-      // },
-      // {
-      //   path: 'recipes/:id',
-      //   element: <RecipeDetailsPage />,
-      // },
       ...appRoutes,
     ],
   },
   //   ...defaultRoutes,
 ];
 
-// const routes2 = generateRouteObjects(routes);
-// console.log('ROUTES', routes2);
-
 export const paths = getAllPaths(routes);
 
 // Function to create a flat list of all paths with custom properties

src/guards/auth-guard.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import config from '@/config';
 import useRouter from '@/hooks/use-router';
-import { useAuth } from '@/libs/auth';
+import useAuth from '@/libs/auth/use-auth';
 
 interface AuthGuardProps {
   children: React.ReactNode;

src/hooks/use-deep-compare-memo.ts

@@ -0,0 +1,14 @@
+import { isEqual } from 'lodash';
+import { useRef } from 'react';
+
+function useDeepCompareMemo<T>(value: T | undefined) {
+  const ref = useRef<T>();
+
+  if (!isEqual(ref.current, value)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+export default useDeepCompareMemo;

src/hooks/use-dialog.ts

@@ -45,17 +45,20 @@ const useDialog = (options?: UseDialogOptionsProps): UseDialogReturn => {
     }
   }, [isOpen, dialogDataParam]);
 
-  const setData = useCallback((data: any | null) => {
-    if (queryKeyRef.current) {
-      if (data) {
-        setDialogDataParam(data);
+  const setData = useCallback(
+    (data: any | null) => {
+      if (queryKeyRef.current && setDialogDataParam) {
+        if (data) {
+          setDialogDataParam(data);
+        } else {
+          setDialogDataParam(undefined);
+        }
       } else {
-        setDialogDataParam(undefined);
+        setDialogData(data);
       }
-    } else {
-      setDialogData(data);
-    }
-  }, []);
+    },
+    [setDialogDataParam]
+  );
 
   // Respond to changes in the query value
   useEffect(() => {

src/hooks/use-param-item.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
+import useDeepCompareMemo from './use-deep-compare-memo';
 
 interface UseParamItemProps<T> {
   id?: string;
@@ -15,17 +16,18 @@ const useParamItem = <T extends Record<string, any>>({
   defaultValue,
 }: UseParamItemProps<T>) => {
   const params = useParams();
+  const stableDefaultValue = useDeepCompareMemo(defaultValue);
   const item = useMemo(() => {
     const idParam = params[id];
     if (!idParam) {
       throw new Error(`useParamItem: ${id} is required`);
     }
     const foundItem = items.find((item: T) => item[field] === idParam);
     if (!foundItem) {
-      return defaultValue;
+      return stableDefaultValue;
     }
     return foundItem;
-  }, [items, params]);
+  }, [items, params, id, field, stableDefaultValue]);
   return item;
 };
 

src/hooks/use-query-param-action.ts

@@ -25,13 +25,13 @@ const useQueryParamAction = (
         navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
       }
     }
-  }, [location.search, queryParamName, callback, navigate, options.removeAfterAction]);
+  }, [location, queryParamName, callback, navigate, options.removeAfterAction]);
 
   const clearQueryParam = useCallback(() => {
     const searchParams = new URLSearchParams(location.search);
     searchParams.delete(queryParamName);
     navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
-  }, [location.search, queryParamName, navigate]);
+  }, [location, queryParamName, navigate]);
 
   return {
     clearQueryParam, // Provide a function to manually clear the query parameter