From f95268a57cd4d9b16961b79f3e18e414e0c6c393 Mon Sep 17 00:00:00 2001 From: leKimChiii Date: Sun, 16 Apr 2023 17:29:30 +0800 Subject: [PATCH 1/5] added logout icon --- .../Icons/LogoutIcon/LogoutIcon.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/Components/Icons/LogoutIcon/LogoutIcon.tsx 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 From f5d5da02465006f7db4b34fa0d7c6c430d27505e Mon Sep 17 00:00:00 2001 From: leKimChiii Date: Sun, 16 Apr 2023 17:42:58 +0800 Subject: [PATCH 2/5] added logout button in drawer --- App.tsx | 1 + .../CustomDrawerContent.tsx | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+) 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..3838dfd 100644 --- a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx +++ b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx @@ -13,6 +13,7 @@ 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"; export default function CustomDrawerContent(props: {}) { const navigation = useNavigation(); @@ -30,6 +31,7 @@ export default function CustomDrawerContent(props: {}) { Clip Notes + Home + + Login + + + + { + navigation.navigate("Register"); + }} + > + + + Log Out + + + ); } From c782851c487bfc1ed8e6234f7373d6285f029add Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sun, 16 Apr 2023 18:06:08 +0800 Subject: [PATCH 3/5] Fixed login page referencing wrong file for redux login state and made sidebar responsive to login state --- .../CustomDrawerContent.tsx | 216 ++++++++++-------- src/Features/Redux/Store/LoginSlice.tsx | 21 -- src/Routes/Login/Login.tsx | 4 +- 3 files changed, 129 insertions(+), 112 deletions(-) delete mode 100644 src/Features/Redux/Store/LoginSlice.tsx diff --git a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx index 3838dfd..4d3c13c 100644 --- a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx +++ b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx @@ -14,98 +14,136 @@ 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 { useSelector } from "react-redux"; +import { RootState } from "../../../../Features/Redux/Store/Store"; export default function CustomDrawerContent(props: {}) { const navigation = useNavigation(); 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 - - - - { - navigation.navigate("Register"); - }} - > - - - Log Out - - - - + 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 + + + { + navigation.navigate("Register"); + }} + > + + + Log Out + + + + ); + } else { + return ( + + + + + Clip Notes + + + + { + navigation.navigate("Home"); + }} + > + + + Home + + + { + navigation.navigate("Login"); + }} + > + + + Login + + + { + navigation.navigate("Register"); + }} + > + + + Register + + + + ); + } } 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 { From 3c188f9ad78b662e9444bb081bf84f93b9a1429e Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sun, 16 Apr 2023 18:34:53 +0800 Subject: [PATCH 4/5] Made logout button functional --- .../CustomDrawerContent/CustomDrawerContent.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx index 4d3c13c..7415bcc 100644 --- a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx +++ b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx @@ -14,11 +14,14 @@ 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 { useSelector } from "react-redux"; +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; const logged_in = useSelector((state: RootState) => state.logged_in.value); const logged_in_user = useSelector( @@ -82,7 +85,8 @@ export default function CustomDrawerContent(props: {}) { color="Red" width={width} onPress={() => { - navigation.navigate("Register"); + dispatch(Toggle_Login()); + AsyncStorage.removeItem("token"); }} > From d2c66675366ebc9032c22ed12c16be0af789986e Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sun, 16 Apr 2023 18:37:51 +0800 Subject: [PATCH 5/5] Added previous session checker --- .../DrawerScreenSettings.tsx | 2 ++ .../PreviousSessionChecker.tsx | 33 +++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx 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/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 ; +}