Merge pull request #33 from mahdi-sharifimehr/RN-Tutorial-33

commit

src/App.js

@@ -2,21 +2,63 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import Home from './screens/Home';
-import Login from './screens/Login';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import ToDo from './screens/ToDo';
+import Done from './screens/Done';
+import Task from './screens/Task';
+import Splash from './screens/Splash';
 import Map from './screens/Map';
 import Camera from './screens/Camera';
 import { Provider } from 'react-redux';
 import { Store } from './redux/store';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
-const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+
+function HomeTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={
+        ({ route }) => ({
+          tabBarIcon: ({ focused, size, color }) => {
+            let iconName;
+            if (route.name === 'To-Do') {
+              iconName = 'clipboard-list';
+              size = focused ? 25 : 20;
+            } else if (route.name === 'Done') {
+              iconName = 'clipboard-check';
+              size = focused ? 25 : 20;
+            }
+            return (
+              <FontAwesome5
+                name={iconName}
+                size={size}
+                color={color}
+              />
+            );
+          }
+        })
+      }
+      tabBarOptions={{
+        activeTintColor: '#0080ff',
+        inactiveTintColor: '#777777',
+        labelStyle: { fontSize: 15, fontWeight: 'bold' }
+      }}
+    >
+      <Tab.Screen name={'To-Do'} component={ToDo} />
+      <Tab.Screen name={'Done'} component={Done} />
+    </Tab.Navigator>
+  );
+}
+
+const RootStack = createStackNavigator();
 
 function App() {
   return (
     <Provider store={Store}>
       <NavigationContainer>
-        <Stack.Navigator
-          initialRouteName="Login"
+        <RootStack.Navigator
+          initialRouteName="Splash"
           screenOptions={{
             headerTitleAlign: 'center',
             headerStyle: {
@@ -29,26 +71,22 @@ function App() {
             }
           }}
         >
-          <Stack.Screen
-            name="Login"
-            component={Login}
+          <RootStack.Screen
+            name="Splash"
+            component={Splash}
             options={{
               headerShown: false,
             }}
           />
-          <Stack.Screen
-            name="Home"
-            component={Home}
-          />
-          <Stack.Screen
-            name="Map"
-            component={Map}
+          <RootStack.Screen
+            name="My Tasks"
+            component={HomeTabs}
           />
-          <Stack.Screen
-            name="Camera"
-            component={Camera}
+          <RootStack.Screen
+            name="Task"
+            component={Task}
           />
-        </Stack.Navigator>
+        </RootStack.Navigator>
       </NavigationContainer>
     </Provider>
   )

src/redux/actions.js

@@ -1,51 +1,16 @@
-export const SET_USER_NAME = 'SET_USER_NAME';
-export const SET_USER_AGE = 'SET_USER_AGE';
-export const INCREASE_AGE = 'INCREASE_AGE';
-export const GET_CITIES = 'GET_CITIES';
+export const SET_TASKS = 'SET_TASKS';
+export const SET_TASK_ID = 'SET_TASK_ID';
 
-const API_URL = 'https://mocki.io/v1/aac8b81a-139c-4235-82e6-0dbadf33f2b7';
-
-export const getCities = () => {
-    try {
-        return async dispatch => {
-            const result = await fetch(API_URL, {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            });
-            const json = await result.json();
-            if (json) {
-                dispatch({
-                    type: GET_CITIES,
-                    payload: json
-                });
-            } else {
-                console.log('Unable to fetch!');
-            }
-        }
-    } catch (error) {
-        console.log(error);
-    }
-}
-
-export const setName = name => dispatch => {
+export const setTasks = tasks => dispatch => {
     dispatch({
-        type: SET_USER_NAME,
-        payload: name,
+        type: SET_TASKS,
+        payload: tasks,
     });
 };
 
-export const setAge = age => dispatch => {
+export const setTaskID = taskID => dispatch => {
     dispatch({
-        type: SET_USER_AGE,
-        payload: age,
+        type: SET_TASK_ID,
+        payload: taskID,
     });
 };
-
-export const increaseAge = age => dispatch => {
-    dispatch({
-        type: INCREASE_AGE,
-        payload: age,
-    });
-};

src/redux/reducers.js

@@ -1,24 +1,19 @@
-import { SET_USER_NAME, SET_USER_AGE, INCREASE_AGE, GET_CITIES } from './actions';
+import { SET_TASKS, SET_TASK_ID } from './actions';
 
 const initialState = {
-    name: '',
-    age: 0,
-    cities: [],
+    tasks: [],
+    taskID: 1,
 }
 
-function userReducer(state = initialState, action) {
+function taskReducer(state = initialState, action) {
     switch (action.type) {
-        case SET_USER_NAME:
-            return { ...state, name: action.payload };
-        case SET_USER_AGE:
-            return { ...state, age: action.payload };
-        case INCREASE_AGE:
-            return { ...state, age: state.age + 1 };
-        case GET_CITIES:
-            return { ...state, cities: action.payload };
+        case SET_TASKS:
+            return { ...state, tasks: action.payload };
+        case SET_TASK_ID:
+            return { ...state, taskID: action.payload };
         default:
             return state;
     }
 }
 
-export default userReducer;
+export default taskReducer;

src/redux/store.js

@@ -1,7 +1,7 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import userReducer from './reducers';
+import taskReducer from './reducers';
 
-const rootReducer = combineReducers({ userReducer });
+const rootReducer = combineReducers({ taskReducer });
 
 export const Store = createStore(rootReducer, applyMiddleware(thunk));

src/screens/Done.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Done() {
+    return (
+        <View>
+            <Text>Done</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({})