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

…se#6219)

* 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 level. SWR also adds revalidation for cases where I might classify in the same tab over several days or weeks.

Also fixes the workflow assignment tests in `ClassifyPageContainer` so that they test against the correct levels.

* Check workflows from page props for faster performance

* The default assigned workflow level can be higher than 1

* remove unused imports

* avoid returning NaN for the workflow level

* don't refetch unless assignedWorkflowID changes

---------

Co-authored-by: Delilah <[email protected]>

packages/app-project/src/hooks/useAssignedLevel.js

@@ -3,39 +3,44 @@
   so we fetch the assigned workflow's config just in case.
   https://github.com/zooniverse/front-end-monorepo/issues/6198
 */
-
-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: false,
+  revalidateOnMount: false,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+  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 && response.body.workflows?.length) {
+    const fetchedWorkflow = response.body.workflows[0]
+    return parseInt(fetchedWorkflow?.configuration?.level, 10)
+  }
+  return 1
+}
 
-  useEffect(
-    function () {
-      if (assignedWorkflowID) {
-        checkAssignedLevel()
-      }
-    },
-    [assignedWorkflowID]
-  )
+function useAssignedLevel(assignedWorkflowID, workflows = []) {
+  const existingWorkflow = workflows.find(workflow => workflow.id === assignedWorkflowID)
+  const defaultWorkflowLevel = existingWorkflow?.configuration?.level
+    ? parseInt(existingWorkflow.configuration.level, 10)
+    : 1
+  const key = !existingWorkflow && assignedWorkflowID
+    ? { assignedWorkflowID }
+    : null // skip data fetching when we already have the workflow level
+    const { data: fetchedWorkflowLevel } = useSWR(key, fetchAssignedWorkflow, SWRoptions)
 
-  return assignedWorkflowLevel
+  return fetchedWorkflowLevel || defaultWorkflowLevel
 }
 
 export default useAssignedLevel

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,14 +26,16 @@ function ClassifyPageConnector(props) {
     projectPreferences,
     workflowAssignmentEnabled = false
   } = useStore(store)
+  const assignedWorkflowID = projectPreferences?.settings?.workflow_id
+  const assignedWorkflowLevel = useAssignedLevel(assignedWorkflowID, props.workflows)
 
   return (
     <ClassifyPageContainer
+      {...props}
       appLoadingState={appLoadingState}
-      assignedWorkflowID={projectPreferences?.settings?.workflow_id}
+      assignedWorkflowLevel={assignedWorkflowLevel}
       projectPreferences={projectPreferences}
       workflowAssignmentEnabled={workflowAssignmentEnabled}
-      {...props}
     />
   )
 }

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 */

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}

packages/app-project/src/shared/components/WorkflowSelector/components/WorkflowSelectButtons/LevelingUpButtons.js

@@ -8,7 +8,7 @@ import useAssignedLevel from '@hooks/useAssignedLevel.js'
 function LevelingUpButtons({ assignedWorkflowID = '', workflows = [] }) {
   const { t } = useTranslation('components')
 
-  const assignedWorkflowLevel = useAssignedLevel(assignedWorkflowID)
+  const assignedWorkflowLevel = useAssignedLevel(assignedWorkflowID, workflows)
   const filteredWorkflowsByLevel = { allowed: [], disallowed: [] }
 
   if (assignedWorkflowLevel) {

packages/app-project/src/shared/components/WorkflowSelector/components/WorkflowSelectButtons/WorkflowSelectButtons.spec.js

@@ -52,9 +52,8 @@ describe('Component > WorkflowSelector > WorkflowSelectorButtons', function () {
     })
   })
 
-  /** Skipped because I added a custom hook to WorkflowSelectButtons > LevelingUpButtons */
   describe('when workflow assignment is enabled', function () {
-    describe.skip('when there is an assigned workflow', function () {
+    describe('when there is an assigned workflow', function () {
       it('should only render links for unlocked workflows', function () {
         const { getAllByRole } = render(
           <RouterContext.Provider value={mockRouter}>