Client-side redirect /classify to /classify/workflow/[workflowID]

packages/app-project/src/screens/ClassifyPage/ClassifyPageConnector.js

@@ -1,4 +1,5 @@
 import { MobXProviderContext, observer } from 'mobx-react'
+import { useRouter } from 'next/router'
 import { useContext } from 'react'
 import ClassifyPageContainer from './ClassifyPageContainer'
 
@@ -22,7 +23,12 @@ function useStore(store) {
   }
 }
 
-function ClassifyPageConnector(props) {
+function ClassifyPageConnector({
+  // workflow ID from the page URL
+  workflowID,
+  ...props
+}) {
+  const router = useRouter()
   const { store } = useContext(MobXProviderContext)
   const {
     appLoadingState,
@@ -32,8 +38,15 @@ function ClassifyPageConnector(props) {
     workflowAssignmentEnabled = false
   } = useStore(store)
 
-  if (props.workflowID && props.workflowID !== defaultWorkflow) {
-    setSelectedWorkflow(props.workflowID)
+  // store the workflow from the URL, if it isn't already stored
+  if (workflowID && workflowID !== defaultWorkflow) {
+    setSelectedWorkflow(workflowID)
+  }
+
+  // client-side redirect if there's no workflow in the URL
+  if (!workflowID && defaultWorkflow) {
+    const newPath = router.asPath.replace('/classify', `/classify/workflow/${defaultWorkflow}`)
+    router.replace(newPath, newPath, { shallow: true })
   }
 
   return (
@@ -43,7 +56,7 @@ function ClassifyPageConnector(props) {
       assignedWorkflowID={projectPreferences?.settings?.workflow_id}
       projectPreferences={projectPreferences}
       workflowAssignmentEnabled={workflowAssignmentEnabled}
-      workflowID={props.workflowID || defaultWorkflow}
+      workflowID={workflowID || defaultWorkflow}
     />
   )
 }