Persistent Data

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

Hide file tree

Showing 5 changed files with 71 additions and 18 deletions.
diff --git a/App.js b/App.js
@@ -22,19 +22,19 @@ const initialState = {
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case "OPEN_MENU":
-      return { action: "openMenu" };
+      return { ...state, action: "openMenu" };
     case "CLOSE_MENU":
-      return { action: "closeMenu" };
+      return { ...state, action: "closeMenu" };
     case "UPDATE_NAME":
-      return { name: action.name };
+      return { ...state, name: action.name };
     case "OPEN_CARD":
-      return { action: "openCard" };
+      return { ...state, action: "openCard" };
     case "CLOSE_CARD":
-      return { action: "closeCard" };
+      return { ...state, action: "closeCard" };
     case "OPEN_LOGIN":
-      return { action: "openLogin" };
+      return { ...state, action: "openLogin" };
     case "CLOSE_LOGIN":
-      return { action: "closeLogin" };
+      return { ...state, action: "closeLogin" };
     default:
       return state;
   }

diff --git a/components/Avatar.js b/components/Avatar.js
@@ -31,13 +31,13 @@ class Avatar extends React.Component {
     })
       .then(response => response.json())
       .then(response => {
-        console.log(response);
+        // console.log(response);
 
         this.setState({
           photo: response[0].photo
         });
 
-        this.props.updateName(response[0].name);
+        // this.props.updateName(response[0].name);
       });
   }
 

diff --git a/components/Menu.js b/components/Menu.js
@@ -4,6 +4,7 @@ import { Animated, TouchableOpacity, Dimensions } from "react-native";
 import { Icon } from "expo";
 import MenuItem from "./MenuItem";
 import { connect } from "react-redux";
+import { AsyncStorage } from "react-native";
 
 const screenWidth = Dimensions.get("window").width;
 var cardWidth = screenWidth;
@@ -20,6 +21,11 @@ function mapDispatchToProps(dispatch) {
     closeMenu: () =>
       dispatch({
         type: "CLOSE_MENU"
+      }),
+    updateName: name =>
+      dispatch({
+        type: "UPDATE_NAME",
+        name
       })
   };
 }
@@ -53,6 +59,14 @@ class Menu extends React.Component {
     }
   };
 
+  handleMenu = index => {
+    if (index === 3) {
+      this.props.closeMenu();
+      this.props.updateName();
+      AsyncStorage.clear();
+    }
+  };
+
   render() {
     return (
       <AnimatedContainer style={{ top: this.state.top }}>
@@ -77,12 +91,14 @@ class Menu extends React.Component {
         </TouchableOpacity>
         <Content>
           {items.map((item, index) => (
-            <MenuItem
+            <TouchableOpacity
               key={index}
-              icon={item.icon}
-              title={item.title}
-              text={item.text}
-            />
+              onPress={() => {
+                this.handleMenu(index);
+              }}
+            >
+              <MenuItem icon={item.icon} title={item.title} text={item.text} />
+            </TouchableOpacity>
           ))}
         </Content>
       </AnimatedContainer>

diff --git a/components/ModalLogin.js b/components/ModalLogin.js
@@ -11,6 +11,7 @@ import Loading from "./Loading";
 import { Alert, Animated, Dimensions } from "react-native";
 import { connect } from "react-redux";
 import firebase from "./Firebase";
+import { AsyncStorage } from "react-native";
 
 const screenHeight = Dimensions.get("window").height;
 
@@ -23,6 +24,11 @@ function mapDispatchToProps(dispatch) {
     closeLogin: () =>
       dispatch({
         type: "CLOSE_LOGIN"
+      }),
+    updateName: name =>
+      dispatch({
+        type: "UPDATE_NAME",
+        name
       })
   };
 }
@@ -40,6 +46,10 @@ class ModalLogin extends React.Component {
     translateY: new Animated.Value(0)
   };
 
+  componentDidMount() {
+    this.retrieveName();
+  }
+
   componentDidUpdate() {
     if (this.props.action === "openLogin") {
       Animated.timing(this.state.top, {
@@ -69,8 +79,24 @@ class ModalLogin extends React.Component {
     }
   }
 
+  storeName = async name => {
+    try {
+      await AsyncStorage.setItem("name", name);
+    } catch (error) {}
+  };
+
+  retrieveName = async () => {
+    try {
+      const name = await AsyncStorage.getItem("name");
+      if (name !== null) {
+        console.log(name);
+        this.props.updateName(name);
+      }
+    } catch (error) {}
+  };
+
   handleLogin = () => {
-    console.log(this.state.email, this.state.password);
+    // console.log(this.state.email, this.state.password);
 
     this.setState({ isLoading: true });
 
@@ -84,7 +110,7 @@ class ModalLogin extends React.Component {
         Alert.alert("Error", error.message);
       })
       .then(response => {
-        console.log(response);
+        // console.log(response);
 
         this.setState({ isLoading: false });
 
@@ -93,6 +119,9 @@ class ModalLogin extends React.Component {
 
           Alert.alert("Congrats", "You've logged successfully!");
 
+          this.storeName(response.user.email);
+          this.props.updateName(response.user.email);
+
           setTimeout(() => {
             this.props.closeLogin();
             this.setState({ isSuccessful: false });

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -121,6 +121,14 @@ class HomeScreen extends React.Component {
     }
   };
 
+  handleAvatar = () => {
+    if (this.props.name) {
+      this.props.openMenu();
+    } else {
+      this.props.openLogin();
+    }
+  };
+
   render() {
     return (
       <RootView>
@@ -135,7 +143,7 @@ class HomeScreen extends React.Component {
             <ScrollView style={{ height: "100%" }}>
               <TitleBar>
                 <TouchableOpacity
-                  onPress={this.props.openLogin}
+                  onPress={this.handleAvatar}
                   style={{ position: "absolute", top: 0, left: 20 }}
                 >
                   <Avatar />
@@ -171,7 +179,7 @@ class HomeScreen extends React.Component {
                     if (loading) return <Message>Loading...</Message>;
                     if (error) return <Message>Error...</Message>;
 
-                    console.log(data.cardsCollection.items);
+                    // console.log(data.cardsCollection.items);
 
                     return (
                       <CardsContainer>