Add subject pages (#1875)

Add subject index pages for /workflow/[workflowID]/subjectSet/[subjectSetID]/subject/[subjectID] and /workflow/[workflowID]/subject/[subjectID]. Pass the subject ID down to the classifier as a prop.

Co-authored-by: Shaun A. Noordin <[email protected]>

packages/app-project/pages/projects/[owner]/[project]/classify/workflow/[workflowID]/subject-set/[subjectSetID]/subject/[subjectID]/index.js

@@ -0,0 +1,9 @@
+import getDefaultPageProps from '@helpers/getDefaultPageProps'
+export { default } from '@screens/ClassifyPage'
+
+export async function getServerSideProps({ params, query, req, res }) {
+  const { props: defaultProps } = await getDefaultPageProps({ params, query, req, res })
+  const { subjectID, subjectSetID, workflowID } = params
+  const props = { ...defaultProps, subjectID, subjectSetID, workflowID }
+  return ({ props })
+}

packages/app-project/pages/projects/[owner]/[project]/classify/workflow/[workflowID]/subject/[subjectID]/index.js

@@ -0,0 +1,9 @@
+import getDefaultPageProps from '@helpers/getDefaultPageProps'
+export { default } from '@screens/ClassifyPage'
+
+export async function getServerSideProps({ params, query, req, res }) {
+  const { props: defaultProps } = await getDefaultPageProps({ params, query, req, res })
+  const { subjectID, workflowID } = params
+  const props = { ...defaultProps, subjectID, workflowID }
+  return ({ props })
+}

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

@@ -19,8 +19,14 @@ const ClassifierWrapper = dynamic(() =>
   import('./components/ClassifierWrapper'), { ssr: false }
 )
 
-function ClassifyPage (props) {
-  const { addToCollection, screenSize, subjectSetID, workflowID, workflows } = props
+function ClassifyPage ({
+  addToCollection,
+  screenSize,
+  subjectID,
+  subjectSetID,
+  workflowID,
+  workflows = []
+}) {
   const responsiveColumns = (screenSize === 'small')
     ? ['auto']
     : ['1em', 'auto', '1em']
@@ -47,6 +53,7 @@ function ClassifyPage (props) {
             <ProjectName />
             <ClassifierWrapper
               onAddToCollection={addToCollection}
+              subjectID={subjectID}
               subjectSetID={subjectSetID}
               workflowID={workflowID}
             />
@@ -75,13 +82,10 @@ function ClassifyPage (props) {
   )
 }
 
-ClassifyPage.defaultProps = {
-  workflows: []
-}
-
 ClassifyPage.propTypes = {
   addToCollection: func,
   screenSize: string,
+  subjectID: string,
   subjectSetID: string,
   workflowID: string,
   workflows: arrayOf(shape({

packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapperContainer.js

@@ -61,7 +61,7 @@ class ClassifierWrapperContainer extends Component {
   }
 
   render () {
-    const { onAddToCollection, authClient, mode, project, subjectSetID, user, workflowID } = this.props
+    const { onAddToCollection, authClient, mode, project, subjectID, subjectSetID, user, workflowID } = this.props
     const somethingWentWrong = this.state.error || project.loadingState === asyncStates.error
 
     if (somethingWentWrong) {
@@ -91,6 +91,7 @@ class ClassifierWrapperContainer extends Component {
           onCompleteClassification={this.onCompleteClassification}
           onToggleFavourite={this.onToggleFavourite}
           project={project}
+          subjectID={subjectID}
           subjectSetID={subjectSetID}
           workflowID={workflowID}
         />