fix: restrict next.js version due to swc bug

vercel/next.js#40399
resolved by vercel/next.js#40292

components/jeune/AjouterJeuneButton.tsx

@@ -1,22 +1,36 @@
-import Button from 'components/ui/Button/Button'
+import { useMemo } from 'react'
+
+import ButtonLink from 'components/ui/Button/ButtonLink'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
+import { StructureConseiller } from 'interfaces/conseiller'
 
 interface AjouterJeuneButtonProps {
-  handleAddJeune: () => void
+  structure?: StructureConseiller
 }
 
-export const AjouterJeuneButton = ({
-  handleAddJeune,
-}: AjouterJeuneButtonProps) => {
+export const AjouterJeuneButton = ({ structure }: AjouterJeuneButtonProps) => {
+  const href = useMemo(() => {
+    switch (structure) {
+      case StructureConseiller.MILO:
+        return '/mes-jeunes/milo/creation-jeune'
+      case StructureConseiller.POLE_EMPLOI:
+        return '/mes-jeunes/pole-emploi/creation-jeune'
+    }
+  }, [structure])
+
   return (
-    <Button onClick={handleAddJeune}>
-      <IconComponent
-        name={IconName.Add}
-        focusable='false'
-        aria-hidden='true'
-        className='mr-2 w-4 h-4'
-      />
-      Ajouter un bénéficiaire
-    </Button>
+    <>
+      {href && (
+        <ButtonLink href={href}>
+          <IconComponent
+            name={IconName.Add}
+            focusable='false'
+            aria-hidden='true'
+            className='mr-2 w-4 h-4'
+          />
+          Ajouter un bénéficiaire
+        </ButtonLink>
+      )}
+    </>
   )
 }

package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "dev": "node server.js | pino-pretty",
+    "watch": "yarn dev",
     "build": "next build",
     "start": "NODE_ENV=production node server.js",
     "lint": "next lint",
@@ -29,7 +30,7 @@
     "jsonwebtoken": "8.5.1",
     "luxon": "3.0.3",
     "matomo-tracker": "2.2.4",
-    "next": "12.3.0",
+    "next": "~12.2.0",
     "next-auth": "4.10.3",
     "next-logger": "3.0.1",
     "pino": "8.5.0",
@@ -60,7 +61,7 @@
     "autoprefixer": "^10.4.9",
     "css-loader": "^6.7.1",
     "eslint": "~8.22.0",
-    "eslint-config-next": "^12.3.0",
+    "eslint-config-next": "~12.2.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-storybook": "^0.6.4",

pages/mes-jeunes.tsx

@@ -78,19 +78,6 @@ function MesJeunes({
   if (messageEnvoiGroupeSuccess) initialTracking += ' - Succès envoi message'
   const [trackingTitle, setTrackingTitle] = useState<string>(initialTracking)
 
-  const handleAddJeune = async () => {
-    switch (conseiller?.structure) {
-      case StructureConseiller.MILO:
-        await router.push('/mes-jeunes/milo/creation-jeune')
-        break
-      case StructureConseiller.POLE_EMPLOI:
-        await router.push('/mes-jeunes/pole-emploi/creation-jeune')
-        break
-      default:
-        break
-    }
-  }
-
   async function closeAjoutAgenceSuccessMessage(): Promise<void> {
     setShowAjoutAgenceSuccess(false)
     await router.replace('/mes-jeunes', undefined, { shallow: true })
@@ -200,10 +187,7 @@ function MesJeunes({
       {conseillerJeunes.length > 0 && (
         <div className={`flex flex-wrap justify-between items-end mb-12`}>
           <RechercheJeune onSearchFilterBy={onSearch} />
-          {(conseiller?.structure === StructureConseiller.MILO ||
-            conseiller?.structure === StructureConseiller.POLE_EMPLOI) && (
-            <AjouterJeuneButton handleAddJeune={handleAddJeune} />
-          )}
+          <AjouterJeuneButton structure={conseiller?.structure} />
         </div>
       )}
 
@@ -219,7 +203,7 @@ function MesJeunes({
               Vous n&apos;avez pas encore intégré de jeunes.
             </p>
 
-            <AjouterJeuneButton handleAddJeune={handleAddJeune} />
+            <AjouterJeuneButton structure={conseiller?.structure} />
           </div>
         )}
 

tests/pages/MesJeunes.page.test.tsx

@@ -37,15 +37,12 @@ jest.mock('utils/injectionDependances/withDependance')
 
 describe('Mes Jeunes', () => {
   describe('client side', () => {
-    let routerPush: Function
     let routerReplace: Function
     let dependances: Pick<Dependencies, 'messagesService' | 'conseillerService'>
     const jeunes = desJeunesAvecActionsNonTerminees()
     beforeEach(() => {
-      routerPush = jest.fn()
       routerReplace = jest.fn()
       ;(useRouter as jest.Mock).mockReturnValue({
-        push: routerPush,
         replace: routerReplace,
       })
 
@@ -203,19 +200,13 @@ describe('Mes Jeunes', () => {
         })
       })
 
-      it('redirige vers la page de création jeune MILO', async () => {
-        // GIVEN
-        const addButton = screen.getByRole('button', {
-          name: 'Ajouter un bénéficiaire',
-        })
-
-        //WHEN
-        await userEvent.click(addButton)
-
+      it('permer de créer un jeune MILO', async () => {
         //THEN
-        expect(routerPush).toHaveBeenCalledWith(
-          '/mes-jeunes/milo/creation-jeune'
-        )
+        expect(
+          screen.getByRole('link', {
+            name: 'Ajouter un bénéficiaire',
+          })
+        ).toHaveAttribute('href', '/mes-jeunes/milo/creation-jeune')
       })
 
       it("affiche la colonne nombre d'actions des jeunes", () => {
@@ -253,19 +244,13 @@ describe('Mes Jeunes', () => {
         })
       })
 
-      it('redirige vers la page de création jeune PE', async () => {
-        // GIVEN
-        const addButton = screen.getByRole('button', {
-          name: 'Ajouter un bénéficiaire',
-        })
-
-        //WHEN
-        await userEvent.click(addButton)
-
+      it('permer de créer un jeune PE', async () => {
         //THEN
-        expect(routerPush).toHaveBeenCalledWith(
-          '/mes-jeunes/pole-emploi/creation-jeune'
-        )
+        expect(
+          screen.getByRole('link', {
+            name: 'Ajouter un bénéficiaire',
+          })
+        ).toHaveAttribute('href', '/mes-jeunes/pole-emploi/creation-jeune')
       })
 
       it("n'affiche pas le nombre d'actions des jeunes", () => {