display count of already suggested crops beneath `Suggest an alternat…

…e...` buttons
guardian · Oct 15, 2024 · 61ebc82 · 61ebc82
1 parent 890ef39
commit 61ebc82
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html
@@ -59,9 +59,11 @@ <h3>Override unread notifications bubble</h3>
     <h3>Fronts Integration</h3>
 
     Composer Buttons etc. (under trail image in furniture)<br />
-    <pinboard-suggest-alternate-crops
-      data-media-id="d6518ba44eb272830b779e4ed6356482007d4536"
-    ></pinboard-suggest-alternate-crops>
+    <div style="width: 195px; border: 1px dashed gray">
+      <pinboard-suggest-alternate-crops
+        data-media-id="d6518ba44eb272830b779e4ed6356482007d4536"
+      ></pinboard-suggest-alternate-crops>
+    </div>
 
     <div style="max-width: 180px">
       Fronts Clipboard Card:<br />

diff --git a/client/src/fronts/suggestAlternateCrops.tsx b/client/src/fronts/suggestAlternateCrops.tsx
@@ -12,6 +12,8 @@ import { useGlobalStateContext } from "../globalState";
 import { CreateItemInput } from "shared/graphql/graphql";
 import { gqlCreateItem } from "../../gql";
 import { isPinboardData, PinboardData } from "shared/graphql/extraTypes";
+import { agateSans } from "../../fontNormaliser";
+import { pinMetal } from "../../colours";
 
 export const SUGGEST_ALTERNATE_CROP_QUERY_SELECTOR =
   "pinboard-suggest-alternate-crops";
@@ -41,7 +43,6 @@ export const SuggestAlternateCrops = ({
   alternateCropSuggestionElements,
 }: {
   alternateCropSuggestionElements: HTMLElement[];
-  // TODO take in some count of existing crops (so people know it doesn't need doing again)
 }) => {
   // FIXME handle the piece not being tracked in workflow
 
@@ -55,6 +56,7 @@ export const SuggestAlternateCrops = ({
     openPinboard,
     setPayloadToBeSent,
     clearSelectedPinboard,
+    cropsOnPreselectedPinboard,
   } = useGlobalStateContext();
 
   const apolloClient = useApolloClient();
@@ -130,6 +132,33 @@ export const SuggestAlternateCrops = ({
       return () => window.removeEventListener("message", handleGridMessage); // Cleanup/unmount function
     }
   }, [maybeGridIFrameUrl]);
+
+  const AlreadySuggestedCropsForRatio = ({
+    customRatio,
+  }: {
+    customRatio: string;
+  }) => {
+    if (!cropsOnPreselectedPinboard) return null;
+    const cropsMatchingRatio = cropsOnPreselectedPinboard.reduce(
+      (acc, crop) => (crop.aspectRatio === customRatio ? acc + 1 : acc),
+      0
+    );
+    return (
+      <span
+        css={css`
+          ${agateSans.xxsmall()};
+          color: ${pinMetal};
+          margin-left: 9px;
+            margin-top: -5px;
+      }
+      `}
+      >
+        {cropsMatchingRatio} crop{cropsMatchingRatio === 1 ? "" : "s"} at{" "}
+        {customRatio} already suggested
+      </span>
+    );
+  };
+
   return (
     <>
       {alternateCropSuggestionElements.map((htmlElement) =>
@@ -140,20 +169,23 @@ export const SuggestAlternateCrops = ({
               flex-direction: column;
               gap: 5px;
               margin: 5px 0;
+              align-items: center;
             `}
           >
             {Object.entries(SUGGESTIBLE_CROP_RATIOS).map(
               ([customRatio, cropType]) => (
-                <ButtonInOtherTools
-                  key={customRatio}
-                  onClick={onClick(
-                    htmlElement.dataset.mediaId,
-                    cropType,
-                    customRatio
-                  )}
-                >
-                  Suggest an alternate {customRatio} crop
-                </ButtonInOtherTools>
+                <>
+                  <ButtonInOtherTools
+                    onClick={onClick(
+                      htmlElement.dataset.mediaId,
+                      cropType,
+                      customRatio
+                    )}
+                  >
+                    Suggest an alternate {customRatio} crop
+                  </ButtonInOtherTools>
+                  <AlreadySuggestedCropsForRatio customRatio={customRatio} />
+                </>
               )
             )}
           </root.div>,

diff --git a/client/src/globalState.tsx b/client/src/globalState.tsx
@@ -18,7 +18,10 @@ import {
   gqlGetPinboardsByIds,
   gqlRemoveManuallyOpenedPinboardIds,
 } from "../gql";
-import type { PayloadAndType } from "./types/PayloadAndType";
+import type {
+  PayloadAndType,
+  PayloadWithThumbnail,
+} from "./types/PayloadAndType";
 import type { PerPinboard } from "./types/PerPinboard";
 import type { PinboardData } from "../../shared/graphql/extraTypes";
 import { isPinboardData } from "../../shared/graphql/extraTypes";
@@ -64,6 +67,8 @@ interface GlobalStateContextShape {
   openPinboardInNewTab: (pinboardData: PinboardData) => void;
   closePinboard: (pinboardId: string) => void;
   preselectedPinboard: PreselectedPinboard;
+  cropsOnPreselectedPinboard: PayloadWithThumbnail[];
+  setCropsOnPreselectedPinboard: (crops: PayloadWithThumbnail[]) => void;
   selectedPinboardId: string | null | undefined;
   clearSelectedPinboard: () => void;
 
@@ -181,6 +186,10 @@ export const GlobalStateProvider = ({
   const preselectedPinboardId =
     isPinboardData(preselectedPinboard) && preselectedPinboard.id;
 
+  const [cropsOnPreselectedPinboard, setCropsOnPreselectedPinboard] = useState<
+    PayloadWithThumbnail[]
+  >([]);
+
   const [
     maybeOpenPinboardIdBasedOnQueryParam,
     setMaybeOpenPinboardIdBasedOnQueryParam,
@@ -556,6 +565,8 @@ export const GlobalStateProvider = ({
     openPinboardInNewTab,
     closePinboard,
     preselectedPinboard,
+    cropsOnPreselectedPinboard,
+    setCropsOnPreselectedPinboard,
     selectedPinboardId,
     clearSelectedPinboard,
 

diff --git a/client/src/pinboard.tsx b/client/src/pinboard.tsx
@@ -18,9 +18,13 @@ import { AssetView } from "./assetView";
 import { Feedback } from "./feedback";
 import { PINBOARD_TELEMETRY_TYPE, TelemetryContext } from "./types/Telemetry";
 import { ModalBackground } from "./modal";
-import { maybeConstructPayloadAndType } from "./types/PayloadAndType";
+import {
+  maybeConstructPayloadAndType,
+  PayloadWithThumbnail,
+} from "./types/PayloadAndType";
 import { useTourProgress, useTourStepRef } from "./tour/tourState";
 import { Reply } from "./reply";
+import { isPinboardData } from "shared/graphql/extraTypes";
 export interface ItemsMap {
   [id: string]: Item | PendingItem;
 }
@@ -56,7 +60,9 @@ export const Pinboard = ({
 
     payloadToBeSent,
     setPayloadToBeSent,
-    clearPayloadToBeSent,
+
+    preselectedPinboard,
+    setCropsOnPreselectedPinboard,
 
     showNotification,
 
@@ -145,6 +151,20 @@ export const Pinboard = ({
   const lastItemIndex = items.length - 1;
   const lastItem = items[lastItemIndex];
 
+  useEffect(() => {
+    isPinboardData(preselectedPinboard) &&
+      preselectedPinboard.id === pinboardId &&
+      setCropsOnPreselectedPinboard(
+        items.reduce(
+          (acc, item) =>
+            item.type === "grid-crop" && item.payload
+              ? [...acc, JSON.parse(item.payload)]
+              : acc,
+          [] as PayloadWithThumbnail[]
+        )
+      );
+  }, [preselectedPinboard, items]);
+
   const initialLastItemSeenByUsersQuery = useQuery(
     gqlGetLastItemSeenByUsers(pinboardId),
     {