put query state into route store

Author: mydearxym

containers/CommunitiesContent/IndexContent.js

@@ -121,31 +121,29 @@ const columns = [
     dataIndex: '',
     align: 'center',
     key: 'operation',
-    render: (text, record) => {
-      return (
-        <OperationWrapper>
-          <Button
-            size="small"
-            type="primary"
-            ghost
-            onClick={logic.onEdit.bind(this, record)}
-          >
-            编辑
+    render: (text, record) => (
+      <OperationWrapper>
+        <Button
+          size="small"
+          type="primary"
+          ghost
+          onClick={logic.onEdit.bind(this, record)}
+        >
+          编辑
+        </Button>
+        <Space right="10px" />
+        <Popconfirm
+          title="确定删除 ?？"
+          okText="Y"
+          cancelText="N"
+          onConfirm={logic.onDelete.bind(this, record)}
+        >
+          <Button size="small" type="red" ghost>
+            删除
           </Button>
-          <Space right="10px" />
-          <Popconfirm
-            title="确定删除 ?？"
-            okText="Y"
-            cancelText="N"
-            onConfirm={logic.onDelete.bind(this, record)}
-          >
-            <Button size="small" type="red" ghost>
-              删除
-            </Button>
-          </Popconfirm>
-        </OperationWrapper>
-      )
-    },
+        </Popconfirm>
+      </OperationWrapper>
+    ),
   },
 ]
 

containers/CommunitiesContent/index.js

@@ -7,6 +7,7 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 // import Link from 'next/link'
+/* import { withRouter } from 'next/router' */
 
 import { makeDebugger, storePlug, ROUTE } from '../../utils'
 

containers/CommunitiesContent/logic.js

@@ -1,4 +1,5 @@
 import R from 'ramda'
+/* import Router from 'next/router' */
 
 import {
   asyncRes,
@@ -36,7 +37,10 @@ export function loadCommunities(page = 1) {
     communitiesLoading: true,
   })
   scrollIntoEle(TYPE.APP_HEADER_ID)
+
   sr71$.query(S.pagedCommunities, args)
+
+  communitiesContent.markQuery({ page, size })
 }
 
 export function loadPosts(page = 1) {
@@ -275,6 +279,4 @@ export function init(selectedStore) {
   communitiesContent = selectedStore
   debug(communitiesContent)
   sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-
-  // loadCommunities()
 }

containers/Route/logic.js

@@ -1,56 +1,109 @@
 import R from 'ramda'
 
-import { makeDebugger, isEmptyNil } from '../../utils'
+import { makeDebugger /*  isEmptyNil, getParameterByName */ } from '../../utils'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('L:Route')
 /* eslint-enable no-unused-vars */
 
 let route = null
 
-const getAsPathList = R.compose(
+/*
+   const getAsPathList = R.compose(
+   R.reject(R.isEmpty),
+   R.split('/'),
+   R.prop('asPath')
+   )
+
+   const getQueryMain = routeObj => {
+   if (R.isEmpty(routeObj)) return ''
+
+   if (isEmptyNil(routeObj.query) && routeObj.pathname !== '/') {
+   return routeObj.pathname.slice(1)
+   } else if (isEmptyNil(routeObj.query) && routeObj.pathname === '/') {
+   const asPathList = getAsPathList(routeObj)
+   return R.head(asPathList)
+   }
+
+   return routeObj.query.main
+   }
+
+   const getQuerySub = routeObj => {
+   const asPathList = getAsPathList(routeObj)
+   return R.last(asPathList)
+   }
+ */
+
+const asPathForMain = R.compose(
+  R.head,
+  R.split('?'),
+  R.head,
   R.reject(R.isEmpty),
   R.split('/'),
   R.prop('asPath')
 )
 
-const getQueryMain = routeObj => {
-  if (R.isEmpty(routeObj)) return ''
+const INDEX = ''
+const getMainPath = routeObj => {
+  if (R.isEmpty(routeObj)) return INDEX
+  const { asPath } = routeObj
+  if (asPath === '/') return INDEX
 
-  if (isEmptyNil(routeObj.query) && routeObj.pathname !== '/') {
-    return routeObj.pathname.slice(1)
-  } else if (isEmptyNil(routeObj.query) && routeObj.pathname === '/') {
-    const asPathList = getAsPathList(routeObj)
-    return R.head(asPathList)
-  }
+  /* const test = splitAsPathTest('/communities/posts/?page=1&size=20') */
+  /* console.log('test --> ', test) */
 
-  return routeObj.query.main
+  /* const asPathList = splitAsPath(routeObj) */
+  /* console.log('asPathList -- > ', asPathList) */
+  return asPathForMain(routeObj)
 }
 
-const getQuerySub = routeObj => {
-  const asPathList = getAsPathList(routeObj)
-  return R.last(asPathList)
+const asPathForSub = R.compose(
+  R.reject(R.isEmpty),
+  R.split('/'),
+  R.head,
+  R.reject(R.contains('=')),
+  R.reject(R.isEmpty),
+  R.split('?'),
+  R.prop('asPath')
+)
+
+const getSubPath = routeObj => {
+  if (R.isEmpty(routeObj)) return INDEX
+
+  const { asPath } = routeObj
+  if (asPath === '/') return INDEX
+
+  const asPathList = asPathForSub(routeObj)
+  /* console.log('asPath jjj -> ', asPathList) */
+  /* const asPathList = asPathForSub('/communities') */
+
+  /* const asPathList = asPathForSub('/communities/posts?page=2&size=20') */
+  /* const asPathListtest = asPathForSub('/communities/posts/?page=2&size=20') */
+  /* const asPathListtest = fuckmetest('/communities') */
+  /* const asPathListtest = fuckmetest('/communities/') */
+  /* console.log('asPathListtest jjj -> ', asPathListtest) */
+
+  return asPathList.length > 1 ? asPathList[1] : asPathList[0]
 }
 
 export function syncRoute(routeObj) {
-  /* console.log('syncRoute routeObj: ', routeObj) */
-  /*
-     console.log('syncRoute query: ', routeObj.query)
-     console.log('syncRoute pathname: ', routeObj.pathname)
-     console.log('syncRoute asPath: ', routeObj.asPath)
-     console.log('syncRoute route: ', routeObj.route)
+  /* const mainQuery = getQueryMain(routeObj) */
+  const mainQuery = getMainPath(routeObj)
+  /* console.log('mainQuery ## ', mainQuery) */
 
-     console.log(' ----------  ')
-     console.log('### getQueryMain: ', getQueryMain(routeObj))
-     console.log('### getQuerySub: ', getQuerySub(routeObj))
-   */
+  const subQuery = getSubPath(routeObj)
+  /* const subQuery = getSubPath(routeObj) */
+  /* const subPath = getSubPath(routeObj) */
+  /* console.log('subPath final -->  ', subPath) */
 
-  const mainQuery = getQueryMain(routeObj)
-  const subQuery = getQuerySub(routeObj)
+  const { query } = routeObj
 
+  // TODO: mainQuery -> mainPath
+  //       subQuery  -> subPath
   route.markState({
     mainQuery,
     subQuery,
+    query,
   })
 }
 

containers/Sidebar/logic.js

@@ -34,7 +34,14 @@ export function pin() {
 export function extendMenuBar(communityRaw) {
   switch (communityRaw) {
     case ROUTE.COMMUNITIES: {
-      return Router.push(`/${ROUTE.COMMUNITIES}`, `/${communityRaw}/`)
+      /* return Router.push(`/${ROUTE.COMMUNITIES}`, `/${communityRaw}/`) */
+      return Router.push(
+        {
+          pathname: `/${ROUTE.COMMUNITIES}`,
+          asPath: `/${communityRaw}/`,
+        }
+        /* `/${ROUTE.COMMUNITIES}`, `/${communityRaw}/` */
+      )
     }
     case ROUTE.USERS: {
       return Router.push(`/${ROUTE.USERS}`, `/${communityRaw}/`)

server.js

@@ -55,15 +55,9 @@ const communityQuery = route('/:main/:sub?')
 
 app.prepare().then(() => {
   createServer((req, res) => {
-    /*
-    req.url = req.url.replace(/\/$/, '')
-    if (req.url === '') {
-      req.url = '/'
-    }
-    handle(req, res)
-    */
-
-    const { pathname } = parse(req.url)
+    const urlParts = parse(req.url, true)
+    /* const { pathname } = parse(req.url) */
+    const { pathname, query } = urlParts
 
     const accept = accepts(req)
     const locale = accept.language(supportLanguages) // 'zh'
@@ -72,11 +66,14 @@ app.prepare().then(() => {
       res.setHeader('Content-Type', 'application/json;charset=utf-8')
       return res.end(JSON.stringify(getMessages(localeQuery(pathname).lang)))
     } else if (communitiesQuery(pathname)) {
-      return app.render(req, res, '/communities')
+      /* console.log('===========================================') */
+      /* console.log('req.params: ', parse(req.url, true)) */
+      /* console.log('===========================================') */
+      return app.render(req, res, '/communities', query)
     } else if (usersQuery(pathname)) {
-      return app.render(req, res, '/users')
+      return app.render(req, res, '/users', query)
     } else if (communityQuery(pathname)) {
-      return app.render(req, res, '/')
+      return app.render(req, res, '/', query)
     }
 
     // now index page go this way

stores/CommunitiesContentStore/index.js

@@ -60,6 +60,9 @@ const CommunitiesContentStore = t
     },
   }))
   .actions(self => ({
+    markQuery(query) {
+      self.root.route.markQuery(query)
+    },
     markState(sobj) {
       markStates(sobj, self)
     },

stores/RouteStore/index.js

@@ -4,16 +4,26 @@
  */
 
 import { types as t } from 'mobx-state-tree'
+import R from 'ramda'
+import Router from 'next/router'
 
 import { markStates, makeDebugger } from '../../utils'
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('S:RouteStore')
 /* eslint-enable no-unused-vars */
 
+const Query = t.model('Query', {
+  page: t.optional(t.string, '1'),
+  size: t.optional(t.string, '20'), // TODO: use config
+  // sort .... [when, ...]
+  // view ... [chart, list ...]
+})
+
 const RouteStore = t
   .model('RouteStore', {
     mainQuery: t.optional(t.string, ''),
     subQuery: t.optional(t.string, ''),
+    query: t.optional(Query, {}),
   })
   .views(self => ({
     get curPath() {
@@ -25,6 +35,26 @@ const RouteStore = t
     },
   }))
   .actions(self => ({
+    markQuery(query = {}) {
+      query = R.mapObjIndexed(v => String(v), query)
+      const { page } = query
+
+      // page = 1 is default
+      if (page && page === '1') {
+        query = R.omit(['page', 'size'], query)
+      }
+
+      /* debug('final query =>  ', query) */
+      if (typeof window !== 'undefined') {
+        return Router.push({
+          pathname: `/${self.mainQuery}`,
+          asPath: `/${self.subQuery}`,
+          query,
+          shallow: true,
+        })
+      }
+    },
+
     markState(sobj) {
       markStates(sobj, self)
     },