refactor(router): add communityPath & threadPath concept

Author: mydearxym

containers/Route/store.js

@@ -23,6 +23,8 @@ const Query = t.model('Query', {
 
 const RouteStore = t
   .model('RouteStore', {
+    communityPath: t.optional(t.string, ''),
+    threadPath: t.optional(t.string, ''),
     mainPath: t.optional(t.string, ''),
     subPath: t.optional(t.string, ''),
     query: t.optional(Query, {}),
@@ -32,11 +34,13 @@ const RouteStore = t
       return getParent(self)
     },
     get curRoute() {
-      const { mainPath, subPath } = self
-      return { mainPath, subPath }
+      const { communityPath, threadPath, mainPath, subPath } = self
+      return { communityPath, threadPath, mainPath, subPath }
     },
   }))
   .actions(self => ({
+    // TODO:  if current url is subdomain, then we should
+    // reload to that page directly
     markRoute(query) {
       if (!onClient) return false
       const { mainPath, subPath, page } = query

pages/home/posts.js

@@ -59,8 +59,8 @@ async function fetchData(props, opt) {
   // schema
 
   // utils: filter, tags staff
-  const { mainPath, subPath: topic } = parseURL(props)
-  const community = akaTranslate(mainPath)
+  const { communityPath, subPath: topic } = parseURL(props)
+  const community = akaTranslate(communityPath)
   const thread = extractThreadFromPath(props)
 
   let filter = addTopicIfNeed(
@@ -105,7 +105,7 @@ async function fetchData(props, opt) {
 
 export default class HomePage extends React.Component {
   static async getInitialProps(props) {
-    const { mainPath, subPath } = parseURL(props)
+    const { communityPath, threadPath } = parseURL(props)
     const thread = extractThreadFromPath(props)
 
     let resp
@@ -117,7 +117,7 @@ export default class HomePage extends React.Component {
       } else {
         return {
           statusCode: 404,
-          target: mainPath,
+          target: communityPath,
           viewing: { community: {} },
           route: {},
         }
@@ -154,7 +154,12 @@ export default class HomePage extends React.Component {
           repo: {},
           user: {},
         },
-        route: { mainPath: community.raw, subPath },
+        route: {
+          communityPath: community.raw,
+          mainPath: community.raw,
+          threadPath,
+          subPath: threadPath,
+        },
         tagsBar: { tags: partialTags },
       },
       contentsThread
@@ -177,7 +182,7 @@ export default class HomePage extends React.Component {
       viewing: { community },
       route,
     } = this.props
-    const { mainPath, subPath } = route
+    const { communityPath, subPath } = route
 
     const seoTitle =
       community.raw === 'home'
@@ -198,7 +203,7 @@ export default class HomePage extends React.Component {
               <React.Fragment>
                 <NextSeo
                   config={{
-                    url: `${SITE_URL}/${mainPath}/${subPath}`,
+                    url: `${SITE_URL}/${communityPath}/${subPath}`,
                     title: seoTitle,
                     description: `${community.desc}`,
                   }}

pages/index.js

@@ -37,12 +37,13 @@ global.Intl = require('intl')
  */
 export default class PageCommunity extends React.Component {
   static async getInitialProps(props) {
-    if (!isServerSide()) return {}
+    if (!isServerSide) return {}
+
+    const { communityPath, threadPath } = parseURL(props)
 
-    const { mainPath, subPath } = parseURL(props)
     const hideSidebar =
-      R.contains(mainPath, [ROUTE.USER]) ||
-      R.contains(subPath, [ROUTE.POST, ROUTE.REPO, ROUTE.VIDEO, ROUTE.JOB])
+      R.contains(communityPath, [ROUTE.USER]) ||
+      R.contains(threadPath, [ROUTE.POST, ROUTE.REPO, ROUTE.VIDEO, ROUTE.JOB])
 
     return {
       hideSidebar,

pages/job.js

@@ -72,15 +72,15 @@ async function fetchData(props) {
 export default class JobPage extends React.Component {
   static async getInitialProps(props) {
     let resp
-    const { mainPath, subPath } = parseURL(props)
+    const { communityPath, threadPath } = parseURL(props)
 
     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: threadPath }
       }
     }
 
@@ -96,7 +96,12 @@ export default class JobPage extends React.Component {
         isValidSession: sessionState.isValid,
         userSubscribedCommunities: subscribedCommunities,
       },
-      route: { mainPath, subPath: ROUTE.JOB },
+      route: {
+        communityPath,
+        mainPath: communityPath,
+        threadPath: ROUTE.JOB,
+        subPath: ROUTE.JOB,
+      },
       viewing: {
         job,
         activeThread: THREAD.JOB,

pages/video.js

@@ -68,7 +68,7 @@ async function fetchData(props) {
 
 export default class VideoPage extends React.Component {
   static async getInitialProps(props) {
-    const { mainPath, subPath } = parseURL(props)
+    const { communityPath, subPath } = parseURL(props)
     let resp
     try {
       resp = await fetchData(props)
@@ -82,7 +82,7 @@ export default class VideoPage extends React.Component {
 
     const { sessionState, video, pagedComments, subscribedCommunities } = resp
 
-    if (!R.contains(mainPath, R.pluck('raw', video.communities))) {
+    if (!R.contains(communityPath, R.pluck('raw', video.communities))) {
       return { statusCode: 404, target: subPath }
     }
 
@@ -96,7 +96,7 @@ export default class VideoPage extends React.Component {
         isValidSession: sessionState.isValid,
         userSubscribedCommunities: subscribedCommunities,
       },
-      route: { mainPath, subPath: ROUTE.VIDEO },
+      route: { communityPath, mainPath: communityPath, subPath: ROUTE.VIDEO },
       viewing: {
         video,
         activeThread: THREAD.VIDEO,
@@ -121,7 +121,7 @@ export default class VideoPage extends React.Component {
       viewing: { video },
       route,
     } = this.props
-    const { mainPath } = route
+    const { communityPath } = route
 
     return (
       <Provider store={this.store}>
@@ -132,7 +132,7 @@ export default class VideoPage extends React.Component {
             ) : (
               <React.Fragment>
                 <BlogJsonLd
-                  url={`${SITE_URL}/${mainPath}/video/${video.id}`}
+                  url={`${SITE_URL}/${communityPath}/video/${video.id}`}
                   title={`${video.title}`}
                   datePublished={`${video.insertedAt}`}
                   dateModified={`${video.updatedAt}`}