Page params refactor (#26)

* feat: refactored page settings

* fix: search params

* fix: removed all errors by replacing all usePageParams

* fix: lint

* fix: review

Author: TeddyRoncin

src/app/assos/page.tsx

@@ -4,9 +4,9 @@ import { createInputFilter } from '@/components/filteredSearch/InputFilter';
 import FilteredSearch, { FiltersDataType, GenericFiltersType } from '@/components/filteredSearch/FilteredSearch';
 import Icons from '@/icons';
 import { ResultsList } from '@/components/ResultsList';
-import { usePageSettings } from '@/module/pageSettings';
 import { useAppTranslation } from '@/lib/i18n';
 import { useAssos } from '@/api/assos/searchAssos.hook';
+import Page from '@/components/utilities/Page';
 
 /**
  * The different filters that exist.
@@ -28,12 +28,11 @@ const assoFilters = Object.freeze({
   }, // This one does not need a name as it will never be displayed
 } satisfies FiltersDataType<FilterNames, AssoFiltersType>);
 
-export default function Page() {
-  usePageSettings({});
+export default function AssoPage() {
   const { t } = useAppTranslation();
   const [assos, totalAssosCount, updateAssos] = useAssos();
   return (
-    <div className={styles.page}>
+    <Page className={styles.page}>
       <h1 className={styles.title}>{t('assos:browser')}</h1>
       <div className={styles.content}>
         <FilteredSearch<FilterNames, AssoFiltersType> filtersData={assoFilters} updateSearch={updateAssos} />
@@ -52,6 +51,6 @@ export default function Page() {
           />
         </div>
       </div>
-    </div>
+    </Page>
   );
 }

src/app/cookies/page.tsx

@@ -2,9 +2,9 @@
 import styles from './style.module.scss';
 import { useAppDispatch, useAppSelector } from '@/lib/hooks';
 import { CookieNames, setCookiesAcceptance } from '@/module/cookies';
-import { usePageSettings } from '@/module/pageSettings';
 import { useEffect, useState } from 'react';
 import { NotParameteredTranslationKey, useAppTranslation } from '@/lib/i18n';
+import Page from '@/components/utilities/Page';
 
 const DEFAULT_COOKIES = Object.fromEntries(Object.values(CookieNames).map((name) => [name, true])) as {
   [K in CookieNames]: boolean;
@@ -23,7 +23,6 @@ const cookies = [
 }>;
 
 export default function CookiesPage() {
-  usePageSettings({});
   const dispatch = useAppDispatch();
   const cookiesAcceptedFromRedux = useAppSelector((state) => state.cookies.cookiesAccepted);
   const [cookiesAccepted, setCookiesAccepted] = useState(cookiesAcceptedFromRedux ?? DEFAULT_COOKIES);
@@ -41,7 +40,7 @@ export default function CookiesPage() {
   };
 
   return (
-    <div className={styles.cookiesPage}>
+    <Page className={styles.cookiesPage}>
       <h1>{t('cookies:title')}</h1>
       <h2>{t('cookies:whatIsIt.title')}</h2>
       <p>{t('cookies:whatIsIt.text')}</p>
@@ -60,6 +59,6 @@ export default function CookiesPage() {
         ))}
       </div>
       <button onClick={() => dispatch(setCookiesAcceptance(cookiesAccepted))}>{t('cookies:validate')}</button>
-    </div>
+    </Page>
   );
 }

src/app/layout.tsx

@@ -7,6 +7,7 @@ import Wrapper from '@/components/utilities/Wrapper';
 import PageSearchParams from '@/components/utilities/PageSearchParams';
 import { Lexend } from 'next/font/google';
 import { CookiePopup } from '@/components/CookiePopup';
+import PageSettingsInitializer from '@/components/utilities/PageSettingsInitializer';
 
 const lexend = Lexend({
   weight: ['400', '600', '700', '800'],
@@ -27,6 +28,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <Providers>
         <Redirecter />
         <AutoLogin />
+        <PageSettingsInitializer />
         <Suspense>
           <PageSearchParams />
         </Suspense>

src/app/login/page.tsx

@@ -6,16 +6,16 @@ import { CasLoginRequestDto, CasLoginResponseDto } from '@/api/auth/casLogin';
 import { setToken } from '@/module/session';
 import { useAppDispatch } from '@/lib/hooks';
 import { useEffect, useState } from 'react';
-import { usePageLoaded, usePageSettings, useSearchParam } from '@/module/pageSettings';
+import { usePageLoaded, useSearchParam } from '@/module/pageSettings';
 import Button from '@/components/UI/Button';
 import { RegisterResponseDto } from '@/api/auth/register';
 import { CasRegisterRequestDto } from '@/api/auth/casRegister';
 import { useAPI } from '@/api/api';
 import { useAppTranslation } from '@/lib/i18n';
 import { Trans } from 'react-i18next';
+import Page from '@/components/utilities/Page';
 
 export default function LoginPage() {
-  usePageSettings({ hasNavbar: false, permissions: 'public', needsLoading: true });
   const { internallyLoaded, markPageLoaded } = usePageLoaded();
   const ticket = useSearchParam('ticket');
   const router = useRouter();
@@ -52,7 +52,7 @@ export default function LoginPage() {
   }
   if (registerToken) {
     return (
-      <div className={styles.confirmRegister}>
+      <Page hasNavbar={true} permissions={'public'} needsLoading={true} className={styles.confirmRegister}>
         <div>
           <Trans
             i18nKey={'login:legal.text'}
@@ -83,12 +83,12 @@ export default function LoginPage() {
             {t('login:legal.dontConnect')}
           </Button>
         </div>
-      </div>
+      </Page>
     );
   }
   return (
-    <div id="login-page" className={styles.loginPage}>
+    <Page hasNavbar={true} permissions={'public'} needsLoading={true} id="login-page" className={styles.loginPage}>
       <LoginForm />
-    </div>
+    </Page>
   );
 }

src/app/not-found.tsx

@@ -1,8 +1,11 @@
 'use client';
 
-import { usePageSettings } from '@/module/pageSettings';
+import Page from '@/components/utilities/Page';
 
 export default function PageNotFound() {
-  usePageSettings({});
-  return <h1>404 - Page not found</h1>;
+  return (
+    <Page>
+      <h1>404 - Page not found</h1>
+    </Page>
+  );
 }

src/app/page.tsx

@@ -2,13 +2,14 @@
 
 import styles from './style.module.scss';
 import WidgetRenderer from '@/components/homeWidgets/WidgetRenderer';
-import { usePageLoaded, usePageSettings } from '@/module/pageSettings';
+import { usePageLoaded } from '@/module/pageSettings';
 import Button from '@/components/UI/Button';
 import { useStateWithReference } from '@/utils/hooks';
 import { useAppDispatch, useAppSelector } from '@/lib/hooks';
 import { addWidget, modifyBB, removeWidget, WIDGETS } from '@/module/homepage';
 import { useEffect, useMemo, useState } from 'react';
 import { isClientSide } from '@/utils/environment';
+import Page from '@/components/utilities/Page';
 
 function AdditionalNavbarComponent({
   modifyingLayout,
@@ -21,7 +22,6 @@ function AdditionalNavbarComponent({
   onModify: () => void;
   onDone: () => void;
 }) {
-  //usePageSettings({});
   const [widgetToAdd /*, setWidgetToAdd*/] = useState<keyof typeof WIDGETS>('ueBrowserWidget');
   return (
     <>
@@ -46,22 +46,16 @@ export default function HomePage() {
   const { markPageLoaded } = usePageLoaded();
   const [isSmallScreen, setIsSmallScreen] = useState(false);
   const [modifyingLayout, setModifyingLayout, modifyingLayoutRef] = useStateWithReference(false);
-  usePageSettings(
-    {
-      navbarAdditionalComponent: isSmallScreen
-        ? null
-        : () => (
-            <AdditionalNavbarComponent
-              modifyingLayout={modifyingLayoutRef.current}
-              onModify={() => setModifyingLayout(true)}
-              onDone={() => setModifyingLayout(false)}
-              onAdd={(widget) => dispatch(addWidget(widget))}
-            />
-          ),
-      needsLoading: true,
-    },
-    [modifyingLayout, isSmallScreen],
-  );
+  const navbarAdditionalComponent = isSmallScreen
+    ? null
+    : () => (
+        <AdditionalNavbarComponent
+          modifyingLayout={modifyingLayoutRef.current}
+          onModify={() => setModifyingLayout(true)}
+          onDone={() => setModifyingLayout(false)}
+          onAdd={(widget) => dispatch(addWidget(widget))}
+        />
+      );
   const resizeObserver = useMemo(
     () =>
       isClientSide()
@@ -82,7 +76,7 @@ export default function HomePage() {
     return () => resizeObserver.disconnect();
   }, [resizeObserver]);
   return (
-    <div className={styles.page}>
+    <Page needsLoading={true} navbarAdditionalComponent={navbarAdditionalComponent} className={styles.page}>
       {!isSmallScreen
         ? widgets.map((widget, i) => {
             return (
@@ -103,6 +97,6 @@ export default function HomePage() {
             const Widget = WIDGETS[widget.widget].component;
             return <Widget key={widget.id} />;
           })}
-    </div>
+    </Page>
   );
 }

src/app/profile/page.tsx

@@ -1,20 +1,20 @@
 'use client';
-import { usePageSettings } from '@/module/pageSettings';
+
 // import { useConnectedUser } from '@/module/user';
 import { setProfilePicture } from '@/api/profile/setProfilePicture';
 import { useAPI } from '@/api/api';
 import { useAppTranslation } from '@/lib/i18n';
+import Page from '@/components/utilities/Page';
 
 export default function ProfilePage() {
-  usePageSettings({});
   // const user = useConnectedUser();
   const api = useAPI();
   const { t } = useAppTranslation();
   return (
-    <div>
+    <Page>
       <h1>{t('users:profile.title')}</h1>
       <img src="/images/default-avatar.jpg" alt="Default avatar" />
       <input type="file" onChange={(e) => e.target.files && setProfilePicture(api, e.target.files[0])} />
-    </div>
+    </Page>
   );
 }

src/app/register/page.tsx

@@ -1,13 +1,12 @@
 'use client';
 import RegisterForm from '@/components/auth/RegisterForm';
 import styles from '@/app/login/style.module.scss';
-import { usePageSettings } from '@/module/pageSettings';
+import Page from '@/components/utilities/Page';
 
 export default function RegisterPage() {
-  usePageSettings({ hasNavbar: false, permissions: 'public' });
   return (
-    <div id="register-page" className={styles.loginPage}>
+    <Page hasNavbar={false} permissions={'public'} id="register-page" className={styles.loginPage}>
       <RegisterForm />
-    </div>
+    </Page>
   );
 }

src/app/ues/[code]/comments/[commentId]/page.tsx

@@ -13,7 +13,7 @@ import EditableText from '@/components/EditableText';
 import { editCommentReply } from '@/api/commentReply/editCommentReply';
 import { useAPI } from '@/api/api';
 import { sendCommentReply } from '@/api/commentReply/sendCommentReply';
-import { usePageSettings } from '@/module/pageSettings';
+import Page from '@/components/utilities/Page';
 
 function CommentEditorFooter(originalComment: string, onUpdate: (text: string) => void, t: TFunction) {
   return function CommentEditorFooter({ text, disable }: { text: string; disable: () => void }) {
@@ -32,7 +32,6 @@ function CommentEditorFooter(originalComment: string, onUpdate: (text: string) =
 }
 
 export default function CommentDetailsPage() {
-  usePageSettings({});
   const { t } = useAppTranslation();
   const params = useParams<{ code: string; commentId: string }>();
   const [comment, setComment] = useUEComment(params.commentId);
@@ -44,7 +43,7 @@ export default function CommentDetailsPage() {
     return;
   }
   return (
-    <div className={styles.page}>
+    <Page className={styles.page}>
       <h1>
         {comment.isAnonymous
           ? t('ues:detailed.comments.resume.anonymous', {
@@ -117,6 +116,6 @@ export default function CommentDetailsPage() {
           {t('ues:detailed.comments.answers.answerButton')}
         </Button>
       </div>
-    </div>
+    </Page>
   );
 }

src/app/ues/[code]/page.tsx

@@ -17,14 +17,13 @@ import TextArea from '@/components/UI/TextArea';
 import { useState } from 'react';
 import sendComment from '@/api/comment/sendComment';
 import { useAPI } from '@/api/api';
-import { usePageSettings } from '@/module/pageSettings';
 import useAnnals from '@/api/annals/fetchAnnals';
 import useAnnalMetadata from '@/api/annals/fetchMetadata';
 import ExamList from '@/components/ues/ExamList';
 import ExamSender from '@/components/ues/ExamSender';
+import Page from '@/components/utilities/Page';
 
 export default function UEDetailsPage() {
-  usePageSettings({});
   const params = useParams<{ code: string }>();
   const { t } = useAppTranslation();
   const logged = useAppSelector((state) => state.session.logged);
@@ -63,7 +62,7 @@ export default function UEDetailsPage() {
   };
 
   return (
-    <div className={styles.page}>
+    <Page className={styles.page}>
       <h1>{ue.code}</h1>
       <p>{ue.name}</p>
       <div className={styles.divider} />
@@ -176,6 +175,6 @@ export default function UEDetailsPage() {
           annalTypes={annalTypes}
         />
       )}
-    </div>
+    </Page>
   );
 }