diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html index 0e00af82..7ba61983 100644 --- a/bootstrapping-lambda/local/index.html +++ b/bootstrapping-lambda/local/index.html @@ -4,6 +4,20 @@ PinBoard + @@ -58,7 +72,8 @@

Override unread notifications bubble

Fronts Integration

- Composer Buttons etc. (under trail image in furniture)
+

Composer Buttons etc. (under trail image in furniture)

+ Requires preselected pinboard (like in composer)
@@ -70,23 +85,23 @@

Fronts Integration

- Fronts Clipboard Card:
+

Fronts Clipboard Card:

- Fronts Article Cards [Collapsed]:
+

Fronts Article Cards [Collapsed]:


- Fronts Article Cards [Expanded]
+

Fronts Article Cards [Expanded]

Add to 📌 button

diff --git a/client/src/fronts/frontsPinboardArticleButton.tsx b/client/src/fronts/frontsPinboardArticleButton.tsx index dccb161f..a35c1117 100644 --- a/client/src/fronts/frontsPinboardArticleButton.tsx +++ b/client/src/fronts/frontsPinboardArticleButton.tsx @@ -25,7 +25,7 @@ export const FrontsPinboardArticleButton = ({ withDraggableThumbsOfRatio, hasCountsLoaded, }: FrontsPinboardArticleButtonProps) => { - const { setIsExpanded, openPinboard } = useGlobalStateContext(); + const { peekAtPinboard } = useGlobalStateContext(); const apolloClient = useApolloClient(); @@ -82,8 +82,7 @@ export const FrontsPinboardArticleButton = ({ onClick={(event) => { event.stopPropagation(); if (maybePinboardData) { - setIsExpanded(true); - openPinboard(false)(maybePinboardData, false); // TODO probably should be 'peek at pinboard' from panel.tsx + peekAtPinboard(maybePinboardData.id); } else { alert( "This piece is not tracked in workflow, which is required to chat and share assets (such as crops) via Pinboard." @@ -151,9 +150,10 @@ export const FrontsPinboardArticleButton = ({ onDragStart={(event) => { event.dataTransfer.setData("URL", payload.embeddableUrl); }} - onClick={ - () => console.log(item.id) //TODO open pinboard and scroll to selected item to see context - } + onClick={() => { + peekAtPinboard(item.pinboardId); + console.log(item.id); //TODO scroll to selected item to see context + }} > ))} diff --git a/client/src/fronts/suggestAlternateCrops.tsx b/client/src/fronts/suggestAlternateCrops.tsx index 6b87c62c..2d5ce497 100644 --- a/client/src/fronts/suggestAlternateCrops.tsx +++ b/client/src/fronts/suggestAlternateCrops.tsx @@ -78,7 +78,7 @@ export const SuggestAlternateCrops = ({ const { setIsExpanded, preselectedPinboard, - openPinboard, + peekAtPinboard, setPayloadToBeSent, clearSelectedPinboard, cropsOnPreselectedPinboard, @@ -131,7 +131,7 @@ export const SuggestAlternateCrops = ({ }, }) .then(() => { - openPinboard(false)(preselectedPinboard, false); + peekAtPinboard(preselectedPinboard.id); setIsExpanded(true); }); // TODO handle errors with catch } else { @@ -165,7 +165,7 @@ export const SuggestAlternateCrops = ({ }) => { if (!cropsOnPreselectedPinboard) return null; const cropsMatchingRatio = cropsOnPreselectedPinboard.filter( - (_) => _.aspectRatio === customRatio + ([_]) => _.aspectRatio === customRatio ); return (
- {cropsMatchingRatio.map((payload, index) => ( + {cropsMatchingRatio.map(([payload, item], index) => ( console.log(item.id) //TODO open pinboard and scroll to selected item to see context - // } + onClick={() => { + peekAtPinboard(item.pinboardId); + console.log(item.id); //TODO scroll to selected item to see context + }} > ))}
diff --git a/client/src/globalState.tsx b/client/src/globalState.tsx index b382b091..888d7607 100644 --- a/client/src/globalState.tsx +++ b/client/src/globalState.tsx @@ -64,11 +64,14 @@ interface GlobalStateContextShape { openPinboard: ( isDemo: boolean ) => (pinboardData: PinboardData, isOpenInNewTab: boolean) => void; + peekAtPinboard: (pinboardId: string) => void; openPinboardInNewTab: (pinboardData: PinboardData) => void; closePinboard: (pinboardId: string) => void; preselectedPinboard: PreselectedPinboard; - cropsOnPreselectedPinboard: PayloadWithThumbnail[]; - setCropsOnPreselectedPinboard: (crops: PayloadWithThumbnail[]) => void; + cropsOnPreselectedPinboard: Array<[PayloadWithThumbnail, Item]>; + setCropsOnPreselectedPinboard: ( + crops: Array<[PayloadWithThumbnail, Item]> + ) => void; selectedPinboardId: string | null | undefined; clearSelectedPinboard: () => void; @@ -187,7 +190,7 @@ export const GlobalStateProvider = ({ isPinboardData(preselectedPinboard) && preselectedPinboard.id; const [cropsOnPreselectedPinboard, setCropsOnPreselectedPinboard] = useState< - PayloadWithThumbnail[] + Array<[PayloadWithThumbnail, Item]> >([]); const [ @@ -220,17 +223,20 @@ export const GlobalStateProvider = ({ const activePinboardIds = isDemoSelectedPinboard ? [demoPinboardData.id] - : [ - ...(preselectedPinboardId ? [preselectedPinboardId] : []), - ...(maybeOpenPinboardIdBasedOnQueryParam - ? [maybeOpenPinboardIdBasedOnQueryParam] - : []), - ...manuallyOpenedPinboardIds?.filter( - (_) => - _ !== preselectedPinboardId && - _ !== maybeOpenPinboardIdBasedOnQueryParam - ), - ]; + : Array.from( + new Set([ + ...(selectedPinboardId ? [selectedPinboardId] : []), + ...(preselectedPinboardId ? [preselectedPinboardId] : []), + ...(maybeOpenPinboardIdBasedOnQueryParam + ? [maybeOpenPinboardIdBasedOnQueryParam] + : []), + ...manuallyOpenedPinboardIds?.filter( + (_) => + _ !== preselectedPinboardId && + _ !== maybeOpenPinboardIdBasedOnQueryParam + ), + ]) + ); const pinboardDataQuery = useQuery<{ getPinboardsByIds: PinboardData[]; @@ -378,6 +384,11 @@ export const GlobalStateProvider = ({ } }; + const peekAtPinboard = (pinboardId: string) => { + setSelectedPinboardId(pinboardId); + setIsExpanded(true); + }; + const [errors, setErrors] = useState>({}); const setError = (pinboardId: string, error: ApolloError | undefined) => @@ -563,6 +574,7 @@ export const GlobalStateProvider = ({ addManuallyOpenedPinboardId, openPinboard, openPinboardInNewTab, + peekAtPinboard, closePinboard, preselectedPinboard, cropsOnPreselectedPinboard, diff --git a/client/src/panel.tsx b/client/src/panel.tsx index 32b958cc..c0233e80 100644 --- a/client/src/panel.tsx +++ b/client/src/panel.tsx @@ -72,15 +72,9 @@ export const Panel = ({ const tourProgress = useTourProgress(); - const isInline = useMemo(isInlineMode, []); - const selectedPinboard = activePinboards.find( (activePinboard) => activePinboard.id === selectedPinboardId ); - const [_maybePeekingAtPinboard, setMaybePeekingAtPinboard] = - useState(null); - const maybePeekingAtPinboard = - tourProgress.isRunning || isInline ? null : _maybePeekingAtPinboard; const title = (() => { if (selectedPinboard?.isNotFound) { @@ -89,9 +83,6 @@ export const Panel = ({ if (selectedPinboardId) { return selectedPinboard?.title || "Loading pinboard..."; } - if (maybePeekingAtPinboard) { - return maybePeekingAtPinboard?.title || "Loading pinboard..."; - } return "Select a pinboard"; })(); @@ -182,9 +173,6 @@ export const Panel = ({ ...groupPinboardIds, // spread required because useEffect only checks the pointer, not the contents of the activePinboardIds array ]); - const peekAtPinboard = (pinboard: PinboardData) => - setMaybePeekingAtPinboard(pinboard); - return (
{ - clearSelectedPinboard(); - setMaybePeekingAtPinboard(null); - }} + selectedPinboard={selectedPinboard} + clearSelectedPinboard={clearSelectedPinboard} headingTooltipText={ - (selectedPinboard && - getTooltipText( - selectedPinboard.title, - selectedPinboard.headline - )) || - (maybePeekingAtPinboard - ? getTooltipText( - maybePeekingAtPinboard.title, - maybePeekingAtPinboard.headline - ) - : undefined) + selectedPinboard && + getTooltipText(selectedPinboard.title, selectedPinboard.headline) } isTopHalf={isTopHalf} isLeftHalf={isLeftHalf} > {title} @@ -280,10 +253,9 @@ export const Panel = ({ {panelRef.current && } - {!selectedPinboardId && !maybePeekingAtPinboard && ( + {!selectedPinboardId && ( )) } - - {maybePeekingAtPinboard && ( - - )}
); }; diff --git a/client/src/pinboard.tsx b/client/src/pinboard.tsx index d01f6fd1..9b91cc2c 100644 --- a/client/src/pinboard.tsx +++ b/client/src/pinboard.tsx @@ -159,9 +159,9 @@ export const Pinboard = ({ items.reduce( (acc, item) => item.type === "grid-crop" && item.payload - ? [...acc, JSON.parse(item.payload)] + ? [...acc, [JSON.parse(item.payload), item]] : acc, - [] as PayloadWithThumbnail[] + [] as Array<[PayloadWithThumbnail, Item]> ) ); }, [preselectedPinboard, items]); diff --git a/client/src/selectPinboard.tsx b/client/src/selectPinboard.tsx index e51ef8c8..1bb84434 100644 --- a/client/src/selectPinboard.tsx +++ b/client/src/selectPinboard.tsx @@ -52,7 +52,6 @@ const SectionHeading: React.FC = ({ children }) => ( interface SelectPinboardProps { pinboardsWithClaimCounts: PinboardDataWithClaimCounts[]; - peekAtPinboard: (pinboard: PinboardData) => void; noOfTeamPinboardsNotShown: number; isShowAllTeamPinboards: boolean; setIsShowAllTeamPinboards: (newValue: boolean) => void; @@ -62,7 +61,6 @@ interface SelectPinboardProps { export const SelectPinboard = ({ pinboardsWithClaimCounts, - peekAtPinboard, noOfTeamPinboardsNotShown, isShowAllTeamPinboards, setIsShowAllTeamPinboards, @@ -81,6 +79,7 @@ export const SelectPinboard = ({ openPinboard, openPinboardInNewTab, closePinboard, + peekAtPinboard, preselectedPinboard, hasWebPushSubscription, @@ -203,7 +202,7 @@ export const SelectPinboard = ({ } else if (isOpenInNewTab || isInline) { openPinboardInNewTab(pinboardData); } else if (isTeamPinboard) { - peekAtPinboard(pinboardData); + peekAtPinboard(pinboardData.id); } else { openPinboard(tourProgress.isRunning)(pinboardData, isOpenInNewTab); }