♻️ Refactor SanityImage and cousins

varianter · Dec 18, 2024 · 476b2f2 · 476b2f2
1 parent 7f3d050
commit 476b2f2
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 86 deletions.
diff --git a/src/components/customerCases/CustomerCases.tsx b/src/components/customerCases/CustomerCases.tsx
@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
 import Link from "next/link";
 
-import { SanitySharedImage } from "src/components/image/SanityImage";
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { domainFromHostname } from "src/utils/url";
@@ -37,7 +37,7 @@ const CustomerCases = async ({ customerCasesPage }: CustomerCasesProps) => {
           sharedCustomerCases.data.map((customerCase) => (
             <div key={customerCase._id} className={styles.caseWrapper}>
               <div className={styles.caseImageWrapper}>
-                <SanitySharedImage image={customerCase.image} />
+                <SanityImage image={customerCase.image} isShared />
               </div>
               <div className={styles.caseTextWrapper}>
                 <Link href={`${customerCasesPage.slug}/${customerCase.slug}`}>

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -1,4 +1,4 @@
-import { SanitySharedImage } from "src/components/image/SanityImage";
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import { fetchEmployeesByEmails } from "src/utils/employees";
 import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases";
@@ -44,7 +44,7 @@ export default async function CustomerCase({
           />
         </div>
         <div className={styles.mainImageWrapper}>
-          <SanitySharedImage image={customerCase.image} />
+          <SanityImage image={customerCase.image} isShared />
           {customerCase.image.figureDescription && (
             <Text type="imageLabel">
               {customerCase.image.figureDescription}

diff --git a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 
-import { SanitySharedImage } from "src/components/image/SanityImage";
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases";
 
@@ -29,7 +29,7 @@ export default function FeaturedCases({
                 href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`}
               >
                 <div className={styles.caseImageWrapper}>
-                  <SanitySharedImage image={featuredCase.image} />
+                  <SanityImage image={featuredCase.image} isShared />
                 </div>
                 <div>
                   <Text type={"bodyBig"}>{featuredCase.basicTitle}</Text>

diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
@@ -1,4 +1,4 @@
-import { SanitySharedImage } from "src/components/image/SanityImage";
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import { ImageBlock } from "studioShared/lib/interfaces/imageBlock";
 
@@ -15,7 +15,7 @@ export default function ImageSection({ section }: ImageSectionProps) {
         className={`${styles.content}${section.fullWidth ? ` ${styles.fullWidth}` : ""}`}
       >
         <div className={styles.imageContent}>
-          <SanitySharedImage image={section.image} />
+          <SanityImage image={section.image} isShared />
           {section.image.figureDescription && (
             <Text type="imageLabel">{section.image.figureDescription}</Text>
           )}

diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx
@@ -1,49 +1,12 @@
 "use client";
 
-import { SanityImageSource } from "@sanity/image-url/lib/types/types";
 import Image from "next/image";
 import { UseNextSanityImageProps, useNextSanityImage } from "next-sanity-image";
-import { useEffect, useState } from "react";
 
 import { client } from "studio/lib/client";
 import { IImage } from "studio/lib/interfaces/media";
 import { sharedClient } from "studioShared/lib/client";
 
-/**
- * Builds Next.js props for a given Sanity image from an unknown Sanity project.
- *
- * Each generated image source is checked for existence in order to pick the correct source project.
- *
- * NOTE: It is assumed that an image id is only valid for a single project.
- * The result of providing an id that resolves to a valid image in multiple projects is therefore not well-defined.
- *
- * @param image asset props for image from unknown Sanity project
- */
-const useNextSanityGlobalImage = (
-  image: SanityImageSource,
-): UseNextSanityImageProps | null => {
-  const studioImage = useNextSanityImage(client, image);
-  const sharedImage = useNextSanityImage(sharedClient, image);
-
-  const [globalImage, setGlobalImage] =
-    useState<UseNextSanityImageProps | null>(null);
-
-  useEffect(() => {
-    if (studioImage) {
-      fetch(studioImage.src, {
-        method: "HEAD",
-      }).then((r) => r.ok && setGlobalImage(studioImage));
-    }
-    if (sharedImage) {
-      fetch(sharedImage.src, {
-        method: "HEAD",
-      }).then((r) => r.ok && setGlobalImage(sharedImage));
-    }
-  }, [studioImage, sharedImage]);
-
-  return globalImage;
-};
-
 const SanityAssetImage = ({
   image,
   imageProps,
@@ -80,54 +43,22 @@ const SanityAssetImage = ({
   );
 };
 
-export function SanityStudioImage({ image }: { image: IImage }) {
-  const imageProps = useNextSanityImage(client, image);
-  return <SanityAssetImage image={image} imageProps={imageProps} />;
-}
-
-export function SanitySharedImage({ image }: { image: IImage }) {
-  const imageProps = useNextSanityImage(sharedClient, image);
-  return <SanityAssetImage image={image} imageProps={imageProps} />;
-}
-
-function SanityGlobalImage({
+export function SanityImage({
   image,
   objectFit = "cover",
+  isShared = false,
 }: {
   image: IImage;
   objectFit?: "cover" | "none";
+  isShared?: boolean;
 }) {
-  const imageProps = useNextSanityGlobalImage(image);
+  const sanityClient = isShared ? sharedClient : client;
+  const imageProps = useNextSanityImage(sanityClient, image);
   return (
     <SanityAssetImage
-      objectFit={objectFit}
       image={image}
-      imageProps={imageProps ?? undefined}
+      imageProps={imageProps}
+      objectFit={objectFit}
     />
   );
 }
-
-export function SanityImage({
-  image,
-  objectFit = "cover",
-}: {
-  image: IImage;
-  objectFit?: "cover" | "none";
-}) {
-  if (image?.src) {
-    return (
-      <Image
-        alt={image?.alt || ""}
-        src={image.src.src}
-        style={
-          objectFit === "none"
-            ? {}
-            : { objectFit: "cover", height: "100%", width: "100%" }
-        }
-        width={300}
-        height={300}
-      />
-    );
-  }
-  return <SanityGlobalImage image={image} objectFit={objectFit} />;
-}
diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-import { SanitySharedImage } from "src/components/image/SanityImage";
+import { SanityImage } from "src/components/image/SanityImage";
 import { Tag } from "src/components/tag";
 import Text from "src/components/text/Text";
 import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases";
@@ -61,7 +61,7 @@ const CustomerCaseList = ({
             title={selectedCustomerCase.basicTitle}
           >
             {selectedCustomerCase.image && (
-              <SanitySharedImage image={selectedCustomerCase.image} />
+              <SanityImage image={selectedCustomerCase.image} isShared />
             )}
           </Link>
         </div>