Merge pull request #787 from DTS-STN/typescript-conversion

Convert app, refresh, and metrics to typescript

components/Layout.tsx

@@ -19,7 +19,6 @@ interface LayoutProps {
   display?: { hideBanner: boolean }
   refPageAA: string
   dataGcAnalyticsCustomClickMenuVariable: string
-  title: string
   children: ReactElement
 }
 

pages/_app.js → pages/_app.tsx

@@ -5,39 +5,55 @@ import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 import Modal from 'react-modal'
 import ErrorBoundary from '../components/ErrorBoundary'
-import { useEffect } from 'react'
+import { ReactElement, ReactNode, useEffect } from 'react'
+import { AppProps } from 'next/app'
+import { NextPage } from 'next'
 config.autoAddCss = false
 
-// To help prevent double firing of adobe analytics pageLoad event
-let appPreviousLocationPathname = ''
+declare const window: Window & { adobeDataLayer?: Record<string, unknown>[] }
 
-export default function MyApp({ Component, pageProps, router }) {
-  /* istanbul ignore next */
-  if (Component.getLayout) {
-    return Component.getLayout(<Component {...pageProps} />)
-  }
+export type NextPageWithLayout<P = object, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode
+}
 
-  Modal.setAppElement('#__next')
-  const display = { hideBanner: pageProps.hideBanner }
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout
+}
 
+// To help prevent double firing of adobe analytics pageLoad event
+let appPreviousLocationPathname = ''
+
+export default function MyApp({
+  Component,
+  pageProps,
+  router,
+}: AppPropsWithLayout) {
   /** Web Analytics - taken from Google Analytics example
    *  @see https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
    * */
   useEffect(() => {
     // only push event if pathname is different
     if (window.location.pathname !== appPreviousLocationPathname) {
       if (pageProps.errType !== undefined) {
-        window.adobeDataLayer?.push?.({
+        window.adobeDataLayer?.push({
           event: 'error',
           error: pageProps.errType,
         })
       } else {
-        window.adobeDataLayer?.push?.({ event: 'pageLoad' })
+        window.adobeDataLayer?.push({ event: 'pageLoad' })
       }
       appPreviousLocationPathname = window.location.pathname
     }
   }, [router.asPath, pageProps.errType])
 
+  /* istanbul ignore next */
+  if (Component.getLayout) {
+    return Component.getLayout(<Component {...pageProps} />)
+  }
+
+  Modal.setAppElement('#__next')
+  const display = { hideBanner: pageProps.hideBanner }
+
   /* istanbul ignore next */
   return (
     <ErrorBoundary>
@@ -46,12 +62,7 @@ export default function MyApp({ Component, pageProps, router }) {
         meta={pageProps.meta}
         langToggleLink={pageProps.langToggleLink}
         breadCrumbItems={pageProps.breadCrumbItems}
-        bannerContent={pageProps.bannerContent}
-        popupContentNA={pageProps.popupContentNA}
-        content={pageProps.content}
-        popupContent={pageProps.popupContent}
         display={display}
-        popupStaySignedIn={pageProps.popupStaySignedIn}
         refPageAA={pageProps.aaPrefix}
         dataGcAnalyticsCustomClickMenuVariable={pageProps.aaMenuPrefix}
       >

pages/api/metrics.js → pages/api/metrics.ts

@@ -1,10 +1,11 @@
+import { NextApiRequest, NextApiResponse } from 'next'
 import { register, collectDefaultMetrics } from 'prom-client'
 
 /* istanbul ignore next */
 collectDefaultMetrics({ prefix: 'omnidevfrontend_' })
 
 /* istanbul ignore next */
-export default function handler(req, res) {
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
   res.setHeader('Content-type', register.contentType)
   res.send(register.metrics())
 }

pages/api/refresh-msca.js → pages/api/refresh-msca.ts

@@ -3,24 +3,26 @@
  *
  */
 
+import { NextApiRequest, NextApiResponse } from 'next'
 import {
   AuthIsDisabled,
   AuthIsValid,
   ValidateSession,
   getIdToken,
 } from '../../lib/auth'
 import { getLogger } from '../../logging/log-util'
-import { authOptions } from '../../pages/api/auth/[...nextauth]'
+import { authOptions } from './auth/[...nextauth]'
 import { getServerSession } from 'next-auth/next'
-
-// Including crypto module
-const crypto = require('crypto')
+import * as crypto from 'crypto'
 
 //The below sets the minimum logging level to error and surpresses everything below that
 const logger = getLogger('refresh-msca')
 logger.level = 'error'
 
-export default async function handler(req, res) {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   const session = await getServerSession(req, res, authOptions)
   const token = await getIdToken(req)
   //Generate a random id for each request to ensure unique responses/no caching
@@ -33,10 +35,8 @@ export default async function handler(req, res) {
       res.status(503).json({ success: false })
     } else if (await AuthIsValid(req, session)) {
       //If auth session is valid, make GET request to validateSession endpoint
-      const sessionValid = await ValidateSession(
-        process.env.CLIENT_ID,
-        token.sid,
-      )
+      const sessionValid =
+        token && (await ValidateSession(process.env.CLIENT_ID, token.sid))
       if (sessionValid) {
         res.status(200).json({ success: sessionValid, id: id })
       } else {