From 987c66768212199b25605d834ea2a7217547fda8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E6=99=A8=E5=85=89?= <809200299@qq.com> Date: Fri, 9 Feb 2018 15:06:23 +0800 Subject: [PATCH 1/7] update: update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index d30f40e..dbbcb2b 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.idea From ab2728b71b117bb626531e138ed9be2439de5ea0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E6=99=A8=E5=85=89?= <809200299@qq.com> Date: Fri, 9 Feb 2018 19:20:23 +0800 Subject: [PATCH 2/7] update: fix some typo and modify tabs object --- README.md | 2 ++ src/pages/Login/index.js | 13 ++++++++++--- src/pages/Main/Default.js | 14 +++++++------- src/store/session.js | 6 +++--- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index eaa7344..06994b1 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,8 @@ react-cnode/ - 升级 react-router 到4 +- 升级 antd-mobile 到 2.x + ### 如何启动 Step 1 ``` diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js index 28ba9d1..1201964 100644 --- a/src/pages/Login/index.js +++ b/src/pages/Login/index.js @@ -29,14 +29,17 @@ class Login extends React.Component { render () { // canSubmit and submitting is for prevent users clicking again before finishing request - // login is the method the submit the form to sever + // login is the method for submit the form to server // changeInput is the method to change the observable const { canSubmit, submitting, login, changeInput } = this.props; return ( 登录 - + - + ); diff --git a/src/pages/Main/Default.js b/src/pages/Main/Default.js index 78372d8..604251e 100644 --- a/src/pages/Main/Default.js +++ b/src/pages/Main/Default.js @@ -5,12 +5,12 @@ import { Tabs } from 'antd-mobile'; import { observer, inject } from 'mobx-react'; const TabPane = Tabs.TabPane; const tabs = { - '全部': 'all', - '精华': 'good', - '分享': 'share', - '问答': 'ask', - '招聘': 'job' -}; + all: '全部', + good: '精华', + share: '分享', + ask: '问答', + job: '招聘' +} @inject(({topics, status}) => ({ loading: status.loading, refreshing: status.refreshing, @@ -55,7 +55,7 @@ class MyTabs extends React.Component { > { Object.entries(tabs).map((item, index) => - ( + ( )) } diff --git a/src/store/session.js b/src/store/session.js index 53b1d88..b29a606 100644 --- a/src/store/session.js +++ b/src/store/session.js @@ -19,7 +19,7 @@ class Session { } @action.bound - init ({accesstoken, loginname, id}) { + init ({accesstoken, loginname, id} = {}) { this.accesstoken = accesstoken ? JSON.parse(accesstoken) : ''; this.loginname = loginname ? JSON.parse(loginname) : ''; this.id = id ? JSON.stringify(id) : ''; @@ -59,7 +59,7 @@ class Session { @action.bound clear () { - this.init({}); + this.init(); } @action.bound @@ -72,4 +72,4 @@ class Session { -export default new Session(db.get(keys)); \ No newline at end of file +export default new Session(db.get(keys)); From a44fe1d4cebc2caaef87bc3cb77667603874c043 Mon Sep 17 00:00:00 2001 From: sunchenguang <809200299@qq.com> Date: Mon, 26 Feb 2018 23:24:38 +0800 Subject: [PATCH 3/7] add todo & fix useless space --- README.md | 4 +++- src/store/session.js | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 06994b1..f4e2a18 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ react-cnode/ | |   |   |__ index.js           * 别的工具函数 │ - │ + │ │——constants/ * 一些常量(其实没怎么用) │ │ @@ -56,6 +56,8 @@ react-cnode/ - 升级 antd-mobile 到 2.x +- 开发环境添加mobx devtool + ### 如何启动 Step 1 ``` diff --git a/src/store/session.js b/src/store/session.js index b29a606..d199223 100644 --- a/src/store/session.js +++ b/src/store/session.js @@ -17,7 +17,7 @@ class Session { constructor (obj) { this.init(obj); } - + @action.bound init ({accesstoken, loginname, id} = {}) { this.accesstoken = accesstoken ? JSON.parse(accesstoken) : ''; @@ -34,7 +34,7 @@ class Session { this.accesstoken = value; } - @action.bound + @action.bound async login () { try { status.setSubmitting(true); @@ -53,7 +53,7 @@ class Session { Toast.fail('登录失败', 1); } finally { console.log(status); - status.setSubmitting(false); + status.setSubmitting(false); } } From 7fb42d391f80726a9344d9367ec9f7d7a525b909 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E6=99=A8=E5=85=89?= <809200299@qq.com> Date: Wed, 28 Feb 2018 20:02:35 +0800 Subject: [PATCH 4/7] =?UTF-8?q?fixed:=20=E4=BF=AE=E5=A4=8D=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E4=B8=8E=E5=BA=95=E9=83=A8tab=E4=B8=8D=E5=AF=B9?= =?UTF-8?q?=E5=BA=94=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=8F=91=E5=B8=83=E4=B8=BB=E9=A2=98=E5=90=8E=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E7=BB=A7=E7=BB=AD=E5=8F=91=E5=B8=83=E6=8A=A5=E9=94=99=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++++ src/components/ListItem/index.js | 4 ++-- src/pages/Main/Default.js | 7 +++++-- src/pages/Publish/index.js | 4 +--- src/router/index.js | 16 ++++++++++++++++ src/routes/Publish/success.js | 6 ++++++ src/routes/Root/index.js | 4 +++- src/store/global.js | 17 ++++++++++------- src/store/publish.js | 7 ++++--- 9 files changed, 51 insertions(+), 18 deletions(-) create mode 100644 src/routes/Publish/success.js diff --git a/README.md b/README.md index f4e2a18..2b61ff1 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,10 @@ react-cnode/ - 开发环境添加mobx devtool +### bug +- 未登录时，点击用户中心，会进入登录页，点击X，退出到首页，但是footer图标还是用户中心。 +- 发布主题后，点击继续发布报错，不能继续发布。 + ### 如何启动 Step 1 ``` diff --git a/src/components/ListItem/index.js b/src/components/ListItem/index.js index c93ecf3..a7db7fd 100644 --- a/src/components/ListItem/index.js +++ b/src/components/ListItem/index.js @@ -48,7 +48,7 @@ const footerExtra = ({last_reply_at}) => ( -const ListItem = ({item, index, length}) => { +const HomeListItem = ({item, index, length}) => { return (
@@ -81,4 +81,4 @@ const ListItem = ({item, index, length}) => { ); }; -export default ListItem; +export default HomeListItem; diff --git a/src/pages/Main/Default.js b/src/pages/Main/Default.js index 604251e..696a6ac 100644 --- a/src/pages/Main/Default.js +++ b/src/pages/Main/Default.js @@ -54,9 +54,12 @@ class MyTabs extends React.Component { onChange={this.changeType} > { - Object.entries(tabs).map((item, index) => + Object.entries(tabs).map((item) => ( - + )) } diff --git a/src/pages/Publish/index.js b/src/pages/Publish/index.js index e5bf489..be51721 100644 --- a/src/pages/Publish/index.js +++ b/src/pages/Publish/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { SimpleNavbar } from '../../components/NavBar'; -import Success from './Success'; import { InputItem, TextareaItem, Tabs, Button, Picker, List } from 'antd-mobile'; import { inject, observer } from 'mobx-react'; @@ -44,9 +43,8 @@ class Publish extends React.Component { render () { - const { title, tab, error, markdown, canSubmit, finish } = this.props.publish; + const { title, tab, error, markdown, canSubmit } = this.props.publish; const { submitting } = this.props; - if (finish) return ; return (
diff --git a/src/router/index.js b/src/router/index.js index 4711670..97e1a47 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,6 +6,15 @@ import global from '../store/global'; import session from '../store/session'; import { Toast } from 'antd-mobile'; + +//路径与对应的底部tab的映射表 +export const RouteTabMap = { + '/': 'home', + '/publish': 'publish', + '/message': 'message', + '/mine': 'mine' +} + history.listen(location => { const currentPathname = location.pathname; // 路由变化时，记录旧新路由 @@ -32,6 +41,13 @@ history.listen(location => { routing.goBack(); } }); + + //路由切换时确保底部当前tab与路由一致 + let correspondTab = RouteTabMap[currentPathname] + if(correspondTab && global.tab !== correspondTab) { + global.updateVal('tab', correspondTab) + } + }) const Root = (props) => { diff --git a/src/routes/Publish/success.js b/src/routes/Publish/success.js new file mode 100644 index 0000000..9a7d585 --- /dev/null +++ b/src/routes/Publish/success.js @@ -0,0 +1,6 @@ +export default { + path: '/publish/success', + getComponent (location, callback) { + import('../../pages/Publish/Success').then(module => callback(null, module.default)); + } +} diff --git a/src/routes/Root/index.js b/src/routes/Root/index.js index 284ae53..764b1cf 100644 --- a/src/routes/Root/index.js +++ b/src/routes/Root/index.js @@ -5,6 +5,7 @@ import Reply from '../Mine/reply'; import Topic from '../Mine/topic'; import Collection from '../Mine/collection'; import Login from '../Login'; +import PublishSuccess from '../Publish/success' export default [ Main, @@ -13,5 +14,6 @@ export default [ Collection, Topic, Detail, - Login + Login, + PublishSuccess ]; diff --git a/src/store/global.js b/src/store/global.js index 3911b68..d45376f 100644 --- a/src/store/global.js +++ b/src/store/global.js @@ -1,6 +1,8 @@ import { observable, action, useStrict } from 'mobx'; import routing from './routing'; import db from '../utils/db'; +import {RouteTabMap} from '../router/index' + useStrict(true); const LinkToWhiteList = ['/', '/message', '/publish', '/mine']; @@ -33,6 +35,7 @@ class Global { this[key] = val; } + //tab切换 + 路由切换 @action.bound changeTab (tab) { this.tab = tab; @@ -41,16 +44,16 @@ class Global { } LinkTo () { - switch (this.tab) { - case 'home': routing.push('/'); break; - case 'publish': routing.push('/publish'); break; - case 'message': routing.push('/message'); break; - case 'mine': routing.push('/mine'); break; - default: return; + for(let key in RouteTabMap) { + let value = RouteTabMap[key] + if(value === this.tab) { + routing.push(key) + break + } } } } const self = new Global(db.get(['tab', 'from', 'to'])); -export default self; \ No newline at end of file +export default self; diff --git a/src/store/publish.js b/src/store/publish.js index 5f5326f..b4e0d56 100644 --- a/src/store/publish.js +++ b/src/store/publish.js @@ -35,7 +35,8 @@ marked.setOptions({ class Publish { @observable content = ''; @observable title = ''; - @observable tab = ['ask']; + //默认发到客户端测试版块 + @observable tab = ['dev']; @observable error = { title: null, tab: false, @@ -82,7 +83,7 @@ class Publish { runInAction(() => { this.finish = true; }); - routing.push('/success'); + routing.push('/publish/success'); } catch (err) { Toast.fail('发布失败，稍后再试', 1); } finally { @@ -104,4 +105,4 @@ class Publish { } } -export default new Publish(); \ No newline at end of file +export default new Publish(); From f6d618609d71f235921d545525daa13330859527 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E6=99=A8=E5=85=89?= <809200299@qq.com> Date: Sat, 3 Mar 2018 17:07:19 +0800 Subject: [PATCH 5/7] =?UTF-8?q?update:=20=E6=B7=BB=E5=8A=A0=E5=85=A8?= =?UTF-8?q?=E5=B1=80loading,=20=E9=81=BF=E5=85=8D=E5=88=B0=E5=A4=84?= =?UTF-8?q?=E5=BC=95=E7=94=A8=E3=80=82=E9=A6=96=E9=A1=B5tab=E5=8A=A0?= =?UTF-8?q?=E5=85=A5=E5=AE=A2=E6=88=B7=E7=AB=AF=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++- src/components/List/index.js | 13 ++++------ src/components/Loading/index.js | 9 +++++-- src/pages/Detail/index.js | 29 ++++++++++------------- src/pages/Homepage/index.js | 3 --- src/pages/Main/app.js | 27 +++++++++++++++++++++ src/pages/Main/{Default.js => myTabs.js} | 3 ++- src/pages/Message/index.js | 6 ++--- src/pages/Mine/StateLess.js | 4 +--- src/pages/Mine/index.js | 4 +--- src/router/index.js | 2 +- src/routes/Main/index.js | 4 ++-- src/routes/Root/app.js | 11 +++++++++ src/store/collections.js | 2 +- src/store/detail.js | 9 +++++-- src/store/messages.js | 30 ++++++++++++++++++------ src/store/topics.js | 8 ++++--- 17 files changed, 111 insertions(+), 59 deletions(-) create mode 100644 src/pages/Main/app.js rename src/pages/Main/{Default.js => myTabs.js} (97%) create mode 100644 src/routes/Root/app.js diff --git a/README.md b/README.md index 2b61ff1..4db7ac5 100644 --- a/README.md +++ b/README.md @@ -56,12 +56,16 @@ react-cnode/ - 升级 antd-mobile 到 2.x -- 开发环境添加mobx devtool +- ~~开发环境添加mobx devtool 没什么实际作用，不添加~~ ### bug - 未登录时，点击用户中心，会进入登录页，点击X，退出到首页，但是footer图标还是用户中心。 - 发布主题后，点击继续发布报错，不能继续发布。 +### 特性 +- 首页顶部tab添加客户端测试tab(key为dev)，完成 +- 把loading组件拿出来放到最外面，避免在每个用到的地方都写一遍 + ### 如何启动 Step 1 ``` diff --git a/src/components/List/index.js b/src/components/List/index.js index 7712b61..7627327 100644 --- a/src/components/List/index.js +++ b/src/components/List/index.js @@ -1,16 +1,11 @@ import React from 'react' import { ListView, RefreshControl } from 'antd-mobile'; -import Loading from '../Loading'; import PropTypes from 'prop-types'; const MyBody = (props) => (
{props.children}
); -const Footer = () => ( - -); - class List extends React.Component { static propTypes = { disableRefresh: PropTypes.bool, @@ -118,7 +113,7 @@ class List extends React.Component { } render () { - const { loading, refreshing, disableRefresh, disableLoadMore, useBodyScroll, ListItem, data, height } = this.props; + const { refreshing, disableRefresh, disableLoadMore, useBodyScroll, ListItem, data, height } = this.props; const { dataSource } = this.state; if (useBodyScroll) { return ( @@ -129,7 +124,7 @@ class List extends React.Component { pageSize={10} useBodyScroll renderRow={(rowData, sIndex, rIndex) => } - renderFooter={() => loading ?