refactor: use persistant layout

app/controllers/users_controller.ts

@@ -52,7 +52,7 @@ export default class UsersController {
         avatarUrl,
         token,
         providerType: 'google',
-        isAdmin: userCount[0].total === '0',
+        isAdmin: userCount[0].total === '0' ? true : undefined,
       }
     );
 

inertia/app/ssr.tsx

@@ -1,5 +1,5 @@
-import ReactDOMServer from 'react-dom/server';
 import { createInertiaApp } from '@inertiajs/react';
+import ReactDOMServer from 'react-dom/server';
 
 export default function render(page: any) {
   return createInertiaApp({

inertia/components/dashboard/dashboard_provider.tsx

@@ -0,0 +1,90 @@
+import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { ReactNode, useMemo, useState } from 'react';
+import { ActiveCollectionContext } from '~/contexts/active_collection_context';
+import CollectionsContext from '~/contexts/collections_context';
+import FavoritesContext from '~/contexts/favorites_context';
+import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
+import useShortcut from '~/hooks/use_shortcut';
+import { appendCollectionId } from '~/lib/navigation';
+import { CollectionWithLinks, Link } from '~/types/app';
+
+export default function DashboardProviders(
+  props: Readonly<{
+    children: ReactNode;
+    collections: CollectionWithLinks[];
+    activeCollection: CollectionWithLinks;
+  }>
+) {
+  const [globalHotkeysEnabled, setGlobalHotkeysEnabled] =
+    useState<boolean>(true);
+  const [collections, setCollections] = useState<CollectionWithLinks[]>(
+    props.collections
+  );
+  const [activeCollection, setActiveCollection] =
+    useState<CollectionWithLinks | null>(
+      props.activeCollection || collections?.[0]
+    );
+
+  const handleChangeCollection = (collection: CollectionWithLinks) => {
+    setActiveCollection(collection);
+    router.visit(appendCollectionId(route('dashboard').url, collection.id));
+  };
+
+  const favorites = useMemo<Link[]>(
+    () =>
+      collections.reduce((acc, collection) => {
+        collection.links.forEach((link) =>
+          link.favorite ? acc.push(link) : null
+        );
+        return acc;
+      }, [] as Link[]),
+    [collections]
+  );
+
+  const collectionsContextValue = useMemo(
+    () => ({ collections, setCollections }),
+    [collections]
+  );
+  const activeCollectionContextValue = useMemo(
+    () => ({ activeCollection, setActiveCollection: handleChangeCollection }),
+    [activeCollection, handleChangeCollection]
+  );
+  const favoritesContextValue = useMemo(() => ({ favorites }), [favorites]);
+  const globalHotkeysContextValue = useMemo(
+    () => ({
+      globalHotkeysEnabled,
+      setGlobalHotkeysEnabled,
+    }),
+    [globalHotkeysEnabled]
+  );
+
+  useShortcut(
+    'OPEN_CREATE_LINK_KEY',
+    () =>
+      router.visit(
+        appendCollectionId(route('link.create-form').url, activeCollection?.id)
+      ),
+    {
+      enabled: globalHotkeysEnabled,
+    }
+  );
+  useShortcut(
+    'OPEN_CREATE_COLLECTION_KEY',
+    () => router.visit(route('collection.create-form').url),
+    {
+      enabled: globalHotkeysEnabled,
+    }
+  );
+  return (
+    <CollectionsContext.Provider value={collectionsContextValue}>
+      <ActiveCollectionContext.Provider value={activeCollectionContextValue}>
+        <FavoritesContext.Provider value={favoritesContextValue}>
+          <GlobalHotkeysContext.Provider value={globalHotkeysContextValue}>
+            {props.children}
+          </GlobalHotkeysContext.Provider>
+        </FavoritesContext.Provider>
+      </ActiveCollectionContext.Provider>
+    </CollectionsContext.Provider>
+  );
+}

inertia/components/layouts/_base_layout.tsx

@@ -7,8 +7,9 @@ import DarkThemeContextProvider from '~/contexts/dark_theme_context';
 export default function BaseLayout({ children }: { children: ReactNode }) {
   const { i18n } = useTranslation();
   dayjs.locale(i18n.language);
+  console.log('a');
   return (
-    <DarkThemeContextProvider>
+    <DarkThemeContextProvider key="a">
       <ContextThemeProvider>{children}</ContextThemeProvider>
     </DarkThemeContextProvider>
   );

inertia/pages/dashboard.tsx

@@ -1,22 +1,15 @@
 import styled from '@emotion/styled';
-import { router } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import CollectionContainer from '~/components/dashboard/collection/collection_container';
 import CollectionList from '~/components/dashboard/collection/list/collection_list';
+import DashboardProviders from '~/components/dashboard/dashboard_provider';
 import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
 import SwiperHandler from '~/components/dashboard/swiper_handler';
 import DashboardLayout from '~/components/layouts/dashboard_layout';
-import { ActiveCollectionContext } from '~/contexts/active_collection_context';
-import CollectionsContext from '~/contexts/collections_context';
-import FavoritesContext from '~/contexts/favorites_context';
-import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
 import { useMediaQuery } from '~/hooks/use_media_query';
 import useToggle from '~/hooks/use_modal';
-import useShortcut from '~/hooks/use_shortcut';
-import { appendCollectionId } from '~/lib/navigation';
-import { CollectionWithLinks, Link } from '~/types/app';
+import { CollectionWithLinks } from '~/types/app';
 
 interface DashboardPageProps {
   collections: CollectionWithLinks[];
@@ -28,7 +21,7 @@ const SideBar = styled.div(({ theme }) => ({
   marginRight: '5px',
 }));
 
-export default function DashboardPage(props: Readonly<DashboardPageProps>) {
+function DashboardPage(props: Readonly<DashboardPageProps>) {
   const isMobile = useMediaQuery('(max-width: 768px)');
   const { isShowing, open, close } = useToggle();
   const handlers = useSwipeable({
@@ -43,7 +36,6 @@ export default function DashboardPage(props: Readonly<DashboardPageProps>) {
   }, [close, isMobile, isShowing]);
 
   return (
-    <DashboardLayout>
     <DashboardProviders
       collections={props.collections}
       activeCollection={props.activeCollection}
@@ -58,85 +50,8 @@ export default function DashboardPage(props: Readonly<DashboardPageProps>) {
         <CollectionList />
       </SwiperHandler>
     </DashboardProviders>
-    </DashboardLayout>
   );
 }
-function DashboardProviders(
-  props: Readonly<{
-    children: ReactNode;
-    collections: CollectionWithLinks[];
-    activeCollection: CollectionWithLinks;
-  }>
-) {
-  const [globalHotkeysEnabled, setGlobalHotkeysEnabled] =
-    useState<boolean>(true);
-  const [collections, setCollections] = useState<CollectionWithLinks[]>(
-    props.collections
-  );
-  const [activeCollection, setActiveCollection] =
-    useState<CollectionWithLinks | null>(
-      props.activeCollection || collections?.[0]
-    );
 
-  const handleChangeCollection = (collection: CollectionWithLinks) => {
-    setActiveCollection(collection);
-    router.visit(appendCollectionId(route('dashboard').url, collection.id));
-  };
-
-  const favorites = useMemo<Link[]>(
-    () =>
-      collections.reduce((acc, collection) => {
-        collection.links.forEach((link) =>
-          link.favorite ? acc.push(link) : null
-        );
-        return acc;
-      }, [] as Link[]),
-    [collections]
-  );
-
-  const collectionsContextValue = useMemo(
-    () => ({ collections, setCollections }),
-    [collections]
-  );
-  const activeCollectionContextValue = useMemo(
-    () => ({ activeCollection, setActiveCollection: handleChangeCollection }),
-    [activeCollection, handleChangeCollection]
-  );
-  const favoritesContextValue = useMemo(() => ({ favorites }), [favorites]);
-  const globalHotkeysContextValue = useMemo(
-    () => ({
-      globalHotkeysEnabled,
-      setGlobalHotkeysEnabled,
-    }),
-    [globalHotkeysEnabled]
-  );
-
-  useShortcut(
-    'OPEN_CREATE_LINK_KEY',
-    () =>
-      router.visit(
-        appendCollectionId(route('link.create-form').url, activeCollection?.id)
-      ),
-    {
-      enabled: globalHotkeysEnabled,
-    }
-  );
-  useShortcut(
-    'OPEN_CREATE_COLLECTION_KEY',
-    () => router.visit(route('collection.create-form').url),
-    {
-      enabled: globalHotkeysEnabled,
-    }
-  );
-  return (
-    <CollectionsContext.Provider value={collectionsContextValue}>
-      <ActiveCollectionContext.Provider value={activeCollectionContextValue}>
-        <FavoritesContext.Provider value={favoritesContextValue}>
-          <GlobalHotkeysContext.Provider value={globalHotkeysContextValue}>
-            {props.children}
-          </GlobalHotkeysContext.Provider>
-        </FavoritesContext.Provider>
-      </ActiveCollectionContext.Provider>
-    </CollectionsContext.Provider>
-  );
-}
+DashboardPage.layout = (page: ReactNode) => <DashboardLayout children={page} />;
+export default DashboardPage;

inertia/pages/home.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AiFillFolderOpen } from 'react-icons/ai';
 import { FaUser } from 'react-icons/fa';
@@ -19,10 +20,10 @@ const PageContent = styled.div({
   flexDirection: 'column',
 });
 
-export default function HomePage() {
+function HomePage() {
   const { t } = useTranslation();
   return (
-    <ContentLayout>
+    <>
       <HeroHeader />
       <PageContent>
         <AboutList>
@@ -59,6 +60,9 @@ export default function HomePage() {
         </AboutList>
         <WebsitePreview />
       </PageContent>
-    </ContentLayout>
+    </>
   );
 }
+
+HomePage.layout = (page: ReactNode) => <ContentLayout children={page} />;
+export default HomePage;

inertia/pages/login.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { Head, Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FcGoogle } from 'react-icons/fc';
 import Button from '~/components/common/form/_button';
@@ -51,10 +52,9 @@ const ButtonLink = styled(Button.withComponent('a'))({
   justifyContent: 'center',
 });
 
-export default function LoginPage() {
+function LoginPage() {
   const { t } = useTranslation();
   return (
-    <ContentLayout css={{ display: 'flex', alignItems: 'center' }}>
     <LoginContainer css={{ width: '500px', marginTop: '50px' }}>
       <Head title={t('login:title')} />
       <img
@@ -77,6 +77,13 @@ export default function LoginPage() {
         <Link href={route('terms').url}>{t('common:terms')}</Link>
       </AgreementText>
     </LoginContainer>
-    </ContentLayout>
   );
 }
+
+LoginPage.layout = (page: ReactNode) => (
+  <ContentLayout
+    children={page}
+    css={{ display: 'flex', alignItems: 'center' }}
+  />
+);
+export default LoginPage;

inertia/pages/privacy.tsx

@@ -1,10 +1,11 @@
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import LegalContentLayout from '~/components/layouts/legal_content_layout';
 
-export default function TermsPage() {
+function PrivacyPage() {
   const { t } = useTranslation('privacy');
   return (
-    <LegalContentLayout>
+    <>
       <h1>{t('title')}</h1>
       <p>{t('edited_at', { date: '19/11/2023' })}</p>
       <p>{t('welcome')}</p>
@@ -39,6 +40,11 @@ export default function TermsPage() {
 
       <h2>{t('gdpr.title')}</h2>
       <p>{t('gdpr.description')}</p>
-    </LegalContentLayout>
+    </>
   );
 }
+
+PrivacyPage.layout = (page: ReactNode) => (
+  <LegalContentLayout children={page} />
+);
+export default PrivacyPage;

inertia/pages/terms.tsx

@@ -1,12 +1,13 @@
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
+import { ReactNode } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import LegalContentLayout from '~/components/layouts/legal_content_layout';
 
-export default function TermsPage() {
+function TermsPage() {
   const { t } = useTranslation('terms');
   return (
-    <LegalContentLayout>
+    <>
       <h1>{t('title')}</h1>
       <p>{t('edited_at', { date: '19/11/2023' })}</p>
       <p>{t('welcome')}</p>
@@ -48,6 +49,9 @@ export default function TermsPage() {
 
       <h2>{t('cancel.title')}</h2>
       <p>{t('cancel.description')}</p>
-    </LegalContentLayout>
+    </>
   );
 }
+
+TermsPage.layout = (page: ReactNode) => <LegalContentLayout children={page} />;
+export default TermsPage;