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