Update dependencies and preview handling

CRRU-UK · Apr 19, 2024 · f277e98 · f277e98
1 parent 38f78e4
commit f277e98
Show file tree

Hide file tree

Showing 43 changed files with 447 additions and 444 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,13 +13,13 @@
     "test:unit:watch": "npm run test:unit -- --watchAll"
   },
   "dependencies": {
-    "@contentful/live-preview": "^2.17.4",
+    "@contentful/live-preview": "^3.1.0",
     "@contentful/rich-text-plain-text-renderer": "^16.0.13",
     "@contentful/rich-text-react-renderer": "^15.19.6",
-    "contentful": "^10.8.6",
+    "contentful": "^10.8.8",
     "dayjs": "^1.11.10",
     "joi": "^17.12.3",
-    "next": "^14.1.4",
+    "next": "^14.2.2",
     "next-seo": "^6.5.0",
     "nodemailer": "^6.9.13",
     "react": "^18.2.0",
@@ -29,18 +29,18 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^15.0.2",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.12.3",
+    "@types/node": "^20.12.7",
     "@types/nodemailer": "^6.4.14",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.23",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint-config-next": "^14.2.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -50,13 +50,13 @@
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "node-mocks-http": "^1.14.1",
-    "sass": "^1.72.0",
+    "sass": "^1.75.0",
     "stylelint": "^16.3.1",
     "stylelint-config-sass-guidelines": "^11.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.2.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.5"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -5,7 +5,6 @@ import Script from 'next/script';
 import { DefaultSeo } from 'next-seo';
 
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
-import '@contentful/live-preview/style.css';
 
 import '../scss/globals.scss';
 
@@ -14,51 +13,55 @@ import Footer from '@/layout/Footer';
 
 import { DEFAULT_SEO_OPTIONS, LOCALE } from '@/helpers/constants';
 
-const App = ({ Component, pageProps }: AppProps) => (
-  <>
-    <Head>
-      {/* General */}
-      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5" />
+const App = ({ Component, pageProps }: AppProps) => {
+  const preview = pageProps.preview || false;
 
-      {/* Favicons */}
-      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v1" />
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v1" />
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v1" />
-      <link rel="manifest" href="/site.webmanifest" />
+  return (
+    <>
+      <Head>
+        {/* General */}
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5" />
 
-      {/* SEO */}
-      <DefaultSeo {...DEFAULT_SEO_OPTIONS} />
-    </Head>
+        {/* Favicons */}
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v1" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v1" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v1" />
+        <link rel="manifest" href="/site.webmanifest" />
 
-    <Header />
+        {/* SEO */}
+        <DefaultSeo {...DEFAULT_SEO_OPTIONS} />
+      </Head>
 
-    <main>
-      <ContentfulLivePreviewProvider
-        locale={LOCALE}
-        enableInspectorMode={pageProps.draftMode}
-        enableLiveUpdates={pageProps.draftMode}
-      >
-        <Component {...pageProps} />
-      </ContentfulLivePreviewProvider>
-    </main>
+      <Header />
 
-    <Footer />
+      <main>
+        <ContentfulLivePreviewProvider
+          locale={LOCALE}
+          enableInspectorMode={preview}
+          enableLiveUpdates={preview}
+        >
+          <Component {...pageProps} />
+        </ContentfulLivePreviewProvider>
+      </main>
 
-    {/* Analytics */}
-    <Script
-      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
-      strategy="afterInteractive"
-    />
-    <Script id="google-analytics" strategy="afterInteractive">
-      {`
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){window.dataLayer.push(arguments);}
-        gtag('js', new Date());
+      <Footer />
 
-        gtag('config', 'GA_MEASUREMENT_ID');
-      `}
-    </Script>
-  </>
-);
+      {/* Analytics */}
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){window.dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'GA_MEASUREMENT_ID');
+        `}
+      </Script>
+    </>
+  );
+}
 
 export default App;
diff --git a/src/pages/about/contact-us.tsx b/src/pages/about/contact-us.tsx
@@ -50,10 +50,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap.contact.path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap.contact.path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/about/funders-and-sponsors.tsx b/src/pages/about/funders-and-sponsors.tsx
@@ -47,9 +47,11 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
+  const preview = ctx?.query.preview === 'true';
+
   const data = await getPageContent(sitemap.sponsors.path, {
     references: true,
-    preview: !!ctx?.query?.preview,
+    preview,
   });
 
   const {
@@ -70,6 +72,7 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) =>
   return {
     props: {
       pageData: {
+        preview,
         content,
         image,
         background,

diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
@@ -23,10 +23,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap.about.path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap.about.path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/about/meet-the-team.tsx b/src/pages/about/meet-the-team.tsx
@@ -70,10 +70,8 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap['meet-the-team'].path, {
-    preview: !!ctx?.query?.preview,
-    references: true,
-  });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap['meet-the-team'].path, { preview, references: true });
 
   const {
     content,
@@ -93,6 +91,7 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) =>
 
   return {
     props: {
+      preview,
       pageData: {
         content,
         image,

diff --git a/src/pages/about/useful-links.tsx b/src/pages/about/useful-links.tsx
@@ -80,10 +80,8 @@ const Page: NextPage<PageProps> = ({
 };
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap['useful-links'].path, {
-    preview: !!ctx?.query?.preview,
-    references: true,
-  });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap['useful-links'].path, { preview, references: true });
 
   const {
     content,
@@ -103,6 +101,7 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) =>
 
   return {
     props: {
+      preview,
       pageData: {
         content,
         image,

diff --git a/src/pages/credits.tsx b/src/pages/credits.tsx
@@ -23,10 +23,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap.credits.path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap.credits.path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/education/events-and-talks.tsx b/src/pages/education/events-and-talks.tsx
@@ -24,10 +24,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap['events-and-talks'].path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap['events-and-talks'].path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/education/index.tsx b/src/pages/education/index.tsx
@@ -23,10 +23,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap.education.path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap.education.path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/education/school-visits.tsx b/src/pages/education/school-visits.tsx
@@ -24,10 +24,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap['school-visits'].path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap['school-visits'].path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/education/species/[slug].tsx b/src/pages/education/species/[slug].tsx
@@ -153,9 +153,11 @@ interface PageParams extends ParsedUrlQuery {
 }
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
+  const preview = ctx?.query.preview === 'true';
+
   const { slug } = ctx.params as PageParams;
 
-  const client = ctx?.query?.preview ? contentfulPreviewClient : contentfulDeliveryClient;
+  const client = preview ? contentfulPreviewClient : contentfulDeliveryClient;
   const { items } = await client.getEntries<ContentTypeSpeciesPage>({
     content_type: ContentTypes.SpeciesPage,
     'fields.slug': slug,
@@ -170,6 +172,7 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) =>
 
   return {
     props: {
+      preview,
       id: sys.id,
       name: fields.name,
       description: fields.description,

diff --git a/src/pages/education/species/index.tsx b/src/pages/education/species/index.tsx
@@ -46,13 +46,15 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
+  const preview = ctx?.query.preview === 'true';
   const [pageData, speciesData] = await Promise.all([
-    getPageContent(sitemap['cetacean-fact-files'].path, { preview: !!ctx?.query?.preview }),
+    getPageContent(sitemap['cetacean-fact-files'].path, { preview }),
     getSpecies(),
   ]);
 
   return {
     props: {
+      preview,
       pageData,
       speciesData: speciesData.map(({ name, slug }) => ({ name, slug })),
     },

diff --git a/src/pages/education/species/taxonomy.tsx b/src/pages/education/species/taxonomy.tsx
@@ -24,10 +24,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap.taxonomy.path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap.taxonomy.path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/education/stands-and-exhibits.tsx b/src/pages/education/stands-and-exhibits.tsx
@@ -24,10 +24,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap['stands-and-exhibits'].path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap['stands-and-exhibits'].path, { preview });
 
   return {
     props: {
+      preview,
       data,
     },
   };

diff --git a/src/pages/help/become-a-friend.tsx b/src/pages/help/become-a-friend.tsx
@@ -24,10 +24,12 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
-  const data = await getPageContent(sitemap['become-a-friend'].path, { preview: !!ctx?.query?.preview });
+  const preview = ctx?.query.preview === 'true';
+  const data = await getPageContent(sitemap['become-a-friend'].path, { preview: });
 
   return {
     props: {
+      preview,
       data,
     },
   };