Update app and React Native Router

- add welcome screen * get the token if it existed * redirect to log in if not * get user data and send to app file - add render propse to the routes insted of send the component beside send the client data inside component #25
HROKA · Sep 24, 2020 · df8fdf4 · df8fdf4
1 parent 37968c7
commit df8fdf4
Show file tree

Hide file tree

Showing 12 changed files with 286 additions and 126 deletions.
diff --git a/App.js b/App.js
@@ -1,25 +1,87 @@
-import React from 'react';
-import { NativeRouter, Route } from 'react-router-native';
+import React, { useState } from 'react';
+import { NativeRouter, Route, useHistory } from 'react-router-native';
 import HomeScreen from './screens/Home';
 import Login from './screens/signIn';
 import SignUp from './screens/SignUp';
 import SearchScreen from './screens/Search';
 import FavoritesScreen from './screens/Favorites';
 import OrdersScreen from './screens/Orders';
 import ProfileScreen from './screens/Profile';
-// import BottomTabBar from './components/BottomTabBar';
+import WelcomePage from './screens/Welcome';
+import BottomTabBar from './components/BottomTabBar';
+
+const App = () => {
+  const [clientData, setClientData] = useState();
 
-export default function App() {
   return (
     <NativeRouter>
-      <Route exact path='/' component={Login} />
-      <Route exact path='/signup' component={SignUp} />
-      <Route exact path='/home' component={HomeScreen} />
-      <Route exact path='/search' component={SearchScreen} />
-      <Route exact path='/favorites' component={FavoritesScreen} />
-      <Route exact path='/orders' component={OrdersScreen} />
-      <Route exact path='/profile' component={ProfileScreen} />
-      {/* <BottomTabBar /> */}
+      <Route
+        exact
+        path='/'
+        render={() => <WelcomePage setClientData={setClientData} />}
+      />
+      <Route
+        exact
+        path='/login'
+        render={() => <Login setClientData={setClientData} />}
+      />
+      <Route
+        exact
+        path='/signup'
+        render={() => <SignUp setClientData={setClientData} />}
+      />
+      <Route
+        exact
+        path='/home'
+        render={() => (
+          <>
+            <HomeScreen clientData={clientData} />
+            <BottomTabBar tab={0} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/search'
+        render={() => (
+          <>
+            <SearchScreen clientData={clientData} />
+            <BottomTabBar tab={1} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/favorites'
+        render={() => (
+          <>
+            <FavoritesScreen clientData={clientData} />
+            <BottomTabBar tab={2} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/orders'
+        render={() => (
+          <>
+            <OrdersScreen clientData={clientData} />
+            <BottomTabBar tab={3} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/profile'
+        render={() => (
+          <>
+            <ProfileScreen clientData={clientData} />
+            <BottomTabBar tab={4} />
+          </>
+        )}
+      />
     </NativeRouter>
   );
-}
+};
+
+export default App;
diff --git a/Utils/fetchData.js b/Utils/fetchData.js
@@ -10,7 +10,19 @@ const fetchData = async (route, body, method) => {
       or
       product api: https://food-app-delivery.herokuapp.com/api/v1/
       */
-      return axios.get(api.concat(route)).then(({ data }) => data).catch(() => 'Error get data');
+      return axios
+        .get(
+          api.concat(route),
+          body
+            ? {
+              params: {
+                token: body,
+              },
+            }
+            : {}
+        )
+        .then(({ data }) => data)
+        .catch(() => 'Error get data');
 
     default:
       return axios[method](api.concat(route), body).then(({ data }) => data);

diff --git a/Utils/secureStorage.js b/Utils/secureStorage.js
@@ -6,6 +6,9 @@ export default {
   },
   getStoreSecure: async () => {
     const data = await SecureStore.getItemAsync('token');
-    return data;
+    return JSON.parse(data);
+  },
+  deleteStoreSecure: async () => {
+    await SecureStore.deleteItemAsync('token');
   },
 };
diff --git a/components/BottomTabBar/index.js b/components/BottomTabBar/index.js
@@ -2,9 +2,7 @@
 
 import React, { useState, useRef } from 'react';
 import { useHistory } from 'react-router-native';
-import {
-  SafeAreaView, TouchableOpacity, View,
-} from 'react-native';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { Transitioning, Transition } from 'react-native-reanimated';
 import Profile from './icons/Profile';
 import Search from './icons/Search';
@@ -13,14 +11,14 @@ import Favorites from './icons/Favorites';
 import Orders from './icons/Orders';
 import styles from './style';
 
-const TabBar = () => {
-  const [active, setActive] = useState(0);
+const TabBar = ({ tab }) => {
+  const [active, setActive] = useState(tab);
   const history = useHistory();
   const transition = <Transition.Change interpolation='easeOut' />;
   const ref = useRef();
 
   const tabs = [
-    { icon: <Home active={active === 0} />, route: '/' },
+    { icon: <Home active={active === 0} />, route: '/home' },
     { icon: <Search active={active === 1} />, route: '/search' },
     { icon: <Favorites active={active === 2} />, route: '/favorites' },
     { icon: <Orders active={active === 3} />, route: '/orders' },
@@ -34,10 +32,13 @@ const TabBar = () => {
         // https://docs.expo.io/versions/latest/sdk/reanimated/
         ref={ref}
         style={styles.centerAll}
-        transition={transition}>
+        transition={transition}
+      >
         <View style={styles.tabs}>
           {tabs.map(({ icon, route }, index) => (
-            <TouchableOpacity key={index} style={styles.tab}
+            <TouchableOpacity
+              key={index}
+              style={styles.tab}
               onPress={() => {
                 setActive(index);
                 history.push(route);

diff --git a/package-lock.json b/package-lock.json
diff --git a/screens/Home/index.js b/screens/Home/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import styles from './style';
 
-const Home = () => (
+const Home = ({ clientData }) => (
     <View style={styles.container}>
         <Text>Home</Text>
     </View>

diff --git a/screens/Profile/index.js b/screens/Profile/index.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import styles from './style';
 
-const Profile = () => (
-    <View style={styles.container}>
-        <Text>Profile</Text>
-    </View>
+const Profile = ({ clientData }) => (
+  <View style={styles.container}>
+    <Text>{clientData.name}</Text>
+  </View>
 );
 
 export default Profile;
diff --git a/screens/SignUp/index.js b/screens/SignUp/index.js
@@ -1,6 +1,13 @@
 /* eslint-disable camelcase */
 import React, { useState } from 'react';
-import { Text, Image, ImageBackground, View, ToastAndroid } from 'react-native';
+import {
+  Text,
+  Image,
+  ImageBackground,
+  ActivityIndicator,
+  View,
+  ToastAndroid,
+} from 'react-native';
 import { useHistory } from 'react-router-native';
 
 import TextInput from '../../components/TextInput';
@@ -13,25 +20,30 @@ import logo from '../../assets/logo.png';
 import Picker from '../../components/Picker';
 import styles from './style';
 
-const SignUpPage = () => {
+const SignUpPage = ({ setClientData }) => {
   const [name, setName] = useState();
   const [mobile_number, setMobileNumber] = useState();
   const [password, setPassword] = useState();
   const [location, setLocation] = useState();
   const [address, setAddress] = useState();
+  const [loading, setLoading] = useState(0);
+
   const history = useHistory();
 
   const signUp = async () => {
     // api post request
     try {
-      const { role } = await API(
+      setLoading(true);
+      const { CLIENT_TOKEN, client_Data } = await API(
         'auth/client/signup',
         { name, password, mobile_number, location, address },
         'post'
       );
-      storage.storeSecure(role);
+      setClientData(client_Data);
+      storage.storeSecure(CLIENT_TOKEN);
       history.push('home');
     } catch (err) {
+      setLoading(false);
       ToastAndroid.show(
         '  حصل خطأ أثناء إنشاء الحساب يرجى التأكد من جميع بياناتك و المحاولة مرة أخرى',
         ToastAndroid.LONG,
@@ -46,54 +58,67 @@ const SignUpPage = () => {
         <Image source={logo} style={styles.logo} />
         <Text style={styles.headerText}> إنشاء حساب جديد</Text>
       </ImageBackground>
-      <TextInput
-        // user name
-        value={name}
-        onChangeText={(value) => setName(value)}
-        placeholder='الإسم'
-        icon
-      />
-      <TextInput
-        // mobile number
-        value={mobile_number}
-        onChangeText={(value) => setMobileNumber(value)}
-        placeholder='رقم الهاتف'
-        maxLength={10}
-        keyboardType={'phone-pad'}
-        icon={{ icon: 'mobile' }}
-      />
-      <TextInput
-        // password
-        value={password}
-        onChangeText={(value) => setPassword(value)}
-        placeholder='كلمة المرور'
-        icon={{ icon: 'key' }}
-      />
-      <Picker
-        // location
-        icon placeholder='المنطقة' onSelect={(value) => setLocation(value)} />
+      {loading ? (
+        <ActivityIndicator
+          size='large'
+          color='#F04732'
+          style={styles.headerImg}
+        />
+      ) : (
+        <>
+          <TextInput
+            // user name
+            value={name}
+            onChangeText={(value) => setName(value)}
+            placeholder='الإسم'
+            icon
+          />
+          <TextInput
+            // mobile number
+            value={mobile_number}
+            onChangeText={(value) => setMobileNumber(value)}
+            placeholder='رقم الهاتف'
+            maxLength={10}
+            keyboardType={'phone-pad'}
+            icon={{ icon: 'mobile' }}
+          />
+          <TextInput
+            // password
+            value={password}
+            onChangeText={(value) => setPassword(value)}
+            placeholder='كلمة المرور'
+            icon={{ icon: 'key' }}
+          />
+          <Picker
+            // location
+            icon
+            placeholder='المنطقة'
+            onSelect={(value) => setLocation(value)}
+          />
 
-      <TextInput
-        // address
-        value={address}
-        onChangeText={(value) => setAddress(value)}
-        placeholder='العنوان'
-        icon={{ icon: 'home' }}
-      />
+          <TextInput
+            // address
+            value={address}
+            onChangeText={(value) => setAddress(value)}
+            placeholder='العنوان'
+            icon={{ icon: 'home' }}
+          />
 
-      <View style={styles.containerBtn}>
-        <Button text='إنشاء ' onPress={() => signUp()} solid />
-      </View>
-      <View style={styles.lineParagraph}>
-        <View style={styles.line} />
-        <Text> أو </Text>
-        <View style={styles.line} />
-      </View>
-      <Button
-        text='تسجيل الدخول'
-        style={styles.bottomButton}
-        onPress={() => history.push('/')}
-      />
+          <View style={styles.containerBtn}>
+            <Button text='إنشاء ' onPress={() => signUp()} solid />
+          </View>
+          <View style={styles.lineParagraph}>
+            <View style={styles.line} />
+            <Text> أو </Text>
+            <View style={styles.line} />
+          </View>
+          <Button
+            text='تسجيل الدخول'
+            style={styles.bottomButton}
+            onPress={() => history.push('/login')}
+          />
+        </>
+      )}
     </ImageBackground>
   );
 };