Merge pull request #20 from lemeow125/feature/logout

Feature/logout

App.tsx

@@ -33,6 +33,7 @@ export default function App() {
          <Drawer.Screen name="User Info" component={UserInfo} />
          <Drawer.Screen name="Login" component={Login} />
          <Drawer.Screen name="Register" component={Register} />
+         <Drawer.Screen name="LogOut" component={Register} />
         
         </Drawer.Navigator>
       </NavigationContainer>

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<RootDrawerParamList>();
+  const dispatch = useDispatch();
   const width = 224;
-  return (
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
-    <DrawerContentScrollView {...props}>
+  const logged_in_user = useSelector(
-      <View
+    (state: RootState) => state.logged_in_user.value
-        style={{
-          ...styles.flex_row,
-          ...{ justifyContent: "center" },
-        }}
-      >
-        <AppIcon size={32} color="white" />
-        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
-          Clip Notes
-        </Text>
-      </View>
-      <ButtonAlignLeft
-        color="Blue"
-        width={width}
-        onPress={() => {
-          navigation.navigate("Home");
-        }}
-      >
-        <HomeIcon size={32} color="white" />
-        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Home</Text>
-      </ButtonAlignLeft>
-      <ButtonAlignLeft
-        color="Green"
-        width={width}
-        onPress={() => {
-          navigation.navigate("New Note");
-        }}
-      >
-        <AddIcon size={32} color="white" />
-        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
-          New Note
-        </Text>
-      </ButtonAlignLeft>
-      <ButtonAlignLeft
-        color="Green"
-        width={width}
-        onPress={() => {
-          navigation.navigate("Login");
-        }}
-      >
-        <LoginIcon size={32} color="white" />
-        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Login</Text>
-      </ButtonAlignLeft>
-      <ButtonAlignLeft
-        color="Yellow"
-        width={width}
-        onPress={() => {
-          navigation.navigate("User Info");
-        }}
-      >
-        <UserIcon size={32} color="white" />
-        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
-          User Info
-        </Text>
-      </ButtonAlignLeft>
-      <ButtonAlignLeft
-        color="Yellow"
-        width={width}
-        onPress={() => {
-          navigation.navigate("Register");
-        }}
-      >
-        <SignupIcon size={32} color="white" />
-        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
-          Register
-        </Text>
-      </ButtonAlignLeft>
-    </DrawerContentScrollView>
   );
+  if (logged_in) {
+    return (
+      <DrawerContentScrollView {...props}>
+        <View
+          style={{
+            ...styles.flex_row,
+            ...{ justifyContent: "center" },
+          }}
+        >
+          <AppIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Clip Notes
+          </Text>
+        </View>
+        <Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
+          Logged in as {logged_in_user.username}
+        </Text>
+        <ButtonAlignLeft
+          color="Blue"
+          width={width}
+          onPress={() => {
+            navigation.navigate("Home");
+          }}
+        >
+          <HomeIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Home
+          </Text>
+        </ButtonAlignLeft>
+
+        <ButtonAlignLeft
+          color="Green"
+          width={width}
+          onPress={() => {
+            navigation.navigate("New Note");
+          }}
+        >
+          <AddIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            New Note
+          </Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Yellow"
+          width={width}
+          onPress={() => {
+            navigation.navigate("User Info");
+          }}
+        >
+          <UserIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            User Info
+          </Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Red"
+          width={width}
+          onPress={() => {
+            dispatch(Toggle_Login());
+            AsyncStorage.removeItem("token");
+          }}
+        >
+          <LogoutIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Log Out
+          </Text>
+        </ButtonAlignLeft>
+      </DrawerContentScrollView>
+    );
+  } else {
+    return (
+      <DrawerContentScrollView {...props}>
+        <View
+          style={{
+            ...styles.flex_row,
+            ...{ justifyContent: "center" },
+          }}
+        >
+          <AppIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Clip Notes
+          </Text>
+        </View>
+
+        <ButtonAlignLeft
+          color="Blue"
+          width={width}
+          onPress={() => {
+            navigation.navigate("Home");
+          }}
+        >
+          <HomeIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Home
+          </Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Green"
+          width={width}
+          onPress={() => {
+            navigation.navigate("Login");
+          }}
+        >
+          <LoginIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Login
+          </Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Yellow"
+          width={width}
+          onPress={() => {
+            navigation.navigate("Register");
+          }}
+        >
+          <SignupIcon size={32} color="white" />
+          <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+            Register
+          </Text>
+        </ButtonAlignLeft>
+      </DrawerContentScrollView>
+    );
+  }
 }

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 = {
     <View
       style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
     >
+      <PreviousSessionChecker />
       <AppIcon size={32} color="white" />
     </View>
   ),

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 (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
+        <Path d="M7 12h14l-3 -3m0 6l3 -3"></Path>
+      </Svg>
+    </>
+  );
+}

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 <View />;
+}

src/Features/Redux/Store/LoginSlice.tsx

@@ -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;

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 {