Plugin API more patchable components

ui/v2.5/src/components/Groups/GroupCard.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
+import { PatchComponent } from "src/patch";
 import { GridCard } from "../Shared/GridCard/GridCard";
 import { HoverPopover } from "../Shared/HoverPopover";
 import { Icon } from "../Shared/Icon";
@@ -47,137 +48,140 @@ interface IProps {
   onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
 }
 
-export const GroupCard: React.FC<IProps> = ({
-  group,
-  sceneNumber,
-  cardWidth,
-  selecting,
-  selected,
-  zoomIndex,
-  onSelectedChanged,
-  fromGroupId,
-  onMove,
-}) => {
-  const groupDescription = useMemo(() => {
-    if (!fromGroupId) {
-      return undefined;
-    }
-
-    const containingGroup = group.containing_groups.find(
-      (cg) => cg.group.id === fromGroupId
-    );
+export const GroupCard: React.FC<IProps> = PatchComponent(
+  "GroupCard",
+  ({
+    group,
+    sceneNumber,
+    cardWidth,
+    selecting,
+    selected,
+    zoomIndex,
+    onSelectedChanged,
+    fromGroupId,
+    onMove,
+  }) => {
+    const groupDescription = useMemo(() => {
+      if (!fromGroupId) {
+        return undefined;
+      }
 
-    return containingGroup?.description ?? undefined;
-  }, [fromGroupId, group.containing_groups]);
+      const containingGroup = group.containing_groups.find(
+        (cg) => cg.group.id === fromGroupId
+      );
 
-  function maybeRenderScenesPopoverButton() {
-    if (group.scenes.length === 0) return;
+      return containingGroup?.description ?? undefined;
+    }, [fromGroupId, group.containing_groups]);
 
-    const popoverContent = group.scenes.map((scene) => (
-      <SceneLink key={scene.id} scene={scene} />
-    ));
+    function maybeRenderScenesPopoverButton() {
+      if (group.scenes.length === 0) return;
 
-    return (
-      <HoverPopover
-        className="scene-count"
-        placement="bottom"
-        content={popoverContent}
-      >
-        <Button className="minimal">
-          <Icon icon={faPlayCircle} />
-          <span>{group.scenes.length}</span>
-        </Button>
-      </HoverPopover>
-    );
-  }
+      const popoverContent = group.scenes.map((scene) => (
+        <SceneLink key={scene.id} scene={scene} />
+      ));
 
-  function maybeRenderTagPopoverButton() {
-    if (group.tags.length <= 0) return;
-
-    const popoverContent = group.tags.map((tag) => (
-      <TagLink key={tag.id} linkType="group" tag={tag} />
-    ));
-
-    return (
-      <HoverPopover placement="bottom" content={popoverContent}>
-        <Button className="minimal tag-count">
-          <Icon icon={faTag} />
-          <span>{group.tags.length}</span>
-        </Button>
-      </HoverPopover>
-    );
-  }
+      return (
+        <HoverPopover
+          className="scene-count"
+          placement="bottom"
+          content={popoverContent}
+        >
+          <Button className="minimal">
+            <Icon icon={faPlayCircle} />
+            <span>{group.scenes.length}</span>
+          </Button>
+        </HoverPopover>
+      );
+    }
 
-  function maybeRenderOCounter() {
-    if (!group.o_counter) return;
+    function maybeRenderTagPopoverButton() {
+      if (group.tags.length <= 0) return;
 
-    return <OCounterButton value={group.o_counter} />;
-  }
+      const popoverContent = group.tags.map((tag) => (
+        <TagLink key={tag.id} linkType="group" tag={tag} />
+      ));
 
-  function maybeRenderPopoverButtonGroup() {
-    if (
-      sceneNumber ||
-      groupDescription ||
-      group.scenes.length > 0 ||
-      group.tags.length > 0 ||
-      group.containing_groups.length > 0 ||
-      group.sub_group_count > 0
-    ) {
       return (
-        <>
-          <Description
-            sceneNumber={sceneNumber}
-            description={groupDescription}
-          />
-          <hr />
-          <ButtonGroup className="card-popovers">
-            {maybeRenderScenesPopoverButton()}
-            {maybeRenderTagPopoverButton()}
-            {(group.sub_group_count > 0 ||
-              group.containing_groups.length > 0) && (
-              <RelatedGroupPopoverButton group={group} />
-            )}
-            {maybeRenderOCounter()}
-          </ButtonGroup>
-        </>
+        <HoverPopover placement="bottom" content={popoverContent}>
+          <Button className="minimal tag-count">
+            <Icon icon={faTag} />
+            <span>{group.tags.length}</span>
+          </Button>
+        </HoverPopover>
       );
     }
-  }
 
-  return (
-    <GridCard
-      className={`group-card zoom-${zoomIndex}`}
-      objectId={group.id}
-      onMove={onMove}
-      url={`/groups/${group.id}`}
-      width={cardWidth}
-      title={group.name}
-      linkClassName="group-card-header"
-      image={
-        <>
-          <img
-            loading="lazy"
-            className="group-card-image"
-            alt={group.name ?? ""}
-            src={group.front_image_path ?? ""}
-          />
-          <RatingBanner rating={group.rating100} />
-        </>
-      }
-      details={
-        <div className="group-card__details">
-          <span className="group-card__date">{group.date}</span>
-          <TruncatedText
-            className="group-card__description"
-            text={group.synopsis}
-            lineCount={3}
-          />
-        </div>
+    function maybeRenderOCounter() {
+      if (!group.o_counter) return;
+
+      return <OCounterButton value={group.o_counter} />;
+    }
+
+    function maybeRenderPopoverButtonGroup() {
+      if (
+        sceneNumber ||
+        groupDescription ||
+        group.scenes.length > 0 ||
+        group.tags.length > 0 ||
+        group.containing_groups.length > 0 ||
+        group.sub_group_count > 0
+      ) {
+        return (
+          <>
+            <Description
+              sceneNumber={sceneNumber}
+              description={groupDescription}
+            />
+            <hr />
+            <ButtonGroup className="card-popovers">
+              {maybeRenderScenesPopoverButton()}
+              {maybeRenderTagPopoverButton()}
+              {(group.sub_group_count > 0 ||
+                group.containing_groups.length > 0) && (
+                <RelatedGroupPopoverButton group={group} />
+              )}
+              {maybeRenderOCounter()}
+            </ButtonGroup>
+          </>
+        );
       }
-      selected={selected}
-      selecting={selecting}
-      onSelectedChanged={onSelectedChanged}
-      popovers={maybeRenderPopoverButtonGroup()}
-    />
-  );
-};
+    }
+
+    return (
+      <GridCard
+        className={`group-card zoom-${zoomIndex}`}
+        objectId={group.id}
+        onMove={onMove}
+        url={`/groups/${group.id}`}
+        width={cardWidth}
+        title={group.name}
+        linkClassName="group-card-header"
+        image={
+          <>
+            <img
+              loading="lazy"
+              className="group-card-image"
+              alt={group.name ?? ""}
+              src={group.front_image_path ?? ""}
+            />
+            <RatingBanner rating={group.rating100} />
+          </>
+        }
+        details={
+          <div className="group-card__details">
+            <span className="group-card__date">{group.date}</span>
+            <TruncatedText
+              className="group-card__description"
+              text={group.synopsis}
+              lineCount={3}
+            />
+          </div>
+        }
+        selected={selected}
+        selecting={selecting}
+        onSelectedChanged={onSelectedChanged}
+        popovers={maybeRenderPopoverButtonGroup()}
+      />
+    );
+  }
+);