refactor/simplify peekAtPinboard functionality, and use in the fron…

…ts integration to avoid polluting users' `My Pinboards` lists
guardian · Oct 24, 2024 · 6c09d10 · 6c09d10
1 parent b97732e
commit 6c09d10
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 87 deletions.
diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html
@@ -4,6 +4,20 @@
     <meta charset="UTF-8" />
     <title>PinBoard</title>
     <script src="https://pinboard.local.dev-gutools.co.uk/pinboard.loader.js"></script>
+    <style>
+      body {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        height: 100vh;
+        column-gap: 10px;
+      }
+      h3,
+      h4 {
+        margin-top: 10px;
+        margin-bottom: 5px;
+      }
+    </style>
   </head>
 
   <body>
@@ -58,7 +72,8 @@ <h3>Override unread notifications bubble</h3>
 
     <h3>Fronts Integration</h3>
 
-    Composer Buttons etc. (under trail image in furniture)<br />
+    <h4>Composer Buttons etc. (under trail image in furniture)</h4>
+    <em>Requires preselected pinboard (like in composer)</em>
     <div
       style="background: #f6f6f6; padding-left: 420px; display: inline-block"
     >
@@ -70,23 +85,23 @@ <h3>Fronts Integration</h3>
     </div>
 
     <div style="max-width: 180px">
-      Fronts Clipboard Card:<br />
+      <h4>Fronts Clipboard Card:</h4>
       <pinboard-article-button
-        data-url-path="football/2024/oct/08/tottenham-ryan-mason-anderlecht-manager-job"
+        data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
       ></pinboard-article-button>
     </div>
-    Fronts Article Cards [Collapsed]:<br />
+    <h4>Fronts Article Cards [Collapsed]:</h4>
     <pinboard-article-button
-      data-url-path="football/2024/oct/08/tottenham-ryan-mason-anderlecht-manager-job"
+      data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
     ></pinboard-article-button>
     <br />
-    Fronts Article Cards [Expanded]<br />
+    <h4>Fronts Article Cards [Expanded]</h4>
     <pinboard-article-button
-      data-url-path="football/2024/oct/08/tottenham-ryan-mason-anderlecht-manager-job"
+      data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
       data-with-draggable-thumbs-of-ratio="5:4"
     ></pinboard-article-button>
     <pinboard-article-button
-      data-url-path="football/2024/oct/08/tottenham-ryan-mason-anderlecht-manager-job"
+      data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
       data-with-draggable-thumbs-of-ratio="4:5"
     ></pinboard-article-button>
     <h3><code>Add to 📌</code> button</h3>

diff --git 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
+                }}
               ></img>
             ))}
           </div>

diff --git 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 (
       <div
@@ -215,18 +215,19 @@ export const SuggestAlternateCrops = ({
                 max-width: 350px;
               `}
             >
-              {cropsMatchingRatio.map((payload, index) => (
+              {cropsMatchingRatio.map(([payload, item], index) => (
                 <img
                   key={index}
                   css={css`
                     max-width: 100px;
                     max-height: 100px;
-                    //cursor: pointer;
+                    cursor: pointer;
                   `}
                   src={payload.thumbnail}
-                  // 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
+                  }}
                 ></img>
               ))}
             </div>

diff --git 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<PerPinboard<ApolloError>>({});
 
   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
@@ -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<PinboardData | null>(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 (
     <div
       css={css`
@@ -243,47 +231,31 @@ export const Panel = ({
       <Navigation
         activeTab={activeTab}
         setActiveTab={setActiveTab}
-        selectedPinboard={selectedPinboard || maybePeekingAtPinboard}
-        clearSelectedPinboard={() => {
-          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}
       >
         <span
           css={{
-            textDecoration: (selectedPinboard || maybePeekingAtPinboard)
-              ?.trashed
+            textDecoration: selectedPinboard?.trashed
               ? "line-through"
               : undefined,
-            fontStyle: (selectedPinboard || maybePeekingAtPinboard)?.isNotFound
-              ? "italic"
-              : undefined,
+            fontStyle: selectedPinboard?.isNotFound ? "italic" : undefined,
           }}
         >
           {title}
         </span>
       </Navigation>
       {panelRef.current && <Tour panelElement={panelRef.current} />}
 
-      {!selectedPinboardId && !maybePeekingAtPinboard && (
+      {!selectedPinboardId && (
         <SelectPinboard
           pinboardsWithClaimCounts={pinboardsWithClaimCounts}
-          peekAtPinboard={peekAtPinboard}
           noOfTeamPinboardsNotShown={noOfTeamPinboardsNotShown}
           isShowAllTeamPinboards={isShowAllTeamPinboards}
           setIsShowAllTeamPinboards={setIsShowAllTeamPinboards}
@@ -314,17 +286,6 @@ export const Panel = ({
           />
         ))
       }
-
-      {maybePeekingAtPinboard && (
-        <Pinboard
-          pinboardId={maybePeekingAtPinboard.id}
-          composerId={maybePeekingAtPinboard.composerId}
-          isExpanded={isExpanded}
-          isSelected={true}
-          panelElement={panelRef.current}
-          setMaybeInlineSelectedPinboardId={setMaybeInlineSelectedPinboardId}
-        />
-      )}
     </div>
   );
 };
diff --git 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
@@ -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);
       }