[fronts integration] handle when there are no counts for a pinboard, …

…because there are no messages on that pinboard
guardian · Oct 15, 2024 · 3e2fc4c · 3e2fc4c
1 parent 9c6828e
commit 3e2fc4c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/client/src/fronts/frontsIntegration.tsx b/client/src/fronts/frontsIntegration.tsx
@@ -64,9 +64,7 @@ export const FrontsIntegration = ({
   interface ItemCountsLookup {
     [pinboardId: string]: PinboardIdWithItemCounts;
   }
-  const [itemCountsLookup, setItemCountsLookup] = useState(
-    {} as ItemCountsLookup
-  );
+  const [maybeItemCountsLookup, setMaybeItemCountsLookup] = useState();
   useEffect(() => {
     const pinboardIds = Object.values(pathToPinboardDataMap).map(
       ({ id }) => id
@@ -82,7 +80,7 @@ export const FrontsIntegration = ({
         })
         .then(({ data }) => {
           data?.getItemCounts &&
-            setItemCountsLookup(
+            setMaybeItemCountsLookup(
               data.getItemCounts.reduce(
                 (
                   acc: ItemCountsLookup,
@@ -105,9 +103,11 @@ export const FrontsIntegration = ({
             ReactDOM.createPortal(
               <FrontsPinboardArticleButton
                 maybePinboardData={pathToPinboardDataMap[path]}
+                hasCountsLoaded={!!maybeItemCountsLookup}
                 maybeItemCounts={
                   pathToPinboardDataMap[path] &&
-                  itemCountsLookup[pathToPinboardDataMap[path].id]
+                  maybeItemCountsLookup &&
+                  maybeItemCountsLookup[pathToPinboardDataMap[path].id]
                 }
                 withDraggableThumbsOfRatio={
                   htmlElementToMountInto.dataset.withDraggableThumbsOfRatio

diff --git a/client/src/fronts/frontsPinboardArticleButton.tsx b/client/src/fronts/frontsPinboardArticleButton.tsx
@@ -16,12 +16,14 @@ interface FrontsPinboardArticleButtonProps {
   maybePinboardData: PinboardData | undefined;
   maybeItemCounts: PinboardIdWithItemCounts | undefined;
   withDraggableThumbsOfRatio: string | undefined;
+  hasCountsLoaded: boolean;
 }
 
 export const FrontsPinboardArticleButton = ({
   maybePinboardData,
   maybeItemCounts,
   withDraggableThumbsOfRatio,
+  hasCountsLoaded,
 }: FrontsPinboardArticleButtonProps) => {
   const { setIsExpanded, openPinboard } = useGlobalStateContext();
 
@@ -90,7 +92,8 @@ export const FrontsPinboardArticleButton = ({
         }}
       >
         {!maybePinboardData && "Not tracked in workflow"}
-        {maybePinboardData && !maybeItemCounts && <em>loading...</em>}
+        {maybePinboardData && !hasCountsLoaded && <em>loading...</em>}
+        {maybePinboardData && hasCountsLoaded && !maybeItemCounts && "0 items"}
         {maybeItemCounts && (
           <>
             {