Tweaked alerts so pages is optional

src/components/AlertBlock.tsx

@@ -8,7 +8,7 @@ import AlertSection from './AlertSection'
 import MarkdownContent from './MarkdownContent'
 
 export interface AlertBlockProps {
-  page: AlertPage
+  page?: AlertPage
   className?: string
 }
 
@@ -23,7 +23,7 @@ const AlertBlock: FC<AlertBlockProps> = ({ page, className }) => {
           <AlertSection key={alert.uid} type={alert.type} className="mt-4 mb-4">
             <MarkdownContent
               markdown={i18n.language === 'fr' ? alert.textFr : alert.textEn}
-              header={page === 'all'}
+              header={page === undefined}
             />
           </AlertSection>
         )

src/components/Layout.tsx

@@ -24,7 +24,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
         id="mainContent"
         className="container mx-auto mt-5 flex-1 px-4 pb-8"
       >
-        <AlertBlock page="all" />
+        <AlertBlock />
         {children}
       </main>
       <Footer

src/lib/types.ts

@@ -3,7 +3,6 @@ export type AppWindow = Window &
   typeof globalThis & { adobeDataLayer?: AdobeDataLayer }
 
 export type AlertPage =
-  | 'all'
   | 'email'
   | 'expectations'
   | 'landing'
@@ -18,7 +17,7 @@ export type AlertPage =
 export type AlertType = 'danger' | 'info' | 'warning' | 'success'
 
 export interface AlertApiRequestQuery {
-  page: AlertPage
+  page?: AlertPage
 }
 
 export interface AlertJsonResponse {
@@ -33,7 +32,7 @@ export interface Alert {
 }
 
 export interface AlertMeta extends Alert {
-  pages: AlertPage[]
+  pages?: AlertPage[]
   validFrom: Date
   validTo: Date
 }

src/lib/useAlerts.ts

@@ -9,7 +9,10 @@ export const fetchAlerts = async (
   const query = new URLSearchParams({
     ...alertQuery,
   }).toString()
-  const response = await fetch('/api/alerts?' + query, { cache: 'no-store' })
+  let uri = alertQuery.page ? `/api/alerts?${query}` : `/api/alerts`
+  const response = await fetch(uri, {
+    headers: { 'Cache-Control': 'max-age=600' },
+  })
   if (response.ok) {
     return response.json()
   }

src/pages/api/alerts.ts

@@ -9,46 +9,53 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Alert[] | string>
 ) {
-  if (!process.env.ALERT_JSON_URI) {
-    logger.error('ALERT_JSON_URI must not be undefined, null or empty')
-    throw Error(
-      'process.env.ALERT_JSON_URI must not be undefined, null or empty'
-    )
-  }
+  try {
+    if (!process.env.ALERT_JSON_URI) {
+      logger.error('ALERT_JSON_URI must not be undefined, null or empty')
+      throw Error(
+        'process.env.ALERT_JSON_URI must not be undefined, null or empty'
+      )
+    }
 
-  if (req.method !== 'GET') {
-    res.status(405).send(`Invalid request method ${req.method}`)
-    return
-  }
+    if (req.method !== 'GET') {
+      res.status(405).send(`Invalid request method ${req.method}`)
+      return
+    }
 
-  const query = req.query
-  const { page } = query
+    const query = req.query
+    const { page } = query
 
-  let now = new Date()
+    const now = new Date()
 
-  try {
-    const alertJson = await fetch(process.env.ALERT_JSON_URI)
+    const alertJson = await fetch(process.env.ALERT_JSON_URI, {
+      headers: { 'Cache-Control': 'max-age=600' },
+    })
     const alertData: AlertJsonResponse = await alertJson.json()
 
-    let alerts: Alert[] = alertData?.jsonAlerts
-      .filter(
-        (alert) =>
-          alert.pages.find((alertPage) => alertPage === page) &&
-          new Date(alert.validFrom) <= now &&
-          new Date(alert.validTo) >= now
-      )
-      .map((alert) => ({
-        uid: alert.uid,
-        textEn: alert.textEn,
-        textFr: alert.textFr,
-        type: alert.type,
-      }))
+    const validAlerts = alertData?.jsonAlerts.filter(
+      (alert) =>
+        new Date(alert.validFrom) <= now && new Date(alert.validTo) >= now
+    )
+
+    const pageAlerts = page
+      ? validAlerts.filter((alert) =>
+          alert.pages?.find((alertPage) => alertPage === page)
+        )
+      : validAlerts.filter(
+          (alert) => alert.pages === undefined || alert.pages?.length === 0
+        )
+
+    const alerts: Alert[] = pageAlerts.map((alert) => ({
+      uid: alert.uid,
+      textEn: alert.textEn,
+      textFr: alert.textFr,
+      type: alert.type,
+    }))
 
     return res.status(200).json(alerts)
   } catch (error) {
-    // For alerts we want to silently fail, shouldn't show as a failure to the user.
-    // We'll catch it in the logs, but to them it should just look like there are no alerts.
+    // If there's a problem with the alerts, we return 500 but with an empty list
     logger.error(error, 'Failed to fetch alerts')
-    res.status(200).json([])
+    return res.status(500).json([])
   }
 }