From 9cdb4f1ba2690f1a9f80f5bbe87a4325505c4522 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Tue, 4 Jul 2023 17:44:49 +0800
Subject: [PATCH] Fixed app.tsx showing blank when not specifying url and made
 drawer responsive to login state

---
 App.tsx                                       |   2 -
 .../DrawerSettings/CustomDrawerContent.tsx    | 162 +++++++++++-------
 2 files changed, 103 insertions(+), 61 deletions(-)

diff --git a/App.tsx b/App.tsx
index 485ed7f..f762b1c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -50,8 +50,6 @@ export default function App() {
   }, [initialRoute]);
 
   if (!initialRoute) {
-    console.log("heh");
-    return null;
   }
 
   return (
diff --git a/src/components/DrawerSettings/CustomDrawerContent.tsx b/src/components/DrawerSettings/CustomDrawerContent.tsx
index de521b6..39be406 100644
--- a/src/components/DrawerSettings/CustomDrawerContent.tsx
+++ b/src/components/DrawerSettings/CustomDrawerContent.tsx
@@ -11,67 +11,111 @@ import HomeIcon from "../../icons/HomeIcon/HomeIcon";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
 import SignupIcon from "../../icons/SignupIcon/SignupIcon";
 import DrawerButton from "../Button/DrawerButton";
-import AddIcon from "../../icons/AddIcon/AddIcon";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../features/redux/Store/Store";
+import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon";
+import { clear } from "../../features/redux/slices/AuthSlice/AuthSlice";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export default function CustomDrawerContent(props: {}) {
   const navigation = useNavigation<RootDrawerParamList>();
-  return (
-    <DrawerContentScrollView {...props}>
-      <View
-        style={{
-          ...styles.flex_row,
-          ...{ justifyContent: "center" },
-        }}
-      >
-        <AppIcon size={32} />
-        <Text style={styles.text_white_medium}>Stud-E</Text>
-      </View>
-      <DrawerButton
-        color={colors.blue_2}
-        onPress={() => {
-          navigation.navigate("Home");
-        }}
-      >
-        <HomeIcon size={32} />
-        <Text style={styles.text_white_medium}>Home</Text>
-      </DrawerButton>
-      <DrawerButton
-        color={colors.blue_2}
-        onPress={() => {
-          navigation.navigate("Login");
-        }}
-      >
-        <LoginIcon size={32} />
-        <Text style={styles.text_white_medium}>Login</Text>
-      </DrawerButton>
-      <DrawerButton
-        color={colors.blue_2}
-        onPress={() => {
-          navigation.navigate("Register");
-        }}
-      >
-        <SignupIcon size={32} />
-        <Text style={styles.text_white_medium}>Register</Text>
-      </DrawerButton>
-      {/*<DrawerButton
-        color={colors.blue_2}
-        onPress={() => {
-          navigation.navigate("Revalidation");
-        }}
-      >
-        <AddIcon size={32} />
-        <Text style={styles.text_white_medium}>Revalidation</Text>
-      </DrawerButton>
-      <DrawerButton
-        color={colors.blue_2}
-        onPress={() => {
-          navigation.navigate("Activation");
-        }}
-      >
-        <AddIcon size={32} />
-        <Text style={styles.text_white_medium}>Activation</Text>
-      </DrawerButton>
-      */}
-    </DrawerContentScrollView>
+  const logged_in = useSelector(
+    (state: RootState) => state.auth.creds.logged_in
   );
+  const dispatch = useDispatch();
+  if (logged_in) {
+    return (
+      <DrawerContentScrollView {...props}>
+        <View
+          style={{
+            ...styles.flex_row,
+            ...{ justifyContent: "center" },
+          }}
+        >
+          <AppIcon size={32} />
+          <Text style={styles.text_white_medium}>Stud-E</Text>
+        </View>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("Home");
+          }}
+        >
+          <HomeIcon size={32} />
+          <Text style={styles.text_white_medium}>Home</Text>
+        </DrawerButton>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={async () => {
+            dispatch(await clear());
+            AsyncStorage.clear();
+          }}
+        >
+          <LogoutIcon size={32} />
+          <Text style={styles.text_white_medium}>Logout</Text>
+        </DrawerButton>
+      </DrawerContentScrollView>
+    );
+  } else {
+    return (
+      <DrawerContentScrollView {...props}>
+        <View
+          style={{
+            ...styles.flex_row,
+            ...{ justifyContent: "center" },
+          }}
+        >
+          <AppIcon size={32} />
+          <Text style={styles.text_white_medium}>Stud-E</Text>
+        </View>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("Home");
+          }}
+        >
+          <HomeIcon size={32} />
+          <Text style={styles.text_white_medium}>Home</Text>
+        </DrawerButton>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("Login");
+          }}
+        >
+          <LoginIcon size={32} />
+          <Text style={styles.text_white_medium}>Login</Text>
+        </DrawerButton>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            dispatch(clear());
+            navigation.navigate("Login");
+          }}
+        >
+          <SignupIcon size={32} />
+          <Text style={styles.text_white_medium}>Register</Text>
+        </DrawerButton>
+        {/*
+        Debug buttons for accessing revalidation and activation page
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("Revalidation");
+          }}
+        >
+          <Text style={styles.text_white_medium}>Revalidation</Text>
+        </DrawerButton>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("Activation");
+          }}
+        >
+          <Text style={styles.text_white_medium}>Activation</Text>
+        </DrawerButton>
+        */}
+      </DrawerContentScrollView>
+    );
+  }
 }