Ca refactor/jobs with client and auth

app/components/sidebar/index.tsx

@@ -19,7 +19,7 @@ export function Sidebar({ auth }: { auth: AuthData }) {
   const fetcher = useFetcher();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const logoutHandler = () => {
+  const logoutHandler = () => {    
     fetcher.submit(null, {
       method: "post",
       action: `/logout/action`,

app/entry.server.tsx

@@ -3,7 +3,7 @@ import { renderToString } from "react-dom/server";
 import { CacheProvider } from "@emotion/react";
 import createEmotionServer from "@emotion/server/create-instance";
 import { RemixServer } from "@remix-run/react";
-import type { EntryContext } from "@remix-run/node"; // Depends on the runtime you choose
+import { type EntryContext } from "@remix-run/node"; // Depends on the runtime you choose
 
 import { ServerStyleContext } from "./context";
 import createEmotionCache from "./createEmotionCache";

app/errors/base.tsx

@@ -1,11 +1,25 @@
-import { useRouteError, isRouteErrorResponse } from "@remix-run/react";
+import { useRouteError, isRouteErrorResponse, useNavigate, useFetcher } from "@remix-run/react";
+import { useEffect } from "react";
 
 export const BaseError = () => {
-  const error = useRouteError();
+  const error: any = useRouteError();
+  const navigate = useNavigate();
+  const fetcher = useFetcher();
+
+  useEffect(() => {
+    if (typeof error.message === "string" && error.message.includes("401")) {
+      // redirect to logout action
+      fetcher.submit(null, {
+        method: "post",
+        action: `/logout/action`,
+      });
+    }
+  }, [error, navigate]);
+
   if (isRouteErrorResponse(error)) {
     console.log(`App Error(isRouteErrorResponse) = ${error}`);
   } else {
-    console.log(`App Error = ${error}`);
+    console.log(`App sssError = ${error}`);
   }
 
   return <>here in error section</>;

app/middlewares/with-auth.ts

@@ -22,7 +22,7 @@ export function withAuth(fn: LoaderFunction): LoaderFunction {
 		const excludedRoutes = ["/login", "/signup"];
 		const { url } = args.request
 		const isExcludedRoute = excludedRoutes.some(route => url.includes(route));
-		
+
 		// return to login if dont have valid auth info
 		if (!data?.token && !isExcludedRoute) {
 			return redirect("/login");

app/models/backoffice/backoffice-cookie.server.ts

@@ -1,14 +1,12 @@
 import invariant from "tiny-invariant";
-import { createFileSessionStorage, createCookie } from "@remix-run/node";
+import { createCookieSessionStorage } from "@remix-run/node";
 
-const { COOKIE_SECRET} = process.env;
+const { COOKIE_SECRET } = process.env;
 invariant(typeof COOKIE_SECRET === "string", "COOKIE_SECRET env var not set");
 
-const backofficeSession = createCookie("backofficeSession", {
-  secrets: [COOKIE_SECRET!]
-});
-
-export const { getSession, commitSession, destroySession } = createFileSessionStorage({
-  dir: "./sessions",
-  cookie: backofficeSession,
-});
+export const { getSession, commitSession, destroySession } = createCookieSessionStorage({
+  cookie: {
+    name: "backofficeSession",
+    secrets: [COOKIE_SECRET!]
+  },
+});

app/root.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect } from "react";
 import { withEmotionCache } from "@emotion/react";
 import { ChakraProvider } from "@chakra-ui/react";
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
-import type { V2_MetaFunction, LinksFunction } from "@remix-run/node"; // Depends on the runtime you choose
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useFetcher } from "@remix-run/react";
+import { type V2_MetaFunction, type LinksFunction, type LoaderFunction, redirect, LoaderArgs } from "@remix-run/node"; // Depends on the runtime you choose
 import { metaV1 } from "@remix-run/v1-meta";
 
 import { ServerStyleContext, ClientStyleContext } from "./context";
@@ -77,11 +77,11 @@ const Document = withEmotionCache(({ children }: DocumentProps, emotionCache) =>
   );
 });
 
-export default function App() {
+export default function App() {  
   return (
     <Document>
       <ChakraProvider theme={theme}>
-        <Outlet />
+          <Outlet />
       </ChakraProvider>
     </Document>
   );