mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2024-11-17 06:19:25 +08:00
Make drawer bar responsive to onboarding status
This commit is contained in:
parent
b30bbb62df
commit
c4e34e7496
4 changed files with 46 additions and 7 deletions
|
@ -19,9 +19,35 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
|
|
||||||
export default function CustomDrawerContent(props: {}) {
|
export default function CustomDrawerContent(props: {}) {
|
||||||
const navigation = useNavigation<RootDrawerParamList>();
|
const navigation = useNavigation<RootDrawerParamList>();
|
||||||
const logged_in = useSelector((state: RootState) => state.status.logged_in);
|
const status = useSelector((state: RootState) => state.status);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
if (logged_in) {
|
if (status.logged_in && status.onboarding) {
|
||||||
|
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={async () => {
|
||||||
|
dispatch(logout());
|
||||||
|
await AsyncStorage.clear();
|
||||||
|
navigation.navigate("Login");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LogoutIcon size={32} />
|
||||||
|
<Text style={styles.text_white_medium}>Logout</Text>
|
||||||
|
</DrawerButton>
|
||||||
|
</DrawerContentScrollView>
|
||||||
|
);
|
||||||
|
} else if (status.logged_in) {
|
||||||
return (
|
return (
|
||||||
<DrawerContentScrollView {...props}>
|
<DrawerContentScrollView {...props}>
|
||||||
<View
|
<View
|
||||||
|
|
|
@ -13,16 +13,17 @@ export const StatusSlice = createSlice({
|
||||||
logout: (state) => {
|
logout: (state) => {
|
||||||
state.logged_in = false;
|
state.logged_in = false;
|
||||||
},
|
},
|
||||||
onboard: (state) => {
|
setOnboarding: (state) => {
|
||||||
state.onboarding = true;
|
state.onboarding = true;
|
||||||
},
|
},
|
||||||
not_onboard: (state) => {
|
unsetOnboarding: (state) => {
|
||||||
state.onboarding = false;
|
state.onboarding = false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Action creators are generated for each case reducer function
|
// Action creators are generated for each case reducer function
|
||||||
export const { login, logout, onboard, not_onboard } = StatusSlice.actions;
|
export const { login, logout, setOnboarding, unsetOnboarding } =
|
||||||
|
StatusSlice.actions;
|
||||||
|
|
||||||
export default StatusSlice.reducer;
|
export default StatusSlice.reducer;
|
||||||
|
|
|
@ -18,7 +18,11 @@ import { UserInfo, UserLogin } from "../../components/Api/Api";
|
||||||
import { ParseLoginError } from "../../components/ParseError/ParseError";
|
import { ParseLoginError } from "../../components/ParseError/ParseError";
|
||||||
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
||||||
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
|
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
|
||||||
import { login } from "../../features/redux/slices/StatusSlice/StatusSlice";
|
import {
|
||||||
|
login,
|
||||||
|
setOnboarding,
|
||||||
|
unsetOnboarding,
|
||||||
|
} from "../../features/redux/slices/StatusSlice/StatusSlice";
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const navigation = useNavigation<RootDrawerParamList>();
|
const navigation = useNavigation<RootDrawerParamList>();
|
||||||
|
@ -91,8 +95,10 @@ export default function Login() {
|
||||||
user_info[1].course == null ||
|
user_info[1].course == null ||
|
||||||
user_info[1].semester == null
|
user_info[1].semester == null
|
||||||
) {
|
) {
|
||||||
|
dispatch(setOnboarding());
|
||||||
navigation.navigate("Onboarding");
|
navigation.navigate("Onboarding");
|
||||||
} else {
|
} else {
|
||||||
|
dispatch(unsetOnboarding());
|
||||||
navigation.navigate("Home");
|
navigation.navigate("Home");
|
||||||
}
|
}
|
||||||
console.log(JSON.stringify(user_info));
|
console.log(JSON.stringify(user_info));
|
||||||
|
|
|
@ -7,9 +7,13 @@ import { colors } from "../../styles";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useNavigation } from "@react-navigation/native";
|
import { useNavigation } from "@react-navigation/native";
|
||||||
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
||||||
import { login } from "../../features/redux/slices/StatusSlice/StatusSlice";
|
import {
|
||||||
|
login,
|
||||||
|
unsetOnboarding,
|
||||||
|
} from "../../features/redux/slices/StatusSlice/StatusSlice";
|
||||||
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
||||||
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
|
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
|
||||||
|
import { setOnboarding } from "../../features/redux/slices/StatusSlice/StatusSlice";
|
||||||
|
|
||||||
export default function Revalidation() {
|
export default function Revalidation() {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
@ -29,10 +33,12 @@ export default function Revalidation() {
|
||||||
user_info[1].semester
|
user_info[1].semester
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
|
dispatch(setOnboarding());
|
||||||
await setTimeout(() => {
|
await setTimeout(() => {
|
||||||
navigation.navigate("Onboarding");
|
navigation.navigate("Onboarding");
|
||||||
}, 700);
|
}, 700);
|
||||||
} else {
|
} else {
|
||||||
|
dispatch(unsetOnboarding());
|
||||||
await setTimeout(() => {
|
await setTimeout(() => {
|
||||||
navigation.navigate("Home");
|
navigation.navigate("Home");
|
||||||
}, 700);
|
}, 700);
|
||||||
|
|
Loading…
Reference in a new issue