diff --git a/packages/app-project/src/hooks/useAssignedLevel.js b/packages/app-project/src/hooks/useAssignedLevel.js index fd39e166ab7..ad8ac448646 100644 --- 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 index d1cf47b1387..81546da5099 100644 --- 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', function () { ClassifyPageContainer', function () {