replace polling call for item counts and group pinboards, to instead be triggered whenever we hear about a new/mutated item on any pinboard

Author: twrichards

client/src/fronts/frontsIntegration.tsx

@@ -40,7 +40,8 @@ export const FrontsIntegration = ({
     [frontsPinboardElements]
   );
 
-  const { setError } = useGlobalStateContext();
+  const { setError, totalItemsReceivedViaSubscription } =
+    useGlobalStateContext();
 
   const apolloClient = useApolloClient();
 
@@ -84,9 +85,12 @@ export const FrontsIntegration = ({
     variables: {
       pinboardIds,
     },
-    pollInterval: 10_000, //TODO consider subscribing to all messages and fetching counts based on that, might be more efficient
   });
 
+  useEffect(() => {
+    itemCountsQuery.refetch();
+  }, [totalItemsReceivedViaSubscription]);
+
   useEffect(() => {
     itemCountsQuery.data?.getItemCounts &&
       setMaybeItemCountsLookup(

client/src/globalState.tsx

@@ -67,6 +67,7 @@ interface GlobalStateContextShape {
   allSubscriptionItems: Item[];
   allSubscriptionClaimedItems: Item[]; // both the updated 'claimed' item and the new 'claim' item
   allSubscriptionOnSeenItems: LastItemSeenByUser[];
+  totalItemsReceivedViaSubscription: number;
 
   payloadToBeSent: PayloadAndType | null;
   setPayloadToBeSent: (newPayloadToBeSent: PayloadAndType | null) => void;
@@ -288,9 +289,15 @@ export const GlobalStateProvider = ({
     ? [demoPinboardData]
     : pinboardDataQuery.data?.getPinboardsByIds || [];
 
+  const [
+    totalItemsReceivedViaSubscription,
+    setTotalItemsReceivedViaSubscription,
+  ] = useState(0);
+
   const [allSubscriptionItems, setAllSubscriptionItems] = useState<Item[]>([]);
   const itemSubscription = useSubscription(gqlOnMutateItem, {
     onSubscriptionData: ({ subscriptionData }) => {
+      setTotalItemsReceivedViaSubscription((prev) => prev + 1);
       const itemFromSubscription: Item = subscriptionData.data.onMutateItem;
       const pinboardId = itemFromSubscription.pinboardId;
       // TODO trigger any item count re-fetches (probably need to store a count of items to trigger useEffect elsewhere)
@@ -317,6 +324,7 @@ export const GlobalStateProvider = ({
     useState<Item[]>([]);
   const claimSubscription = useSubscription(gqlOnClaimItem, {
     onSubscriptionData: ({ subscriptionData }) => {
+      setTotalItemsReceivedViaSubscription((prev) => prev + 1);
       const { updatedItem, newItem }: Claimed =
         subscriptionData.data.onClaimItem;
       const pinboardId = updatedItem.pinboardId;
@@ -330,11 +338,6 @@ export const GlobalStateProvider = ({
           updatedItem,
           newItem,
         ]);
-        if (!isExpanded && pinboardId !== selectedPinboardId) {
-          // TODO check this condition doesn't need to be ORed
-          showNotification(newItem);
-          setUnreadFlag(pinboardId)(true);
-        }
       }
     },
   });
@@ -681,9 +684,10 @@ export const GlobalStateProvider = ({
     activePinboards,
     activePinboardIds,
 
-    allSubscriptionItems: allSubscriptionItems,
-    allSubscriptionClaimedItems: allSubscriptionClaimedItems,
-    allSubscriptionOnSeenItems: allSubscriptionOnSeenItems,
+    allSubscriptionItems,
+    allSubscriptionClaimedItems,
+    allSubscriptionOnSeenItems,
+    totalItemsReceivedViaSubscription,
 
     payloadToBeSent,
     setPayloadToBeSent,

client/src/inline/inlineMode.tsx

@@ -2,10 +2,11 @@ import React, { useEffect, useMemo, useState } from "react";
 import { InlineModePinboardTogglePortal } from "./inlineModePinboardToggle";
 import { useLazyQuery } from "@apollo/client";
 import { gqlGetItemCounts } from "../../gql";
-import { PinboardIdWithItemCounts } from "../../../shared/graphql/graphql";
+import { PinboardIdWithItemCounts } from "shared/graphql/graphql";
 import { InlineModePanel } from "./inlineModePanel";
 import ReactDOM from "react-dom";
 import { InlineModeWorkflowColumnHeading } from "./inlineModeWorkflowColumnHeading";
+import { useGlobalStateContext } from "../globalState";
 
 export const WORKFLOW_PINBOARD_ELEMENTS_QUERY_SELECTOR =
   ".content-list-item__field--pinboard";
@@ -37,6 +38,8 @@ export const InlineMode = ({
   maybeInlineSelectedPinboardId,
   setMaybeInlineSelectedPinboardId,
 }: InlineModeProps) => {
+  const { totalItemsReceivedViaSubscription } = useGlobalStateContext();
+
   const pinboardArea = useMemo(
     () => document.getElementById("pinboard-area"),
     []
@@ -55,11 +58,9 @@ export const InlineMode = ({
     Record<string, PinboardIdWithItemCounts>
   >({});
 
-  const [fetchItemCounts, { stopPolling, startPolling }] =
-    useLazyQuery(gqlGetItemCounts);
+  const [fetchItemCounts] = useLazyQuery(gqlGetItemCounts);
 
   useEffect(() => {
-    stopPolling();
     const pinboardIds = Object.keys(workflowTitleElementLookup);
     if (pinboardIds.length > 0) {
       fetchItemCounts({
@@ -80,9 +81,8 @@ export const InlineMode = ({
             )
           ),
       });
-      startPolling(15000);
     }
-  }, [workflowTitleElementLookup]);
+  }, [workflowTitleElementLookup, totalItemsReceivedViaSubscription]);
 
   const maybeSelectedNode =
     maybeInlineSelectedPinboardId &&

client/src/panel.tsx

@@ -67,6 +67,7 @@ export const Panel = ({
     setActiveTab,
     boundedPositionTranslation,
     setUnreadFlag,
+    totalItemsReceivedViaSubscription,
   } = useGlobalStateContext();
 
   const tourProgress = useTourProgress();
@@ -94,9 +95,11 @@ export const Panel = ({
   const isTopHalf =
     Math.abs(boundedPositionTranslation.y) > window.innerHeight / 2;
 
-  const groupPinboardIdsQuery = useQuery(gqlGetGroupPinboardIds, {
-    pollInterval: 15000, // always poll this one, to ensure we get unread flags even when pinboard is not expanded
-  });
+  const groupPinboardIdsQuery = useQuery(gqlGetGroupPinboardIds);
+
+  useEffect(() => {
+    groupPinboardIdsQuery.refetch();
+  }, [totalItemsReceivedViaSubscription]);
 
   const groupPinboardIdsWithClaimCounts: PinboardIdWithClaimCounts[] = useMemo(
     () =>