feat: create profile integration with API

geeekgod · Oct 6, 2022 · b9ad4a5 · b9ad4a5
1 parent 945bc49
commit b9ad4a5
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 83 deletions.
diff --git a/App.js b/App.js
@@ -7,6 +7,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import * as SplashScreen from 'expo-splash-screen';
 import useFont from "./app/hooks/useFont";
 import { AuthContextProvider } from "./app/context/AuthContext";
+import { DataContextProvider } from "./app/context/DataContext";
 
 
 export default function App() {
@@ -104,12 +105,12 @@ export default function App() {
     <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
       <NativeBaseProvider theme={theme}>
         <AuthContextProvider>
-          <NavigationContainer onStateChange={(e) => {
-            console.log(e.index);
-          }}>
-            <StatusBar barStyle={"default"} />
-            <StackNavigator />
-          </NavigationContainer>
+          <DataContextProvider>
+            <NavigationContainer>
+              <StatusBar barStyle={"default"} />
+              <StackNavigator />
+            </NavigationContainer>
+          </DataContextProvider>
         </AuthContextProvider>
       </NativeBaseProvider>
     </View>

diff --git a/app/api/index.js b/app/api/index.js
@@ -1,7 +1,12 @@
 import axios from 'axios'
 
 const bloodLineApi = axios.create({
-  baseURL: 'http://192.168.1.7:4561/api',
+  baseURL: 'http://192.168.1.5:4561/api',
+  headers: {
+    "Content-Type": "application/json",
+    "Access-Control-Allow-Headers": "Authorization",
+    "Accept": "*/*",
+  }
 })
 
 export default bloodLineApi
diff --git a/app/context/AuthContext/index.js b/app/context/AuthContext/index.js
@@ -1,6 +1,7 @@
 import React, { createContext, useCallback, useEffect, useState } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as SplashScreen from 'expo-splash-screen';
+import bloodLineApi from "../../api";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -26,22 +27,23 @@ const AuthContextProvider = ({ children }) => {
   const [user, setUser] = useState({});
   const [accessToken, setAccessToken] = useState(null);
 
-  useEffect(() => {
-    const firstLoad = async () => {
-      try {
-        const user = await AsyncStorage.getItem("@user");
-        const accessToken = await AsyncStorage.getItem("@accessToken");
-        setUser(JSON.parse(user));
-        setAccessToken(JSON.parse(accessToken));
-      } catch (err) {
-        console.log(err);
-      } finally {
-        setAppIsReady(true);
+  const getUser = () => {
+    bloodLineApi.get('/user', {
+      headers: {
+        Authorization: accessToken
       }
-    };
+    }).then((res) => {
+      if (res.data.success) {
+        setUser(res.data.data)
+        storeData("@user", res.data.data)
+      }
+    }).catch((err) => {
+      if (err.response.status === 401) {
+        logout()
+      }
+    })
+  }
 
-    firstLoad();
-  }, []);
 
   const onLayoutRootView = useCallback(async () => {
     if (appIsReady) {
@@ -73,6 +75,32 @@ const AuthContextProvider = ({ children }) => {
     });
   };
 
+  useEffect(() => {
+    const firstLoad = async () => {
+      try {
+        const user = await AsyncStorage.getItem("@user");
+        const accessToken = await AsyncStorage.getItem("@accessToken");
+        getUser();
+        setUser(JSON.parse(user));
+        setAccessToken(JSON.parse(accessToken));
+      } catch (err) {
+        console.log(err);
+      } finally {
+        setAppIsReady(true);
+      }
+    };
+
+    firstLoad();
+  }, []);
+
+  console.log(user)
+
+  useEffect(() => {
+    if (accessToken) {
+      bloodLineApi.defaults.headers.common['Authorization'] = accessToken;
+    }
+  }, [accessToken])
+
   useEffect(() => {
     setIsAuth(() => user !== null && accessToken !== null ? true : false)
   }, [user, accessToken])
@@ -84,7 +112,7 @@ const AuthContextProvider = ({ children }) => {
   return (
     <AuthContext.Provider
       onLayout={onLayoutRootView}
-      value={{ user, accessToken, headers, isAuth, storeCredentials }}
+      value={{ user, accessToken, headers, isAuth, storeCredentials, getUser }}
     >
       {children}
     </AuthContext.Provider>

diff --git a/app/context/DataContext/index.js b/app/context/DataContext/index.js
@@ -0,0 +1,71 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as SplashScreen from 'expo-splash-screen';
+import { AuthContext } from "../AuthContext";
+
+SplashScreen.preventAutoHideAsync();
+
+const DataContext = createContext();
+const storeData = async (key, data) => {
+  try {
+    await AsyncStorage.setItem(key, JSON.stringify(data));
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+
+const DataContextProvider = ({ children }) => {
+
+  const { isAuth } = useContext(AuthContext)
+
+  const [appIsReady, setAppIsReady] = useState(false)
+  const [profile, setProfile] = useState({});
+
+  useEffect(() => {
+    const firstLoad = async () => {
+      try {
+        setAppIsReady(false)
+        const profile = await AsyncStorage.getItem("@profile");
+        setProfile(JSON.parse(profile));
+      } catch (err) {
+        console.log(err);
+      } finally {
+        setAppIsReady(true);
+        if (!isAuth) {
+          setProfile({})
+        }
+      }
+    };
+
+    firstLoad();
+  }, [isAuth]);
+
+  const onLayoutRootView = useCallback(async () => {
+    if (appIsReady) {
+      await SplashScreen.hideAsync();
+    }
+  }, [appIsReady]);
+
+
+  const storeProfile = (resData) => {
+    storeData("@profile", resData.data);
+    setProfile(resData.data);
+  };
+
+
+  if (!appIsReady) {
+    return null
+  }
+
+  return (
+    <DataContext.Provider
+      onLayout={onLayoutRootView}
+      value={{ profile, storeProfile }}
+    >
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+export { DataContext, DataContextProvider };
diff --git a/app/navigation/StackNavigator/index.js b/app/navigation/StackNavigator/index.js
@@ -14,12 +14,10 @@ const StackNavigator = () => {
 
   const { user, isAuth } = useContext(AuthContext)
 
-  console.log(user, isAuth);
-
   const initialRoute = () => {
     if (!isAuth) return "Welcome";
 
-    if (!user.isProfile) return "CreateProfile"
+    if (user.isProfile === false) return "CreateProfile"
 
     return "Home"
   }