From f818715a45626662fc6f4ffd43e87126ca74e5aa Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 7 Feb 2024 15:31:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A(app-desk)=20change=20next=20router?=
 =?UTF-8?q?=20to=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2 routers exists in Next.js, "app" router and "page" router.
The "app" router has a bug introduced in Next.js 13.4.14, which is
not fixed yet. For the moment we cannot use dynamic routes with
"app" router with an SPA. As advised by the Next.js team, we
migrated to the "pages" router.
---
 src/frontend/apps/desk/next.config.js         |   7 ++++
 .../apps/desk/{src/app => public}/favicon.ico | Bin
 .../pages.test.tsx}                           |   2 +-
 .../apps/desk/src/app/contacts/page.tsx       |   7 ----
 .../apps/desk/src/app/favorite/page.tsx       |   7 ----
 .../apps/desk/src/app/groups/page.tsx         |   7 ----
 src/frontend/apps/desk/src/app/help/page.tsx  |   7 ----
 src/frontend/apps/desk/src/app/layout.tsx     |  37 ------------------
 src/frontend/apps/desk/src/app/page.tsx       |  35 -----------------
 .../apps/desk/src/app/recent/page.tsx         |   7 ----
 .../apps/desk/src/app/teams/layout.tsx        |  27 -------------
 .../apps/desk/src/features/header/Header.tsx  |   1 -
 .../apps/desk/src/pages/AppProvider.tsx       |  26 ++++++++++++
 .../InnerLayout.tsx => pages/MainLayout.tsx}  |   6 +--
 src/frontend/apps/desk/src/pages/_app.tsx     |  28 +++++++++++++
 .../apps/desk/src/pages/_document.tsx         |  15 +++++++
 .../apps/desk/src/pages/contacts/index.tsx    |  16 ++++++++
 .../apps/desk/src/pages/favorite/index.tsx    |  16 ++++++++
 .../apps/desk/src/{app => pages}/globals.css  |   0
 .../apps/desk/src/pages/groups/index.tsx      |  16 ++++++++
 src/frontend/apps/desk/src/pages/index.tsx    |  29 ++++++++++++++
 .../apps/desk/src/pages/recent/index.tsx      |  16 ++++++++
 .../apps/desk/src/pages/teams/TeamLayout.tsx  |  29 ++++++++++++++
 .../page.tsx => pages/teams/create.tsx}       |  17 +++++---
 src/frontend/apps/desk/src/types/next.ts      |   5 +++
 25 files changed, 219 insertions(+), 144 deletions(-)
 rename src/frontend/apps/desk/{src/app => public}/favicon.ico (100%)
 rename src/frontend/apps/desk/src/{app/__tests__/page.test.tsx => __tests__/pages.test.tsx} (93%)
 delete mode 100644 src/frontend/apps/desk/src/app/contacts/page.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/favorite/page.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/groups/page.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/help/page.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/layout.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/page.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/recent/page.tsx
 delete mode 100644 src/frontend/apps/desk/src/app/teams/layout.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/AppProvider.tsx
 rename src/frontend/apps/desk/src/{app/InnerLayout.tsx => pages/MainLayout.tsx} (67%)
 create mode 100644 src/frontend/apps/desk/src/pages/_app.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/_document.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/contacts/index.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/favorite/index.tsx
 rename src/frontend/apps/desk/src/{app => pages}/globals.css (100%)
 create mode 100644 src/frontend/apps/desk/src/pages/groups/index.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/index.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/recent/index.tsx
 create mode 100644 src/frontend/apps/desk/src/pages/teams/TeamLayout.tsx
 rename src/frontend/apps/desk/src/{app/teams/create/page.tsx => pages/teams/create.tsx} (65%)
 create mode 100644 src/frontend/apps/desk/src/types/next.ts

diff --git a/src/frontend/apps/desk/next.config.js b/src/frontend/apps/desk/next.config.js
index f7946eb..d8ac8ba 100644
--- a/src/frontend/apps/desk/next.config.js
+++ b/src/frontend/apps/desk/next.config.js
@@ -1,6 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  images: {
+    unoptimized: true,
+  },
+  compiler: {
+    // Enables the styled-components SWC transform
+    styledComponents: true,
+  },
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>
diff --git a/src/frontend/apps/desk/src/app/favicon.ico b/src/frontend/apps/desk/public/favicon.ico
similarity index 100%
rename from src/frontend/apps/desk/src/app/favicon.ico
rename to src/frontend/apps/desk/public/favicon.ico
diff --git a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx b/src/frontend/apps/desk/src/__tests__/pages.test.tsx
similarity index 93%
rename from src/frontend/apps/desk/src/app/__tests__/page.test.tsx
rename to src/frontend/apps/desk/src/__tests__/pages.test.tsx
index ee91d1f..1daa77a 100644
--- a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
+++ b/src/frontend/apps/desk/src/__tests__/pages.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 
 import { AppWrapper } from '@/tests/utils';
 
-import Page from '../page';
+import Page from '../pages';
 
 describe('Page', () => {
   it('checks Page rendering', () => {
diff --git a/src/frontend/apps/desk/src/app/contacts/page.tsx b/src/frontend/apps/desk/src/app/contacts/page.tsx
deleted file mode 100644
index 9717564..0000000
--- a/src/frontend/apps/desk/src/app/contacts/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { Box } from '@/components';
-
-export default function Contacts() {
-  return <Box>Contacts</Box>;
-}
diff --git a/src/frontend/apps/desk/src/app/favorite/page.tsx b/src/frontend/apps/desk/src/app/favorite/page.tsx
deleted file mode 100644
index 1949c2b..0000000
--- a/src/frontend/apps/desk/src/app/favorite/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { Box } from '@/components';
-
-export default function Favorite() {
-  return <Box>Favorite</Box>;
-}
diff --git a/src/frontend/apps/desk/src/app/groups/page.tsx b/src/frontend/apps/desk/src/app/groups/page.tsx
deleted file mode 100644
index 79620d1..0000000
--- a/src/frontend/apps/desk/src/app/groups/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { Box } from '@/components';
-
-export default function Groups() {
-  return <Box>Groups</Box>;
-}
diff --git a/src/frontend/apps/desk/src/app/help/page.tsx b/src/frontend/apps/desk/src/app/help/page.tsx
deleted file mode 100644
index 0fc13f7..0000000
--- a/src/frontend/apps/desk/src/app/help/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { Box } from '@/components';
-
-export default function Help() {
-  return <Box>Help</Box>;
-}
diff --git a/src/frontend/apps/desk/src/app/layout.tsx b/src/frontend/apps/desk/src/app/layout.tsx
deleted file mode 100644
index 891a778..0000000
--- a/src/frontend/apps/desk/src/app/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import { CunninghamProvider } from '@openfun/cunningham-react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-import { useCunninghamTheme } from '@/cunningham';
-import { Auth } from '@/features/auth/Auth';
-import '@/i18n/initI18n';
-
-import InnerLayout from './InnerLayout';
-import './globals.css';
-
-const queryClient = new QueryClient();
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { theme } = useCunninghamTheme();
-
-  return (
-    <html lang="en">
-      <body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
-        <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools />
-          <CunninghamProvider theme={theme}>
-            <Auth>
-              <InnerLayout>{children}</InnerLayout>
-            </Auth>
-          </CunninghamProvider>
-        </QueryClientProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/src/frontend/apps/desk/src/app/page.tsx b/src/frontend/apps/desk/src/app/page.tsx
deleted file mode 100644
index 7e0470d..0000000
--- a/src/frontend/apps/desk/src/app/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import { Button } from '@openfun/cunningham-react';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-
-import { Box, StyledLink } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-import { Panel } from '@/features/teams';
-
-const StyledButton = styled(Button)`
-  width: fit-content;
-`;
-
-export default function Home() {
-  const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
-
-  return (
-    <Box $height="inherit" $direction="row">
-      <Panel />
-      <Box
-        $background={colorsTokens()['primary-bg']}
-        $justify="center"
-        $align="center"
-        $width="100%"
-        $gap="5rem"
-      >
-        <StyledLink href="/teams/create">
-          <StyledButton>{t('Create a new team')}</StyledButton>
-        </StyledLink>
-      </Box>
-    </Box>
-  );
-}
diff --git a/src/frontend/apps/desk/src/app/recent/page.tsx b/src/frontend/apps/desk/src/app/recent/page.tsx
deleted file mode 100644
index fbddbcc..0000000
--- a/src/frontend/apps/desk/src/app/recent/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { Box } from '@/components';
-
-export default function Recent() {
-  return <Box>Recent</Box>;
-}
diff --git a/src/frontend/apps/desk/src/app/teams/layout.tsx b/src/frontend/apps/desk/src/app/teams/layout.tsx
deleted file mode 100644
index b556169..0000000
--- a/src/frontend/apps/desk/src/app/teams/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-
-import { Box } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-import { Panel } from '@/features/teams';
-
-export default function Layout({ children }: PropsWithChildren) {
-  const { colorsTokens } = useCunninghamTheme();
-
-  return (
-    <Box $height="inherit" $direction="row">
-      <Panel />
-      <Box
-        $background={colorsTokens()['primary-bg']}
-        $justify="center"
-        $align="center"
-        $width="100%"
-        $gap="5rem"
-        $css="overflow:auto;"
-      >
-        {children}
-      </Box>
-    </Box>
-  );
-}
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 0c84049..6c40f5c 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -95,7 +95,6 @@ export const Header = () => {
                 priority
                 src={IconMyAccount}
                 alt={t(`Profile picture`)}
-                unoptimized
               />
             </Box>
             <Button
diff --git a/src/frontend/apps/desk/src/pages/AppProvider.tsx b/src/frontend/apps/desk/src/pages/AppProvider.tsx
new file mode 100644
index 0000000..e59485f
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/AppProvider.tsx
@@ -0,0 +1,26 @@
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import { useCunninghamTheme } from '@/cunningham';
+import { Auth } from '@/features/auth/Auth';
+import '@/i18n/initI18n';
+
+const queryClient = new QueryClient();
+
+export default function AppProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { theme } = useCunninghamTheme();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools />
+      <CunninghamProvider theme={theme}>
+        <Auth>{children}</Auth>
+      </CunninghamProvider>
+    </QueryClientProvider>
+  );
+}
diff --git a/src/frontend/apps/desk/src/app/InnerLayout.tsx b/src/frontend/apps/desk/src/pages/MainLayout.tsx
similarity index 67%
rename from src/frontend/apps/desk/src/app/InnerLayout.tsx
rename to src/frontend/apps/desk/src/pages/MainLayout.tsx
index da63fbe..05bd7d5 100644
--- a/src/frontend/apps/desk/src/app/InnerLayout.tsx
+++ b/src/frontend/apps/desk/src/pages/MainLayout.tsx
@@ -2,17 +2,17 @@ import { Box } from '@/components';
 import { HEADER_HEIGHT, Header } from '@/features/header';
 import { Menu } from '@/features/menu';
 
-export default function InnerLayout({
+export default function MainLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <Box as="main" $height="100vh" $css="overflow:hidden;">
+    <Box $height="100vh" $css="overflow:hidden;">
       <Header />
       <Box $css="flex: 1;" $direction="row">
         <Menu />
-        <Box $height={`calc(100vh - ${HEADER_HEIGHT})`} $width="100%">
+        <Box as="main" $height={`calc(100vh - ${HEADER_HEIGHT})`} $width="100%">
           {children}
         </Box>
       </Box>
diff --git a/src/frontend/apps/desk/src/pages/_app.tsx b/src/frontend/apps/desk/src/pages/_app.tsx
new file mode 100644
index 0000000..70a9be9
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/_app.tsx
@@ -0,0 +1,28 @@
+import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import { useTranslation } from 'react-i18next';
+
+import { NextPageWithLayout } from '@/types/next';
+
+import AppProvider from './AppProvider';
+import './globals.css';
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
+  const getLayout = Component.getLayout ?? ((page) => page);
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>{t('People')}</title>
+        <meta name="description" content={t('People Description')} />
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+      </Head>
+      <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
+    </>
+  );
+}
diff --git a/src/frontend/apps/desk/src/pages/_document.tsx b/src/frontend/apps/desk/src/pages/_document.tsx
new file mode 100644
index 0000000..282e0d3
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/_document.tsx
@@ -0,0 +1,15 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+import '@/i18n/initI18n';
+
+export default function RootLayout() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/src/frontend/apps/desk/src/pages/contacts/index.tsx b/src/frontend/apps/desk/src/pages/contacts/index.tsx
new file mode 100644
index 0000000..443184c
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/contacts/index.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+import MainLayout from '../MainLayout';
+
+const Page: NextPageWithLayout = () => {
+  return <Box>Contacts</Box>;
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/desk/src/pages/favorite/index.tsx b/src/frontend/apps/desk/src/pages/favorite/index.tsx
new file mode 100644
index 0000000..2e098d8
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/favorite/index.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+import MainLayout from '../MainLayout';
+
+const Page: NextPageWithLayout = () => {
+  return <Box>Favorite</Box>;
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/desk/src/app/globals.css b/src/frontend/apps/desk/src/pages/globals.css
similarity index 100%
rename from src/frontend/apps/desk/src/app/globals.css
rename to src/frontend/apps/desk/src/pages/globals.css
diff --git a/src/frontend/apps/desk/src/pages/groups/index.tsx b/src/frontend/apps/desk/src/pages/groups/index.tsx
new file mode 100644
index 0000000..b8aa687
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/groups/index.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+import MainLayout from '../MainLayout';
+
+const Page: NextPageWithLayout = () => {
+  return <Box>Groups</Box>;
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/desk/src/pages/index.tsx b/src/frontend/apps/desk/src/pages/index.tsx
new file mode 100644
index 0000000..1ba7992
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/index.tsx
@@ -0,0 +1,29 @@
+import { Button } from '@openfun/cunningham-react';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import { StyledLink } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+import TeamLayout from './teams/TeamLayout';
+
+const StyledButton = styled(Button)`
+  width: fit-content;
+`;
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <StyledLink href="/teams/create">
+      <StyledButton>{t('Create a new team')}</StyledButton>
+    </StyledLink>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <TeamLayout>{page}</TeamLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/desk/src/pages/recent/index.tsx b/src/frontend/apps/desk/src/pages/recent/index.tsx
new file mode 100644
index 0000000..00a7c73
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/recent/index.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+import MainLayout from '../MainLayout';
+
+const Page: NextPageWithLayout = () => {
+  return <Box>Recent</Box>;
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/desk/src/pages/teams/TeamLayout.tsx b/src/frontend/apps/desk/src/pages/teams/TeamLayout.tsx
new file mode 100644
index 0000000..389854c
--- /dev/null
+++ b/src/frontend/apps/desk/src/pages/teams/TeamLayout.tsx
@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+
+import { Box } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Panel } from '@/features/teams';
+
+import MainLayout from '../MainLayout';
+
+export default function TeamLayout({ children }: PropsWithChildren) {
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <MainLayout>
+      <Box $height="inherit" $direction="row">
+        <Panel />
+        <Box
+          $background={colorsTokens()['primary-bg']}
+          $justify="center"
+          $align="center"
+          $width="100%"
+          $gap="5rem"
+          $css="overflow:auto;"
+        >
+          {children}
+        </Box>
+      </Box>
+    </MainLayout>
+  );
+}
diff --git a/src/frontend/apps/desk/src/app/teams/create/page.tsx b/src/frontend/apps/desk/src/pages/teams/create.tsx
similarity index 65%
rename from src/frontend/apps/desk/src/app/teams/create/page.tsx
rename to src/frontend/apps/desk/src/pages/teams/create.tsx
index 2564d6c..0878340 100644
--- a/src/frontend/apps/desk/src/app/teams/create/page.tsx
+++ b/src/frontend/apps/desk/src/pages/teams/create.tsx
@@ -1,12 +1,13 @@
-'use client';
-
 import { Button, Field, Input } from '@openfun/cunningham-react';
-import { useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useCreateTeam } from '@/features/teams';
+import { NextPageWithLayout } from '@/types/next';
 
-export default function Page() {
+import TeamLayout from './TeamLayout';
+
+const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const { mutate: createTeam } = useCreateTeam();
   const [teamName, setTeamName] = useState('');
@@ -23,4 +24,10 @@ export default function Page() {
       </Button>
     </Field>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <TeamLayout>{page}</TeamLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/desk/src/types/next.ts b/src/frontend/apps/desk/src/types/next.ts
new file mode 100644
index 0000000..1a85844
--- /dev/null
+++ b/src/frontend/apps/desk/src/types/next.ts
@@ -0,0 +1,5 @@
+import type { NextPage } from 'next';
+
+export type NextPageWithLayout = NextPage & {
+  getLayout?: (page: React.ReactElement) => React.ReactNode;
+};