refactor(router): use parseURL instead of parse one-by-one

rm old getMainPath, getSubPath, getThridPath

Author: mydearxym

containers/Route/logic.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { Global, buildLog, getMainPath, getSubPath } from '@utils'
+import { Global, buildLog, parseURL } from '@utils'
 
 /* eslint-disable-next-line */
 const log = buildLog('L:Route')
@@ -20,8 +20,7 @@ export const init = (_store, routeObj) => {
 
   store = _store
   // sync init router info
-  const mainPath = getMainPath(routeObj)
-  const subPath = getSubPath(routeObj)
+  const { mainPath, subPath } = parseURL(routeObj)
   const { query } = routeObj
 
   store.markState({ mainPath, subPath, query })
@@ -35,8 +34,7 @@ export const useInit = (_store, routeObj) => {
   useEffect(() => {
     store = _store
     // sync init router info
-    const mainPath = getMainPath(routeObj)
-    const subPath = getSubPath(routeObj)
+    const { mainPath, subPath } = parseURL(routeObj)
     const { query } = routeObj
 
     store.markState({ mainPath, subPath, query })

pages/community.js

@@ -6,27 +6,12 @@ import NextSeo from 'next-seo'
 import { PAGE_SIZE, SITE_URL } from '@config'
 import initRootStore from '@stores/init'
 
-import AnalysisService from '@services/Analysis'
-import GlobalLayout from '@containers/GlobalLayout'
-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 Header from '@containers/Header'
-import CommunityBanner from '@containers/CommunityBanner'
-import CommunityContent from '@containers/CommunityContent'
-import Footer from '@containers/Footer'
-import ErrorBox from '@containers/ErrorBox'
-import ErrorPage from '@components/ErrorPage'
-
 import {
+  isServerSide,
   getJwtToken,
   makeGQClient,
   queryStringToJSON,
-  getMainPath,
-  getSubPath,
+  parseURL,
   akaTranslate,
   extractThreadFromPath,
   buildLog,
@@ -40,6 +25,21 @@ import {
   parseTheme,
 } from '@utils'
 
+import AnalysisService from '@services/Analysis'
+import GlobalLayout from '@containers/GlobalLayout'
+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 Header from '@containers/Header'
+import CommunityBanner from '@containers/CommunityBanner'
+import CommunityContent from '@containers/CommunityContent'
+import Footer from '@containers/Footer'
+import ErrorBox from '@containers/ErrorBox'
+import ErrorPage from '@components/ErrorPage'
+
 import { P } from '@schemas'
 
 /* eslint-disable-next-line */
@@ -59,10 +59,8 @@ async function fetchData(props, opt) {
   const { asPath } = props
   // schema
 
-  // utils: filter, tags staff
-  const mainPath = getMainPath(props)
+  const { mainPath, subPath: topic } = parseURL(props)
   const community = akaTranslate(mainPath)
-  const topic = getSubPath(props)
   const thread = extractThreadFromPath(props)
 
   let filter = addTopicIfNeed(
@@ -107,8 +105,9 @@ async function fetchData(props, opt) {
 
 export default class CommunityPage extends React.Component {
   static async getInitialProps(props) {
-    const mainPath = getMainPath(props)
-    const subPath = getSubPath(props)
+    if (!isServerSide()) return {}
+
+    const { mainPath, subPath } = parseURL(props)
     const thread = extractThreadFromPath(props)
 
     let resp

pages/home/posts.js

@@ -25,8 +25,7 @@ import {
   getJwtToken,
   makeGQClient,
   queryStringToJSON,
-  getMainPath,
-  getSubPath,
+  parseURL,
   akaTranslate,
   extractThreadFromPath,
   buildLog,
@@ -60,9 +59,8 @@ async function fetchData(props, opt) {
   // schema
 
   // utils: filter, tags staff
-  const mainPath = getMainPath(props)
+  const { mainPath, subPath: topic } = parseURL(props)
   const community = akaTranslate(mainPath)
-  const topic = getSubPath(props)
   const thread = extractThreadFromPath(props)
 
   let filter = addTopicIfNeed(
@@ -107,8 +105,7 @@ async function fetchData(props, opt) {
 
 export default class HomePage extends React.Component {
   static async getInitialProps(props) {
-    const mainPath = getMainPath(props)
-    const subPath = getSubPath(props)
+    const { mainPath, subPath } = parseURL(props)
     const thread = extractThreadFromPath(props)
 
     let resp

pages/index.js

@@ -3,7 +3,7 @@ import { Provider } from 'mobx-react'
 import R from 'ramda'
 
 import { ROUTE } from '@constant'
-import { buildLog, getMainPath } from '@utils'
+import { buildLog, parseURL, isServerSide } from '@utils'
 import AnalysisService from '@services/Analysis'
 
 import GlobalLayout from '@containers/GlobalLayout'
@@ -37,13 +37,9 @@ global.Intl = require('intl')
  */
 export default class PageCommunity extends React.Component {
   static async getInitialProps(props) {
-    const isServer = typeof window === 'undefined'
-    console.log('page:index isServer: ', isServer)
+    if (!isServerSide()) return {}
 
-    if (!isServer) return {}
-
-    const mainPath = getMainPath(props)
-    const subPath = getMainPath(props)
+    const { mainPath, subPath } = parseURL(props)
     const hideSidebar =
       R.contains(mainPath, [ROUTE.USER]) ||
       R.contains(subPath, [ROUTE.POST, ROUTE.REPO, ROUTE.VIDEO, ROUTE.JOB])

pages/job.js

@@ -8,9 +8,7 @@ import { TYPE, ROUTE, THREAD } from '@constant'
 import {
   getJwtToken,
   makeGQClient,
-  getMainPath,
-  getSubPath,
-  getThirdPath,
+  parseURL,
   nilOrEmpty,
   ssrAmbulance,
   parseTheme,
@@ -45,7 +43,7 @@ async function fetchData(props) {
   const userHasLogin = nilOrEmpty(token) === false
 
   // schema
-  const id = getThirdPath(props)
+  const { thridPath: id } = parseURL(props)
 
   // query data
   const sessionState = gqClient.request(P.sessionState)
@@ -74,17 +72,18 @@ async function fetchData(props) {
 export default class JobPage extends React.Component {
   static async getInitialProps(props) {
     let resp
+    const { mainPath, subPath } = 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: getSubPath(props) }
+        return { statusCode: 404, target: subPath }
       }
     }
 
-    const mainPath = getMainPath(props)
     const { sessionState, pagedComments, subscribedCommunities, job } = resp
 
     return {

pages/post.js

@@ -9,9 +9,7 @@ import {
   getJwtToken,
   nilOrEmpty,
   makeGQClient,
-  getMainPath,
-  getSubPath,
-  getThirdPath,
+  parseURL,
   ssrAmbulance,
   parseTheme,
 } from '@utils'
@@ -46,7 +44,7 @@ async function fetchData(props, opt) {
   const userHasLogin = nilOrEmpty(token) === false
 
   // schema
-  const id = getThirdPath(props)
+  const { thridPath: id } = parseURL(props)
 
   // query data
   const sessionState = gqClient.request(P.sessionState)
@@ -75,22 +73,22 @@ async function fetchData(props, opt) {
 
 export default class PostPage extends React.Component {
   static async getInitialProps(props) {
+    const { mainPath, subPath } = parseURL(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: getSubPath(props) }
+        return { statusCode: 404, target: subPath }
       }
     }
 
-    const mainPath = getMainPath(props)
     const { sessionState, post, pagedComments, subscribedCommunities } = resp
 
     if (!R.contains(mainPath, R.pluck('raw', post.communities))) {
-      return { statusCode: 404, target: getSubPath(props) }
+      return { statusCode: 404, target: subPath }
     }
 
     return {

pages/repo.js

@@ -9,9 +9,7 @@ import {
   getJwtToken,
   nilOrEmpty,
   makeGQClient,
-  getMainPath,
-  getSubPath,
-  getThirdPath,
+  parseURL,
   ssrAmbulance,
   parseTheme,
 } from '@utils'
@@ -45,7 +43,7 @@ async function fetchData(props, opt) {
   const gqClient = makeGQClient(token)
   const userHasLogin = nilOrEmpty(token) === false
 
-  const id = getThirdPath(props)
+  const { thridPath: id } = parseURL(props)
 
   const sessionState = gqClient.request(P.sessionState)
   const repo = gqClient.request(P.repo, { id })
@@ -72,22 +70,22 @@ async function fetchData(props, opt) {
 
 export default class RepoPage extends React.Component {
   static async getInitialProps(props) {
+    const { mainPath, subPath } = parseURL(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: getSubPath(props) }
+        return { statusCode: 404, target: subPath }
       }
     }
 
-    const mainPath = getMainPath(props)
     const { sessionState, repo, pagedComments, subscribedCommunities } = resp
 
     if (!R.contains(mainPath, R.pluck('raw', repo.communities))) {
-      return { statusCode: 404, target: getSubPath(props) }
+      return { statusCode: 404, target: subPath }
     }
 
     return {

pages/video.js

@@ -9,9 +9,7 @@ import {
   getJwtToken,
   nilOrEmpty,
   makeGQClient,
-  getMainPath,
-  getSubPath,
-  getThirdPath,
+  parseURL,
   ssrAmbulance,
   parseTheme,
 } from '@utils'
@@ -42,7 +40,7 @@ async function fetchData(props) {
   const gqClient = makeGQClient(token)
   const userHasLogin = nilOrEmpty(token) === false
 
-  const id = getThirdPath(props)
+  const { thridPath: id } = parseURL(props)
 
   // query data
   const sessionState = gqClient.request(P.sessionState)
@@ -70,22 +68,22 @@ async function fetchData(props) {
 
 export default class VideoPage extends React.Component {
   static async getInitialProps(props) {
+    const { mainPath, subPath } = parseURL(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: getSubPath(props) }
+        return { statusCode: 404, target: subPath }
       }
     }
 
-    const mainPath = getMainPath(props)
     const { sessionState, video, pagedComments, subscribedCommunities } = resp
 
     if (!R.contains(mainPath, R.pluck('raw', video.communities))) {
-      return { statusCode: 404, target: getSubPath(props) }
+      return { statusCode: 404, target: subPath }
     }
 
     return {

utils/index.js

@@ -54,9 +54,7 @@ export {
 // export { default as githubApi } from './github_api'
 
 export {
-  getMainPath,
-  getSubPath,
-  getThirdPath,
+  parseURL,
   akaTranslate,
   getParameterByName,
   getQueryFromUrl,
@@ -82,6 +80,7 @@ export {
 } from './mobx_helper'
 
 export {
+  isServerSide,
   getJwtToken,
   ssrPagedSchema,
   ssrPagedFilter,