fix: mv all image imports into ProductImage for fast-refresh

Nerdware-LLC · Mar 24, 2024 · 8947030 · 8947030
1 parent 1f4f8c8
commit 8947030
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 25 deletions.
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
@@ -9,10 +9,6 @@ import { PhoneShapedContainer, containerClassNames } from "@/components/Containe
 import { DemoInfoDialog } from "@/components/DevTools/DemoInfoDialog";
 import { LegalLinks } from "@/components/Navigation/LegalLinks";
 import { NON_BREAKING_SPACE_CHAR } from "@/components/Text";
-import demoDesktopDashboardImageSrc from "@/images/demo_desktop_dashboard.webp";
-import demoDesktopDataGridImageSrc from "@/images/demo_desktop_workorders_datagrid.webp";
-import demoMobileCreateInvoiceImageSrc from "@/images/demo_mobile_create_invoice.webp";
-import demoMobileListViewImageSrc from "@/images/demo_mobile_workorders_list.webp";
 import backgroundImageSrc from "@/images/landing_page_bg.webp";
 import { APP_PATHS } from "@/routes/appPaths";
 import { ProductImage } from "./ProductImage";
@@ -46,23 +42,17 @@ export const LandingPage = () => {
       </div>
       <div className={landingPageClassNames.graphicsContainer}>
         <Paper elevation={18}>
-          <ProductImage label="Fixit Dashboard demo" src={demoDesktopDashboardImageSrc} />
+          <ProductImage label="Fixit Dashboard demo" />
           <PhoneShapedContainer>
-            <ProductImage
-              label="Fixit Create-Invoice on mobile"
-              src={demoMobileCreateInvoiceImageSrc}
-            />
+            <ProductImage label="Fixit Create-Invoice on mobile" />
           </PhoneShapedContainer>
         </Paper>
       </div>
       <div className={landingPageClassNames.graphicsContainer} style={{ alignItems: "center" }}>
         <Paper elevation={18}>
-          <ProductImage label="Fixit work orders data-grid" src={demoDesktopDataGridImageSrc} />
+          <ProductImage label="Fixit work orders data-grid" />
           <PhoneShapedContainer>
-            <ProductImage
-              label="Fixit work orders list-view on mobile"
-              src={demoMobileListViewImageSrc}
-            />
+            <ProductImage label="Fixit work orders list-view on mobile" />
           </PhoneShapedContainer>
         </Paper>
       </div>

diff --git a/src/pages/LandingPage/ProductImage.stories.tsx b/src/pages/LandingPage/ProductImage.stories.tsx
@@ -1,4 +1,4 @@
-import { ProductImage, PRODUCT_IMAGES } from "./ProductImage";
+import { ProductImage } from "./ProductImage";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
@@ -27,17 +27,25 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const DashboardDesktopView = {
-  args: { ...PRODUCT_IMAGES[0] },
+  args: {
+    label: "Fixit Dashboard demo",
+  },
 } satisfies Story;
 
 export const CreateInvoiceMobileView = {
-  args: { ...PRODUCT_IMAGES[1] },
+  args: {
+    label: "Fixit Create-Invoice on mobile",
+  },
 } satisfies Story;
 
 export const DataGridDemo = {
-  args: { ...PRODUCT_IMAGES[2] },
+  args: {
+    label: "Fixit work orders data-grid",
+  },
 } satisfies Story;
 
 export const ListViewMobileDemo = {
-  args: { ...PRODUCT_IMAGES[3] },
+  args: {
+    label: "Fixit work orders list-view on mobile",
+  },
 } satisfies Story;
diff --git a/src/pages/LandingPage/ProductImage.tsx b/src/pages/LandingPage/ProductImage.tsx
@@ -17,7 +17,6 @@ import type { OverrideProperties } from "type-fest";
 
 export const ProductImage = ({
   label,
-  src,
   ImageCarouselProps = {},
   ...boxProps
 }: ProductImageProps) => {
@@ -26,6 +25,14 @@ export const ProductImage = ({
   const handleOpen = () => setIsModalOpen(true);
   const handleClose = () => setIsModalOpen(false);
 
+  const productImgSrcIndex = PRODUCT_IMAGES.findIndex((image) => image.label === label);
+
+  const src = PRODUCT_IMAGES?.[productImgSrcIndex]?.src;
+
+  if (!src) {
+    throw new Error(`ProductImage received an invalid "label" prop: "${label}".`);
+  }
+
   return (
     <>
       <Tooltip title={`Click to view image: ${label}`}>
@@ -36,11 +43,11 @@ export const ProductImage = ({
           open={isModalOpen}
           onClose={handleClose}
           fullWidth
-          PaperProps={{ className: globalClassNames.scrollbarForceHidden }}
+          PaperProps={{ className: globalClassNames.scrollbar.forceHidden }}
         >
           <ImageCarousel
             images={PRODUCT_IMAGES}
-            initialImageIndex={PRODUCT_IMAGES.findIndex((image) => image.label === label)}
+            initialImageIndex={productImgSrcIndex}
             showImageLabels
             {...ImageCarouselProps}
           />
@@ -50,7 +57,7 @@ export const ProductImage = ({
   );
 };
 
-export const PRODUCT_IMAGES = [
+const PRODUCT_IMAGES = [
   { label: "Fixit Dashboard demo", src: demoDesktopDashboardImageSrc },
   { label: "Fixit Create-Invoice on mobile", src: demoMobileCreateInvoiceImageSrc },
   { label: "Fixit work orders data-grid", src: demoDesktopDataGridImageSrc },
@@ -73,10 +80,10 @@ const StyledDialog = styled(Dialog)({
 });
 
 export type ProductImageProps = OverrideProperties<
-  CarouselImageConfig,
+  Omit<CarouselImageConfig, "src">,
   {
     label: (typeof PRODUCT_IMAGES)[number]["label"];
   }
 > & {
   ImageCarouselProps?: Omit<ImageCarouselProps, "images" | "initialImageIndex">;
-} & Omit<BoxProps, "component" | "onClick" | "children">;
+} & Omit<BoxProps, "component" | "onClick" | "src" | "children">;