refactor(SSR): basic workflow with helpers

Author: mydearxym

containers/CommunitiesBanner/index.js

@@ -20,21 +20,25 @@ import { BannerContainer } from './styles'
 const debug = makeDebugger('C:CommunitiesBanner')
 /* eslint-enable no-unused-vars */
 
-const ChildBanner = ({ curRoute, totalCount, restProps }) => {
+const ChildBanner = ({
+  curRoute,
+  totalCount,
+  tagsTotalCount,
+  categoriesTotalCount,
+  threadsTotalCount,
+  postsTotalCount,
+  restProps,
+}) => {
   const {
     // communities
     filteredTotalCount,
     // tags
-    tagsTotalCount,
     filterdTagsCount,
     // threads
-    threadsTotalCount,
     filterdThreadsCount,
     // categories
-    categoriesTotalCount,
     filterdCategoriesCount,
     // posts
-    postsTotalCount,
     filteredPostsCount,
     // jobs
     jobsTotalCount,
@@ -109,16 +113,24 @@ class CommunitiesBannerContainer extends React.Component {
 
   render() {
     const { communitiesBanner } = this.props
-    const { curRoute, totalCount } = communitiesBanner
-
-    // console.log('totalCount --> ', communitiesBanner.totalCount)
-    console.log('the fucking totalCount: ', totalCount)
+    const {
+      curRoute,
+      totalCount,
+      tagsTotalCount,
+      categoriesTotalCount,
+      threadsTotalCount,
+      postsTotalCount,
+    } = communitiesBanner
 
     return (
       <BannerContainer>
         <ChildBanner
           curRoute={curRoute}
           totalCount={totalCount}
+          categoriesTotalCount={categoriesTotalCount}
+          threadsTotalCount={threadsTotalCount}
+          tagsTotalCount={tagsTotalCount}
+          postsTotalCount={postsTotalCount}
           restProps={stripMobx(communitiesBanner)}
         />
       </BannerContainer>

containers/CommunitiesBanner/store.js

@@ -17,16 +17,13 @@ const CommunitiesBannerStore = t
     // totalCount: t.optional(t.number, 0),
     filteredTotalCount: t.maybeNull(t.number),
     // categories
-    categoriesTotalCount: t.optional(t.number, 0),
     filterdCategoriesCount: t.maybeNull(t.number),
     // tags
-    tagsTotalCount: t.optional(t.number, 0),
     filterdTagsCount: t.maybeNull(t.number),
     // threads
-    threadsTotalCount: t.optional(t.number, 0),
     filterdThreadsCount: t.maybeNull(t.number),
     // posts
-    postsTotalCount: t.optional(t.number, 0),
+    // postsTotalCount: t.optional(t.number, 0),
     filteredPostsCount: t.maybeNull(t.number),
     // jobs
     jobsTotalCount: t.optional(t.number, 0),
@@ -39,6 +36,18 @@ const CommunitiesBannerStore = t
     get totalCount() {
       return self.root.communitiesContent.pagedCommunities.totalCount
     },
+    get categoriesTotalCount() {
+      return self.root.communitiesContent.pagedCategories.totalCount
+    },
+    get tagsTotalCount() {
+      return self.root.communitiesContent.pagedTags.totalCount
+    },
+    get threadsTotalCount() {
+      return self.root.communitiesContent.pagedThreads.totalCount
+    },
+    get postsTotalCount() {
+      return self.root.communitiesContent.pagedPosts.totalCount
+    },
     get curRoute() {
       return self.root.curRoute
     },

containers/CommunitiesContent/schema.js

@@ -1,31 +1,11 @@
 import gql from 'graphql-tag'
-import { P, F } from '../schemas'
+import { P } from '../schemas'
 
 const pagedCommunities = gql`
   ${P.pagedCommunities}
 `
 const pagedCategories = gql`
-  query($filter: PagedFilter!) {
-    pagedCategories(filter: $filter) {
-      entries {
-        id
-        title
-        raw
-        index
-        communities {
-          id
-          logo
-          title
-        }
-        author {
-          ${F.author}
-        }
-        insertedAt
-        updatedAt
-      }
-      ${F.pagedCounts}
-    }
-  }
+  ${P.pagedCategories}
 `
 const pagedTags = gql`
   ${P.pagedTags}

containers/schemas/pages/misc.js

@@ -16,6 +16,14 @@ export const pagedCategories = `
         title
         raw
         index
+        communities {
+          ${F.community}
+        }
+        author {
+          ${F.author}
+        }
+        insertedAt
+        updatedAt
       }
       ${F.pagedCounts}
     }

pages/communities.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Provider } from 'mobx-react'
+import R from 'ramda'
 
 import GAWraper from '../components/GAWraper'
 import initRootStore from '../stores/init'
@@ -14,8 +15,6 @@ import Header from '../containers/Header'
 import CommunitiesBanner from '../containers/CommunitiesBanner'
 import CommunitiesContent from '../containers/CommunitiesContent'
 
-import { P } from '../containers/schemas'
-
 import {
   makeGQClient,
   // Global,
@@ -24,6 +23,8 @@ import {
   getMainPath,
   getSubPath,
   BStore,
+  ssrPagedSchema,
+  ssrPagedContents,
 } from '../utils'
 import Footer from '../components/Footer'
 
@@ -45,12 +46,12 @@ async function fetchData(props) {
   const subpath = getSubPath(props)
   console.log('subpath --> ', subpath)
 
-  const pagedCommunities = gqClient.request(P.pagedCommunities, {
+  const pagedContents = gqClient.request(ssrPagedSchema(subpath), {
     filter: { page: 1, size: 30 },
   })
 
   return {
-    ...(await pagedCommunities),
+    ...(await pagedContents),
   }
 }
 
@@ -64,13 +65,37 @@ export default class Index extends React.Component {
     const subPath = getSubPath(props)
     const mainPath = getMainPath(props)
 
-    const { pagedCommunities } = await fetchData(props)
+    let resp
+    try {
+      resp = await fetchData(props)
+    } catch ({ response: { errors } }) {
+      /*
+      if (ssrAmbulance.hasLoginError(errors)) {
+        resp = await fetchData(props, { realname: false })
+      } else {
+        return { statusCode: 404, target: subPath }
+      }
+      */
+      return { statusCode: 404, target: subPath }
+    }
+
+    const { pagedCommunities } = resp
+    const pagedContents = ssrPagedContents(mainPath, subPath, resp)
 
+    return R.merge(
+      {
+        route: { mainPath, subPath },
+        communities: pagedCommunities,
+      },
+      pagedContents
+    )
+    /*
     return {
       route: { mainPath, subPath },
       communities: pagedCommunities,
       communitiesContent: { pagedCommunities },
     }
+    */
   }
 
   constructor(props) {

utils/index.js

@@ -104,9 +104,10 @@ export {
 } from './themes'
 
 export { default as fakeUsers } from './fake_user'
-
 export { default as SOCIAL_LISTS } from './social_lists'
 
+export { ssrPagedSchema, ssrPagedContents } from './ssr_helper'
+
 // helpers
 export { default as cs } from './common_styles'
 export { default as animate } from './animations'

utils/ssr_helper.js

@@ -0,0 +1,53 @@
+// import R from 'ramda'
+import { P } from '../containers/schemas'
+import { ROUTE } from './constants'
+
+export const ssrPagedSchema = subpath => {
+  switch (subpath) {
+    case ROUTE.CATEGORIES: {
+      return P.pagedCategories
+    }
+    case ROUTE.TAGS: {
+      return P.pagedTags
+    }
+    case ROUTE.THREADS: {
+      return P.pagedThreads
+    }
+    case ROUTE.POSTS: {
+      return P.pagedPosts
+    }
+    default: {
+      return P.pagedCommunities
+    }
+  }
+}
+
+export const ssrPagedContents = (mainPath, subPath, resp) => {
+  switch (subPath) {
+    case ROUTE.CATEGORIES: {
+      return {
+        communitiesContent: { pagedCategories: resp.pagedCategories },
+      }
+    }
+    case ROUTE.TAGS: {
+      return {
+        communitiesContent: { pagedTags: resp.pagedTags },
+      }
+    }
+    case ROUTE.THREADS: {
+      return {
+        communitiesContent: { pagedThreads: resp.pagedThreads },
+      }
+    }
+    case ROUTE.POSTS: {
+      return {
+        communitiesContent: { pagedPosts: resp.pagedPosts },
+      }
+    }
+    default: {
+      return {
+        communitiesContent: { pagedCommunities: resp.pagedCommunities },
+      }
+    }
+  }
+}