Fixed app.tsx showing blank when not specifying url and made drawer responsive to login state

This commit is contained in:
Keannu Bernasol 2023-07-04 17:44:49 +08:00
parent c4f241f799
commit 9cdb4f1ba2
2 changed files with 103 additions and 61 deletions

View file

@ -50,8 +50,6 @@ export default function App() {
}, [initialRoute]);
if (!initialRoute) {
console.log("heh");
return null;
}
return (

View file

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