Added env

Dental-Booking-System · May 11, 2024 · 03dce71 · 03dce71
1 parent b847596
commit 03dce71
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 69 deletions.
diff --git a/.gitignore b/.gitignore
@@ -66,3 +66,4 @@ yarn-error.log
 /coverage
 /ios/Podfile.lock
 /yarn.lock
+/.env
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,7 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-reanimated/plugin'],
+  plugins: [
+      ['react-native-reanimated/plugin'],
+    ['module:react-native-dotenv'],
+  ]
 };
diff --git a/index.js b/index.js
@@ -5,6 +5,14 @@
 import {AppRegistry} from 'react-native';
 import App from './src/App';
 import {name as appName} from './app.json';
+import {Provider} from "react-redux";
+import {store} from "./src/redux/store";
 
-AppRegistry.registerComponent(appName, () => App
+const ReduxApp = () => (
+    <Provider store={store}>
+        <App />
+    </Provider>
+);
+
+AppRegistry.registerComponent(appName, () => ReduxApp
 );
diff --git a/ios/DentalClinic.xcodeproj/project.pbxproj b/ios/DentalClinic.xcodeproj/project.pbxproj
@@ -611,7 +611,10 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -690,7 +693,10 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
+    "react-native-dotenv": "^3.4.11",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,8 +10,8 @@ import Animated, {
     FadeOut, runOnJS,
     useAnimatedStyle, useSharedValue, withSpring, withTiming
 } from "react-native-reanimated";
-import {Provider} from "react-redux";
-import {store} from './redux/store.ts';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from './redux/store.ts';
 import Login from "./screens/Login.tsx";
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -20,8 +20,7 @@ const { height: screenHeight } = Dimensions.get('window');
 function App(): React.JSX.Element {
     const offset = useSharedValue(0);
     const [isSheetOpen, setSheetOpen] = useState(false);
-    const [isLoggedIn, setIsLoggedIn] = useState(false);
-
+    const isLoggedIn = useSelector((state: RootState) => state.auth.isLoggedIn);
     const toggleSheet = () => {
         offset.value = 0;
         setSheetOpen(!isSheetOpen);
@@ -49,41 +48,37 @@ function App(): React.JSX.Element {
     }));
 
     return (
-        <Provider store={store}>
-            <GestureHandlerRootView style={{flex: 1}}>
-                <NavigationContainer >
-                    {isLoggedIn ?
-                        <>
-                            <TabNavigation toggleSheet={toggleSheet}/>
-                            {isSheetOpen ? (
-                                <>
-                                    <AnimatedPressable
-                                        style={styles.backdrop}
-                                        entering={FadeIn}
-                                        exiting={FadeOut}
-                                        onPress={toggleSheet}
-                                    />
-                                    <BottomSheet content={
-                                        <Appointment
-                                            toggleSheet={toggleSheet}
-                                        />
-                                    }
-                                                 style={translateY}
-                                                 gesture={pan}
-                                                 toggleSheet={toggleSheet}
+        <GestureHandlerRootView style={{flex: 1}}>
+            <NavigationContainer >
+                {isLoggedIn ?
+                    <>
+                        <TabNavigation toggleSheet={toggleSheet}/>
+                        {isSheetOpen ? (
+                            <>
+                                <AnimatedPressable
+                                    style={styles.backdrop}
+                                    entering={FadeIn}
+                                    exiting={FadeOut}
+                                    onPress={toggleSheet}
+                                />
+                                <BottomSheet content={
+                                    <Appointment
+                                        toggleSheet={toggleSheet}
                                     />
-                                </>
-
-                            ): null}
-                        </>
-                        :
-                        <Login isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn}/>
-                    }
-
+                                }
+                                             style={translateY}
+                                             gesture={pan}
+                                             toggleSheet={toggleSheet}
+                                />
+                            </>
 
+                        ): null}
+                    </>
+                    :
+                    <Login />
+                }
                 </NavigationContainer>
             </GestureHandlerRootView>
-        </Provider>
 
   );
 }

diff --git a/src/navigation/TabNavigation.tsx b/src/navigation/TabNavigation.tsx
@@ -8,6 +8,7 @@ import priceLogo from '../assets/TabNavigationIcons/priceLogo.svg';
 import accountLogo from '../assets/TabNavigationIcons/accountLogo.svg';
 import {colors} from "../theme/colors.ts";
 import React, {memo, useState} from "react";
+import Account from "../screens/Account.tsx";
 
 const Tab = createBottomTabNavigator();
 
@@ -92,7 +93,7 @@ const TabNavigation = memo(function TabNavigation(props: Props) {
               name="Calendar"
               component={Home}/>
           <Tab.Screen name="Price" component={Home}/>
-          <Tab.Screen name="Account" component={Home}/>
+          <Tab.Screen name="Account" component={Account}/>
       </Tab.Navigator>
     );
 });

diff --git a/src/redux/authSlice.ts b/src/redux/authSlice.ts
@@ -0,0 +1,28 @@
+import {createSlice, PayloadAction} from "@reduxjs/toolkit";
+
+interface authState {
+    isLoggedIn: boolean
+}
+
+const initialState: authState = {
+    isLoggedIn: false
+}
+
+const authSlice = createSlice({
+    name: "auth",
+    initialState,
+    reducers: {
+        logIn: (state) => {
+            state.isLoggedIn = true
+        },
+        logOut: (state) => {
+            state.isLoggedIn = false
+        }
+    }
+})
+
+export const {
+    logOut,
+    logIn
+} = authSlice.actions;
+export default authSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
@@ -1,12 +1,14 @@
 import { configureStore } from "@reduxjs/toolkit";
 import appointmentReducer from "./appointmentSlice.ts";
 import patientReducer from "./patientSlice.ts";
+import authReducer from "./authSlice.ts";
 
 
 export const store = configureStore({
     reducer: {
         appointment: appointmentReducer,
-        patient: patientReducer
+        patient: patientReducer,
+        auth: authReducer
     },
 });
 

diff --git a/src/screens/Account.tsx b/src/screens/Account.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import {StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {colors} from "../theme/colors.ts";
+import {useDispatch} from "react-redux";
+import {logOut} from "../redux/authSlice.ts";
+
+function Account() {
+    const dispatch = useDispatch();
+    return (
+        <View style={styles.profileContainer}>
+            <TouchableOpacity
+                style={{
+                    width: '35%',
+                    height: '7%',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    borderRadius: 12,
+                    backgroundColor: colors.primary
+                }}
+                onPress={() => dispatch(logOut())}
+            >
+                <Text
+                    style={{
+                        color: 'white',
+                        fontSize: 17,
+                        fontWeight: '600'
+                    }}
+                >Đăng xuất</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    profileContainer: {
+        flex: 1,
+        backgroundColor: 'white',
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+
+});
+
+export default Account;
diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
@@ -5,24 +5,27 @@ import GoogleIcon from "../assets/googleIcon.svg";
 import PersonIcon from "../assets/personIcon.svg";
 import auth, {FirebaseAuthTypes} from '@react-native-firebase/auth';
 import { GoogleSignin } from '@react-native-google-signin/google-signin';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../redux/store.ts";
+import {logIn} from "../redux/authSlice.ts";
 
 
 GoogleSignin.configure({
-    webClientId: '823035123696-s170u9e0faveh4scmtp39vtei2q3cm4o.apps.googleusercontent.com',
+    webClientId: process.env.GOOGLE_WEB_CLIENT_ID,
 });
 
-type Props = {
-    isLoggedIn: boolean;
-    setIsLoggedIn: (isLoggedIn: boolean) => void;
-}
 
-function Login(props: Props) {
+function Login() {
+
+    const dispatch = useDispatch();
 
     async function signInWithGoogle() {
         try {
             const { idToken } = await GoogleSignin.signIn();
             const googleCredential = auth.GoogleAuthProvider.credential(idToken);
             await auth().signInWithCredential(googleCredential);
+            console.log("id token: " + idToken);
+            console.log(googleCredential);
 
         } catch (err) {
             throw err;
@@ -32,7 +35,7 @@ function Login(props: Props) {
     async function signIn() {
         try {
             await signInWithGoogle();
-            props.setIsLoggedIn(true);
+            dispatch(logIn());
         } catch (err) {
             console.log(err);
         }
@@ -53,7 +56,7 @@ function Login(props: Props) {
             </TouchableOpacity>
             <TouchableOpacity
                 style={styles.buttonStyle}
-                onPress={() => props.setIsLoggedIn(true)}
+                onPress={() => dispatch(logIn())}
             >
                 <PersonIcon style={{
                 }} height={45} width={30}/>
@@ -63,7 +66,7 @@ function Login(props: Props) {
                 style={{
 
                 }}
-                onPress={() => props.setIsLoggedIn(true)}
+                onPress={() => dispatch(logIn())}
             >
                 <Text style={[styles.textStyle, {
                     fontWeight: '400',

diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx