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(