Improved onboarding experience and also redirect to onboarding after revalidating saved session if needed

This commit is contained in:
Keannu Bernasol 2023-07-04 21:25:57 +08:00
parent 90e60250cd
commit 49aa0cb5a6
4 changed files with 75 additions and 13 deletions

View file

@ -123,3 +123,5 @@ export function UserActivate(activation: ActivationParams) {
return false; return false;
}); });
} }
// App APIs

View file

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

View file

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

View file

@ -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(() => {