fix(app-project): data-fetching for assigned workflow level

Fix missing dependency errors in the `useAssignedLevel` hook by using `useSWR` to fetch and cache the assigned workflow. SWR also adds revalidation for cases where I might classify in the same tab over several days or weeks.
zooniverse · Aug 17, 2024 · c6307c6 · c6307c6
1 parent 22707c9
commit c6307c6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 30 deletions.
diff --git a/packages/app-project/src/hooks/useAssignedLevel.js b/packages/app-project/src/hooks/useAssignedLevel.js
@@ -6,36 +6,37 @@
 
 import { useEffect, useState } from 'react'
 import { panoptes } from '@zooniverse/panoptes-js'
+import useSWR from 'swr'
 
-function useAssignedLevel(assignedWorkflowID) {
-  const [assignedWorkflowLevel, setAssignedWorkflowLevel] = useState(1)
+const SWRoptions = {
+  revalidateIfStale: true,
+  revalidateOnMount: true,
+  revalidateOnFocus: true,
+  revalidateOnReconnect: true,
+  refreshInterval: 0
+}
 
-  async function checkAssignedLevel() {
-    const query = {
-      fields: 'configuration',
-      id: assignedWorkflowID
-    }
-    try {
-      const response = await panoptes.get('/workflows', query)
-      if (response.ok) {
-        const fetchedWorkflow = response.body.workflows?.[0]
-        setAssignedWorkflowLevel(parseInt(fetchedWorkflow?.configuration?.level), 10)
-      }
-    } catch (error) {
-      throw error
-    }
+async function fetchAssignedWorkflow({
+  fields = 'configuration',
+  assignedWorkflowID
+}) {
+  const query = {
+    fields,
+    id: assignedWorkflowID
+  }
+  const response = await panoptes.get('/workflows', query)
+  if (response.ok) {
+    const fetchedWorkflow = response.body.workflows?.[0]
+    return parseInt(fetchedWorkflow?.configuration?.level, 10)
   }
+  return 1
+}
 
-  useEffect(
-    function () {
-      if (assignedWorkflowID) {
-        checkAssignedLevel()
-      }
-    },
-    [assignedWorkflowID]
-  )
+function useAssignedLevel(assignedWorkflowID) {
+  const key = assignedWorkflowID ? { assignedWorkflowID } : null
+  const { data: assignedWorkflowLevel } = useSWR(key, fetchAssignedWorkflow, SWRoptions)
 
-  return assignedWorkflowLevel
+  return assignedWorkflowLevel || 1
 }
 
 export default useAssignedLevel
diff --git a/packages/app-project/src/screens/ClassifyPage/ClassifyPageConnector.js b/packages/app-project/src/screens/ClassifyPage/ClassifyPageConnector.js
@@ -1,5 +1,6 @@
 import { MobXProviderContext, observer } from 'mobx-react'
 import { useContext } from 'react'
+import useAssignedLevel from '@hooks/useAssignedLevel'
 import ClassifyPageContainer from './ClassifyPageContainer'
 
 function useStore(store) {
@@ -25,11 +26,13 @@ function ClassifyPageConnector(props) {
     projectPreferences,
     workflowAssignmentEnabled = false
   } = useStore(store)
+  const assignedWorkflowLevel = useAssignedLevel(assignedWorkflowID)
 
   return (
     <ClassifyPageContainer
       appLoadingState={appLoadingState}
       assignedWorkflowID={projectPreferences?.settings?.workflow_id}
+      assignedWorkflowLevel={assignedWorkflowLevel}
       projectPreferences={projectPreferences}
       workflowAssignmentEnabled={workflowAssignmentEnabled}
       {...props}

diff --git a/packages/app-project/src/screens/ClassifyPage/ClassifyPageContainer.js b/packages/app-project/src/screens/ClassifyPage/ClassifyPageContainer.js
@@ -2,10 +2,9 @@ import { useCallback, useEffect, useState } from 'react'
 import { array, bool, string } from 'prop-types'
 
 import ClassifyPage from './ClassifyPage'
-import useAssignedLevel from '@hooks/useAssignedLevel.js'
 
 function ClassifyPageContainer ({
-  assignedWorkflowID = '',
+  assignedWorkflowLevel = 1,
   subjectID,
   workflowAssignmentEnabled = false,
   workflowID,
@@ -16,7 +15,6 @@ function ClassifyPageContainer ({
   but can be reset by the Classifier component via onSubjectReset().
   This state does not change via components of the prioritized subjects UI (Next/Prev buttons) */
   const [selectedSubjectID, setSelectedSubjectID] = useState(subjectID)
-  const assignedWorkflowLevel = useAssignedLevel(assignedWorkflowID)
 
   let allowedWorkflows = workflows.slice()
   /* Double check that a volunteer navigating to url with workflowID is allowed to load that workflow */

diff --git a/packages/app-project/src/screens/ClassifyPage/ClassifyPageContainer.spec.js b/packages/app-project/src/screens/ClassifyPage/ClassifyPageContainer.spec.js
@@ -235,7 +235,7 @@ describe('Component > ClassifyPageContainer', function () {
             <RouterContext.Provider value={mockRouter}>
               <Provider store={mockStoreWithAssignment}>
                 <ClassifyPageContainer
-                  assignedWorkflowID='5678'
+                  assignedWorkflowLevel={2}
                   workflowAssignmentEnabled
                   workflowID='1234'
                   workflows={workflows}
@@ -279,7 +279,7 @@ describe('Component > ClassifyPageContainer', function () {
             <RouterContext.Provider value={mockRouter}>
               <Provider store={mockStoreWithAssignment}>
                 <ClassifyPageContainer
-                  assignedWorkflowID='1234'
+                  assignedWorkflowLevel={1}
                   workflowAssignmentEnabled
                   workflowID='5678'
                   workflows={workflows}