fix(navbar): fix race condition when retrieving second level data (#1608

) * fix(navbar): fix race condition when retrieving second level data * chore: remove comment
isomerpages · Oct 19, 2023 · 4d351f4 · 4d351f4
1 parent 14b56a7
commit 4d351f4
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 36 deletions.
diff --git a/src/hooks/directoryHooks/useGetSecondLevelFoldersAndPages.ts b/src/hooks/directoryHooks/useGetSecondLevelFoldersAndPages.ts
@@ -1,4 +1,4 @@
-import { useQueries, UseQueryResult } from "react-query"
+import { useQuery, UseQueryResult } from "react-query"
 
 import { DIR_SECOND_LEVEL_DIRECTORIES_KEY } from "constants/queryKeys"
 
@@ -15,27 +15,42 @@ interface OrderedCollection {
   order: string[]
 }
 
-export const useGetSecondLevelFoldersAndPages = ({
+const getSecondLevelFoldersAndPages = ({
   siteName,
   collectionsData = [],
-}: SecondLevelFoldersAndPagesParams): UseQueryResult<OrderedCollection[]>[] => {
-  const directoryQueries = collectionsData
-    .filter<DirectoryData>((item): item is DirectoryData =>
-      isDirectoryData(item)
-    )
-    .map(({ name }) => ({
-      queryKey: [DIR_SECOND_LEVEL_DIRECTORIES_KEY, siteName, name],
-      queryFn: () =>
-        DirectoryService.getCollection({
-          siteName,
-          collectionName: name,
-        }).then((data) => ({
-          collectionName: name,
-          order: data.map(({ name: directoryName }) => directoryName),
-        })),
-    }))
+}: SecondLevelFoldersAndPagesParams) => {
+  return Promise.all(
+    collectionsData
+      .filter<DirectoryData>((item): item is DirectoryData =>
+        isDirectoryData(item)
+      )
+      .map(
+        ({ name }) =>
+          DirectoryService.getCollection({
+            siteName,
+            collectionName: name,
+          })
+            .then((data) => ({
+              collectionName: name,
+              order: data.map(({ name: directoryName }) => directoryName),
+            }))
+            .catch((_) => null) as Promise<OrderedCollection | null>
+      )
+  )
+}
 
-  return useQueries<OrderedCollection[]>(directoryQueries) as UseQueryResult<
-    OrderedCollection[]
-  >[]
+export const useGetSecondLevelFoldersAndPages = ({
+  siteName,
+  collectionsData = [],
+}: SecondLevelFoldersAndPagesParams): UseQueryResult<
+  (OrderedCollection | null)[]
+> => {
+  return useQuery<(OrderedCollection | null)[]>(
+    [DIR_SECOND_LEVEL_DIRECTORIES_KEY, ...collectionsData],
+    () => getSecondLevelFoldersAndPages({ siteName, collectionsData }),
+    {
+      retry: false,
+      cacheTime: 0, // We want to refetch data on every page load because file order may have changed
+    }
+  )
 }
diff --git a/src/layouts/EditNavBar.jsx b/src/layouts/EditNavBar.jsx
@@ -153,13 +153,25 @@ const EditNavBar = ({ match }) => {
 
   // get nav bar data
   const { data: navBarContents } = useGetNavHook(siteName)
-  const { data: collectionsData } = useGetFoldersAndPages({ siteName })
-  const { data: resourceRoomName } = useGetResourceRoomName(siteName)
-  const { data: resourceRoomContents } = useGetResourceRoom({
+  const {
+    data: collectionsData,
+    isLoading: isCollectionsDataLoading,
+  } = useGetFoldersAndPages({ siteName })
+  const {
+    data: resourceRoomName,
+    isLoading: isResourceRoomNameLoading,
+  } = useGetResourceRoomName(siteName)
+  const {
+    data: resourceRoomContents,
+    isLoading: isResourceRoomContentsLoading,
+  } = useGetResourceRoom({
     siteName,
     resourceRoomName: resourceRoomName || "",
   })
-  const secondLevelData = useGetSecondLevelFoldersAndPages({
+  const {
+    data: secondLevelData,
+    isLoading: isSecondLevelDataLoading,
+  } = useGetSecondLevelFoldersAndPages({
     siteName,
     collectionsData,
   })
@@ -168,7 +180,14 @@ const EditNavBar = ({ match }) => {
   const { mutateAsync: saveNavData } = useUpdateNavHook(siteName)
 
   useEffect(() => {
-    if (_.isEmpty(navBarContents)) return
+    if (
+      _.isEmpty(navBarContents) ||
+      isCollectionsDataLoading ||
+      isResourceRoomNameLoading ||
+      isResourceRoomContentsLoading ||
+      isSecondLevelDataLoading
+    )
+      return
 
     const { content, sha: navSha } = navBarContents
     const initialCollections = collectionsData.map((item) => item.name)
@@ -181,15 +200,14 @@ const EditNavBar = ({ match }) => {
           deslugifyDirectory(resource.name)
         )
       : undefined
-    const foldersContent =
-      secondLevelData && secondLevelData.every(({ isLoading }) => !isLoading)
-        ? secondLevelData.reduce((acc, curr) => {
-            const { data } = curr
-            const { collectionName, order } = data
-            acc[collectionName] = getNavFolderDropdownFromFolderOrder(order)
-            return acc
-          }, {})
-        : {}
+    const foldersContent = secondLevelData
+      ? secondLevelData.reduce((acc, curr) => {
+          if (!curr) return acc
+          const { collectionName, order } = curr
+          acc[collectionName] = getNavFolderDropdownFromFolderOrder(order)
+          return acc
+        }, {})
+      : {}
 
     // Add booleans for displaying links and sublinks
     const { links: initialLinks } = content
@@ -232,7 +250,13 @@ const EditNavBar = ({ match }) => {
     setResources(resourcesData)
     setFolderDropdowns(foldersContent)
     setErrors(initialErrors)
-  }, [navBarContents, collectionsData, resourceRoomName, resourceRoomContents])
+  }, [
+    navBarContents,
+    collectionsData,
+    resourceRoomName,
+    resourceRoomContents,
+    secondLevelData,
+  ])
 
   useEffect(() => {
     setHasChanges(