add option item id to highlight when using peekAtPinboard

Author: twrichards

client/src/fronts/frontsPinboardArticleButton.tsx

@@ -146,8 +146,7 @@ export const FrontsPinboardArticleButton = ({
                   event.dataTransfer.setData("URL", payload.embeddableUrl);
                 }}
                 onClick={() => {
-                  peekAtPinboard(item.pinboardId);
-                  console.log(item.id); //TODO scroll to selected item to see context
+                  peekAtPinboard(item.pinboardId, item.id);
                 }}
               ></img>
             ))}

client/src/fronts/suggestAlternateCrops.tsx

@@ -225,8 +225,7 @@ export const SuggestAlternateCrops = ({
                   `}
                   src={payload.thumbnail}
                   onClick={() => {
-                    peekAtPinboard(item.pinboardId);
-                    console.log(item.id); //TODO scroll to selected item to see context
+                    peekAtPinboard(item.pinboardId, item.id);
                   }}
                 ></img>
               ))}

client/src/globalState.tsx

@@ -64,7 +64,7 @@ interface GlobalStateContextShape {
   openPinboard: (
     isDemo: boolean
   ) => (pinboardData: PinboardData, isOpenInNewTab: boolean) => void;
-  peekAtPinboard: (pinboardId: string) => void;
+  peekAtPinboard: (pinboardId: string, maybeItemIdToHighlight?: string) => void;
   openPinboardInNewTab: (pinboardData: PinboardData) => void;
   closePinboard: (pinboardId: string) => void;
   preselectedPinboard: PreselectedPinboard;
@@ -75,6 +75,9 @@ interface GlobalStateContextShape {
   selectedPinboardId: string | null | undefined;
   clearSelectedPinboard: () => void;
 
+  maybeItemIdToHighlight: string | null;
+  clearMaybeItemIdToHighlight: () => void;
+
   hasEverUsedTour: boolean | undefined;
   visitTourStep: (tourStepId: string) => void;
 
@@ -384,8 +387,14 @@ export const GlobalStateProvider = ({
       }
     };
 
-  const peekAtPinboard = (pinboardId: string) => {
+  const [maybeItemIdToHighlight, setMaybeItemIdToHighlight] = useState<
+    string | null
+  >(null);
+  const clearMaybeItemIdToHighlight = () => setMaybeItemIdToHighlight(null);
+
+  const peekAtPinboard = (pinboardId: string, itemIdToHighlight?: string) => {
     setSelectedPinboardId(pinboardId);
+    itemIdToHighlight && setMaybeItemIdToHighlight(itemIdToHighlight);
     setIsExpanded(true);
   };
 
@@ -582,6 +591,9 @@ export const GlobalStateProvider = ({
     selectedPinboardId,
     clearSelectedPinboard,
 
+    maybeItemIdToHighlight,
+    clearMaybeItemIdToHighlight,
+
     hasEverUsedTour,
     visitTourStep,
 

client/src/scrollableItems.tsx

@@ -27,6 +27,7 @@ import { PendingItem } from "./types/PendingItem";
 import { UserLookup } from "./types/UserLookup";
 import { PINBOARD_ITEM_ID_QUERY_PARAM } from "../../shared/constants";
 import { useTourProgress } from "./tour/tourState";
+import { useGlobalStateContext } from "./globalState";
 
 interface ScrollableItemsProps {
   items: Array<PendingItem | Item>;
@@ -261,6 +262,20 @@ export const ScrollableItems = ({
       window.removeEventListener("message", handleItemFromServiceWorker);
   }, []);
 
+  const { maybeItemIdToHighlight, clearMaybeItemIdToHighlight } =
+    useGlobalStateContext();
+  useEffect(() => {
+    if (
+      maybeItemIdToHighlight &&
+      items.some((_) => _.id === maybeItemIdToHighlight)
+    ) {
+      setTimeout(() => {
+        scrollToItem(maybeItemIdToHighlight);
+        clearMaybeItemIdToHighlight();
+      }, 250);
+    }
+  }, [items, maybeItemIdToHighlight]);
+
   return (
     <div
       ref={setScrollableAreaRef}