Merge pull request #36 from febobo/develop

update user page

src/actions/ActionTypes.js

@@ -11,3 +11,5 @@ export const UP_REPLY = 'UP_REPLY'; // 评论点赞
 export const GET_PHOTO = 'GET_PHOTO'; // 照片列表
 export const GET_VIDEO = 'GET_VIDEO'; // 视频列表
 export const GET_VIDEO_START = 'GET_VIDEO_START'; // 开始请求视频列表
+export const LOGOUT = 'LOGOUT' ; // 退出
+export const CLEAR_CACHE_DETAIL = 'CLEAR_CACHE_DETAIL' // 清除文章缓存

src/actions/DetailActions.js

@@ -19,3 +19,9 @@ export function getArticleDetail(id){
     })
   }
 }
+
+export function clearCacheDetail(){
+  return {
+    type : types.CLEAR_CACHE_DETAIL
+  }
+}

src/actions/EssenceActions.js

@@ -1,4 +1,6 @@
 import * as types from './actionTypes';
+import {createAction} from 'redux-actions';
+import * as topicService from '../service/topicService';
 
 export function essenceList(data , getState){
   let oldList = (getState().Essence && getState().Essence.data && getState().Essence.data.concat(data))  || data;
@@ -15,17 +17,23 @@ export function isDownLoad(isLoad){
   }
 }
 
-// 首页列表
-export function getList(params , cb){
-  return (dispatch , getState) => {
-    fetch('https://cnodejs.org/api/v1/topics?' + params)
-    .then(res => res.json())
-    .then(json =>{
-      cb && cb();
-      dispatch(essenceList(json.data , getState))
-    })
-    .catch( msg =>{
-      console.log(msg)
-    })
-  }
-}
+export const getList = createAction(types.INDEX_LIST , topicService.getTopics , ({
+  page,
+  limit
+},resolved ,rejected) => {
+  console.log(resolved)
+})
+// // 首页列表
+// export function getList(params , cb){
+//   return (dispatch , getState) => {
+//     fetch('https://cnodejs.org/api/v1/topics?' + params)
+//     .then(res => res.json())
+//     .then(json =>{
+//       cb && cb();
+//       dispatch(essenceList(json.data , getState))
+//     })
+//     .catch( msg =>{
+//       console.log(msg)
+//     })
+//   }
+// }

src/actions/UserActions.js

@@ -26,3 +26,9 @@ export const checkToken = createAction(types.CHECK_TOKEN , async(token) =>{
 		sync: 'user'
 	}
 })
+
+export const logout = function(){
+  return {
+    type : types.LOGOUT
+  }
+}

src/components/TabShow.js

@@ -29,7 +29,7 @@ export default class TabShow extends Component {
 		return (
       <View style={this.props.wrapStyle}>
         <TouchableOpacity onPress={this._onPress.bind(this)}>
-  				<View style={styles.iconWrapper}>
+  				<View style={[styles.iconWrapper,this.props.appStyle]}>
             {this.props.content}
   				</View>
         </TouchableOpacity>

src/container/index.js

@@ -14,6 +14,7 @@ import connectComponent from '../utils/connectComponent';
 class FeInnApp extends Component {
   constructor (props){
     super(props);
+    this.configureScene = this.configureScene.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -22,6 +23,13 @@ class FeInnApp extends Component {
     }
 	}
 
+  configureScene(route) {
+		if (route.sceneConfig) {
+			return route.sceneConfig
+		}
+		return Navigator.SceneConfigs.HorizontalSwipeJump
+	}
+
   render (){
     const { state , actions } = this.props;
     let defaultName = '精选';
@@ -31,9 +39,7 @@ class FeInnApp extends Component {
         style={styles.bg}>
         <Navigator
             initialRoute={{ name: defaultName, component: defaultComponent }}
-            configureScene={(route) => {
-              return Navigator.SceneConfigs.HorizontalSwipeJump;
-            }}
+            configureScene={this.configureScene}
             renderScene={(route, navigator) => {
                 let Component = route.component;
                 return <Component {...this.props} {...route.params} navigator={navigator} />

src/page/About.js

@@ -0,0 +1,118 @@
+import React , { Component } from 'react';
+import {
+  Navigator ,
+  View ,
+  Text,
+  StyleSheet,
+  Image,
+  Dimensions,
+  ListView,
+  RefreshControl,
+  TouchableOpacity,
+  Linking
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import TabShow from '../components/TabShow';
+export default class About extends Component {
+  constructor (props){
+    super(props);
+    this.renderBackIcon = this.renderBackIcon.bind(this);
+  }
+
+  openSource (url){
+    Linking.openURL(url)
+    .catch(err => console.error('An error occurred', err));
+  }
+
+  renderBackIcon (){
+    return (
+      <Icon
+        name='md-close'
+        size={ 30 }
+        color='rgba(255,255,255,1)'
+      />
+    )
+  }
+
+  render (){
+    return (
+      <View style={[styles.container]}>
+        <View style={[styles.logo]}>
+          <TouchableOpacity style={styles.flexRow}
+            onPress={ () => {this.openSource('https://github.com/febobo/react-native-redux-FeInn')}}
+          >
+            <Icon
+              name='logo-nodejs'
+              size={ 45 }
+              color='#fff'
+            />
+          </TouchableOpacity>
+          <View style={styles.flexRow}>
+            <Text style={styles.aboutText}>FeInn   v0.1.0</Text>
+          </View>
+        </View>
+        <View style={[styles.githubSource]}>
+          <TouchableOpacity style={styles.flexRow}
+            onPress={ () => {this.openSource('https://github.com/febobo/react-native-redux-FeInn')}}
+          >
+            <Icon
+              name='logo-github'
+              size={ 45 }
+              color='#fff'
+            />
+          </TouchableOpacity>
+          <View style={styles.flexRow}>
+            <Text style={styles.aboutText}>@febobo(十三把刀)</Text>
+          </View>
+        </View>
+        <View style={[styles.flexRow,styles.pack]}>
+          <TouchableOpacity
+            onPress={ () => {this.openSource('https://github.com/facebook/react-native')}}
+          >
+            <Text style={{width : width , textAlign : 'center',color:'#fff'}}>Powered by ReactNativ v^0.28.0</Text>
+          </TouchableOpacity>
+        </View>
+        <TabShow {...this.props}
+          content={this.renderBackIcon()}
+          wrapStyle={styles.wrapStyle}
+          appStyle={styles.appStyle}
+         />
+      </View>
+    )
+  }
+}
+
+const { width , height } = Dimensions.get('window');
+const styles = StyleSheet.create({
+  container : {
+    flex : 1,
+    paddingBottom : 15,
+    backgroundColor : '#515151'
+  },
+  logo : {
+    paddingTop : height / 5,
+  },
+  flexRow : {
+    flexDirection : 'row',
+    justifyContent : 'center'
+  },
+  githubSource : {
+    paddingTop : 20
+  },
+  pack : {
+    position : 'absolute',
+    bottom : 8
+  },
+  wrapStyle : {
+    flex : 1,
+    position:'absolute',
+    right : 20,
+    top : 25,
+  },
+  appStyle : {
+    backgroundColor : 'transparent'
+  },
+  aboutText : {
+    color : '#fff'
+  }
+})

src/page/Article.js

@@ -8,7 +8,8 @@ import {
   Image,
   ScrollView,
   TouchableOpacity,
-  Dimensions
+  Dimensions,
+  RefreshControl
 } from 'react-native';
 import LightBox from 'react-native-lightbox'
 import Carousel from 'react-native-looped-carousel'
@@ -17,20 +18,27 @@ class Article extends Component {
   constructor (props){
     super(props);
     this._onScroll = this._onScroll.bind(this);
+    this.loadList = this.loadList.bind(this);
+    this._onRefresh = this._onRefresh.bind(this);
   }
 
   componentWillMount(){
+    this.loadList()
+  }
+
+  loadList (){
     const { actions , Acticle } = this.props;
     actions.getPhoto({
       page : Acticle.page,
       limit: Acticle.limit
     })
   }
+  _onRefresh (){
+    this.loadList()
+  }
 
   _onScroll(e) {
     const { actions , Acticle } = this.props;
-
-    console.log(22222,this)
     let scrollH = e.nativeEvent.contentSize.height; //scrollview的高度
     let y = e.nativeEvent.contentOffset.y;//当前滑动显示的y轴坐标
     let height = e.nativeEvent.layoutMeasurement.height ;//显示部分高度
@@ -45,14 +53,23 @@ class Article extends Component {
   }
 
   render (){
-    console.log(this)
     const { Acticle } = this.props;
     return (
       <View style={[styles.container]}>
       {
         Acticle && Acticle.photos && Acticle.photos.length !=0 ?
         <ScrollView style={{flex:1}}
           onScroll={this._onScroll}
+          refreshControl={
+            <RefreshControl
+              refreshing={Acticle.getPhotosIsPending || false}
+              onRefresh={this._onRefresh}
+              tintColor="#ff0000"
+              title="Loading..."
+              colors={['#ff0000', '#00ff00', '#0000ff']}
+              progressBackgroundColor="#ffff00"
+            />
+          }
         >
 
           <View style={styles.imgsWrap}>

src/page/Detail.js

@@ -32,6 +32,11 @@ class Detail extends Component {
     getArticleDetail(aid)
   }
 
+  componentWillUnmount(){
+    const { actions } = this.props;
+    actions.clearCacheDetail();
+  }
+
   render (){
     const { data } = this.props.Detail;
     const pointContent = (()=>{
@@ -53,12 +58,13 @@ class Detail extends Component {
         />
       )
     })();
+
     return (
       <View style={[styles.container]}>
       <ScrollView>
       <View style={[styles.container]}>
         {
-          data ?
+          data && data.id?
           <View >
           <View style={[styles.header,{backgroundColor:randomBg()}]}>
             <View>
@@ -77,9 +83,9 @@ class Detail extends Component {
               </Text>
               <View style={styles.titleFooter}>
                 <Icon
-                  name='ios-time'
-                  size={12}
-                  color='rgba(255,255,255,0.5)'
+                  name='ios-time-outline'
+                  size={14}
+                  color='#ccc'
                   style={styles.dateIcon}
                 />
                 <Text style={styles.dateText}>
@@ -127,6 +133,12 @@ const styles = StyleSheet.create({
     left : 20,
     bottom : 25,
   },
+  titleFooter : {
+    flexDirection : 'row',
+    alignItems : 'center',
+    marginTop : 10
+    // justifyContent : 'center',
+  },
   commentWrapStyle : {
     flex : 1,
     position:'absolute',
@@ -167,13 +179,3 @@ export function mapStateToProps(state){
     Detail : state.Detail
   }
 }
-// const mapActionCreators = (dispatch) => ({
-//   detail : bindActionCreators(DetailActions , dispatch),
-// })
-//
-// const mapStateToProps = (state)=>
-// ({
-//   Detail : state.Detail
-// })
-//
-// export default connect (mapStateToProps , mapActionCreators)(Detail)