diff --git a/packages/app-project/src/hooks/useAssignedLevel.js b/packages/app-project/src/hooks/useAssignedLevel.js index fd39e166ab..54c8e1b5e0 100644 --- a/packages/app-project/src/hooks/useAssignedLevel.js +++ b/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 diff --git a/packages/app-project/src/screens/ClassifyPage/ClassifyPageConnector.js b/packages/app-project/src/screens/ClassifyPage/ClassifyPageConnector.js index d1cf47b138..de5640c23c 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,14 +26,16 @@ function ClassifyPageConnector(props) { projectPreferences, workflowAssignmentEnabled = false } = useStore(store) + const assignedWorkflowID = projectPreferences?.settings?.workflow_id + const assignedWorkflowLevel = useAssignedLevel(assignedWorkflowID, props.workflows) return ( ) } diff --git a/packages/app-project/src/screens/ClassifyPage/ClassifyPageContainer.js b/packages/app-project/src/screens/ClassifyPage/ClassifyPageContainer.js index 515831fafe..252272a8f4 100644 --- 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 index 73d5a51731..aba5461268 100644 --- 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 () { ClassifyPageContainer', function () { 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(