✨ Take back algolia #2657

equinor · Dec 9, 2024 · 8aa4b7a · 8aa4b7a
1 parent 57cf187
commit 8aa4b7a
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 486 deletions.
diff --git a/web/pages/news/index.global.tsx b/web/pages/news/index.global.tsx
@@ -1,29 +1,33 @@
-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'
 
-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} slug={slug} />
+      </IntlProvider>
+    </InstantSearchSSRProvider>
   )
 }
 
@@ -56,7 +60,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
@@ -75,8 +79,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req, preview = fa
     lang,
   }
 
-  const slug = req.url
-
   const { menuData, pageData, footerData } = await getComponentsData(
     {
       query: newsroomQuery,
@@ -85,26 +87,18 @@ 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 }} />, {
+    renderToString,
   })
-
   return {
     props: {
-      url,
       data: {
         menuData,
         footerData,
         intl,
-        pageData: {
-          ...pageData,
-          newsArticles: data,
-        },
-        slug,
+        pageData,
       },
+      serverState,
     },
   }
 }
diff --git a/web/pages/nyheter/index.global.tsx b/web/pages/nyheter/index.global.tsx
@@ -1,29 +1,33 @@
-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'
 
-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} slug={slug} />
+      </IntlProvider>
+    </InstantSearchSSRProvider>
   )
 }
 
@@ -32,6 +36,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 +60,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 +75,30 @@ 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 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 }} />, {
+    renderToString,
+  })
   return {
     props: {
-      locale,
-      url,
       data: {
         menuData,
         footerData,
         intl,
-        pageData: {
-          ...pageData,
-          newsArticles: data,
-        },
-        slug,
+        pageData,
       },
+      serverState,
     },
   }
 }
diff --git a/web/templates/newsroom/Newsroom.tsx b/web/templates/newsroom/Newsroom.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useRef } from 'react'
+import { forwardRef, useRef } from 'react'
 import singletonRouter from 'next/router'
 import Blocks from '../../pageComponents/shared/portableText/Blocks'
 import type { NewsRoomPageType } from '../../types'
@@ -20,15 +20,13 @@ import { List } from '@core/List'
 import { PaginationContextProvider } from '../../common/contexts/PaginationContext'
 
 type NewsRoomTemplateProps = {
-  isServerRendered?: boolean
   locale?: string
   pageData?: NewsRoomPageType | undefined
   slug?: string
-  url?: string
 }
 
 const NewsRoomTemplate = forwardRef<HTMLElement, NewsRoomTemplateProps>(function NewsRoomTemplate(
-  { isServerRendered, locale, pageData, slug, url },
+  { locale, pageData, slug },
   ref,
 ) {
   const { ingress, title, seoAndSome, subscriptionLink, subscriptionLinkTitle, localNewsPages, fallbackImages } =
@@ -89,7 +87,7 @@ const NewsRoomTemplate = forwardRef<HTMLElement, NewsRoomTemplateProps>(function
   const routing = {
     router: createInstantSearchRouterNext({
       singletonRouter,
-      serverUrl: url,
+      // serverUrl: `http://localhost:3000/${isoCode === 'nb-NO' ? 'no/nyheter' : 'news'}`, // uncomment this line for local development
       routerOptions: {
         createURL: createURL,
         parseURL: parseURL,
@@ -130,23 +128,17 @@ const NewsRoomTemplate = forwardRef<HTMLElement, NewsRoomTemplateProps>(function
     },
   }
 
-  const searchClient = useMemo(() => {
-    return isServerRendered
-      ? client({ headers: { 
-      //@ts-ignore: TODO
-        Referer: url } })
-      : client(undefined);
-  }, [isServerRendered, url]);
-
+  const searchClient = client()
   return (
     <PaginationContextProvider defaultRef={resultsRef}>
       <Seo seoAndSome={seoAndSome} slug={slug} pageTitle={title} />
       <main ref={ref} className="">
-      <InstantSearch
-        searchClient={searchClient}
-        future={{ preserveSharedStateOnUnmount: false }}
-        indexName={indexName}
-        routing={routing}>
+        <InstantSearch
+          searchClient={searchClient}
+          future={{ preserveSharedStateOnUnmount: false }}
+          indexName={indexName}
+          routing={routing}
+        >
           <Configure
             facetingAfterDistinct
             maxFacetHits={50}

diff --git a/web/templates/newsroom/sanity/NewsHeadlinerSanity.tsx b/web/templates/newsroom/sanity/NewsHeadlinerSanity.tsx