Skip to content
Permalink
Browse files

- add redux

  • Loading branch information...
samuel1112 committed Nov 4, 2017
1 parent 6d14bbb commit dffe88539329cfcbfaadef08c2d66383e042850b
Showing with 239 additions and 17 deletions.
  1. +10 −3 App.js
  2. +1 −0 package.json
  3. 0 src/ReplyItem.js
  4. +20 −2 src/Styles/Topics.js
  5. +88 −0 src/TopicDetail.js
  6. +27 −7 src/TopicView.js
  7. +1 −1 src/reducers.js
  8. +92 −4 yarn.lock
13 App.js
@@ -5,11 +5,18 @@
*/
import React from 'react';
import {View} from 'react-native';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import app from './src/reducers'
import Main from './src/main';

const store = createStore(app);

const Container = () =>
<View style={{flex: 1}}>
<Main />
</View>;
<Provider store={store}>
<View style={{flex: 1}}>
<Main />
</View>
</Provider>;

export default Container;
@@ -9,6 +9,7 @@
"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.5",
"react-native-render-html": "^3.5.0",
"react-native-vector-icons": "^4.4.2",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
No changes.
@@ -115,7 +115,25 @@ export default StyleSheet.create({
backgroundColor: Color.BORDER,
overflow: 'hidden'
},
cellRepliesText: {

// detail
detailContainer: {
flex: 1,
backgroundColor:Color.SUB_BACKGROUND
},
detailTopic: {
flex: 1,
padding: 10,
marginBottom: 20,
backgroundColor: 'white'
},
detailTopicTitle: {
fontWeight:'bold',
color: Color.MAIN,
fontSize: 16,
paddingBottom: 10
},
detailTopicHTML: {
lineHeight: 16,
fontSize: 14
}
});
@@ -0,0 +1,88 @@

import React, { Component } from 'react';
import { ScrollView, FlatList, View, Text, StatusBar, Platform, Dimensions } from 'react-native';
import { connect } from 'react-redux'
import HTML from 'react-native-render-html';

import TopicStyle from './Styles/Topics';
import API from './Utils/API';

class TopicsDetail extends Component {
constructor(props){
super(props);
this.state = {
replies: []
};
}

componentDidMount(){
this._fetchData();
}

_fetchData = ()=>{
API.getReplies({topic_id: this.props.topicId}).then(res=>{
this.setState({
replies: res
});
});
};
_keyExtractor = (data)=>{
return data.id;
};

_renderReplyCell = (data)=>{
return (
<View style={{backgroundColor:'white', flex: 1, padding: 10}}>
<HTML html={data.content_rendered||' '}
imagesMaxWidth={Dimensions.get('window').width*0.6}
ignoredTags={['image','img']}
style={TopicStyle.detailTopicHTML}/>
</View>
);
};

render(){
const {topicInfo} = this.props;
console.log(topicInfo);
return (
<ScrollView contentContainerStyle={TopicStyle.detailContainer}>
<View style={TopicStyle.detailTopic}>
<View>
<Text style={TopicStyle.detailTopicTitle}>
{topicInfo.title}
</Text>
</View>
<View>
<HTML html={topicInfo.content_rendered||' '}
imagesMaxWidth={Dimensions.get('window').width}
ignoredTags={['image','img']}
style={TopicStyle.detailTopicHTML}/>
</View>
</View>
{this.state.replies.map(this._renderReplyCell)}
</ScrollView>

);
}
}

function getTopicInfo(topics, id){
let _res = {};
topics.forEach(topic=>{
if(topic.id === id){
_res = topic;
return false;
}
});
return _res;
}

function select(state) {
return {
topicId: state.topicDetail,
topicInfo: getTopicInfo(state.topics, state.topicDetail)
};
}

export default connect(select)(TopicsDetail);

@@ -1,18 +1,20 @@

import React, { Component } from 'react';
import { FlatList, View, StatusBar, Platform } from 'react-native';
import { connect } from 'react-redux'
import API from './Utils/API';
import Color from './Utils/Color';
import {getLatest, getNodeList, setTopicDetial} from "./actions";

import TopicsListItem from './TopicListItem';
import TopicDetail from './TopicDetail';

export default class TopicsView extends Component {
class TopicsView extends Component {
constructor(props){
super(props);
this.state = {
data: [],
loading: true,
currentPage: 0,
pageLoading: false
};
}
@@ -21,30 +23,38 @@ export default class TopicsView extends Component {
}

_fetchData = ()=>{
const {topicType, dispatch} = this.props;
if(this.state.pageLoading){
return;
}
this.setState({
pageLoading: true
});
// console.log(this.state.currentPage);
API.getLatestTopic(null).then(res=>{
let getter = topicType.type === 'latest'?API.getLatestTopic:API.getNodeInfo;
let action = topicType.type === 'latest'?getLatest:getNodeList;

getter(null).then(res=>{
this.setState({
data: res.sort((a,b)=>{return b.created - a.created;}),
loading: false,
currentPage: this.state.currentPage+1,
pageLoading: false
});
console.log(res);
dispatch(action(res));
}).done();
};
_keyExtractor = (data)=>{
return data.id;
};

handleTopicDetail = (id)=>{
const {dispatch} = this.props;
dispatch(setTopicDetial(id));
this.props.navigator.push({
component: TopicDetail,
title: '',

})
});
// this.props.navigation.navigate(`TopicDetail`, {id: id});
};

@@ -58,7 +68,7 @@ export default class TopicsView extends Component {
StatusBar.setBarStyle('light-content', true);
Platform.OS==='android' ? StatusBar.setBackgroundColor(Color.SUB) : null;
return (
<FlatList data={this.state.data}
<FlatList data={this.props.topics}
onRefresh={this._fetchData}
refreshing={this.state.pageLoading}
extraData={this.state}
@@ -67,3 +77,13 @@ export default class TopicsView extends Component {
);
}
}

function select(state) {
return {
topicType: state.topicType,
topics: state.topics
};
}

export default connect(select)(TopicsView);

@@ -16,7 +16,7 @@ function topicType(state={type: 'latest', name: 'Latest'}, action){
}
}

function topicDetail(state={}, action){
function topicDetail(state=null, action){
switch (action.type){
case SET_TOPIC_DETAIL:
return action.info;

0 comments on commit dffe885

Please sign in to comment.
You can’t perform that action at this time.