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.

packages/app-project/package.json

@@ -11,8 +11,8 @@
     "dev:inspect": "APP_ENV=${APP_ENV:-development} PANOPTES_ENV=${PANOPTES_ENV:-staging} NODE_OPTIONS='--inspect' node server/server.js",
     "lint": "next lint",
     "start": "NODE_ENV=${NODE_ENV:-production} PANOPTES_ENV=${PANOPTES_ENV:-production} node server/server.js",
-    "test": "BABEL_ENV=test mocha --config test/.mocharc.json ./.storybook/specConfig.js \"./{src,pages,stores}/**/*.spec.js\"",
-    "test:ci": "BABEL_ENV=test mocha --config test/.mocharc.json ./.storybook/specConfig.js --reporter=min \"./{src,pages,stores}/**/*.spec.js\"",
+    "test": "BABEL_ENV=test mocha --exit --config test/.mocharc.json ./.storybook/specConfig.js \"./{src,pages,stores}/**/*.spec.js\"",
+    "test:ci": "BABEL_ENV=test mocha --exit --config test/.mocharc.json ./.storybook/specConfig.js --reporter=min \"./{src,pages,stores}/**/*.spec.js\"",
     "storybook": "storybook dev -p 9001",
     "build-storybook": "storybook build"
   },

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