Redux integration & faker + json server

App.js

@@ -10,6 +10,9 @@ import HomeScreen from "./screens/home";
 import ProfileScreen from "./screens/profile";
 import { Root } from "native-base";
 
+import { Provider } from "react-redux";
+import store from "./store";
+
 const AppNavigator = StackNavigator(
   {
     Login: { screen: LoginScreen },
@@ -45,9 +48,9 @@ export default class App extends Component {
       return <Expo.AppLoading />;
     } else
       return (
-        <Root>
+        <Provider store={store}>
           <AppNavigator />
-        </Root>
+        </Provider>
       );
   }
 }

actions/loginActions.js

@@ -0,0 +1,6 @@
+export function setUsername(username) {
+  return function(dispatch) {
+    console.log("In set username reducer");
+    dispatch({ type: "SET_USERNAME", payload: { username: username } });
+  };
+}

actions/tweetsActions.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+import { connect } from "react-redux";
+
+export function fetchTweets() {
+  return function(dispatch) {
+    dispatch({ type: "FETCH_TWEETS" });
+    axios
+      //   .get("https://jsonplaceholder.typicode.com/posts")
+      .get("http://10.0.1.75:3000/tweets")
+      .then(response => {
+        dispatch({
+          type: "FETCH_TWEETS_FULFILLED",
+          payload: response.data
+        });
+      })
+      .catch(err => {
+        dispatch({ type: "FETCH_TWEETS_REJECTED", payload: err });
+      });
+  };
+}

generate.js

@@ -12,7 +12,7 @@ module.exports = function() {
           name: faker.name.findName(),
           username: faker.internet.userName(),
           avatar: faker.image.avatar(),
-          cover: faker.image.abstract(),
+          cover: faker.image.image(),
           bio: faker.lorem.sentence(),
           location: faker.address.city(),
           following: faker.random.number(1000),

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^5.2.0",
+    "axios": "^0.16.2",
     "color": "^2.0.0",
     "expo": "^20.0.0",
     "faker": "^4.1.0",
@@ -30,6 +31,10 @@
     "react-native": "^0.47.0",
     "react-native-svg": "^5.4.1",
     "react-navigation": "^1.0.0-beta.11",
-    "redux": "^3.7.2"
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "^4.4.1",
+    "redux-thunk": "^2.2.0"
   }
 }

reducers/index.js

@@ -0,0 +1,9 @@
+import { combineReducers } from "redux";
+
+import tweets from "./tweetsReducer";
+import login from "./loginReducer";
+
+export default combineReducers({
+  tweets,
+  login
+});

reducers/loginReducer.js

@@ -0,0 +1,17 @@
+export default function reducer(
+  state = {
+    username: ""
+  },
+  action
+) {
+  switch (action.type) {
+    case "SET_USERNAME": {
+      console.log("In set username reducer");
+      return { ...state, username: action.payload.username };
+      break;
+    }
+    default: {
+      return state;
+    }
+  }
+}

reducers/tweetsReducer.js

@@ -0,0 +1,33 @@
+export default function reducer(
+  state = {
+    tweets: [],
+    fetching: false,
+    fetched: false,
+    error: null
+  },
+  action
+) {
+  switch (action.type) {
+    case "FETCH_TWEETS": {
+      return { ...state, fetching: true };
+      break;
+    }
+    case "FETCH_TWEETS_REJECTED": {
+      return { ...state, fetching: false, error: action.payload };
+      break;
+    }
+    case "FETCH_TWEETS_FULFILLED": {
+      return {
+        ...state,
+        fetched: true,
+        fetching: false,
+        tweets: action.payload,
+        error: null
+      };
+      break;
+    }
+    default: {
+      return state;
+    }
+  }
+}

screens/home.js

@@ -19,6 +19,8 @@ import {
   Grid,
   Icon
 } from "native-base";
+import { connect } from "react-redux";
+import { fetchTweets } from "../actions/tweetsActions";
 
 const styles = StyleSheet.create({
   topMargin: {
@@ -57,23 +59,25 @@ const styles = StyleSheet.create({
   }
 });
 
+@connect(store => {
+  return {
+    tweets: store.tweets.tweets,
+    fetchingTweets: store.tweets.fetching,
+    fetchedTweets: store.tweets.fetched,
+    errorTweets: store.tweets.error,
+    username: store.login.username
+  };
+})
 export default class HomeScreen extends Component {
   constructor(props) {
     super(props);
   }
 
   componentWillMount() {
-    fetch("https://http://localhost:3000/tweets")
-      .then(response => response.json())
-      .then(responseJson => {
-        console.log(responseJson);
-      })
-      .catch(error => {
-        console.log(error);
-      });
+    this.props.dispatch(fetchTweets());
   }
 
-  tweets = [
+  tweetsTemp = [
     {
       id: 1,
       user: {
@@ -178,6 +182,7 @@ export default class HomeScreen extends Component {
   }
 
   render() {
+    console.log(this.props);
     return (
       <Container style={styles.topMargin}>
         <Header noShadow style={{ backgroundColor: "white" }}>
@@ -187,7 +192,7 @@ export default class HomeScreen extends Component {
         </Header>
         <Content style={styles.content}>
           <FlatList
-            data={this.tweets}
+            data={this.props.tweets}
             keyExtractor={this._keyExtractor}
             renderItem={({ item }) =>
               <View style={styles.tweet}>

screens/login.js

@@ -26,6 +26,8 @@ import {
   Footer,
   FooterTab
 } from "native-base";
+import { setUsername } from "../actions/loginActions";
+import { connect } from "react-redux";
 
 const styles = StyleSheet.create({
   topMargin: {
@@ -51,6 +53,9 @@ const styles = StyleSheet.create({
   }
 });
 
+@connect(store => {
+  return {};
+})
 export default class LoginScreen extends Component {
   constructor(props) {
     super(props);
@@ -85,7 +90,10 @@ export default class LoginScreen extends Component {
             <Form>
               <Item stackedLabel last>
                 <Label>Phone number, email address, or username</Label>
-                <Input />
+                <Input
+                  onChangeText={username =>
+                    this.props.dispatch(setUsername(username))}
+                />
               </Item>
               <Item stackedLabel last>
                 <Label>Password</Label>

screens/profile.js

@@ -23,6 +23,9 @@ import {
   Button
 } from "native-base";
 
+import { connect } from "react-redux";
+import { fetchTweets } from "../actions/tweetsActions";
+
 const styles = StyleSheet.create({
   header: {
     paddingTop: 5,
@@ -112,14 +115,23 @@ const styles = StyleSheet.create({
   }
 });
 
+@connect(store => {
+  return {
+    tweets: store.tweets.tweets,
+    fetchingTweets: store.tweets.fetching,
+    fetchedTweets: store.tweets.fetched,
+    errorTweets: store.tweets.error,
+    username: store.login.username
+  };
+})
 export default class ProfileScreen extends Component {
   constructor(props) {
     super(props);
     this.user = this.props.navigation.state.params;
     console.log(this.user.name);
   }
 
-  tweets = [
+  tweetsTemp = [
     {
       id: 1,
       user: {
@@ -297,7 +309,7 @@ export default class ProfileScreen extends Component {
         </View>
         <View style={{ backgroundColor: "white", marginTop: 8 }}>
           <FlatList
-            data={this.tweets}
+            data={this.props.tweets}
             keyExtractor={this._keyExtractor}
             renderItem={({ item }) =>
               <View style={styles.tweet}>
@@ -307,7 +319,7 @@ export default class ProfileScreen extends Component {
                   activeOpacity={0.75}
                 > */}
                 <View style={{ flex: 1, flexDirection: "row" }}>
-                  <Thumbnail source={{ uri: item.user.avatar }} />
+                  <Thumbnail source={{ uri: this.user.avatar }} />
                   <View
                     style={{
                       flexDirection: "column",
@@ -321,13 +333,13 @@ export default class ProfileScreen extends Component {
                         fontSize: 20
                       }}
                     >
-                      {item.user.name}
+                      {this.user.name}
                     </Text>
 
                     <Text
                       style={{ paddingLeft: 15, color: "#aaa", fontSize: 16 }}
                     >
-                      {"@" + item.user.username}
+                      {"@" + this.user.username}
                     </Text>
                   </View>
                 </View>

store.js

@@ -0,0 +1,11 @@
+import { applyMiddleware, createStore } from "redux";
+
+import logger from "redux-logger";
+import thunk from "redux-thunk";
+import promise from "redux-promise-middleware";
+
+import reducer from "./reducers";
+
+const middleware = applyMiddleware(promise(), thunk, logger);
+
+export default createStore(reducer, middleware);