From b2ae67268a65ecc04da53178e31600bc11854ea0 Mon Sep 17 00:00:00 2001
From: Charles-Pham <charles.pham@hrsdc-rhdcc.gc.ca>
Date: Tue, 31 Dec 2024 11:20:48 -0700
Subject: [PATCH] Convert layout to typescript

---
 components/Footer.tsx                |   8 +-
 components/Header.tsx                |   8 +-
 components/{Layout.js => Layout.tsx} | 138 +++++++++------------------
 components/Menu.tsx                  |   4 +-
 components/MetaData.tsx              |   2 +-
 5 files changed, 54 insertions(+), 106 deletions(-)
 rename components/{Layout.js => Layout.tsx} (61%)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index b9b21a669..4f9659b8e 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -10,24 +10,24 @@ interface Links {
   id: string
   text: string
   href: string
-  onClick: () => void
+  onClick?: () => void
 }
 
 interface FooterProps {
   id: string
   lang: 'en' | 'fr' | 'und'
   btnLink: string
-  error: boolean
+  error?: boolean
   contactLink: string
   brandLinks: Links[]
-  target: string
+  target?: string
 }
 
 const Footer = ({
   id = 'mscaPlaceholder',
   lang = 'en',
   btnLink,
-  error,
+  error = false,
   contactLink = 'https://www.canada.ca/en/contact.html',
   brandLinks = [
     {
diff --git a/components/Header.tsx b/components/Header.tsx
index b388554b1..4cde2c02d 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -12,7 +12,7 @@ interface SearchProps {
 }
 
 interface MenuProps {
-  onSignOut: () => void
+  onSignOut?: () => void
   menuList: MenuList[]
 }
 
@@ -21,8 +21,8 @@ interface MenuList {
   key: string
   value: string
   path: string
-  showIcon: boolean
-  onSignOut: () => void
+  showIcon?: boolean
+  onSignOut?: () => void
 }
 
 interface TopNavProps {
@@ -32,7 +32,7 @@ interface TopNavProps {
   displayAlternateLink: boolean
 }
 
-interface BreadcrumbItemProps {
+export interface BreadcrumbItemProps {
   text: string
   link: string
 }
diff --git a/components/Layout.js b/components/Layout.tsx
similarity index 61%
rename from components/Layout.js
rename to components/Layout.tsx
index 0a8196253..6f8a7f787 100644
--- a/components/Layout.js
+++ b/components/Layout.tsx
@@ -2,49 +2,40 @@ import throttle from 'lodash.throttle'
 import { signOut } from 'next-auth/react'
 import getConfig from 'next/config'
 import { useRouter } from 'next/router'
-import PropTypes from 'prop-types'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
 import en from '../locales/en'
 import fr from '../locales/fr'
 import { lato, notoSans } from '../utils/fonts'
 import Footer from './Footer'
-import Header from './Header'
+import Header, { BreadcrumbItemProps } from './Header'
 import IdleTimeout from './IdleTimeout'
-import MetaData from './MetaData'
+import MetaData, { Data } from './MetaData'
 
-export default function Layout(
-  props = {
-    locale: 'en',
-    meta: '',
-    langToggleLink: '',
-    breadCrumbItems: [],
-    bannerContent: {
-      bannerBoldText: '',
-      bannerText: '',
-      bannerLink: '',
-      bannerLinkHref: '',
-      bannerSummaryTitle: '',
-      bannerSummaryContent: '',
-      bannerButtonText: '',
-      bannerButtonLink: '',
-      icon: '',
-    },
-    popupContentNA,
-    content,
-    popupContent,
-    display: { hideBanner: true },
-    popupStaySignedIn,
-    refPageAA,
-    dataGcAnalyticsCustomClickMenuVariable,
-    title: 'Service.Canada.ca',
-  },
-) {
-  const t = props.locale === 'en' ? en : fr
-  const [response, setResponse] = useState()
+interface LayoutProps {
+  locale?: 'en' | 'fr' | 'und'
+  meta: Data
+  langToggleLink?: string
+  breadCrumbItems?: BreadcrumbItemProps[]
+  display?: { hideBanner: boolean }
+  refPageAA: string
+  dataGcAnalyticsCustomClickMenuVariable: string
+  title: string
+  children: ReactElement
+}
+
+export default function Layout({
+  locale = 'en',
+  langToggleLink = '',
+  breadCrumbItems = [],
+  meta,
+  refPageAA,
+  children,
+  dataGcAnalyticsCustomClickMenuVariable,
+}: LayoutProps) {
+  const t = locale === 'en' ? en : fr
+  const [response, setResponse] = useState<Response>()
   const router = useRouter()
-  const defaultBreadcrumbs = []
-  const contactLink =
-    props.locale === 'en' ? '/en/contact-us' : '/fr/contactez-nous'
+  const contactLink = locale === 'en' ? '/en/contact-us' : '/fr/contactez-nous'
 
   const validationResponse = useCallback(
     async () => setResponse(await fetch('/api/refresh-msca')),
@@ -68,7 +59,7 @@ export default function Layout(
     //If validateSession call indicates an invalid MSCA session, end next-auth session and redirect to login
     if (response?.status === 401) {
       signOut()
-      router.push(`/${props.locale}/auth/login`)
+      router.push(`/${locale}/auth/login`)
     }
     //Remove event on unmount to prevent a memory leak with the cleanup
     return () => {
@@ -83,7 +74,7 @@ export default function Layout(
     throttledVisiblityChangeEvent,
     response,
     router,
-    props.locale,
+    locale,
   ])
 
   return (
@@ -94,54 +85,45 @@ export default function Layout(
           --noto-sans-font: ${notoSans.style.fontFamily};
         }
       `}</style>
-      <MetaData language={props.locale} data={props.meta}></MetaData>
+      <MetaData language={locale} data={meta}></MetaData>
       <Header
-        legacyBehavior
-        dataTestId="topnav"
         id="header"
-        linkPath={props.langToggleLink}
-        lang={props.locale}
-        breadCrumbItems={
-          props.breadCrumbItems ? props.breadCrumbItems : defaultBreadcrumbs
-        }
-        refPageAA={props.refPageAA}
+        linkPath={langToggleLink}
+        lang={locale}
+        breadCrumbItems={breadCrumbItems}
+        refPageAA={refPageAA}
         topnavProps={{
           skipToMainPath: '#mainContent',
           skipToAboutPath: '#page-footer',
           switchToBasicPath: '',
           displayAlternateLink: false,
         }}
-        dataGcAnalyticsCustomClickInstitutionVariable={
-          props.children.props.aaPrefix
-        }
+        dataGcAnalyticsCustomClickInstitutionVariable={children.props.aaPrefix}
         dataGcAnalyticsCustomClickMenuVariable={
-          props.dataGcAnalyticsCustomClickMenuVariable
+          dataGcAnalyticsCustomClickMenuVariable
         }
         menuProps={{
-          legacyBehavior: true,
           menuList: [
             {
               key: 'dashKey',
               id: 'my-dashboard',
               value: t.menuItems.dashboard,
               path: `${
-                props.locale === 'en'
-                  ? '/en/my-dashboard'
-                  : '/fr/mon-tableau-de-bord'
+                locale === 'en' ? '/en/my-dashboard' : '/fr/mon-tableau-de-bord'
               }`,
             },
             {
               key: 'profileKey',
               id: 'profile',
               value: t.menuItems.profile,
-              path: `${props.locale === 'en' ? '/en/profile' : '/fr/profil'}`,
+              path: `${locale === 'en' ? '/en/profile' : '/fr/profil'}`,
             },
             {
               key: 'securityKey',
               id: 'security',
               value: t.menuItems.security,
               path: `${
-                props.locale === 'en'
+                locale === 'en'
                   ? '/en/security-settings'
                   : '/fr/parametres-securite'
               }`,
@@ -151,7 +133,7 @@ export default function Layout(
               id: 'contact',
               value: t.menuItems.contactUs,
               path: `${
-                props.locale === 'en' ? '/en/contact-us' : '/fr/contactez-nous'
+                locale === 'en' ? '/en/contact-us' : '/fr/contactez-nous'
               }`,
             },
             {
@@ -169,11 +151,11 @@ export default function Layout(
         }}
       />
       <main id="mainContent" className="sch-container grid gap-[30px]">
-        {props.children}
+        {children}
       </main>
-      <IdleTimeout locale={props.locale} refPageAA={props.refPageAA} />
+      <IdleTimeout locale={locale} refPageAA={refPageAA} />
       <Footer
-        lang={!props.locale ? 'en' : props.locale}
+        lang={locale}
         brandLinks={[
           {
             href:
@@ -199,37 +181,3 @@ export default function Layout(
     </>
   )
 }
-
-Layout.propTypes = {
-  /*
-   * Locale current language
-   */
-  locale: PropTypes.string,
-  /*
-   * Meta Tags
-   */
-  meta: PropTypes.object,
-  /*
-   * Title of the page
-   */
-  title: PropTypes.string,
-  /*
-   * Link of the page in opposite language
-   */
-  langToggleLink: PropTypes.string,
-  display: PropTypes.shape({
-    /*
-     * Toggle use of Phase (default false)
-     */
-    hideBanner: PropTypes.bool,
-    /*
-     * Toggle use of DS header (default false)
-     */
-    hideHeader: PropTypes.bool,
-    /*
-     * Toggle use of DS footer (default false)
-     */
-    hideFooter: PropTypes.bool,
-  }),
-  breadCrumbItems: PropTypes.array,
-}
diff --git a/components/Menu.tsx b/components/Menu.tsx
index 9118fe0a4..c5be35c01 100644
--- a/components/Menu.tsx
+++ b/components/Menu.tsx
@@ -6,8 +6,8 @@ interface MenuItem {
   key: string
   value: string
   path: string
-  showIcon: boolean
-  onSignOut: () => void
+  showIcon?: boolean
+  onSignOut?: () => void
 }
 
 interface MenuProps {
diff --git a/components/MetaData.tsx b/components/MetaData.tsx
index da8047448..c206ecd97 100644
--- a/components/MetaData.tsx
+++ b/components/MetaData.tsx
@@ -10,7 +10,7 @@ interface Content {
   service: string
 }
 
-interface Data {
+export interface Data {
   data_en: Content
   data_fr: Content
 }