AsyncStorage with Redux

MengTo · May 14, 2019 · baefd62 · baefd62
1 parent 2243424
commit baefd62
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 24 deletions.
diff --git a/App.js b/App.js
@@ -16,7 +16,8 @@ const client = new ApolloClient({
 
 const initialState = {
   action: "",
-  name: ""
+  name: "Stranger",
+  avatar: "https://cl.ly/55da82beb939/download/avatar-default.jpg"
 };
 
 const reducer = (state = initialState, action) => {
@@ -27,6 +28,8 @@ const reducer = (state = initialState, action) => {
       return { ...state, action: "closeMenu" };
     case "UPDATE_NAME":
       return { ...state, name: action.name };
+    case "UPDATE_AVATAR":
+      return { ...state, avatar: action.avatar };
     case "OPEN_CARD":
       return { ...state, action: "openCard" };
     case "CLOSE_CARD":

diff --git a/components/AsyncStorage.js b/components/AsyncStorage.js
@@ -0,0 +1,8 @@
+import { AsyncStorage } from "react-native";
+
+export const saveState = async state => {
+  try {
+    const serializedState = JSON.stringify(state);
+    await AsyncStorage.setItem("state", serializedState);
+  } catch (error) {}
+};
diff --git a/components/Avatar.js b/components/Avatar.js
@@ -1,10 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 import { connect } from "react-redux";
+import { AsyncStorage } from "react-native";
 
 function mapStateToProps(state) {
   return {
-    name: state.name
+    name: state.name,
+    avatar: state.avatar
   };
 }
 
@@ -14,35 +16,34 @@ function mapDispatchToProps(dispatch) {
       dispatch({
         type: "UPDATE_NAME",
         name: name
+      }),
+    updateAvatar: avatar =>
+      dispatch({
+        type: "UPDATE_AVATAR",
+        avatar
       })
   };
 }
 
 class Avatar extends React.Component {
-  state = {
-    photo: "https://cl.ly/55da82beb939/download/avatar-default.jpg"
-  };
-
   componentDidMount() {
-    fetch("https://uifaces.co/api?limit=1&random", {
-      headers: new Headers({
-        "X-API-KEY": "eeaafbe81657073cd70ac6e3de1bd6"
-      })
-    })
-      .then(response => response.json())
-      .then(response => {
-        // console.log(response);
+    this.loadState();
+  }
 
-        this.setState({
-          photo: response[0].photo
-        });
+  loadState = () => {
+    AsyncStorage.getItem("state").then(serializedState => {
+      const state = JSON.parse(serializedState);
+      console.log(state);
 
-        // this.props.updateName(response[0].name);
-      });
-  }
+      if (state) {
+        this.props.updateName(state.name);
+        this.props.updateAvatar(state.avatar);
+      }
+    });
+  };
 
   render() {
-    return <Image source={{ uri: this.state.photo }} />;
+    return <Image source={{ uri: this.props.avatar }} />;
   }
 }
 

diff --git a/components/Menu.js b/components/Menu.js
@@ -26,6 +26,11 @@ function mapDispatchToProps(dispatch) {
       dispatch({
         type: "UPDATE_NAME",
         name
+      }),
+    updateAvatar: avatar =>
+      dispatch({
+        type: "UPDATE_AVATAR",
+        avatar
       })
   };
 }
@@ -62,7 +67,10 @@ class Menu extends React.Component {
   handleMenu = index => {
     if (index === 3) {
       this.props.closeMenu();
-      this.props.updateName();
+      this.props.updateName("Stranger");
+      this.props.updateAvatar(
+        "https://cl.ly/55da82beb939/download/avatar-default.jpg"
+      );
       AsyncStorage.clear();
     }
   };

diff --git a/components/ModalLogin.js b/components/ModalLogin.js
@@ -12,6 +12,7 @@ import { Alert, Animated, Dimensions } from "react-native";
 import { connect } from "react-redux";
 import firebase from "./Firebase";
 import { AsyncStorage } from "react-native";
+import { saveState } from "./AsyncStorage";
 
 const screenHeight = Dimensions.get("window").height;
 
@@ -29,6 +30,11 @@ function mapDispatchToProps(dispatch) {
       dispatch({
         type: "UPDATE_NAME",
         name
+      }),
+    updateAvatar: avatar =>
+      dispatch({
+        type: "UPDATE_AVATAR",
+        avatar
       })
   };
 }
@@ -119,7 +125,8 @@ class ModalLogin extends React.Component {
 
           Alert.alert("Congrats", "You've logged successfully!");
 
-          this.storeName(response.user.email);
+          // this.storeName(response.user.email);
+          this.fetchUser();
           this.props.updateName(response.user.email);
 
           setTimeout(() => {
@@ -130,6 +137,22 @@ class ModalLogin extends React.Component {
       });
   };
 
+  fetchUser = () => {
+    fetch("https://uifaces.co/api?limit=1&random", {
+      headers: new Headers({
+        "X-API-KEY": "eeaafbe81657073cd70ac6e3de1bd6"
+      })
+    })
+      .then(response => response.json())
+      .then(response => {
+        const name = response[0].name;
+        const avatar = response[0].photo;
+        saveState({ name, avatar });
+        this.props.updateName(name);
+        this.props.updateAvatar(avatar);
+      });
+  };
+
   focusEmail = () => {
     this.setState({
       iconEmail: require("../assets/icon-email-animated.gif"),

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -122,7 +122,7 @@ class HomeScreen extends React.Component {
   };
 
   handleAvatar = () => {
-    if (this.props.name) {
+    if (this.props.name !== "Stranger") {
       this.props.openMenu();
     } else {
       this.props.openLogin();