create new hook to get current path including the dynamic generated ones using a slug

Author: pettinarip

src/components/Banners.tsx

@@ -1,15 +1,15 @@
 import { FC } from 'react';
-import { useRouter } from 'next/router';
 import { Box, Link } from '@chakra-ui/react';
 
+import { useCurrentPath } from '../hooks/useCurrentPath';
 import { Banner } from './UI';
 
 import { ACADEMIC_GRANTS_URL } from '../constants';
 
 export const Banners: FC = () => {
-  const router = useRouter();
+  const path = useCurrentPath();
 
-  if (!router.pathname.includes(ACADEMIC_GRANTS_URL)) {
+  if (!path.includes(ACADEMIC_GRANTS_URL)) {
     return (
       <Banner>
         <Box fontSize='paragraph' textAlign='center'>

src/components/layout/Layout.tsx

@@ -1,8 +1,8 @@
 import { Box, Container, ContainerProps } from '@chakra-ui/react';
 import { FC, ReactNode } from 'react';
-import { useRouter } from 'next/router';
 
 import { Footer, FooterBackgroundImage, HomepageHero } from '../UI';
+import { useCurrentPath } from '../../hooks/useCurrentPath';
 import { Forms } from '../forms';
 
 import {
@@ -40,10 +40,10 @@ import {
 } from '../../constants';
 
 export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
-  const router = useRouter();
+  const path = useCurrentPath();
 
   const renderContent = (): ReactNode => {
-    if (router.pathname === HOME_URL) {
+    if (path === HOME_URL) {
       return (
         <>
           <HomepageHero />
@@ -53,7 +53,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname.startsWith(APPLICANTS_URL)) {
+    if (path.startsWith(APPLICANTS_URL)) {
       return (
         <Box mt={-6}>
           <main>
@@ -63,7 +63,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname.startsWith(ABOUT_URL)) {
+    if (path.startsWith(ABOUT_URL)) {
       return (
         <Box mt={-6}>
           <main>
@@ -73,7 +73,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === DEVCON_GRANTS_URL) {
+    if (path === DEVCON_GRANTS_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -83,7 +83,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === ACADEMIC_GRANTS_2022_URL) {
+    if (path === ACADEMIC_GRANTS_2022_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -93,7 +93,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === ACADEMIC_GRANTS_2023_URL) {
+    if (path === ACADEMIC_GRANTS_2023_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -103,7 +103,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === ACADEMIC_GRANTS_URL) {
+    if (path === ACADEMIC_GRANTS_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -113,7 +113,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === MERGE_DATA_CHALLENGE_URL) {
+    if (path === MERGE_DATA_CHALLENGE_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -124,7 +124,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
     }
 
     // TODO: refactor these if conditions ????
-    if (router.pathname === SEMAPHORE_GRANT_URL) {
+    if (path === SEMAPHORE_GRANT_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -134,7 +134,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === LAYER_2_GRANTS_URL) {
+    if (path === LAYER_2_GRANTS_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -144,7 +144,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === ACCOUNT_ABSTRACTION_GRANTS_URL) {
+    if (path === ACCOUNT_ABSTRACTION_GRANTS_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -154,7 +154,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === RUN_A_NODE_GRANTS_URL) {
+    if (path === RUN_A_NODE_GRANTS_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -164,7 +164,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (router.pathname === DATA_COLLECTION_ROUND_URL) {
+    if (path === DATA_COLLECTION_ROUND_URL) {
       return (
         <Box mt={{ md: -10, lg: 0 }}>
           <main>
@@ -174,7 +174,7 @@ export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
       );
     }
 
-    if (GRANTS_URLS.includes(router.pathname)) {
+    if (GRANTS_URLS.includes(path)) {
       return (
         <Box mt={-6}>
           <main>

src/hooks/useCurrentPath.ts

@@ -0,0 +1,9 @@
+import { useRouter } from 'next/router';
+
+// Gets the current path from the slug param (if this is a dynamic route) or the
+// router pathname (if this is a static route)
+export const useCurrentPath = () => {
+  const { query, pathname } = useRouter();
+
+  return query.slug ? query.slug.toString() : pathname;
+};

src/pages/_app.tsx

@@ -2,11 +2,11 @@ import { useEffect } from 'react';
 import { ChakraProvider } from '@chakra-ui/react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
 import { init, push } from '@socialgouv/matomo-next';
 
 import { Layout } from '../components/layout';
 import { Banners } from '../components';
+import { useCurrentPath } from '../hooks/useCurrentPath';
 
 import { getBg, getBgGradient, getLayoutHeight } from '../utils';
 
@@ -24,7 +24,7 @@ import favicon16 from '../../public/images/favicon-16x16.png';
 import favicon32 from '../../public/images/favicon-32x32.png';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const router = useRouter();
+  const path = useCurrentPath();
 
   useEffect(() => {
     init({
@@ -47,9 +47,9 @@ function MyApp({ Component, pageProps }: AppProps) {
 
         <Layout
           position='relative'
-          bg={getBg(router.pathname)}
-          bgGradient={getBgGradient(router.pathname)}
-          h={{ base: '600px', lg: getLayoutHeight(router.pathname) }}
+          bg={getBg(path)}
+          bgGradient={getBgGradient(path)}
+          h={{ base: '600px', lg: getLayoutHeight(path) }}
         >
           <Component {...pageProps} />
         </Layout>