Remove setBackgroundColour hook in favour of rendering server side

The hook would cause a blink of the default colour before changing to the set colour. We now do the work serverside to prevent the blink. This causes some duplication but it's worth it for UX.
richpjames · Sep 11, 2024 · 792aa68 · 792aa68
1 parent 5784f3a
commit 792aa68
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 91 deletions.
diff --git a/src/Components/layout.tsx b/src/Components/layout.tsx
@@ -16,7 +16,7 @@ const Main = styled.section`
   flex: 1;
 `;
 
-export const PageWrapper = styled.main`
+export const PageWrapper = styled.main<{ backgroundColour: string }>`
   padding-top: var(--spacing-6);
   padding-left: var(--spacing-6);
   padding-right: var(--spacing-6);
@@ -28,7 +28,7 @@ export const PageWrapper = styled.main`
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
-  background-color: var(--current-background-colour);
+  background-color: ${(props) => props.backgroundColour};
   @media only screen and (max-width: ${mobileBreakpoint}) {
     padding: var(--spacing-6), var(--spacing-2);
   }
@@ -40,11 +40,13 @@ export const IntroPageWrapper = styled(PageWrapper)`
 
 interface LayoutProps {
   children: any;
+  backgroundColour: CssHexValue;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({ children, backgroundColour }) => {
+  console.log({ backgroundColour });
   return (
-    <PageWrapper>
+    <PageWrapper backgroundColour={backgroundColour}>
       <ProductsProvider>
         <CartProvider>
           <Header />

diff --git a/src/Types/Product.d.ts b/src/Types/Product.d.ts
@@ -84,3 +84,12 @@ interface ApiListPageProduct {
 interface ProductQuantityById {
   [index: string]: number;
 }
+
+type CssHexValue = string;
+
+interface ApiBackgroundColours {
+  basket: CssHexValue;
+  products: CssHexValue;
+  about: CssHexValue;
+  occasions: CssHexValue;
+}
diff --git a/src/hooks/useSetBackground.tsx b/src/hooks/useSetBackground.tsx
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -2,13 +2,10 @@ import React from "react";
 import { PageProps } from "gatsby";
 
 import Layout from "../Components/layout";
-import { useSetBackground } from "../hooks/useSetBackground";
 
 const NotFound: React.FC<PageProps> = () => {
-  useSetBackground("about");
-
   return (
-    <Layout>
+    <Layout backgroundColour="about">
       <h1>Page Not Found</h1>
       <p>
         We couldn't find that page. <br />

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -6,7 +6,6 @@ import { PortableText } from "@portabletext/react";
 import SEO from "../Components/seo";
 import Layout from "../Components/layout";
 import { mobileBreakpoint } from "../constants";
-import { useSetBackground } from "../hooks/useSetBackground";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
 const TextWrap = styled.section`
@@ -16,7 +15,7 @@ const TextWrap = styled.section`
 `;
 
 const About: React.FC<PageProps> = () => {
-  const { sanityAbout } = useStaticQuery(graphql`
+  const { sanityAbout, allSanityBackgroundColours } = useStaticQuery(graphql`
     query {
       sanityAbout {
         _rawDescription
@@ -26,14 +25,21 @@ const About: React.FC<PageProps> = () => {
           }
         }
       }
+      allSanityBackgroundColours {
+        nodes {
+          about
+        }
+      }
     }
   `);
 
   const { _rawDescription, banner_image } = sanityAbout;
-  useSetBackground("about");
+
+  const { about: aboutBackgroundColour } = allSanityBackgroundColours.nodes[0];
+  console.log({ aboutBackgroundColour });
   const photo = getImage(banner_image.asset);
   return (
-    <Layout>
+    <Layout backgroundColour={aboutBackgroundColour}>
       <SEO title="About" description="About Monitor Books" />
       <TextWrap>
         {photo && (

diff --git a/src/pages/basket.tsx b/src/pages/basket.tsx
@@ -1,17 +1,27 @@
 import React from "react";
-import { PageProps } from "gatsby";
+import { graphql, PageProps, useStaticQuery } from "gatsby";
 
 import Layout from "../Components/layout";
 
 import { BasketPage } from "../Components/Basket/BasketPage";
 import SEO from "../Components/seo";
-import { useSetBackground } from "../hooks/useSetBackground";
 
 const Basket: React.FC<PageProps> = () => {
-  useSetBackground("basket");
+  const { allSanityBackgroundColours } = useStaticQuery(graphql`
+    query {
+      allSanityBackgroundColours {
+        nodes {
+          basket
+        }
+      }
+    }
+  `);
+
+  const { basket: basketBackgroundColour } =
+    allSanityBackgroundColours.nodes[0];
 
   return (
-    <Layout>
+    <Layout backgroundColour={basketBackgroundColour}>
       <SEO title="Basket" description="basket" />
       <BasketPage />
     </Layout>

diff --git a/src/pages/books/index.tsx b/src/pages/books/index.tsx
@@ -14,37 +14,43 @@ import {
 import Layout from "../../Components/layout";
 import { productListPageMapper } from "../../api/mappers";
 import SEO from "../../Components/seo";
-import { useSetBackground } from "../../hooks/useSetBackground";
 import styled from "@emotion/styled";
+import { SanityBackgroundColours } from "./{sanityProduct.slug}";
 
 const Image = styled(GatsbyImage)`
   height: 100%;
 `;
 
 const ProductsPage: FC<PageProps> = () => {
-  useSetBackground("products");
-
   const {
     allSanityProduct,
-  }: { allSanityProduct: { nodes: ApiListPageProduct[] } } =
-    useStaticQuery(graphql`
-      query {
-        allSanityProduct(sort: { order: DESC, fields: page_order }) {
-          nodes {
-            slug
-            title
-            author
-            date_published
-            product_type
-            thumbnail_image {
-              asset {
-                gatsbyImageData(placeholder: BLURRED, fit: FILLMAX, width: 350)
-              }
+    sanityBackgroundColours,
+  }: {
+    allSanityProduct: {
+      nodes: ApiListPageProduct[];
+    };
+    sanityBackgroundColours: SanityBackgroundColours;
+  } = useStaticQuery(graphql`
+    query {
+      allSanityProduct(sort: { order: DESC, fields: page_order }) {
+        nodes {
+          slug
+          title
+          author
+          date_published
+          product_type
+          thumbnail_image {
+            asset {
+              gatsbyImageData(placeholder: BLURRED, fit: FILLMAX, width: 350)
             }
           }
         }
       }
-    `);
+      sanityBackgroundColours {
+        products
+      }
+    }
+  `);
 
   const books = allSanityProduct.nodes.map((book, index) => {
     const mappedBook = productListPageMapper(book);
@@ -77,9 +83,11 @@ const ProductsPage: FC<PageProps> = () => {
     );
   });
 
+  const { products: productsBackgroundColour } = sanityBackgroundColours;
+
   return (
     <>
-      <Layout>
+      <Layout backgroundColour={productsBackgroundColour}>
         <SEO title="Books" description="Publications from Monitor books" />
         <ListWrap>{books}</ListWrap>
       </Layout>

diff --git a/src/pages/books/{sanityProduct.slug}.tsx b/src/pages/books/{sanityProduct.slug}.tsx
@@ -9,7 +9,6 @@ import Layout from "../../Components/layout";
 import { AddToBasketButton, Photos } from "../../Components/Common";
 import SEO from "../../Components/seo";
 import { mobileBreakpoint } from "../../constants";
-import { useSetBackground } from "../../hooks/useSetBackground";
 import {
   LeftSection,
   RightSection,
@@ -63,14 +62,20 @@ export const query = graphql`
         }
       }
     }
+    sanityBackgroundColours {
+      products
+    }
   }
 `;
 interface ProductPageProps extends PageProps {
-  data: { sanityProduct: ApiSinglePageProduct };
+  data: {
+    sanityProduct: ApiSinglePageProduct;
+    sanityBackgroundColours: SanityBackgroundColours;
+  };
 }
+export type SanityBackgroundColours = ApiBackgroundColours;
 
 const ProductPage: React.FC<ProductPageProps> = ({ data }) => {
-  useSetBackground("products");
   const product: SinglePageProduct = singleProductPageMapper(
     data.sanityProduct
   );
@@ -84,8 +89,10 @@ const ProductPage: React.FC<ProductPageProps> = ({ data }) => {
     galleryImages,
   } = product;
 
+  const { products: productsBackgroundColour } = data.sanityBackgroundColours;
+
   return (
-    <Layout>
+    <Layout backgroundColour={productsBackgroundColour}>
       <SEO
         title={`${title} by ${author}`}
         description={`${title} by ${author}`}

diff --git a/src/pages/occasions/index.tsx b/src/pages/occasions/index.tsx
@@ -5,24 +5,26 @@ import { PortableText } from "@portabletext/react";
 import React from "react";
 import SEO from "../../Components/seo";
 import { urlFor } from "../../utils/sanityImage";
-import { useSetBackground } from "../../hooks/useSetBackground";
 
 const VideosPage: React.FC<PageProps> = () => {
-  useSetBackground("occasions");
-  const { allSanityEventList } = useStaticQuery(graphql`
-    query {
-      allSanityEventList {
-        nodes {
-          _rawEvents
+  const { allSanityEventList, sanityBackgroundColours } =
+    useStaticQuery(graphql`
+      query {
+        allSanityEventList {
+          nodes {
+            _rawEvents
+          }
+        }
+        sanityBackgroundColours {
+          occasions
         }
       }
-    }
-  `);
+    `);
 
   const eventList = allSanityEventList.nodes[0]._rawEvents;
 
   return (
-    <Layout>
+    <Layout backgroundColour={sanityBackgroundColours.occasions}>
       <SEO title="Occasions" description="Monitor books occassions" />
       <PortableText
         value={eventList}

diff --git a/src/pages/occasions/{sanityEvent.slug}.tsx b/src/pages/occasions/{sanityEvent.slug}.tsx
@@ -7,13 +7,14 @@ import { PortableText } from "@portabletext/react";
 import { Video, VideoTitle } from "../../Components/Common";
 import SEO from "../../Components/seo";
 import Layout from "../../Components/layout";
-import { useSetBackground } from "../../hooks/useSetBackground";
+
 import {
   LeftSection,
   RightSection,
   RightSectionWrapper,
   TextWrapper,
 } from "../../Components/Common/Text";
+import { SanityBackgroundColours } from "../books/{sanityProduct.slug}";
 
 export const query = graphql`
   query VideoQuery($slug: String!) {
@@ -24,27 +25,29 @@ export const query = graphql`
       _rawBlurb1
       _rawBlurb2
     }
+    sanityBackgroundColours {
+      occasions
+    }
   }
 `;
 
-const VideoPageWrapper = styled(Layout)`
+const VideoPageWrapper = styled(Layout)<{ backgroundColour: CssHexValue }>`
   display: block;
 `;
 
 interface VideoPageProps extends PageProps {
   data: {
     sanityEvent: ApiVideo;
+    sanityBackgroundColours: SanityBackgroundColours;
   };
 }
 
 const VideoPage: React.FC<VideoPageProps> = ({ data }) => {
-  useSetBackground("occasions");
-
   const video = videoMapper(data.sanityEvent);
 
   const { title, url, artists, blurb1, blurb2 } = video;
   return (
-    <VideoPageWrapper>
+    <VideoPageWrapper backgroundColour={data.sanityBackgroundColours.occasions}>
       <SEO
         title={`${title} featuring ${artists.join(" ")}`}
         description={title}