Feature/v2

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea

README.md

@@ -32,9 +32,9 @@ react-cnode/
    │    |
    |    |—— db.js               * localstorage操作
    |    |
-   |    |__ index.js            * 别的工具函数
+   |    |__ index.js            * 别的工具函数
+   │
    │
-   │ 
    │——constants/                * 一些常量(其实没怎么用)
    │
    │

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) => (
   <div>{props.children}</div>
 );
 
-const Footer = () => (
-  <Loading text="加载中..." />
-);
-
 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) => <ListItem item={rowData} {...this.props} index={rIndex} length={data.length} />}
-          renderFooter={() => loading ? <Footer loading={loading} /> : null}
+          renderFooter={() => null}
         />
       );
     } else {
@@ -145,7 +140,7 @@ class List extends React.Component {
           renderBodyComponent={() => <MyBody />}
           onEndReached={disableLoadMore ? null : this.loadMore}
           renderRow={(rowData, sIndex, rIndex) => <ListItem item={rowData} index={rIndex} length={data.length} {...this.props} />}
-          renderFooter={() => loading ? <Footer loading={loading} /> : null}
+          renderFooter={() => null}
           refreshControl={
             !disableRefresh ? <RefreshControl refreshing={refreshing} onRefresh={this.refresh} /> : null
           }
@@ -158,4 +153,4 @@ class List extends React.Component {
   };
 }
 
-export default List;
+export default List;

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 (
     <div>
       <Link to={`/detail/${item.id}`}>
@@ -81,4 +81,4 @@ const ListItem = ({item, index, length}) => {
   );
 };
 
-export default ListItem;
+export default HomeListItem;

src/components/Loading/index.js

@@ -3,8 +3,13 @@ import { Flex, ActivityIndicator } from 'antd-mobile';
 
 const Loading = (props) => {
   return (
-    <Flex justify="center" style={{margin: "30px 0"}}><ActivityIndicator text={props.text} /></Flex>
+    <Flex justify="center"
+          align="center"
+          style={{position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)'}}
+    >
+        <ActivityIndicator text={props.text} />
+    </Flex>
   );
 }
 
-export default Loading;
+export default Loading;

src/pages/Detail/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Popup, Toast } from 'antd-mobile';
-import Loading from '../../components/Loading';
 import { BackNavBar } from '../../components/NavBar';
 import BackTop from './components/BackTop';
 import Comment from './components/Comment';
@@ -88,23 +87,19 @@ class Detail extends React.Component {
   }
 
   render () {
-    const { loading } = this.props;
-    if (loading) {
-      return ( <Loading /> );
-    } else {
-      return (
-        <div style={{height: '100%'}}>
-          <BackNavBar title="主题详情" />
-          <div style={{paddingTop: '.9rem'}}>
-            <Owner />
-            <Content />
-            <Comments onComment={this.onComment} onUps={this.onUps} onScroll={this.onScroll} />
-            <BackTop />
-            <Comment onComment={this.onComment} />
-          </div>
+
+    return (
+      <div style={{height: '100%'}}>
+        <BackNavBar title="主题详情" />
+        <div style={{paddingTop: '.9rem'}}>
+          <Owner />
+          <Content />
+          <Comments onComment={this.onComment} onUps={this.onUps} onScroll={this.onScroll} />
+          <BackTop />
+          <Comment onComment={this.onComment} />
         </div>
-      );
-    }
+      </div>
+    );
   }
 }
 

src/pages/Homepage/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import BusinessCard from '../../components/BusinessCard';
 import { BackNavBar } from '../../components/NavBar';
-import Loading from '../../components/Loading';
 import RecentReplies from './components/RecentReplies';
 import RecentTopics from './components/RecentTopics';
 import { Tabs } from 'antd-mobile';
@@ -42,8 +41,6 @@ class Homepage extends React.Component {
   }
 
   render () {
-    const { loading } = this.props;
-    if (loading) return <Loading />
     return (
       <div>
         <BackNavBar title="个人主页" />

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 (
       <Card direction="column" style={{height: '100%', width: '100%'}}>
         <Flex direction="column" style={{padding: '0.5rem 0'}}>
           <span>登录</span>
-          <InputItem style={{width: '95%', padding: '0.5rem 0 0 0'}} placeholder="请输入access_token" onChange={changeInput} />
+          <InputItem style={{width: '95%', padding: '0.5rem 0 0 0'}}
+                     placeholder="请输入access_token"
+                     onChange={changeInput}
+          />
           <Button 
             type="primary" 
             style={{width: '95%', marginTop: '0.5rem'}} 
@@ -45,7 +48,11 @@ class Login extends React.Component {
           >
             { !submitting ? '确定' : '提交中...'}
           </Button>
-         <Icon type={require('../../icons/close.svg')} style={{marginTop: '0.5rem'}} disabled={submitting} onClick={this.goBack} />
+         <Icon type={require('../../icons/close.svg')}
+               style={{marginTop: '0.5rem'}}
+               disabled={submitting}
+               onClick={this.goBack}
+         />
         </Flex>
       </Card>
     );

src/pages/Main/app.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import Loading from '../../components/Loading'
+
+@inject(({status}) => ({
+  loading: status.loading
+}))
+@observer
+class App extends React.Component {
+
+  render () {
+    const {loading, children} = this.props;
+    return (
+      <div style={{
+        position: 'relative',
+        width: '100vw',
+        height: '100vh'
+      }}
+      >
+        {loading && <Loading text="加载中..." />}
+        {children}
+      </div>
+    );
+  }
+}
+
+export default App;

src/pages/Main/Default.js → src/pages/Main/myTabs.js

@@ -5,12 +5,13 @@ 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: '招聘',
+    dev: '客户端测试'
+}
 @inject(({topics, status}) => ({
   loading: status.loading,
   refreshing: status.refreshing,
@@ -54,9 +55,12 @@ class MyTabs extends React.Component {
           onChange={this.changeType}
         >
           {
-            Object.entries(tabs).map((item, index) => 
-              (<TabPane tab={item[0]} key={item[1]}>
-                  <List {...{...this.props, saveScrollTop: this.saveScrollTop, ListItem}} />
+            Object.entries(tabs).map((item) =>
+              (<TabPane tab={item[1]} key={item[0]}>
+                  <List {...this.props}
+                        saveScrollTop={this.saveScrollTop}
+                        ListItem={ListItem}
+                  />
                </TabPane>))
           }
         </Tabs>

src/pages/Message/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SimpleNavbar } from '../../components/NavBar';
 import { inject, observer } from 'mobx-react';
-import Loading from '../../components/Loading';
 import ListItem from './components/MessageListItem';
 import List from '../../components/List';
 
@@ -21,8 +20,7 @@ class Message extends React.Component {
   }
 
   render () {
-    const { loading, messages } = this.props;
-    if (loading) return <Loading />;
+    const { messages } = this.props;
     return (
       <div>
         <SimpleNavbar title="消息" />
@@ -40,4 +38,4 @@ class Message extends React.Component {
   }
 }
 
-export default Message;
+export default Message;

src/pages/Mine/StateLess.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import List from '../../components/List';
 import { BackNavBar } from '../../components/NavBar';
-import Loading from '../../components/Loading';
 import ListItem from '../../components/ListItem';
 
 
@@ -11,8 +10,7 @@ export default class Stateless extends Component {
   }
 
   render () {
-    const { loading, title, _loading, loadMore, data } = this.props;
-    if (loading) return <Loading />
+    const { title, _loading, loadMore, data } = this.props;
     return (
       <div>
         <BackNavBar title={title} />

src/pages/Mine/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import BusinessCard from '../../components/BusinessCard';
-import Loading from '../../components/Loading';
 import { SimpleNavbar } from '../../components/NavBar';
 import { List, Icon, Toast } from 'antd-mobile';
 import { inject, observer } from 'mobx-react';
@@ -30,8 +29,7 @@ class Mine extends React.Component {
   }
 
   render () {
-    const { logout, loading, push } = this.props;
-    if (loading) return ( <Loading /> );
+    const { logout, push } = this.props;
     return (
       <div
         style={{

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 <Success />;
     return (
       <div>
         <SimpleNavbar title="发布" />

src/router/index.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { Router } from 'react-router';
-import routes from '../routes/Root';
+import routes from '../routes/Root/app';
 import routing, { history } from '../store/routing';
 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) => {

src/routes/Main/index.js

@@ -6,7 +6,7 @@ export default {
   path: '/',
   indexRoute:{
     getComponent (location, callback) {
-      import('../../pages/Main/Default').then(module => {
+      import('../../pages/Main/myTabs').then(module => {
         callback(null, module.default)
       });
     }
@@ -21,4 +21,4 @@ export default {
     Publish,
     Message
   ]
-}
+}

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));
+  }
+}