Reapply "✨ Take back algolia #2657" (#2718)

* Reapply "✨ Take back algolia #2657" This reverts commit 79e16c1. * 💚 Fix CI build #2657 * ✨ Revalidate newsroom pages #2657 * 🐛 Refactor to revalidate only after indexing #2657 * Missed await * ⚡️ Hack to avoid algolia requests * 💄 Style filter button #2657 * ⚡️ Add wait #2657 * 🔥 Remove the need for filter click #2657
equinor · Jan 15, 2025 · d9fb33a · d9fb33a
1 parent acc8276
commit d9fb33a
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 501 deletions.
diff --git a/web/pages/api/update-algolia-indexes.js b/web/pages/api/update-algolia-indexes.js
@@ -14,15 +14,49 @@ export const config = {
   },
 }
 
+const updateAlgoliaIndex = async (body) => {
+  const headersList = {
+    Accept: '*/*',
+  }
+  const response = await fetch(ALGOLIA_FUNCTION_URL, {
+    method: 'POST',
+    headers: headersList,
+    body,
+  })
+  return response
+}
+
 export default async function handler(req, res) {
   const signature = req.headers[SIGNATURE_HEADER_NAME]
   const body = (await getRawBody(req)).toString()
 
   if (!isValidSignature(body, signature, SANITY_API_TOKEN)) {
-    console.log(req, 'Unauthorized request: Revalidate Endpoint')
+    console.log(req, 'Unauthorized request: Update Algolia indexes Endpoint')
     return res.status(401).json({ success: false, msg: 'Unauthorized!' })
   }
   const data = JSON.parse(body)
+
+  const revalidateNewsroomPages = async () => {
+    console.log(new Date(), 'Revalidating: /news')
+    res.revalidate(`/news`)
+    console.log(new Date(), 'Revalidating: /no/nyheter')
+    res.revalidate('/no/nyheter')
+  }
+
+  if (data._type === 'news') {
+    // wait for news index and revalidate...
+    const response = await updateAlgoliaIndex(body)
+    if (response.status == 204) {
+      console.log('Algolia Indexing Success , Revalidating newsroom')
+      // wait for a second revalidate newsroom pages
+      const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+      await sleep(1000) // wait for a second to let algolia index temporary fix as we dont know the status yet
+      await revalidateNewsroomPages()
+      return res.status(200).json('Index updated and newsroom revalidated')
+    } else {
+      return res.status(400).json(response.body)
+    }
+  }
   const result = await sanityClient.fetch(
     groq`*[_type match "route_*" && content._ref == $id && excludeFromSearch != true][0]{"slug": slug.current}`,
     {
@@ -32,14 +66,7 @@ export default async function handler(req, res) {
   try {
     if (result?.slug) {
       // slug exists for the topic or event
-      const headersList = {
-        Accept: '*/*',
-      }
-      const response = await fetch(ALGOLIA_FUNCTION_URL, {
-        method: 'POST',
-        headers: headersList,
-        body,
-      })
+      const response = updateAlgoliaIndex(body)
       if (response.status == 204) {
         return res.status(200).json('Index updated')
       } else {

diff --git a/web/pages/news/index.global.tsx b/web/pages/news/index.global.tsx
@@ -1,29 +1,41 @@
-import { GetServerSideProps } from 'next'
+import { GetStaticProps } from 'next'
 import type { AppProps } from 'next/app'
 import { IntlProvider } from 'react-intl'
 import Footer from '../../pageComponents/shared/Footer'
 import Header from '../../pageComponents/shared/Header'
-import { allNewsDocuments, newsroomQuery } from '../../lib/queries/newsroom'
+import { renderToString } from 'react-dom/server'
+import { newsroomQuery } from '../../lib/queries/newsroom'
 import getIntl from '../../common/helpers/getIntl'
 import { getNameFromLocale, getIsoFromLocale } from '../../lib/localization'
 import { defaultLanguage } from '../../languages'
 import { AlgoliaIndexPageType, NewsRoomPageType } from '../../types'
-import { getComponentsData, getData } from '../../lib/fetchData'
-import NewsRoomTemplateSanity from '@templates/newsroom/sanity/NewsroomSanity'
+import { getComponentsData } from '../../lib/fetchData'
+import NewsRoomTemplate from '@templates/newsroom/Newsroom'
+import { getServerState, InstantSearchSSRProvider } from 'react-instantsearch'
+import { Flags } from '../../common/helpers/datasetHelpers'
+import algoliasearch from 'algoliasearch/lite'
+import { algolia } from '../../lib/config'
 
-export default function NewsRoom({ data }: AlgoliaIndexPageType) {
+export default function NewsRoom({ data, serverState }: AlgoliaIndexPageType) {
   const defaultLocale = defaultLanguage.locale
   const { pageData, slug, intl } = data
   const locale = data?.intl?.locale || defaultLocale
 
   return (
-    <IntlProvider
-      locale={getIsoFromLocale(locale)}
-      defaultLocale={getIsoFromLocale(defaultLocale)}
-      messages={intl?.messages}
-    >
-      <NewsRoomTemplateSanity locale={locale} pageData={pageData as NewsRoomPageType} slug={slug} />
-    </IntlProvider>
+    <InstantSearchSSRProvider {...serverState}>
+      <IntlProvider
+        locale={getIsoFromLocale(locale)}
+        defaultLocale={getIsoFromLocale(defaultLocale)}
+        messages={intl?.messages}
+      >
+        <NewsRoomTemplate
+          locale={locale}
+          pageData={pageData as NewsRoomPageType}
+          initialSearchResponse={data.response}
+          slug={slug}
+        />
+      </IntlProvider>
+    </InstantSearchSSRProvider>
   )
 }
 
@@ -56,7 +68,7 @@ NewsRoom.getLayout = (page: AppProps) => {
   )
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req, preview = false, locale = 'en' }) => {
+export const getStaticProps: GetStaticProps = async ({ preview = false, locale = 'en' }) => {
   // For the time being, let's just give 404 for satellites
   // We will also return 404 if the locale is not English.
   // This is a hack and and we should improve this at some point
@@ -71,12 +83,22 @@ export const getServerSideProps: GetServerSideProps = async ({ req, preview = fa
   const lang = getNameFromLocale(locale)
   const intl = await getIntl(locale, false)
 
+  const envPrefix = Flags.IS_GLOBAL_PROD ? 'prod' : 'dev'
+  const indexName = `${envPrefix}_NEWS_en-GB`
+
+  const searchClient = algoliasearch(algolia.applicationId, algolia.searchApiKey)
+  const index = searchClient.initIndex(indexName)
+  const response = await index.search('', {
+    hitsPerPage: 50,
+    facetFilters: ['type:news', 'topicTags:-Crude Oil Assays'],
+    facetingAfterDistinct: true,
+    facets: ['countryTags', 'topicTags', 'year'],
+  })
+
   const queryParams = {
     lang,
   }
 
-  const slug = req.url
-
   const { menuData, pageData, footerData } = await getComponentsData(
     {
       query: newsroomQuery,
@@ -85,26 +107,19 @@ export const getServerSideProps: GetServerSideProps = async ({ req, preview = fa
     preview,
   )
 
-  console.log(JSON.stringify(req.headers))
-  const url = new URL(req.headers.referer || `https://${req.headers.host}${req.url}`).toString()
-  const { data } = await getData({
-    query: allNewsDocuments,
-    queryParams,
+  const serverState = await getServerState(<NewsRoom data={{ menuData, pageData, footerData, intl, response }} />, {
+    renderToString,
   })
-
   return {
     props: {
-      url,
       data: {
         menuData,
         footerData,
         intl,
-        pageData: {
-          ...pageData,
-          newsArticles: data,
-        },
-        slug,
+        pageData,
+        response,
       },
+      serverState,
     },
   }
 }
diff --git a/web/pages/nyheter/index.global.tsx b/web/pages/nyheter/index.global.tsx
@@ -1,29 +1,41 @@
-import { GetServerSideProps } from 'next'
+import { GetStaticProps } from 'next'
 import type { AppProps } from 'next/app'
 import { IntlProvider } from 'react-intl'
 import Footer from '../../pageComponents/shared/Footer'
 import Header from '../../pageComponents/shared/Header'
-import { allNewsDocuments, newsroomQuery } from '../../lib/queries/newsroom'
+import { renderToString } from 'react-dom/server'
+import { newsroomQuery } from '../../lib/queries/newsroom'
 import getIntl from '../../common/helpers/getIntl'
 import { getNameFromLocale, getIsoFromLocale } from '../../lib/localization'
 import { defaultLanguage } from '../../languages'
 import { AlgoliaIndexPageType, NewsRoomPageType } from '../../types'
-import { getComponentsData, getData } from '../../lib/fetchData'
-import NewsRoomTemplateSanity from '@templates/newsroom/sanity/NewsroomSanity'
+import { getComponentsData } from '../../lib/fetchData'
+import NewsRoomTemplate from '@templates/newsroom/Newsroom'
+import { getServerState, InstantSearchSSRProvider } from 'react-instantsearch'
+import algoliasearch from 'algoliasearch'
+import { algolia } from '../../lib/config'
+import { Flags } from '../../common/helpers/datasetHelpers'
 
-export default function NorwegianNewsRoom({ data, url }: AlgoliaIndexPageType) {
+export default function NorwegianNewsRoom({ data, serverState }: AlgoliaIndexPageType) {
   const defaultLocale = defaultLanguage.locale
   const { pageData, slug, intl } = data
   const locale = intl?.locale || defaultLocale
 
   return (
-    <IntlProvider
-      locale={getIsoFromLocale(locale)}
-      defaultLocale={getIsoFromLocale(defaultLocale)}
-      messages={intl?.messages}
-    >
-      <NewsRoomTemplateSanity locale={locale} pageData={pageData as NewsRoomPageType} slug={slug} url={url} />
-    </IntlProvider>
+    <InstantSearchSSRProvider {...serverState}>
+      <IntlProvider
+        locale={getIsoFromLocale(locale)}
+        defaultLocale={getIsoFromLocale(defaultLocale)}
+        messages={intl?.messages}
+      >
+        <NewsRoomTemplate
+          locale={locale}
+          pageData={pageData as NewsRoomPageType}
+          initialSearchResponse={data.response}
+          slug={slug}
+        />
+      </IntlProvider>
+    </InstantSearchSSRProvider>
   )
 }
 
@@ -32,6 +44,8 @@ NorwegianNewsRoom.getLayout = (page: AppProps) => {
   // @ts-ignore
   const { props } = page
   const { data } = props
+
+  // Too hardcoded?
   const slugs = [
     { slug: '/news', lang: 'en_GB' },
     { slug: '/nyheter', lang: 'nb_NO' },
@@ -54,10 +68,10 @@ NorwegianNewsRoom.getLayout = (page: AppProps) => {
   )
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req, preview = false, locale = 'no' }) => {
+export const getStaticProps: GetStaticProps = async ({ preview = false, locale = 'en' }) => {
   // For the time being, let's just give 404 for satellites
-  // We will also return 404 if the locale is not Norwegian.
-  // This is a hack, and we should improve this at some point
+  // We will also return 404 if the locale is not English.
+  // This is a hack and and we should improve this at some point
   // See https://github.com/vercel/next.js/discussions/18485
 
   if (locale !== 'no') {
@@ -69,39 +83,46 @@ export const getServerSideProps: GetServerSideProps = async ({ req, preview = fa
   const lang = getNameFromLocale(locale)
   const intl = await getIntl(locale, false)
 
-  const url = new URL(req.headers.referer || `https://${req.headers.host}${req.url}`).toString()
+  const envPrefix = Flags.IS_GLOBAL_PROD ? 'prod' : 'dev'
+  const indexName = `${envPrefix}_NEWS_nb-NO`
+
+  const searchClient = algoliasearch(algolia.applicationId, algolia.searchApiKey)
+  const index = searchClient.initIndex(indexName)
+  const response = await index.search('', {
+    hitsPerPage: 50,
+    facetFilters: ['type:news', 'topicTags:-Crude Oil Assays'],
+    facetingAfterDistinct: true,
+    facets: ['countryTags', 'topicTags', 'year'],
+  })
+
   const queryParams = {
     lang,
   }
 
-  const slug = req.url
-
   const { menuData, pageData, footerData } = await getComponentsData(
     {
       query: newsroomQuery,
       queryParams,
     },
     preview,
   )
-  const { data } = await getData({
-    query: allNewsDocuments,
-    queryParams,
-  })
 
+  const serverState = await getServerState(
+    <NorwegianNewsRoom data={{ menuData, footerData, pageData, intl, response }} />,
+    {
+      renderToString,
+    },
+  )
   return {
     props: {
-      locale,
-      url,
       data: {
         menuData,
         footerData,
         intl,
-        pageData: {
-          ...pageData,
-          newsArticles: data,
-        },
-        slug,
+        pageData,
+        response,
       },
+      serverState,
     },
   }
 }