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

…e...` buttons

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();
@@ -136,24 +138,40 @@ export const SuggestAlternateCrops = ({
         ReactDOM.createPortal(
           <root.div
             css={css`
-              display: flex;
+              display: inline-flex;
               flex-direction: column;
               gap: 5px;
               margin: 5px 0;
             `}
           >
             {Object.entries(SUGGESTIBLE_CROP_RATIOS).map(
               ([customRatio, cropType]) => (
-                <ButtonInOtherTools
-                  key={customRatio}
-                  onClick={onClick(
-                    htmlElement.dataset.mediaId,
-                    cropType,
-                    customRatio
-                  )}
-                >
-                  Suggest an alternate {customRatio} crop
-                </ButtonInOtherTools>
+                <div key={customRatio}>
+                  <ButtonInOtherTools
+                    onClick={onClick(
+                      htmlElement.dataset.mediaId,
+                      cropType,
+                      customRatio
+                    )}
+                  >
+                    Suggest an alternate {customRatio} crop
+                  </ButtonInOtherTools>
+                  <span
+                    css={css`
+                      ${agateSans.xxsmall()}; 
+                      color: ${pinMetal}; 
+                      margin-left: 9px;}
+                  `}
+                  >
+                    {cropsOnPreselectedPinboard &&
+                      cropsOnPreselectedPinboard.reduce(
+                        (acc, crop) =>
+                          crop.aspectRatio === customRatio ? acc + 1 : acc,
+                        0
+                      )}{" "}
+                    crop(s) at {customRatio} already suggested.
+                  </span>
+                </div>
               )
             )}
           </root.div>,

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,
 

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),
     {