From 1fb6fd221fb9ec8a52de9a3d3bf4d2653af683a7 Mon Sep 17 00:00:00 2001
From: neyney2810 <nguyenyen281099@gmail.com>
Date: Wed, 10 Jan 2024 02:58:22 +0100
Subject: [PATCH] rework screen navigator

---
 App.js                     | 30 ++--------------
 package-lock.json          | 24 +++++++++++--
 package.json               |  1 +
 screens/Home.js            | 53 ---------------------------
 screens/ScreenNavigator.js | 73 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 97 insertions(+), 84 deletions(-)
 delete mode 100644 screens/Home.js
 create mode 100644 screens/ScreenNavigator.js

diff --git a/App.js b/App.js
index d5bd102..1f10af0 100644
--- a/App.js
+++ b/App.js
@@ -6,15 +6,7 @@ import { onAuthStateChanged } from "firebase/auth";
 import { auth } from "./config/firebase";
 import Login from "./screens/auth/Login";
 import Signup from "./screens/auth/Signup";
-import Chat from "./screens/tabs/Chat";
-import Home from "./screens/Home";
-import ChatUid from "./screens/tabs/ChatUid";
-import CatownerHome from "./screens/tabs/CatownerHome";
-import ChatList from "./screens/tabs/ChatList";
-import Catsitter from "./screens/tabs/Catsitter";
-import CatsitterHome from "./screens/cat-sitter/CatsitterHome";
-import CatsitterSetting from "./screens/cat-sitter/CatsitterSetting";
-
+import ScreenNavigator from "./screens/ScreenNavigator";
 
 const Stack = createStackNavigator();
 const AuthenticatedUserContext = createContext({});
@@ -24,24 +16,6 @@ const AuthenticatedUserProvider = ({ children }) => {
   return <AuthenticatedUserContext.Provider value={{ user, setUser }}>{children}</AuthenticatedUserContext.Provider>;
 };
 
-function ChatStack() {
-  return (
-    <Stack.Navigator defaultScreenOptions={Home}>
-      <Stack.Screen name="Home" component={Home} />
-      <Stack.Screen name="CatownerHome" component={CatownerHome} />
-      <Stack.Screen name="Catsitter" component={Catsitter} />
-      <Stack.Screen name="Chat" component={ChatList} />
-      <Stack.Screen name="ChatDetail" component={Chat} />
-      <Stack.Screen name="ChatWithUser" component={ChatUid} />
-
-      {/* Cat sitter stack */}
-      <Stack.Screen name="CatsitterHome" component={CatsitterHome} />
-      <Stack.Screen name="CatsitterSetting" component={CatsitterSetting} />
-
-    </Stack.Navigator>
-  );
-}
-
 function AuthStack() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
@@ -71,7 +45,7 @@ function RootNavigator() {
     );
   }
 
-  return <NavigationContainer>{user ? <ChatStack /> : <AuthStack />}</NavigationContainer>;
+  return <NavigationContainer>{user ? <ScreenNavigator /> : <AuthStack />}</NavigationContainer>;
 }
 
 export default function App() {
diff --git a/package-lock.json b/package-lock.json
index e310f43..1d28474 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@firebase/auth": "^1.5.1",
         "@react-native-async-storage/async-storage": "1.17.11",
         "@react-native-community/masked-view": "^0.1.11",
+        "@react-navigation/bottom-tabs": "^6.5.11",
         "@react-navigation/native": "^6.0.6",
         "@react-navigation/stack": "^6.0.11",
         "dotenv": "^11.0.0",
@@ -5764,6 +5765,23 @@
       "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
       "integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
     },
+    "node_modules/@react-navigation/bottom-tabs": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz",
+      "integrity": "sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.21",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@react-navigation/core": {
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.9.tgz",
@@ -5781,9 +5799,9 @@
       }
     },
     "node_modules/@react-navigation/elements": {
-      "version": "1.3.18",
-      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.18.tgz",
-      "integrity": "sha512-/0hwnJkrr415yP0Hf4PjUKgGyfshrvNUKFXN85Mrt1gY49hy9IwxZgrrxlh0THXkPeq8q4VWw44eHDfAcQf20Q==",
+      "version": "1.3.21",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz",
+      "integrity": "sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==",
       "peerDependencies": {
         "@react-navigation/native": "^6.0.0",
         "react": "*",
diff --git a/package.json b/package.json
index 9fabf8b..e07ecde 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@firebase/auth": "^1.5.1",
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/stack": "^6.0.11",
     "dotenv": "^11.0.0",
diff --git a/screens/Home.js b/screens/Home.js
deleted file mode 100644
index f6795db..0000000
--- a/screens/Home.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { View, Text } from 'react-native'
-import React, { useState, useLayoutEffect } from "react";
-import { auth, database } from "../config/firebase";
-import { collection, query, onSnapshot, where, and, addDoc } from "firebase/firestore";
-import CatsitterHome from './cat-sitter/CatsitterHome';
-import CatOwnerHome from './tabs/CatownerHome';
-import CatsitterSetting from './cat-sitter/CatsitterSetting';
-
-const Home = () => {
-    //Get current profile
-    const [userProfile, setUserProfile] = useState({});
-    useLayoutEffect(() => {
-        const id = auth?.currentUser?.uid;
-
-        if (!id) {
-            navigate("/")
-            return
-        };
-        const collectionRef = collection(database, "profiles");
-        const q = query(collectionRef, and(where("userId", "==", id)),);
-
-        const unsubscribe = onSnapshot(q, (querySnapshot) => {
-            if (querySnapshot.docs.length > 0) {
-                setUserProfile(querySnapshot.docs[0].data())
-            } else {
-                createUserProfile(auth?.currentUser?.uid)
-            }
-        });
-        return unsubscribe;
-    }, []);
-
-    const createUserProfile = (userId) => {
-        addDoc(collection(database, "profiles"), {
-            createdAt: new Date(),
-            userId: userId,
-            role: "cat-owner"
-        });
-    }
-
-    if (userProfile.role == "cat-owner") {
-        return <CatOwnerHome />
-    } else if (userProfile.role == "cat-sitter" && userProfile.updatedAt) {
-        return <CatsitterHome />
-    } else if (userProfile.role == "cat-sitter" && !userProfile.updatedAt) {
-        return <CatsitterSetting />
-    }
-
-    return <View>
-        <Text>Loading screen</Text>
-    </View>
-}
-
-export default Home
\ No newline at end of file
diff --git a/screens/ScreenNavigator.js b/screens/ScreenNavigator.js
new file mode 100644
index 0000000..1fa4f94
--- /dev/null
+++ b/screens/ScreenNavigator.js
@@ -0,0 +1,73 @@
+import React, { useState, useLayoutEffect } from "react";
+import { auth, database } from "../config/firebase";
+import { collection, query, onSnapshot, where, and, addDoc } from "firebase/firestore";
+import { createStackNavigator } from "@react-navigation/stack";
+import Chat from "./tabs/Chat";
+import Home from "./ScreenNavigator";
+import ChatUid from "./tabs/ChatUid";
+import CatownerHome from "./tabs/CatownerHome";
+import ChatList from "./tabs/ChatList";
+import Catsitter from "./tabs/Catsitter";
+import CatsitterHome from "./cat-sitter/CatsitterHome";
+import CatsitterSetting from "./cat-sitter/CatsitterSetting";
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+
+const Home = () => {
+    //Get current profile
+    const [userProfile, setUserProfile] = useState({});
+    useLayoutEffect(() => {
+        const id = auth?.currentUser?.uid;
+
+        if (!id) {
+            navigate("/")
+            return
+        };
+        const collectionRef = collection(database, "profiles");
+        const q = query(collectionRef, and(where("userId", "==", id)),);
+
+        const unsubscribe = onSnapshot(q, (querySnapshot) => {
+            if (querySnapshot.docs.length > 0) {
+                setUserProfile(querySnapshot.docs[0].data())
+            } else {
+                createUserProfile(auth?.currentUser?.uid)
+            }
+        });
+        return unsubscribe;
+    }, []);
+
+    const createUserProfile = (userId) => {
+        addDoc(collection(database, "profiles"), {
+            createdAt: new Date(),
+            userId: userId,
+            role: "cat-owner"
+        });
+    }
+
+    if (userProfile.role == "cat-owner") {
+        return (
+            <Stack.Navigator defaultScreenOptions={Home}>
+                <Stack.Screen name="Home" component={Home} />
+                <Stack.Screen name="CatownerHome" component={CatownerHome} />
+                <Stack.Screen name="Catsitter" component={Catsitter} />
+                <Stack.Screen name="Chat" component={ChatList} />
+                <Stack.Screen name="ChatDetail" component={Chat} />
+                <Stack.Screen name="ChatWithUser" component={ChatUid} />
+            </Stack.Navigator>
+        )
+    }
+    return (
+        <Tab.Navigator defaultScreenOptions={CatsitterHome}>
+            {/* Cat sitter stack */}
+            <Tab.Screen name="CatsitterHome" component={CatsitterHome} />
+            <Tab.Screen name="CatsitterSetting" component={CatsitterSetting} />
+        </Tab.Navigator>
+    )
+
+
+
+}
+
+export default Home
\ No newline at end of file
-- 
GitLab