diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html
index d59ca1b8..a7afb7f6 100644
--- a/bootstrapping-lambda/local/index.html
+++ b/bootstrapping-lambda/local/index.html
@@ -59,9 +59,11 @@
Fronts Clipboard Card:
diff --git a/client/src/fronts/suggestAlternateCrops.tsx b/client/src/fronts/suggestAlternateCrops.tsx
index 9192167a..31dcb93e 100644
--- 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 (
+
+ {cropsMatchingRatio} crop{cropsMatchingRatio === 1 ? "" : "s"} at{" "}
+ {customRatio} already suggested
+
+ );
+ };
+
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]) => (
-
- Suggest an alternate {customRatio} crop
-
+ <>
+
+ Suggest an alternate {customRatio} crop
+
+
+ >
)
)}
,
diff --git a/client/src/globalState.tsx b/client/src/globalState.tsx
index 201d279b..b382b091 100644
--- 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
index ac777d9a..434c3e42 100644
--- 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),
{