From 4a2dc857e4d0acbbf7965c46becb72c14972345a Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Mon, 25 Jan 2021 12:03:53 +0000
Subject: [PATCH] Split out static props into their own function Perform all
 data fetching in getStaticPageProps (props that only depend on the page URL.)
 Return entry with a 404 to avoid extra API calls when we know there's nothing
 to fetch.

---
 .../getDefaultPageProps.js                    | 67 ++++++-------------
 .../getStaticPageProps/getStaticPageProps.js  | 59 ++++++++++++++++
 .../src/helpers/getStaticPageProps/index.js   |  1 +
 packages/app-project/stores/Project.js        |  2 +-
 4 files changed, 83 insertions(+), 46 deletions(-)
 create mode 100644 packages/app-project/src/helpers/getStaticPageProps/getStaticPageProps.js
 create mode 100644 packages/app-project/src/helpers/getStaticPageProps/index.js

diff --git a/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js b/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js
index 303083b3318..399b00c3903 100644
--- a/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js
+++ b/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js
@@ -1,67 +1,44 @@
 import getCookie from '@helpers/getCookie'
-import fetchWorkflowsHelper from '@helpers/fetchWorkflowsHelper'
-import initStore from '@stores'
-import { getSnapshot } from 'mobx-state-tree'
+import getStaticPageProps from '@helpers/getStaticPageProps'
 
 export default async function getDefaultPageProps({ params, query, req, res }) {
 
   // cookie is in the next.js context req object
   const mode = getCookie(req, 'mode') || null
   const dismissedAnnouncementBanner = getCookie(req, 'dismissedAnnouncementBanner') || null
-  const snapshot = {
-    ui: {
-      dismissedAnnouncementBanner,
-      mode
-    }
-  }
-  const isServer = true
-  const store = initStore(isServer, snapshot)
-
-  if (params.owner && params.project) {
-    const { owner, project } = params
-    const projectSlug = `${owner}/${project}`
-    const { env } = query
-    await store.project.fetch(projectSlug, { env })
-    if (!store.project.id) {
-      res.statusCode = 404
-      return {
-        props: {
-          statusCode: 404,
-          title: `Project ${owner}/${project} was not found.`
-        }
-      }
-    }
-  }
 
-  const workflowExists = store.project.links.active_workflows.includes(params.workflowID)
-  if (params.workflowID && !workflowExists) {
-    res.statusCode = 404
+  const { props: staticProps } = await getStaticPageProps({ params, query })
+  const { project, isServer, statusCode, title, workflowID, workflows } = staticProps
+  if (statusCode) {
+    res.statusCode = statusCode
     return {
       props: {
-        statusCode: 404,
-        title: `Workflow ${params.workflowID} was not found.`
+        statusCode,
+        title
       }
     }
   }
-
-  const { project, ui } = getSnapshot(store)
   const { headers, connection } = req
-  const { env } = query
-  const language = project.primary_language
-  const { active_workflows, default_workflow } = project.links
-  const workflows = await fetchWorkflowsHelper(language, active_workflows, default_workflow, env)
+  const host = generateHostUrl(headers, connection)
+  /*
+    snapshot for store hydration in the browser
+  */
+  const initialState = {
+    project,
+    ui: {
+      dismissedAnnouncementBanner,
+      mode
+    }
+  }
+
   const props = {
-    host: generateHostUrl(headers, connection),
-    initialState: {
-      project,
-      ui
-    },
-    isServer: true,
+    host,
+    initialState,
+    isServer,
     query,
     workflows
   }
 
-  const workflowID = store.project.defaultWorkflow
   if (workflowID) {
     props.workflowID = workflowID
   }
diff --git a/packages/app-project/src/helpers/getStaticPageProps/getStaticPageProps.js b/packages/app-project/src/helpers/getStaticPageProps/getStaticPageProps.js
new file mode 100644
index 00000000000..02b498fc400
--- /dev/null
+++ b/packages/app-project/src/helpers/getStaticPageProps/getStaticPageProps.js
@@ -0,0 +1,59 @@
+import fetchWorkflowsHelper from '@helpers/fetchWorkflowsHelper'
+import initStore from '@stores'
+import { getSnapshot } from 'mobx-state-tree'
+
+export default async function getStaticPageProps({ params, query }) {
+  const isServer = true
+  const store = initStore(isServer)
+  const { env } = query
+
+  /*
+    Fetch the project
+  */
+  if (params.owner && params.project) {
+    const { owner, project } = params
+    const projectSlug = `${owner}/${project}`
+    await store.project.fetch(projectSlug, { env })
+    if (!store.project.id) {
+      return {
+        props: {
+          statusCode: 404,
+          title: `Project ${owner}/${project} was not found.`
+        }
+      }
+    }
+  }
+
+  /*
+    Validate any workflow URLs
+  */
+  const { project } = getSnapshot(store)
+  const language = project.primary_language
+  const { active_workflows, default_workflow } = project.links
+  const workflowExists = active_workflows.includes(params.workflowID)
+  if (params.workflowID && !workflowExists) {
+    return {
+      props: {
+        statusCode: 404,
+        title: `Workflow ${params.workflowID} was not found.`
+      }
+    }
+  }
+
+  /*
+    Fetch the active project workflows
+  */
+  const workflows = await fetchWorkflowsHelper(language, active_workflows, default_workflow, env)
+  const props = {
+    project,
+    isServer,
+    workflows
+  }
+
+  const workflowID = store.project.defaultWorkflow
+  if (workflowID) {
+    props.workflowID = workflowID
+  }
+
+  return { props }
+}
diff --git a/packages/app-project/src/helpers/getStaticPageProps/index.js b/packages/app-project/src/helpers/getStaticPageProps/index.js
new file mode 100644
index 00000000000..00ff64846d6
--- /dev/null
+++ b/packages/app-project/src/helpers/getStaticPageProps/index.js
@@ -0,0 +1 @@
+export { default } from './getStaticPageProps'
diff --git a/packages/app-project/stores/Project.js b/packages/app-project/stores/Project.js
index 473871a7c28..e1ec9dbd294 100644
--- a/packages/app-project/stores/Project.js
+++ b/packages/app-project/stores/Project.js
@@ -41,7 +41,7 @@ const Project = types
     get defaultWorkflow() {
       const activeWorkflows = self.links['active_workflows']
       let singleActiveWorkflow
-      if (activeWorkflows.length === 1) {
+      if (activeWorkflows?.length === 1) {
         [singleActiveWorkflow] = self.links['active_workflows']
       }
       return singleActiveWorkflow