updates for cache revalidation on the frontend

CHANGELOG.md

@@ -71,6 +71,7 @@ All notable changes to this project will be documented in this file. The format
   - Add Rankings and Results section to listing management ([#1433](https://github.com/bloom-housing/bloom/pull/1433)) (Emily Jablonski)
   - Add Application Address section to listing management ([#1425](https://github.com/bloom-housing/bloom/pull/1425)) (Emily Jablonski)
   - Add Application Dates section to listing management ([#1432](https://github.com/bloom-housing/bloom/pull/1432)) (Emily Jablonski)
+  - Adds cache revalidation to frontend public app
 
 - Fixed:
 

backend/core/src/listings/listings.controller.ts

@@ -104,6 +104,9 @@ export class ListingsController {
   @ApiOperation({ summary: "Get listing by id", operationId: "retrieve" })
   @UseInterceptors(CacheInterceptor)
   async retrieve(@Param("listingId") listingId: string): Promise<ListingDto> {
+    if (listingId === undefined || listingId === "undefined") {
+      return mapTo(ListingDto, {})
+    }
     const result = mapTo(ListingDto, await this.listingsService.findOne(listingId))
 
     return result

sites/public/.env.template

@@ -7,6 +7,8 @@ MAPBOX_TOKEN=pk.eyJ1IjoibWplZHJhcyIsImEiOiJjazI2OHA5YzQycTBpM29xdDVwbXNyMDlwIn0.
 LANGUAGES=en,es,zh,vi
 IDLE_TIMEOUT=5
 COUNTY_CODE=Alameda
+# next js cache revalidate
+CACHE_REVALIDATE=60
 
 # this GTM key is for local development only
 GTM_KEY=GTM-KF22FJP

sites/public/next.config.js

@@ -48,6 +48,9 @@ module.exports = withCSS(
             gtmKey: process.env.GTM_KEY || null,
             idleTimeout: process.env.IDLE_TIMEOUT,
             countyCode: process.env.COUNTY_CODE,
+            cacheRevalidate: process.env.CACHE_REVALIDATE
+              ? Number(process.env.CACHE_REVALIDATE)
+              : 60,
           },
           i18n: {
             locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],

sites/public/pages/index.tsx

@@ -89,5 +89,5 @@ export async function getStaticProps() {
     console.error(error)
   }
 
-  return { props: { listings }, revalidate: 60 }
+  return { props: { listings }, revalidate: process.env.cacheRevalidate }
 }

sites/public/pages/listing/[id]/[slug].tsx

@@ -6,13 +6,19 @@ import { imageUrlFromListing, t } from "@bloom-housing/ui-components"
 import Layout from "../../../layouts/application"
 import { ListingView } from "../../../src/ListingView"
 import { MetaTags } from "../../../src/MetaTags"
+import { ErrorPage } from "../../_error"
 
 interface ListingProps {
   listing: Listing
 }
 
 export default function ListingPage(props: ListingProps) {
   const { listing } = props
+
+  if (!listing) {
+    return <ErrorPage />
+  }
+
   const pageTitle = `${listing.name} - ${t("nav.siteTitle")}`
   const metaDescription = t("pageDescription.listing", {
     regionName: t("region.name"),
@@ -57,14 +63,12 @@ export async function getStaticPaths(context: { locales: Array<string> }) {
 }
 
 export async function getStaticProps(context: { params: Record<string, string> }) {
-  const response = await axios.get(
-    `${process.env.backendApiBase}/listings/${context.params.id}?filter[$comparison]=<>&filter[status]=pending`
-  )
+  const response = await axios.get(`${process.env.backendApiBase}/listings/${context.params.id}`)
 
   return {
     props: {
       listing: response.data,
     },
-    revalidate: 60,
+    revalidate: process.env.cacheRevalidate,
   }
 }

sites/public/pages/listings.tsx

@@ -83,5 +83,5 @@ export async function getStaticProps() {
     console.error(error)
   }
 
-  return { props: { openListings, closedListings }, revalidate: 60 }
+  return { props: { openListings, closedListings }, revalidate: process.env.cacheRevalidate }
 }

sites/public/src/ListingView.tsx

@@ -35,6 +35,7 @@ import {
   ReferralApplication,
 } from "@bloom-housing/ui-components"
 import moment from "moment"
+import { ErrorPage } from "../pages/_error"
 
 interface ListingProps {
   listing: Listing
@@ -45,6 +46,10 @@ export const ListingView = (props: ListingProps) => {
   let buildingSelectionCriteria, preferencesSection
   const { listing, preview = false } = props
 
+  if (!listing) {
+    return <ErrorPage />
+  }
+
   const oneLineAddress = <OneLineAddress address={listing.buildingAddress} />
 
   const googleMapsHref =