style: refactor initial props

apps/website/pages/_app.tsx

@@ -1,9 +1,13 @@
-import {AppProps} from 'next/app';
+import App, {AppProps} from 'next/app';
 import {SessionProvider} from "next-auth/react";
-import { library } from "@fortawesome/fontawesome-svg-core";
+import {config, library} from "@fortawesome/fontawesome-svg-core";
-import { config } from '@fortawesome/fontawesome-svg-core';
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import {faBagShopping, faRightToBracket, faUserPlus} from "@fortawesome/free-solid-svg-icons";
+import axios from "axios";
+import delve from 'dlv';
+
+import {environment} from "../environments/environment";
+import './styles.css';
 
 config.autoAddCss = false;
 
@@ -11,9 +15,25 @@ library.add(faRightToBracket);
 library.add(faUserPlus);
 library.add(faBagShopping);
 
-import './styles.css';
+interface CustomAppProps extends AppProps {
+  menuHeader: object[],
+  menuFooter: object[],
+  page: object,
+  seo: object,
+}
+
+const getPageMetadata = async (path) => {
+  try {
+    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+  } catch (e) {
+    console.error(e);
+    return Promise.resolve({})
+  }
+}
+
 
-function CustomApp({Component, pageProps: {session, ...pageProps}}: AppProps) {
+const CustomApp = ({Component, pageProps: {session, ...pageProps}, menuFooter, menuHeader, seo}: CustomAppProps) => {
+  pageProps = {...pageProps, menuFooter, menuHeader, seo};
   return (
     <SessionProvider session={session}>
       <Component {...pageProps} />
@@ -21,4 +41,20 @@ function CustomApp({Component, pageProps: {session, ...pageProps}}: AppProps) {
   );
 }
 
+CustomApp.getInitialProps = async (context) => {
+  const appProps = await App.getInitialProps(context);
+  const path = context.router.pathname;
+  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
+  const page = await getPageMetadata(path);
+
+  return {
+    ...appProps,
+    menuHeader: delve(menuHeader, 'data.data.attributes.items.data', []),
+    menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
+    page: delve(page, "data.data.0.attributes", {}),
+    seo: delve(page, "data.data.0.attributes.seo", {})
+  }
+}
+
 export default CustomApp;

apps/website/pages/home/index.tsx

@@ -1,36 +1,7 @@
-import axios from "axios";
-import delve from "dlv";
-
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
-import {config} from "../../config";
-import {environment} from "../../environments/environment";
-
-const getPageMetadata = async (path) => {
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-  return {
-    props: {
-      menuHeader: delve(menuHeader, 'data.data.attributes.items.data', []),
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
 
-export function Home({menuHeader, menuFooter, page, seo}) {
+export function Home({menuHeader, menuFooter, seo}) {
   return (
     <>
       <SeoConfig {...seo}/>

apps/website/pages/index.tsx

@@ -7,31 +7,8 @@ import Layout from "../components/layout/layout";
 import {config} from "../config";
 import {environment} from "../environments/environment";
 
-const getPageMetadata = async (path) => {
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-  return {
-    props: {
-      menuHeader: delve(menuHeader, 'data.data.attributes.items.data', []),
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
-
 export function Index({menuHeader, menuFooter, page, seo}) {
+  console.log(menuHeader, menuFooter);
   return (
     <>
       <SeoConfig {...seo}/>

apps/website/pages/lost-password/index.tsx

@@ -1,41 +1,14 @@
-import axios from "axios";
-import delve from "dlv";
 import {useState} from "react";
 import {SubmitHandler, useForm} from "react-hook-form";
 
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
-import {environment} from "../../environments/environment";
 import {LostPasswordInputs} from "../../libs/api";
 import {lostPasswordStrapi} from "../../libs/auth";
 
 import styles from "../sign-up/index.module.scss";
 
-const getPageMetadata = async (path) => {
+export function LostPassword({menuHeader, menuFooter, page, seo}) {
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-  return {
-    props: {
-      menuHeaders: delve(menuHeader, 'data.data.attributes.items.data', []),
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
-
-export function LostPassword({menuHeaders, menuFooter, page, seo}) {
   const {register, handleSubmit, formState: {errors}} = useForm({
     defaultValues: {
       email: ""
@@ -59,7 +32,7 @@ export function LostPassword({menuHeaders, menuFooter, page, seo}) {
   return (
     <>
       <SeoConfig {...seo}/>
-      <Layout menuHeader={menuHeaders} menuFooter={menuFooter}>
+      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
         <div className={styles['page-sign-up']}>
           <section className={styles['section']}>
             <div className="container px-6 py-4 md:py-12 h-full mx-auto">
@@ -85,7 +58,8 @@ export function LostPassword({menuHeaders, menuFooter, page, seo}) {
                         {isBoolean(isSent) && !isSent ? (<div
                           className="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
                           role="alert">
-                          <span className="font-medium">Oups !</span> Une erreur est survenue durant l'envoi de l'email.
+                          <span className="font-medium">Oups !</span> Une erreur est survenue durant l&apos;envoi de
+                          l&apos;email.
                           Rapprochez vous de nos équipes pour en savoir plus.
                         </div>) : ('')}
                         <section className="grid grid-cols-1 gap-4 mb-4">

apps/website/pages/reset-password/index.tsx

@@ -1,42 +1,15 @@
-import delve from "dlv";
-import axios from "axios";
 import {FieldError, SubmitHandler, useForm} from "react-hook-form";
+import {useRouter} from "next/router";
+import {useState} from "react";
 
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
-import {environment} from "../../environments/environment";
 import {ResetPasswordInputs} from "../../libs/api";
-
-import styles from './index.module.scss';
-import {useRouter} from "next/router";
-import {useState} from "react";
 import {resetPasswordStrapi} from "../../libs/auth";
 
-const getPageMetadata = async (path) => {
+import styles from './index.module.scss';
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-  return {
-    props: {
-      menuHeaders: delve(menuHeader, 'data.data.attributes.items.data', []),
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
 
-export function ResetPassword({menuHeaders, menuFooter, page, seo}) {
+export function ResetPassword({menuHeader, menuFooter, seo}) {
   const router = useRouter();
   const [success, setSuccess] = useState(null);
 
@@ -69,7 +42,7 @@ export function ResetPassword({menuHeaders, menuFooter, page, seo}) {
   return (
     <>
       <SeoConfig {...seo}/>
-      <Layout menuHeader={menuHeaders} menuFooter={menuFooter}>
+      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
         <div className={styles['page-sign-up']}>
           <section className={styles['section']}>
             <div className="container px-6 py-4 md:py-12 h-full mx-auto">

apps/website/pages/sign-in/index.tsx

@@ -1,38 +1,13 @@
-import delve from "dlv";
-import axios from "axios";
 import {useRouter} from "next/router";
 
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
 import {createJwtToken} from "../../libs/auth";
-import {environment} from "../../environments/environment";
 
 import styles from './index.module.scss';
 
-const getPageMetadata = async (path) => {
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-
-  return {
-    props: {
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
-
 export function SignIn({seo, menuFooter}) {
+  console.log(seo);
   const router = useRouter();
 
   const onSubmit = async (e) => {

apps/website/pages/sign-up/index.tsx

@@ -1,6 +1,5 @@
 import styles from './index.module.scss';
 import axios from "axios";
-import delve from 'dlv';
 import {useRouter} from "next/router";
 import {SubmitHandler, useForm} from 'react-hook-form';
 import {BehaviorSubject, catchError, debounceTime, distinctUntilChanged, filter, map, of, switchMap} from "rxjs";
@@ -10,37 +9,10 @@ import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
 import {Inputs, signUpRequest} from "../../libs/api";
 import {createJwtToken} from "../../libs/auth";
-import {config} from "../../config";
-import {environment} from "../../environments/environment";
 
-const getPageMetadata = async (path) => {
+export function SignUp({seo, menuHeader, menuFooter}) {
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-
-  return {
-    props: {
-      menuHeaders: delve(menuHeader, 'data.data.attributes.items.data', []),
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
-
-export function SignUp({seo, menuHeaders, menuFooter}) {
   const router = useRouter();
-  const {register, handleSubmit, watch, getValues, formState: {errors}, setError, clearErrors} = useForm({
+  const {register, handleSubmit, getValues, formState: {errors}, setError, clearErrors} = useForm({
     defaultValues: {
       email: "",
       username: "",
@@ -106,7 +78,7 @@ export function SignUp({seo, menuHeaders, menuFooter}) {
   return (
     <>
       <SeoConfig {...seo}/>
-      <Layout menuHeader={menuHeaders} menuFooter={menuFooter}>
+      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
         <div className={styles['page-sign-up']}>
           <section className={styles['section']}>
             <div className="container px-6 py-4 md:py-12 h-full mx-auto">

apps/website/pages/signup-confirmation/index.tsx

@@ -1,34 +1,5 @@
-import axios from "axios";
-import delve from 'dlv';
-
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
-import {config} from "../../config";
-import {environment} from "../../environments/environment";
-
-const getPageMetadata = async (path) => {
-  try {
-    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
-  } catch (e) {
-    console.error(e);
-    return Promise.resolve({})
-  }
-}
-
-export const getServerSideProps = async (context) => {
-  const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
-  return {
-    props: {
-      menuHeader: delve(menuHeader, 'data.data.attributes.items.data', []),
-      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
-      page: delve(page, "data.data.0.attributes", {}),
-      seo: delve(page, "data.data.0.attributes.seo", {})
-    }
-  }
-}
 
 export function SignupConfirmation({menuHeader, menuFooter, page, seo}) {
   return (