mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2024-11-17 06:19:25 +08:00
Improved onboarding experience and also redirect to onboarding after revalidating saved session if needed
This commit is contained in:
parent
90e60250cd
commit
49aa0cb5a6
4 changed files with 75 additions and 13 deletions
|
@ -123,3 +123,5 @@ export function UserActivate(activation: ActivationParams) {
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// App APIs
|
||||||
|
|
|
@ -84,14 +84,6 @@ export default function Login() {
|
||||||
let user_info = await UserInfo();
|
let user_info = await UserInfo();
|
||||||
dispatch(setStateUser(user_info));
|
dispatch(setStateUser(user_info));
|
||||||
// Redirect to onboarding if no year level, course, or semester specified
|
// Redirect to onboarding if no year level, course, or semester specified
|
||||||
console.log(
|
|
||||||
"Debug",
|
|
||||||
!(
|
|
||||||
user_info.year_level ||
|
|
||||||
user_info.course ||
|
|
||||||
user_info.semester
|
|
||||||
)
|
|
||||||
);
|
|
||||||
if (
|
if (
|
||||||
!(
|
!(
|
||||||
user_info.year_level ||
|
user_info.year_level ||
|
||||||
|
|
|
@ -3,14 +3,75 @@ import styles from "../../styles";
|
||||||
import { View, Text } from "react-native";
|
import { View, Text } from "react-native";
|
||||||
import { useNavigation } from "@react-navigation/native";
|
import { useNavigation } from "@react-navigation/native";
|
||||||
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
||||||
|
import { colors } from "../../styles";
|
||||||
|
import { AnimatePresence, MotiView } from "moti";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
export default function Onboarding() {
|
export default function Onboarding() {
|
||||||
const navigation = useNavigation<RootDrawerParamList>();
|
const navigation = useNavigation<RootDrawerParamList>();
|
||||||
// const dispatch = useDispatch();
|
// const dispatch = useDispatch();
|
||||||
// const creds = useSelector((state: RootState) => state.auth.creds);
|
// const creds = useSelector((state: RootState) => state.auth.creds);
|
||||||
|
const [student_info, setStudentInfo] = useState({
|
||||||
|
year_level: "",
|
||||||
|
course: "",
|
||||||
|
semester: "",
|
||||||
|
});
|
||||||
|
function Introduction() {
|
||||||
|
const [shown, setShown] = useState(true);
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setShown(false);
|
||||||
|
}, 5000);
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{shown && (
|
||||||
|
<MotiView
|
||||||
|
from={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
exitTransition={{ type: "timing", duration: 1200, delay: 600 }}
|
||||||
|
transition={{ type: "timing", duration: 1200, delay: 600 }}
|
||||||
|
>
|
||||||
|
<Text style={styles.text_white_small}>
|
||||||
|
We're glad to have you on board {"\n"}
|
||||||
|
Just a few more things before we get started
|
||||||
|
</Text>
|
||||||
|
</MotiView>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.background}>
|
<View style={styles.background}>
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.text_white_medium}>Template Onboarding Page</Text>
|
<MotiView
|
||||||
|
from={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ type: "timing", duration: 600 }}
|
||||||
|
>
|
||||||
|
<Text style={styles.text_white_medium}>Welcome to Stud-E!</Text>
|
||||||
|
</MotiView>
|
||||||
|
<View style={{ paddingVertical: 4 }} />
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingVertical: 4,
|
||||||
|
marginBottom: 16,
|
||||||
|
borderRadius: 4,
|
||||||
|
width: "90%",
|
||||||
|
backgroundColor: colors.blue_1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={{ paddingVertical: 4 }} />
|
||||||
|
<Introduction />
|
||||||
|
<View style={{ paddingVertical: 8 }} />
|
||||||
|
<MotiView
|
||||||
|
from={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ type: "timing", duration: 900, delay: 2000 }}
|
||||||
|
>
|
||||||
|
<Text style={styles.text_white_medium}>Academic Info</Text>
|
||||||
|
</MotiView>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,10 +18,17 @@ export default function Revalidation() {
|
||||||
setState("Previous session found");
|
setState("Previous session found");
|
||||||
TokenRefresh().then(async (response) => {
|
TokenRefresh().then(async (response) => {
|
||||||
if (response[0]) {
|
if (response[0]) {
|
||||||
await dispatch(setUser(await UserInfo()));
|
let user_info = await UserInfo();
|
||||||
await setTimeout(() => {
|
await dispatch(setUser(user_info));
|
||||||
navigation.navigate("Home");
|
if (!(user_info.year_level || user_info.course || user_info.semester)) {
|
||||||
}, 700);
|
await setTimeout(() => {
|
||||||
|
navigation.navigate("Onboarding");
|
||||||
|
}, 700);
|
||||||
|
} else {
|
||||||
|
await setTimeout(() => {
|
||||||
|
navigation.navigate("Home");
|
||||||
|
}, 700);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
await setState("Session expired");
|
await setState("Session expired");
|
||||||
await setTimeout(() => {
|
await setTimeout(() => {
|
||||||
|
|
Loading…
Reference in a new issue