Render project workflows on the server

Request workflows for the home page in getServerSideProps, then pass the workflow data down to the Hero component as a prop.

packages/app-project/pages/projects/[owner]/[project]/index.js

@@ -1 +1,18 @@
+import { projects } from '@zooniverse/panoptes-js'
+import fetchWorkflowsHelper from '@screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper'
 export { default } from '@screens/ProjectHomePage'
+
+async function getProjectWorkflows([project]) {
+  const workflows = await fetchWorkflowsHelper('en', project.links['active_workflows'], project.configuration['default_workflow'])
+  return workflows
+}
+export async function getServerSideProps({ params, req, res }) {
+  const { owner, project } = params
+  const query = {
+    slug: `${owner}/${project}`
+  }
+  const response = await projects.get({ query })
+  const workflows = await getProjectWorkflows(response.body.projects)
+  const props = { workflows }
+  return ({ props })
+}

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

@@ -23,13 +23,14 @@ const RemainingHeightBox = styled(Box)`
 `
 
 function ProjectHomePage (props) {
+  const { workflows } = props
   return (
     <>
       <Media at='default'>
         <ZooHeaderWrapper />
         <ProjectHeader />
         <Announcements />
-        <Hero />
+        <Hero workflows={workflows} />
         <Box margin='small' gap='small'>
           <ThemeModeToggle />
           <ZooniverseTalk />
@@ -46,7 +47,7 @@ function ProjectHomePage (props) {
           <ProjectHeader />
           <Announcements />
           <RemainingHeightBox>
-            <Hero isWide={true} />
+            <Hero workflows={workflows} isWide={true} />
           </RemainingHeightBox>
         </FullHeightBox>
         <Box

packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.js

@@ -7,84 +7,20 @@ import WideLayout from './components/WideLayout'
 import NarrowLayout from './components/NarrowLayout'
 import fetchWorkflowsHelper from './helpers/fetchWorkflowsHelper'
 
-function storeMapper (stores) {
-  return {
-    activeWorkflows: stores.store.project.links['active_workflows'],
-    defaultWorkflow: stores.store.project.configuration['default_workflow']
-  }
-}
-
 class HeroContainer extends Component {
-  constructor () {
-    super()
-    this.state = {
-      workflows: {
-        loading: asyncStates.initialized,
-        data: []
-      }
-    }
-  }
-
-  componentDidMount () {
-    return this.fetchWorkflows()
-  }
-
-  async fetchWorkflows () {
-    this.setState(state => ({
-      workflows: {
-        ...state.workflows,
-        loading: asyncStates.loading
-      }
-    }))
-    try {
-      const { activeWorkflows, defaultWorkflow, language } = this.props
-      const workflows = await fetchWorkflowsHelper(language, activeWorkflows, defaultWorkflow)
-      this.setState({
-        workflows: {
-          loading: asyncStates.success,
-          data: workflows
-        }
-      })
-    } catch (error) {
-      if (process.browser) {
-        console.error(error)
-      }
-      this.setState(state => ({
-        workflows: {
-          ...state.workflows,
-          loading: asyncStates.error
-        }
-      }))
-    }
-  }
 
   render () {
-    const { workflows } = this.state
-    const { isWide } = this.props
+    console.log('hero props', this.props)
+    const { isWide, workflows } = this.props
+    const workflowData = {
+        loading: asyncStates.success,
+        data: workflows
+    }
     return isWide
-      ? <WideLayout workflows={workflows} />
-      : <NarrowLayout workflows={workflows} />
+      ? <WideLayout workflows={workflowData} />
+      : <NarrowLayout workflows={workflowData} />
 
   }
 }
 
-HeroContainer.propTypes = {
-  activeWorkflows: arrayOf(string),
-  defaultWorkflow: string,
-  language: string
-}
-
-HeroContainer.defaultProps = {
-  activeWorkflows: [],
-  defaultWorkflow: '',
-  language: 'en'
-}
-
-@inject(storeMapper)
-@observer
-class DecoratedHeroContainer extends HeroContainer { }
-
-export {
-  DecoratedHeroContainer as default,
-  HeroContainer
-}
+export default HeroContainer