refactor(ssr): badic community page workflow

Author: mydearxym

containers/CommunitiesContent/styles/index.js

@@ -3,8 +3,9 @@ import styled from 'styled-components'
 import { Img } from '../../../components'
 import { theme } from '../../../utils'
 
-export const Wrapper = styled.div``
-
+export const Wrapper = styled.div`
+  min-height: 800px;
+`
 export const CommunityIcon = styled(Img)`
   fill: ${theme('banner.title')};
   width: 30px;

containers/CommunityContent/index.js

@@ -26,6 +26,8 @@ const renderChildContent = (route, store, restProps) => {
   // return <IndexContent data={pagedCommunitiesData} restProps={restProps} />
   // return <PostsContent data={pagedPostsData} restProps={restProps} />
 
+  debug('current fucking: ', pagedPostsData)
+
   switch (route.subPath) {
     case ROUTE.TAGS: {
       return <TagsContent data={pagedTagsData} restProps={restProps} />

containers/CommunityContent/store.js

@@ -6,16 +6,33 @@
 import { types as t, getParent } from 'mobx-state-tree'
 // import R from 'ramda'
 
-import { PagedPosts, PagedTags } from '../../stores/SharedModel'
+import {
+  PagedPosts,
+  PagedJobs,
+  PagedRepos,
+  PagedVideos,
+  PagedTags,
+  PagedThreads,
+  PagedCategories,
+  emptyPagiData,
+} from '../../stores/SharedModel'
+
 import { markStates, makeDebugger, stripMobx } from '../../utils'
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('S:CommunityContentStore')
 /* eslint-enable no-unused-vars */
 
 const CommunityContentStore = t
   .model('CommunityContentStore', {
-    pagedPosts: t.maybeNull(PagedPosts),
-    pagedTags: t.maybeNull(PagedTags),
+    pagedPosts: t.optional(PagedPosts, emptyPagiData),
+    pagedJobs: t.optional(PagedJobs, emptyPagiData),
+    pagedRepos: t.optional(PagedRepos, emptyPagiData),
+    pagedVideos: t.optional(PagedVideos, emptyPagiData),
+
+    pagedCategories: t.optional(PagedCategories, emptyPagiData),
+    pagedTags: t.optional(PagedTags, emptyPagiData),
+    pagedThreads: t.optional(PagedThreads, emptyPagiData),
+
     postsLoading: t.optional(t.boolean, false),
     tagsLoading: t.optional(t.boolean, false),
   })

containers/CommunityContent/styles/index.js

@@ -6,26 +6,24 @@ export const CommunityIcon = styled(Img)`
   width: 30px;
   height: 30px;
 `
-export const Wrapper = styled.div``
-
+export const Wrapper = styled.div`
+  min-height: 800px;
+`
 export const OperationWrapper = styled.div`
   display: flex;
   justify-content: center;
 `
-
 export const ColorCell = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `
-
 export const ColorDot = styled.div`
   width: 10px;
   height: 10px;
   background: ${props => props.color};
   border-radius: 100%;
 `
-
 export const ColorTitle = styled.div`
   margin-left: 5px;
 `

containers/UsersContent/styles/index.js

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
 
-export const Wrapper = styled.div``
-
+export const Wrapper = styled.div`
+  min-height: 800px;
+`
 export const OperationWrapper = styled.div`
   display: flex;
   justify-content: center;

pages/community.js

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Provider } from 'mobx-react'
+import R from 'ramda'
+
+import GAWraper from '../components/GAWraper'
+import initRootStore from '../stores/init'
+import ThemeWrapper from '../containers/ThemeWrapper'
+import MultiLanguage from '../containers/MultiLanguage'
+import Sidebar from '../containers/Sidebar'
+import Preview from '../containers/Preview'
+import Doraemon from '../containers/Doraemon'
+import Route from '../containers/Route'
+import BodyLayout from '../containers/BodyLayout'
+import Header from '../containers/Header'
+import CommunityBanner from '../containers/CommunityBanner'
+import CommunityContent from '../containers/CommunityContent'
+
+import {
+  makeGQClient,
+  getMainPath,
+  getSubPath,
+  BStore,
+  ssrPagedSchema,
+  ssrPagedContents,
+} from '../utils'
+import Footer from '../components/Footer'
+
+// try to fix safari bug
+// see https://github.com/yahoo/react-intl/issues/422
+global.Intl = require('intl')
+
+/*
+   this function is only needed in dev-mode, it's a bug
+   in production, the query for sub-path will go direactly to sub-route file
+ */
+async function fetchData(props) {
+  const token = BStore.cookie.from_req(props.req, 'jwtToken')
+  const gqClient = makeGQClient(token)
+
+  const subpath = getSubPath(props)
+  console.log('subpath --> ', subpath)
+
+  // const sessionState = gqClient.request(P.sessionState)
+  const pagedContents = gqClient.request(ssrPagedSchema(subpath), {
+    filter: { page: 1, size: 30 },
+  })
+
+  return {
+    ...(await pagedContents),
+  }
+}
+
+/* filter: mergeRouteQuery(query), */
+export default class Index extends React.Component {
+  static async getInitialProps(props) {
+    console.log('## community ## index page ..')
+
+    const subPath = getSubPath(props)
+    const mainPath = getMainPath(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 } }, pagedContents)
+  }
+
+  constructor(props) {
+    super(props)
+    this.store = initRootStore({ ...props })
+  }
+
+  render() {
+    return (
+      <Provider store={this.store}>
+        <GAWraper>
+          <ThemeWrapper>
+            <Route />
+            <MultiLanguage>
+              <Sidebar />
+              <Preview />
+              <Doraemon />
+              <BodyLayout>
+                <Header />
+                <CommunityBanner />
+                <CommunityContent />
+                <Footer />
+              </BodyLayout>
+            </MultiLanguage>
+          </ThemeWrapper>
+        </GAWraper>
+      </Provider>
+    )
+  }
+}

server.js

@@ -46,10 +46,10 @@ app.prepare().then(() => {
     return renderAndCache(req, res, '/users', req.query)
   })
 
-  server.get('/:main/:sub?', (req, res) => {
+  server.get('/:community/:thread', (req, res) => {
     // console.log('match me user')
     // return app.render(req, res, '/user', req.query)
-    return renderAndCache(req, res, '/', req.query)
+    return renderAndCache(req, res, '/community', req.query)
   })
 
   server.get('*', (req, res) => handle(req, res))

utils/constants.js

@@ -139,13 +139,11 @@ export const ROUTE = {
   // id is used for UI when item is active
   // communities CURD
   COMMUNITIES: 'communities',
+  COMMUNITY: 'community',
   // communities categories CURD
-  CATEGORIES: 'categories',
   TAGS: 'tags',
   THREADS: 'threads',
 
-  COMMUNITY: 'community',
-
   USERS: 'users',
   SENIOR: 'senior',
   // valid part

utils/ssr_helper.js

@@ -29,6 +29,35 @@ export const ssrPagedSchema = subpath => {
 }
 
 export const ssrPagedContents = (mainPath, subPath, resp) => {
+  switch (mainPath) {
+    case ROUTE.COMMUNITIES: {
+      return ssrCommunitiesContents(subPath, resp)
+    }
+
+    default: {
+      return ssrCommunityContents(subPath, resp)
+    }
+  }
+}
+
+// communityContent
+const ssrCommunityContents = (subPath, resp) => {
+  switch (subPath) {
+    case ROUTE.POSTS: {
+      return {
+        communityContent: { pagedPosts: resp.pagedPosts },
+      }
+    }
+
+    default: {
+      return {
+        communityContent: { pagedPosts: resp.pagedPosts },
+      }
+    }
+  }
+}
+
+const ssrCommunitiesContents = (subPath, resp) => {
   switch (subPath) {
     case ROUTE.CATEGORIES: {
       return {