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);
}