From 103a420d2e841f2d3542c3a090d821f0dcc42ffa Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:12:12 +0530 Subject: [PATCH 1/3] =?UTF-8?q?Reapply=20"=E2=9C=A8=20Take=20back=20algoli?= =?UTF-8?q?a=20#2657"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 79e16c106dadbb12e7a146ed0d822b2632e1aaf7. --- web/pages/news/index.global.tsx | 48 ++--- web/pages/nyheter/index.global.tsx | 55 +++--- web/templates/newsroom/Newsroom.tsx | 28 +-- .../newsroom/sanity/NewsHeadlinerSanity.tsx | 80 -------- .../newsroom/sanity/NewsItemSanity.tsx | 89 --------- .../newsroom/sanity/NewsSectionsSanity.tsx | 52 ----- .../newsroom/sanity/NewsroomSanity.tsx | 186 ------------------ web/types/algoliaIndexPage.ts | 5 - 8 files changed, 57 insertions(+), 486 deletions(-) delete mode 100644 web/templates/newsroom/sanity/NewsHeadlinerSanity.tsx delete mode 100644 web/templates/newsroom/sanity/NewsItemSanity.tsx delete mode 100644 web/templates/newsroom/sanity/NewsSectionsSanity.tsx delete mode 100644 web/templates/newsroom/sanity/NewsroomSanity.tsx diff --git a/web/pages/news/index.global.tsx b/web/pages/news/index.global.tsx index 49949f9fd..012e15af1 100644 --- 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 ( - - - + + + + + ) } @@ -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(, { + 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 index 257504cd9..dec408332 100644 --- 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 ( - - - + + + + + ) } @@ -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,13 +75,10 @@ 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, @@ -83,25 +86,19 @@ export const getServerSideProps: GetServerSideProps = async ({ req, preview = fa }, preview, ) - const { data } = await getData({ - query: allNewsDocuments, - queryParams, - }) + const serverState = await getServerState(, { + 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 index 54a4f9dd8..76366b15f 100644 --- 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(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(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(function }, } - const searchClient = useMemo(() => { - return isServerRendered - ? client({ headers: { - //@ts-ignore: TODO - Referer: url } }) - : client(undefined); - }, [isServerRendered, url]); - + const searchClient = client() return (
- + - -const NewsHeadlinerSanity = forwardRef(function NewsHeadlinerSanity( - { data, fallbackImage, className = '', ...rest }, - ref, -) { - const { slug, title, ingress, publishDateTime, heroImage, tags, countryTags } = data - - return ( -
- - {(heroImage?.image?.asset || fallbackImage) && ( -
- -
- )} - {publishDateTime && ( - - )} - {title && ( - - {title} - - )} -
- {tags?.map((tag: any, i: number) => { - return ( - - {tag.label} - {i < tags.length - 1 && ,} - - ) - })} - {countryTags?.length > 0 && ,} - {countryTags?.map((country: any, i: number) => { - return ( - - {country.label} - {i < countryTags.length - 1 && ,} - - ) - })} -
- {Array.isArray(ingress) ? ( - - ) : ( - - {ingress} - - )} - -
- ) -}) -export default NewsHeadlinerSanity diff --git a/web/templates/newsroom/sanity/NewsItemSanity.tsx b/web/templates/newsroom/sanity/NewsItemSanity.tsx deleted file mode 100644 index 7eefc48dc..000000000 --- a/web/templates/newsroom/sanity/NewsItemSanity.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { FormattedDate } from '@components/FormattedDateTime' -import { forwardRef, HTMLAttributes } from 'react' -import { BaseLink } from '@core/Link' -import { Typography } from '@core/Typography' -import Image, { Ratios } from '../../../pageComponents/shared/SanityImage' -import envisTwMerge from '../../../twMerge' -import { NewsRoomNewsItem } from '../../../types/algoliaIndexPage' -import { SanityImageObject } from '@sanity/image-url/lib/types/types' - -export type NewsListItemProps = { - data: NewsRoomNewsItem - fallbackImage?: SanityImageObject -} & HTMLAttributes - -/* Not a semantic list even tho name implies it, used as other news pages with sections */ -const NewsItemSanity = forwardRef(function NewsItemSanity( - { data, fallbackImage, className = '', ...rest }, - ref, -) { - const { slug, title, publishDateTime, heroImage, thumbnailUrl, tags, countryTags } = data || {} - - return ( -
- -
- {publishDateTime && ( - - )} - {title && ( - - {title} - - )} -
- {tags?.map((tag: any, i: number) => { - return ( - - {tag?.label} - {i < tags.length - 1 && ,} - - ) - })} - {countryTags?.length > 0 && ,} - {countryTags?.map((country: any, i: number) => { - return ( - - {country?.label} - {i < countryTags.length - 1 && ,} - - ) - })} -
-
-
- {(heroImage?.image?.asset || fallbackImage || thumbnailUrl) && ( - <> - {thumbnailUrl ? ( - - ) : ( - (heroImage?.image?.asset || fallbackImage) && ( - - ) - )} - - )} -
- -
- ) -}) -export default NewsItemSanity diff --git a/web/templates/newsroom/sanity/NewsSectionsSanity.tsx b/web/templates/newsroom/sanity/NewsSectionsSanity.tsx deleted file mode 100644 index c5dacd811..000000000 --- a/web/templates/newsroom/sanity/NewsSectionsSanity.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { forwardRef } from 'react' -import { FormattedMessage } from 'react-intl' -import envisTwMerge from '../../../twMerge' -import { SanityImageObject } from '@sanity/image-url/lib/types/types' -import { NewsRoomNewsItem } from '../../../types/algoliaIndexPage' -import NewsHeadlinerSanity from './NewsHeadlinerSanity' -import NewsItemSanity from './NewsItemSanity' - -type NewsSectionsProps = { - newslist: NewsRoomNewsItem[] | undefined - fallbackImages?: SanityImageObject[] -} & React.ComponentProps<'div'> - -const NewsSectionsSanity = forwardRef(function NewsSectionsSanity( - { newslist, fallbackImages, className = '' }, - ref, -) { - if (!newslist || newslist?.length === 0) { - return - } - - return ( -
- -
- {newslist.map((item: NewsRoomNewsItem, index: number) => { - return index !== 0 ? ( - - ) : null - })} -
-
- ) -}) - -export default NewsSectionsSanity diff --git a/web/templates/newsroom/sanity/NewsroomSanity.tsx b/web/templates/newsroom/sanity/NewsroomSanity.tsx deleted file mode 100644 index 4f1aa0a29..000000000 --- a/web/templates/newsroom/sanity/NewsroomSanity.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import { forwardRef, useRef, useState } from 'react' -import Blocks from '../../../pageComponents/shared/portableText/Blocks' -import type { NewsRoomNewsItem, NewsRoomPageType } from '../../../types' -import { Heading, Typography } from '@core/Typography' -import { ResourceLink } from '@core/Link' -import Seo from '../../../pageComponents/shared/Seo' -import { FormattedMessage, useIntl } from 'react-intl' -import { List } from '@core/List' -import { PaginationContextProvider } from '../../../common/contexts/PaginationContext' -import NewsSectionsSanity from './NewsSectionsSanity' -import { stringify } from 'querystring' -import { useRouter } from 'next/router' -import { SimplePagination } from '@core/SimplePagination/SimplePagination' -import NewsSectionsSkeleton from '../NewsSections/NewsSectionsSkeleton' -import { getNameFromLocale } from '../../../lib/localization' - -type NewsRoomTemplateProps = { - isServerRendered?: boolean - locale?: string - pageData?: NewsRoomPageType | undefined - slug?: string - url?: string -} - -const NewsRoomTemplateSanity = forwardRef(function NewsRoomTemplateSanity( - { pageData, slug }, - ref, -) { - const { - newsArticles = [], - ingress, - title, - seoAndSome, - subscriptionLink, - subscriptionLinkTitle, - localNewsPages, - fallbackImages, - } = pageData || {} - - const intl = useIntl() - const router = useRouter() - const { locale } = router - const resultsRef = useRef(null) - const [isLoading, setIsLoading] = useState(false) - const [lastId, setLastId] = useState(newsArticles?.length > 0 ? newsArticles[newsArticles?.length - 1]?.id : null) - const [firstId, setFirstId] = useState(newsArticles?.length > 0 ? newsArticles[0]?.id : null) - const [firstPublished, setFirstPublished] = useState( - newsArticles?.[0]?.firstPublishedAt ?? newsArticles?.[0]?.publishDateTime ?? null, - ) - const [lastPublished, setLastPublished] = useState( - newsArticles?.[newsArticles?.length - 1]?.firstPublishedAt ?? - newsArticles?.[newsArticles?.length - 1]?.publishDateTime ?? - null, - ) - const filterCrudeAssays = (list: NewsRoomNewsItem[]) => { - return list?.filter((item: NewsRoomNewsItem) => item?.tags?.some((tag: any) => tag.key !== 'crude-oil-assays')) - } - const [newsList, setNewsList] = useState(filterCrudeAssays(newsArticles) ?? []) - - const setSearchStates = (filteredNews: any) => { - setNewsList(filterCrudeAssays(filteredNews)) - setFirstId(filteredNews?.length > 0 ? filteredNews[0].id : null) - setLastId(filteredNews?.length > 0 ? filteredNews[filteredNews.length - 1].id : null) - setFirstPublished( - filteredNews?.length > 0 ? filteredNews[0]?.firstPublishedAt ?? filteredNews[0]?.publishDateTime : null, - ) - setLastPublished( - filteredNews?.length > 0 - ? filteredNews[filteredNews?.length - 1]?.firstPublishedAt ?? - filteredNews[filteredNews?.length - 1]?.publishDateTime - : null, - ) - } - - const getNextNews = async () => { - setIsLoading(true) - const query = { - lang: getNameFromLocale(locale), - lastId: lastId, - lastPublishedAt: lastPublished, - } - const urlParams = stringify(query) - const res = await fetch(`/api/news/next?${urlParams}`) - let filteredNews = [] - try { - const response = await res.json() - filteredNews = response.news - } catch (e) { - console.log('Error', e) - } - setSearchStates(filteredNews) - setIsLoading(false) - } - const getPreviousNews = async () => { - setIsLoading(true) - const query = { - lang: getNameFromLocale(locale), - lastId: firstId, - lastPublishedAt: firstPublished, - } - const urlParams = stringify(query) - const res = await fetch(`/api/news/prev?${urlParams}`) - let filteredNews = [] - try { - const response = await res.json() - filteredNews = response.news - } catch (e) { - console.log('Error', e) - } - setSearchStates(filteredNews) - setIsLoading(false) - } - - return ( - - -
-
-
-
- {title && } - {ingress && } -
- - - {subscriptionLink?.slug && ( - - {subscriptionLinkTitle} - - )} - - {localNewsPages && - localNewsPages?.length > 0 && - localNewsPages?.map((localNewsPage) => { - return localNewsPage?.link?.slug || localNewsPage?.href ? ( - - - {localNewsPage?.label} - - - ) : null - })} - -
-
-
-
-
- - - - {isLoading ? ( - - ) : ( - <> - - - - )} -
-
-
-
- - ) -}) - -export default NewsRoomTemplateSanity diff --git a/web/types/algoliaIndexPage.ts b/web/types/algoliaIndexPage.ts index 50c4e84ff..1b1a24ea8 100644 --- a/web/types/algoliaIndexPage.ts +++ b/web/types/algoliaIndexPage.ts @@ -15,9 +15,7 @@ import { PortableTextBlock } from '@portabletext/types' import { SanityImageObject } from '@sanity/image-url/lib/types/types' export type AlgoliaIndexPageType = { - isServerRendered?: boolean serverState?: InstantSearchServerState - url: string data: { menuData?: MenuData footerData?: { footerColumns: FooterColumns[] } @@ -36,8 +34,6 @@ export type NewsRoomNewsItem = { heroImage: ImageWithCaptionData thumbnailUrl?: string ingress?: string - tags?: any - countryTags?: any } export type NewsRoomPageType = { @@ -46,7 +42,6 @@ export type NewsRoomPageType = { ingress?: PortableTextBlock[] subscriptionLink?: { slug: string; type: string; lang: string } subscriptionLinkTitle?: string - newsArticles: NewsRoomNewsItem[] localNewsPages?: LinkData[] fallbackImages?: SanityImageObject[] } From 5bdfff156139ebd982ccb6c5e73e94108f739db8 Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Mon, 9 Dec 2024 14:46:59 +0530 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=9A=20Fix=20CI=20build=20#2657?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/templates/newsroom/Newsroom.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/templates/newsroom/Newsroom.tsx b/web/templates/newsroom/Newsroom.tsx index 76366b15f..a4f1e3a65 100644 --- a/web/templates/newsroom/Newsroom.tsx +++ b/web/templates/newsroom/Newsroom.tsx @@ -87,7 +87,7 @@ const NewsRoomTemplate = forwardRef(function const routing = { router: createInstantSearchRouterNext({ singletonRouter, - // serverUrl: `http://localhost:3000/${isoCode === 'nb-NO' ? 'no/nyheter' : 'news'}`, // uncomment this line for local development + serverUrl: `https://www.equinor.com${isoCode === 'nb-NO' ? '/no/nyheter' : '/news'}`, // temporary fix for url to be available during build time routerOptions: { createURL: createURL, parseURL: parseURL, From 9ac3b266a87eb08b8ba49a4cb34a8639ab931c3f Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Mon, 9 Dec 2024 15:24:17 +0530 Subject: [PATCH 3/3] :sparkles: Revalidate newsroom pages #2657 --- web/pages/api/revalidate.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/web/pages/api/revalidate.js b/web/pages/api/revalidate.js index 346ed104f..8980cec38 100644 --- a/web/pages/api/revalidate.js +++ b/web/pages/api/revalidate.js @@ -32,6 +32,13 @@ export default async function handler(req, res) { }) } + const revalidateNewsroomPages = async () => { + console.log(new Date(), 'Revalidating: /news') + res.revalidate(`/news`) + console.log(new Date(), 'Revalidating: /no/nyheter') + res.revalidate('/no/nyheter') + } + if (['page', 'landingPage', 'event'].includes(data._type)) { const routes = await sanityClient.fetch( groq`*[_type match "route_*" && content._ref == $id]{"slug": slug.current}`, @@ -53,6 +60,8 @@ export default async function handler(req, res) { console.log(new Date(), 'Revalidating: ', data?.slug) if (data.slug) await res.revalidate(data.slug) await revalidateHomePages() + // revalidate newsroom pages + if (data._type === 'news') await revalidateNewsroomPages() return res.json({ revalidated: true, slug: data.slug }) } } catch (err) {