♻️ Refactor SanityImage

src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx

@@ -1,6 +1,6 @@
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
@@ -26,11 +26,12 @@ export default function CustomerCaseEmployeeCard({
     employee.email && (
       <div key={employee.email} className={styles.employee}>
         <div className={styles.employeeImage}>
-          <SanityImage
-            image={{
-              src: { src: employee.imageUrl ?? employee.imageThumbUrl },
-              alt: employee.name,
-            }}
+          <Image
+            src={employee.imageUrl ?? employee.imageThumbUrl}
+            alt={employee.name}
+            width={300}
+            height={300}
+            style={{ objectFit: "cover", height: "100%", width: "100%" }}
           />
         </div>
         <div className={styles.employeeInfo}>

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}`}>

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}

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>

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>
           )}

src/components/employeePage/EmployeePage.tsx

@@ -1,6 +1,6 @@
+import Image from "next/image";
 import { getTranslations } from "next-intl/server";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
@@ -30,11 +30,12 @@ export default async function EmployeePage({
           <div className={styles.employee}>
             {image != null && (
               <div className={styles.employeeImage}>
-                <SanityImage
-                  image={{
-                    src: { src: image },
-                    alt: employee.name,
-                  }}
+                <Image
+                  src={image}
+                  alt={employee.name}
+                  width={300}
+                  height={300}
+                  style={{ objectFit: "cover", height: "100%", width: "100%" }}
                 />
               </div>
             )}

src/components/image/SanityImage.tsx

@@ -1,64 +1,31 @@
 "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 { useNextSanityImage } from "next-sanity-image";
 
 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 = ({
+export function SanityImage({
   image,
-  imageProps,
   objectFit = "cover",
+  isShared = false,
 }: {
   image: IImage;
-  imageProps?: UseNextSanityImageProps;
   objectFit?: "cover" | "none";
-}) => {
+  isShared?: boolean;
+}) {
+  const sanityClient = isShared ? sharedClient : client;
+  const imageProps = useNextSanityImage(sanityClient, image);
   const objectPosition = image.hotspot
     ? `${image.hotspot.x * 100}% ${image.hotspot.y * 100}%`
     : "50% 50%"; // Default to center if no hotspot is defined
+
   if (!imageProps) {
     return null;
   }
+
   return (
     <Image
       alt={image?.alt || ""}
@@ -78,56 +45,4 @@ 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({
-  image,
-  objectFit = "cover",
-}: {
-  image: IImage;
-  objectFit?: "cover" | "none";
-}) {
-  const imageProps = useNextSanityGlobalImage(image);
-  return (
-    <SanityAssetImage
-      objectFit={objectFit}
-      image={image}
-      imageProps={imageProps ?? undefined}
-    />
-  );
-}
-
-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} />;
 }

src/components/sections/article/Article.tsx

@@ -14,7 +14,7 @@ export default function Article({ article }: ArticleProps) {
   return (
     <article className={styles.wrapper} id={article._key}>
       <div className={styles.article}>
-        {hasImage(article) && (
+        {article.imageExtended && (
           <div className={styles.image}>
             <SanityImage image={article.imageExtended} />
           </div>
@@ -31,7 +31,3 @@ export default function Article({ article }: ArticleProps) {
     </article>
   );
 }
-
-function hasImage(article: ArticleSection) {
-  return Boolean(article?.imageExtended?.src || article?.imageExtended?.asset);
-}

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>

studio/lib/interfaces/media.ts

@@ -28,7 +28,6 @@ export interface IImage {
   _key?: string;
   _type?: string;
   asset?: SanityImageSource; // image from Sanity
-  src?: { src: string }; // Mock URL for Storybook
   alt?: string;
   crop?: ICrop;
   hotspot?: IHotspot;