feat: use next Link component in tab (#1076)

should fix a lot of ChunkLoadError in production fix #969
annuaire-entreprises-data-gouv-fr · May 29, 2024 · 86e3008 · 86e3008
1 parent e3ffcd6
commit 86e3008
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 17 deletions.
diff --git a/components/load-bar/index.tsx b/components/load-bar/index.tsx
@@ -10,6 +10,8 @@ export default function LoadBar({ session }: { session: ISession | null }) {
     const loadBar = loadBarFactory();
     if (typeof window !== 'undefined') {
       window.addEventListener('beforeunload', loadBar.run);
+      window.addEventListener('runloadbar', loadBar.run);
+      window.addEventListener('cancelloadbar', loadBar.cancel);
     }
   }, []);
   return (
@@ -94,5 +96,11 @@ const loadBarFactory = () => {
         await wait(200);
       }
     },
+    cancel: function () {
+      this._currentJobId = '';
+      if (this._loader) {
+        this._loader.style.width = '0';
+      }
+    },
   };
 };
diff --git a/components/title-section/tabs/TabLink.tsx b/components/title-section/tabs/TabLink.tsx
@@ -0,0 +1,35 @@
+'use client';
+import Link from 'next/link';
+import { useEffect } from 'react';
+import styles from './styles.module.css';
+type IProps = {
+  label: string;
+  href: string;
+  noFollow?: boolean;
+  width?: string;
+  active: boolean;
+};
+export default function TabLink({
+  active,
+  href,
+  label,
+  noFollow,
+  width,
+}: IProps) {
+  useEffect(() => {
+    active === false && window.dispatchEvent(new Event('cancelloadbar'));
+  }, [active]);
+  return (
+    <Link
+      className={`${active ? styles.activeLink : ''} no-style-link`}
+      href={href}
+      rel={noFollow ? 'nofollow' : ''}
+      style={{ width }}
+      scroll={false}
+      onClick={() => window.dispatchEvent(new Event('runloadbar'))}
+      prefetch={false}
+    >
+      {active ? label : <h2>{label}</h2>}
+    </Link>
+  );
+}
diff --git a/components/title-section/tabs/index.tsx b/components/title-section/tabs/index.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { PrintNever } from '#components-ui/print-visibility';
 import {
   checkHasLabelsAndCertificates,
@@ -10,6 +11,7 @@ import {
 } from '#models/core/types';
 import { EScope, hasRights } from '#models/user/rights';
 import { ISession } from '#models/user/session';
+import TabLink from './TabLink';
 import styles from './styles.module.css';
 
 export enum FICHE {
@@ -135,30 +137,27 @@ export const Tabs: React.FC<{
               noFollow,
               width = 'auto',
             }) => (
-              <a
-                className={`${
-                  currentFicheType === ficheType ? styles.activeLink : ''
-                } no-style-link`}
+              <TabLink
+                active={currentFicheType === ficheType}
                 href={fullPath || `${pathPrefix}${uniteLegale.siren}`}
-                rel={noFollow ? 'nofollow' : ''}
+                label={label}
+                noFollow={noFollow}
                 key={label}
-                style={{ width }}
-              >
-                {currentFicheType === ficheType ? label : <h2>{label}</h2>}
-              </a>
+                width={width}
+              />
             )
           )}
         {currentFicheType === FICHE.ETABLISSEMENT && (
           <>
             <div style={{ flexGrow: 1 }} />
-            <a
+            <Link
               className={styles.activeLink + ' no-style-link'}
               key="etablissement"
               href=""
               style={{ width: '120px' }}
             >
               <h2>Fiche établissement</h2>
-            </a>
+            </Link>
           </>
         )}
       </div>

diff --git a/components/title-section/tabs/styles.module.css b/components/title-section/tabs/styles.module.css
@@ -20,7 +20,8 @@
     border-bottom: 0;
   }
 }
-.titleTabs > a {
+
+.titleTabs>a {
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border: 2px solid var(--annuaire-colors-pastelBlue);
@@ -35,13 +36,13 @@
   margin-bottom: -2px;
 }
 
-.titleTabs > a > h2 {
+.titleTabs>a>h2 {
   margin: 0;
   padding: 0;
 }
 
-.titleTabs > a,
-.titleTabs > a > h2 {
+.titleTabs>a,
+.titleTabs>a>h2 {
   color: var(--annuaire-colors-frBlue);
   font-weight: bold;
   font-size: 0.9rem;
@@ -56,6 +57,7 @@
   }
 }
 
-.titleTabs > a:hover {
+.titleTabs>a:hover,
+.titleTabs>a:focus {
   background-color: var(--annuaire-colors-pastelBlue);
-}
+}