diff --git a/App.tsx b/App.tsx index 1cb5142..62b43f4 100644 --- a/App.tsx +++ b/App.tsx @@ -33,6 +33,7 @@ export default function App() { + diff --git a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx index 201ddc4..7415bcc 100644 --- a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx +++ b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx @@ -13,79 +13,141 @@ import LoginIcon from "../../../Icons/LoginIcon/LoginIcon"; import SignupIcon from "../../../Icons/SignupIcon/SignupIcon"; import UserIcon from "../../../Icons/UserIcon/UserIcon"; import AppIcon from "../../../Icons/AppIcon/AppIcon"; +import LogoutIcon from "../../../Icons/LogoutIcon/LogoutIcon"; +import { useDispatch, useSelector } from "react-redux"; +import { RootState } from "../../../../Features/Redux/Store/Store"; +import { Toggle_Login } from "../../../../Features/Redux/Slices/LoginSlice/LoginSlice"; +import AsyncStorage from "@react-native-async-storage/async-storage"; export default function CustomDrawerContent(props: {}) { const navigation = useNavigation(); + const dispatch = useDispatch(); const width = 224; - return ( - - - - - Clip Notes - - - { - navigation.navigate("Home"); - }} - > - - Home - - { - navigation.navigate("New Note"); - }} - > - - - New Note - - - { - navigation.navigate("Login"); - }} - > - - Login - - { - navigation.navigate("User Info"); - }} - > - - - User Info - - - { - navigation.navigate("Register"); - }} - > - - - Register - - - + const logged_in = useSelector((state: RootState) => state.logged_in.value); + const logged_in_user = useSelector( + (state: RootState) => state.logged_in_user.value ); + if (logged_in) { + return ( + + + + + Clip Notes + + + + Logged in as {logged_in_user.username} + + { + navigation.navigate("Home"); + }} + > + + + Home + + + + { + navigation.navigate("New Note"); + }} + > + + + New Note + + + { + navigation.navigate("User Info"); + }} + > + + + User Info + + + { + dispatch(Toggle_Login()); + AsyncStorage.removeItem("token"); + }} + > + + + Log Out + + + + ); + } else { + return ( + + + + + Clip Notes + + + + { + navigation.navigate("Home"); + }} + > + + + Home + + + { + navigation.navigate("Login"); + }} + > + + + Login + + + { + navigation.navigate("Register"); + }} + > + + + Register + + + + ); + } } diff --git a/src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx b/src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx index 541d342..c691645 100644 --- a/src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx +++ b/src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx @@ -1,6 +1,7 @@ import { View, Image, Text } from "react-native"; import type { DrawerNavigationOptions } from "@react-navigation/drawer"; import AppIcon from "../../Icons/AppIcon/AppIcon"; +import PreviousSessionChecker from "../../PreviousSessionChecker/PreviousSessionChecker"; const DrawerScreenSettings: DrawerNavigationOptions = { headerTitleStyle: { color: "white", fontSize: 26 }, unmountOnBlur: true, @@ -18,6 +19,7 @@ const DrawerScreenSettings: DrawerNavigationOptions = { + ), diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx new file mode 100644 index 0000000..8688ec4 --- /dev/null +++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import { IconProps } from "../../../Interfaces/Interfaces"; + +import { Svg, Path } from "react-native-svg"; + +export default function LogoutIcon(props: IconProps) { + return ( + <> + + + + + + + ); +} \ No newline at end of file diff --git a/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx new file mode 100644 index 0000000..ddd3b8e --- /dev/null +++ b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; +import { View, Text, TextInput, ScrollView } from "react-native"; +import { useEffect, useCallback } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { UserInfo } from "../Api/Api"; +import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; +import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; +import { set_checked } from "../../Features/Redux/Slices/OldSession/OldSessionSlice"; +import { RootState } from "../../Features/Redux/Store/Store"; +export default function PreviousSessionChecker() { + const dispatch = useDispatch(); + const logged_in = useSelector((state: RootState) => state.logged_in.value); + // Function to check for previous login session + const check = useCallback(async () => { + if (await UserInfo()) { + if (logged_in !== true) { + console.log("Previous session found. Restoring"); + await dispatch(Toggle_Login()); + await dispatch(SetUser(await UserInfo())); + } + } else { + console.log("No old session found"); + localStorage.removeItem("token"); + } + await dispatch(set_checked()); + }, [dispatch, logged_in]); + useEffect(() => { + if (!logged_in) { + check(); + } + }, [check, logged_in]); + return ; +} diff --git a/src/Features/Redux/Store/LoginSlice.tsx b/src/Features/Redux/Store/LoginSlice.tsx deleted file mode 100644 index c86b20b..0000000 --- a/src/Features/Redux/Store/LoginSlice.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createSlice } from "@reduxjs/toolkit"; - -export const LoginSlice = createSlice({ - name: "Login", - initialState: { - value: false, - }, - reducers: { - SetLoggedIn: (state) => { - state.value = !state.value; - }, - SetLoggedOut: (state) => { - state.value = !state.value; - }, - }, -}); - -// Action creators are generated for each case reducer function -export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions; - -export default LoginSlice.reducer; diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index b88bd00..90a8998 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -16,7 +16,7 @@ import { } from "@react-navigation/native"; import { useDispatch } from "react-redux"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; -import { SetLoggedIn } from "../../Features/Redux/Store/LoginSlice"; +import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; import { UserInfo, UserLogin } from "../../Components/Api/Api"; import { RootDrawerParamList } from "../../Interfaces/Interfaces"; @@ -77,7 +77,7 @@ export default function Login() { password: "", }); if (await UserLogin(user)) { - await dispatch(SetLoggedIn()); + await dispatch(Toggle_Login()); await dispatch(SetUser(await UserInfo())); navigation.navigate("Home"); } else {