Fix unset gallery card width on initialization (#4612)

ui/v2.5/src/components/Galleries/GalleryGridCard.tsx

@@ -0,0 +1,38 @@
+import React, { useRef } from "react";
+import * as GQL from "src/core/generated-graphql";
+import { GalleryCard } from "./GalleryCard";
+import { useContainerDimensions } from "../Shared/GridCard/GridCard";
+
+interface IGalleryCardGrid {
+  galleries: GQL.SlimGalleryDataFragment[];
+  selectedIds: Set<string>;
+  zoomIndex: number;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+}
+
+export const GalleryCardGrid: React.FC<IGalleryCardGrid> = ({
+  galleries,
+  selectedIds,
+  zoomIndex,
+  onSelectChange,
+}) => {
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+  return (
+    <div className="row justify-content-center" ref={componentRef}>
+      {galleries.map((gallery) => (
+        <GalleryCard
+          key={gallery.id}
+          containerWidth={width}
+          gallery={gallery}
+          zoomIndex={zoomIndex}
+          selecting={selectedIds.size > 0}
+          selected={selectedIds.has(gallery.id)}
+          onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+            onSelectChange(gallery.id, selected, shiftKey)
+          }
+        />
+      ))}
+    </div>
+  );
+};

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
 import { useHistory } from "react-router-dom";
@@ -12,13 +12,12 @@ import {
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { queryFindGalleries, useFindGalleries } from "src/core/StashService";
-import { GalleryCard } from "./GalleryCard";
 import GalleryWallCard from "./GalleryWallCard";
 import { EditGalleriesDialog } from "./EditGalleriesDialog";
 import { DeleteGalleriesDialog } from "./DeleteGalleriesDialog";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { GalleryListTable } from "./GalleryListTable";
-import { useContainerDimensions } from "../Shared/GridCard/GridCard";
+import { GalleryCardGrid } from "./GalleryGridCard";
 
 const GalleryItemList = makeItemList({
   filterMode: GQL.FilterMode.Galleries,
@@ -107,9 +106,6 @@ export const GalleryList: React.FC<IGalleryList> = ({
     setIsExportDialogOpen(true);
   }
 
-  const componentRef = useRef<HTMLDivElement>(null);
-  const { width } = useContainerDimensions(componentRef);
-
   function renderContent(
     result: GQL.FindGalleriesQueryResult,
     filter: ListFilterModel,
@@ -137,21 +133,12 @@ export const GalleryList: React.FC<IGalleryList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center" ref={componentRef}>
-            {result.data.findGalleries.galleries.map((gallery) => (
-              <GalleryCard
-                key={gallery.id}
-                containerWidth={width}
-                gallery={gallery}
-                zoomIndex={filter.zoomIndex}
-                selecting={selectedIds.size > 0}
-                selected={selectedIds.has(gallery.id)}
-                onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-                  onSelectChange(gallery.id, selected, shiftKey)
-                }
-              />
-            ))}
-          </div>
+          <GalleryCardGrid
+            galleries={result.data.findGalleries.galleries}
+            selectedIds={selectedIds}
+            zoomIndex={filter.zoomIndex}
+            onSelectChange={onSelectChange}
+          />
         );
       }
       if (filter.displayMode === DisplayMode.List) {

ui/v2.5/src/components/Images/ImageGridCard.tsx

@@ -0,0 +1,43 @@
+import React, { useRef } from "react";
+import * as GQL from "src/core/generated-graphql";
+import { ImageCard } from "./ImageCard";
+import { useContainerDimensions } from "../Shared/GridCard/GridCard";
+
+interface IImageCardGrid {
+  images: GQL.SlimImageDataFragment[];
+  selectedIds: Set<string>;
+  zoomIndex: number;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+  onPreview: (index: number, ev: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+export const ImageGridCard: React.FC<IImageCardGrid> = ({
+  images,
+  selectedIds,
+  zoomIndex,
+  onSelectChange,
+  onPreview,
+}) => {
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+  return (
+    <div className="row justify-content-center" ref={componentRef}>
+      {images.map((image, index) => (
+        <ImageCard
+          key={image.id}
+          containerWidth={width}
+          image={image}
+          zoomIndex={zoomIndex}
+          selecting={selectedIds.size > 0}
+          selected={selectedIds.has(image.id)}
+          onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+            onSelectChange(image.id, selected, shiftKey)
+          }
+          onPreview={
+            selectedIds.size < 1 ? (ev) => onPreview(index, ev) : undefined
+          }
+        />
+      ))}
+    </div>
+  );
+};

ui/v2.5/src/components/Images/ImageList.tsx

@@ -4,7 +4,6 @@ import React, {
   useMemo,
   MouseEvent,
   useContext,
-  useRef,
 } from "react";
 import { FormattedNumber, useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
@@ -22,7 +21,6 @@ import { useLightbox } from "src/hooks/Lightbox/hooks";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 
-import { ImageCard } from "./ImageCard";
 import { ImageWallItem } from "./ImageWallItem";
 import { EditImagesDialog } from "./EditImagesDialog";
 import { DeleteImagesDialog } from "./DeleteImagesDialog";
@@ -32,7 +30,7 @@ import { ExportDialog } from "../Shared/ExportDialog";
 import { objectTitle } from "src/core/files";
 import TextUtils from "src/utils/text";
 import { ConfigurationContext } from "src/hooks/Config";
-import { useContainerDimensions } from "../Shared/GridCard/GridCard";
+import { ImageGridCard } from "./ImageGridCard";
 
 interface IImageWallProps {
   images: GQL.SlimImageDataFragment[];
@@ -197,39 +195,15 @@ const ImageListImages: React.FC<IImageListImages> = ({
     ev.preventDefault();
   }
 
-  const componentRef = useRef<HTMLDivElement>(null);
-  const { width } = useContainerDimensions(componentRef);
-
-  function renderImageCard(
-    index: number,
-    image: GQL.SlimImageDataFragment,
-    zoomIndex: number
-  ) {
-    return (
-      <ImageCard
-        key={image.id}
-        containerWidth={width}
-        image={image}
-        zoomIndex={zoomIndex}
-        selecting={selectedIds.size > 0}
-        selected={selectedIds.has(image.id)}
-        onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-          onSelectChange(image.id, selected, shiftKey)
-        }
-        onPreview={
-          selectedIds.size < 1 ? (ev) => onPreview(index, ev) : undefined
-        }
-      />
-    );
-  }
-
   if (filter.displayMode === DisplayMode.Grid) {
     return (
-      <div className="row justify-content-center" ref={componentRef}>
-        {images.map((image, index) =>
-          renderImageCard(index, image, filter.zoomIndex)
-        )}
-      </div>
+      <ImageGridCard
+        images={images}
+        selectedIds={selectedIds}
+        zoomIndex={filter.zoomIndex}
+        onSelectChange={onSelectChange}
+        onPreview={onPreview}
+      />
     );
   }
   if (filter.displayMode === DisplayMode.Wall) {