Add missing CardGrid components

ui/v2.5/src/components/Movies/MovieCardGrid.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import * as GQL from "src/core/generated-graphql";
+import { MovieCard } from "./MovieCard";
+
+interface IMovieCardGrid {
+  movies: GQL.MovieDataFragment[];
+  selectedIds: Set<string>;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+}
+
+export const MovieCardGrid: React.FC<IMovieCardGrid> = ({
+  movies,
+  selectedIds,
+  onSelectChange,
+}) => {
+  return (
+    <div className="row justify-content-center">
+      {movies.map((movie) => (
+        <MovieCard
+          key={movie.id}
+          movie={movie}
+          selecting={selectedIds.size > 0}
+          selected={selectedIds.has(movie.id)}
+          onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+            onSelectChange(movie.id, selected, shiftKey)
+          }
+        />
+      ))}
+    </div>
+  );
+};

ui/v2.5/src/components/Movies/MovieList.tsx

@@ -18,8 +18,8 @@ import {
 } from "../List/ItemList";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
-import { MovieCard } from "./MovieCard";
 import { EditMoviesDialog } from "./EditMoviesDialog";
+import { MovieCardGrid } from "./MovieCardGrid";
 
 const MovieItemList = makeItemList({
   filterMode: GQL.FilterMode.Movies,
@@ -130,19 +130,11 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
-            {result.data.findMovies.movies.map((p) => (
-              <MovieCard
-                key={p.id}
-                movie={p}
-                selecting={selectedIds.size > 0}
-                selected={selectedIds.has(p.id)}
-                onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-                  onSelectChange(p.id, selected, shiftKey)
-                }
-              />
-            ))}
-          </div>
+          <MovieCardGrid
+            movies={result.data.findMovies.movies}
+            selectedIds={selectedIds}
+            onSelectChange={onSelectChange}
+          />
         );
       }
       if (filter.displayMode === DisplayMode.List) {

ui/v2.5/src/components/Performers/PerformerCardGrid.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import * as GQL from "src/core/generated-graphql";
+import { IPerformerCardExtraCriteria, PerformerCard } from "./PerformerCard";
+
+interface IPerformerCardGrid {
+  performers: GQL.PerformerDataFragment[];
+  selectedIds: Set<string>;
+  zoomIndex: number;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+  extraCriteria?: IPerformerCardExtraCriteria;
+}
+
+export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
+  performers,
+  selectedIds,
+  onSelectChange,
+  extraCriteria,
+}) => {
+  return (
+    <div className="row justify-content-center">
+      {performers.map((performer) => (
+        <PerformerCard
+          key={performer.id}
+          performer={performer}
+          selecting={selectedIds.size > 0}
+          selected={selectedIds.has(performer.id)}
+          onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+            onSelectChange(performer.id, selected, shiftKey)
+          }
+          extraCriteria={extraCriteria}
+        />
+      ))}
+    </div>
+  );
+};

ui/v2.5/src/components/Performers/PerformerList.tsx

@@ -19,11 +19,12 @@ import { DisplayMode } from "src/models/list-filter/types";
 import { PerformerTagger } from "../Tagger/performers/PerformerTagger";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
-import { IPerformerCardExtraCriteria, PerformerCard } from "./PerformerCard";
+import { IPerformerCardExtraCriteria } from "./PerformerCard";
 import { PerformerListTable } from "./PerformerListTable";
 import { EditPerformersDialog } from "./EditPerformersDialog";
 import { cmToImperial, cmToInches, kgToLbs } from "src/utils/units";
 import TextUtils from "src/utils/text";
+import { PerformerCardGrid } from "./PerformerCardGrid";
 
 const PerformerItemList = makeItemList({
   filterMode: GQL.FilterMode.Performers,
@@ -263,20 +264,13 @@ export const PerformerList: React.FC<IPerformerList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
-            {result.data.findPerformers.performers.map((p) => (
-              <PerformerCard
-                key={p.id}
-                performer={p}
-                selecting={selectedIds.size > 0}
-                selected={selectedIds.has(p.id)}
-                onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-                  onSelectChange(p.id, selected, shiftKey)
-                }
-                extraCriteria={extraCriteria}
-              />
-            ))}
-          </div>
+          <PerformerCardGrid
+            performers={result.data.findPerformers.performers}
+            zoomIndex={filter.zoomIndex}
+            selectedIds={selectedIds}
+            onSelectChange={onSelectChange}
+            extraCriteria={extraCriteria}
+          />
         );
       }
       if (filter.displayMode === DisplayMode.List) {

ui/v2.5/src/components/Studios/StudioCardGrid.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import * as GQL from "src/core/generated-graphql";
+import { StudioCard } from "./StudioCard";
+
+interface IStudioCardGrid {
+  studios: GQL.StudioDataFragment[];
+  fromParent: boolean | undefined;
+  selectedIds: Set<string>;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+}
+
+export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
+  studios,
+  fromParent,
+  selectedIds,
+  onSelectChange,
+}) => {
+  return (
+    <div className="row justify-content-center">
+      {studios.map((studio) => (
+        <StudioCard
+          key={studio.id}
+          studio={studio}
+          hideParent={fromParent}
+          selecting={selectedIds.size > 0}
+          selected={selectedIds.has(studio.id)}
+          onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+            onSelectChange(studio.id, selected, shiftKey)
+          }
+        />
+      ))}
+    </div>
+  );
+};

ui/v2.5/src/components/Studios/StudioList.tsx

@@ -18,8 +18,8 @@ import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
-import { StudioCard } from "./StudioCard";
 import { StudioTagger } from "../Tagger/studios/StudioTagger";
+import { StudioCardGrid } from "./StudioCardGrid";
 
 const StudioItemList = makeItemList({
   filterMode: GQL.FilterMode.Studios,
@@ -135,20 +135,12 @@ export const StudioList: React.FC<IStudioList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row px-xl-5 justify-content-center">
-            {result.data.findStudios.studios.map((studio) => (
-              <StudioCard
-                key={studio.id}
-                studio={studio}
-                hideParent={fromParent}
-                selecting={selectedIds.size > 0}
-                selected={selectedIds.has(studio.id)}
-                onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-                  onSelectChange(studio.id, selected, shiftKey)
-                }
-              />
-            ))}
-          </div>
+          <StudioCardGrid
+            studios={result.data.findStudios.studios}
+            fromParent={fromParent}
+            selectedIds={selectedIds}
+            onSelectChange={onSelectChange}
+          />
         );
       }
       if (filter.displayMode === DisplayMode.List) {

ui/v2.5/src/components/Tags/TagCardGrid.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import * as GQL from "src/core/generated-graphql";
+import { TagCard } from "./TagCard";
+
+interface ITagCardGrid {
+  tags: GQL.TagDataFragment[];
+  selectedIds: Set<string>;
+  zoomIndex: number;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+}
+
+export const TagCardGrid: React.FC<ITagCardGrid> = ({
+  tags,
+  selectedIds,
+  zoomIndex,
+  onSelectChange,
+}) => {
+  return (
+    <div className="row justify-content-center">
+      {tags.map((tag) => (
+        <TagCard
+          key={tag.id}
+          tag={tag}
+          zoomIndex={zoomIndex}
+          selecting={selectedIds.size > 0}
+          selected={selectedIds.has(tag.id)}
+          onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+            onSelectChange(tag.id, selected, shiftKey)
+          }
+        />
+      ))}
+    </div>
+  );
+};

ui/v2.5/src/components/Tags/TagList.tsx

@@ -24,10 +24,10 @@ import NavUtils from "src/utils/navigation";
 import { Icon } from "../Shared/Icon";
 import { ModalComponent } from "../Shared/Modal";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
-import { TagCard } from "./TagCard";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { tagRelationHook } from "../../core/tags";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import { TagCardGrid } from "./TagCardGrid";
 
 interface ITagList {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
@@ -188,20 +188,12 @@ export const TagList: React.FC<ITagList> = ({ filterHook, alterQuery }) => {
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row px-xl-5 justify-content-center">
-            {result.data.findTags.tags.map((tag) => (
-              <TagCard
-                key={tag.id}
-                tag={tag}
-                zoomIndex={filter.zoomIndex}
-                selecting={selectedIds.size > 0}
-                selected={selectedIds.has(tag.id)}
-                onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-                  onSelectChange(tag.id, selected, shiftKey)
-                }
-              />
-            ))}
-          </div>
+          <TagCardGrid
+            tags={result.data.findTags.tags}
+            zoomIndex={filter.zoomIndex}
+            selectedIds={selectedIds}
+            onSelectChange={onSelectChange}
+          />
         );
       }
       if (filter.displayMode === DisplayMode.List) {