keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2025-05-17 20:08:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Animated the container and added revalidation of credentials on app reopen

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-07-04 14:18:48 +08:00
parent 11c4f0c264
commit 278bb72ec1
11 changed files with 307 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/routes/Home/Home.tsx
View file

@ -7,13 +7,16 @@ import Button from "../../components/Button/Button";
import { UserLogin } from "../../components/Api/Api";
import { colors } from "../../styles";
import axios from "axios";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
export default function Home() {
const creds = useSelector((state: RootState) => state.auth.creds);
return (
<View style={styles.background}>
<Text style={styles.text_white_large}>Template Homepage</Text>
<Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
<AnimatedContainer>
<Text style={styles.text_white_large}>Template Homepage</Text>
<Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
</AnimatedContainer>
</View>
);
}

9
src/routes/Login/Login.tsx
View file

@ -17,6 +17,7 @@ import { useNavigation } from "@react-navigation/native";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import { UserLogin } from "../../components/Api/Api";
import { ParseLoginError } from "../../components/ParseError/ParseError";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
export default function Login() {
const navigation = useNavigation<RootDrawerParamList>();
@ -28,7 +29,7 @@ export default function Login() {
});
return (
<View style={styles.background}>
<View style={styles.container}>
<AnimatedContainer>
<View
style={{
paddingVertical: 4,
@ -80,12 +81,12 @@ export default function Login() {
}).then((result) => {
if (result[0]) {
setUser({ ...user, username: "", password: "", error: "" });
console.log(
/*console.log(
"Access Token:",
result[1],
"\nRefresh Token:",
result[2]
);
);*/
dispatch(
setToken({
access_token: result[1],
@ -111,7 +112,7 @@ export default function Login() {
>
<Text style={styles.text_white_small}>Register</Text>
</Button>
</View>
</AnimatedContainer>
</View>
);
}

5
src/routes/Register/Register.tsx
View file

@ -17,6 +17,7 @@ import SignupIcon from "../../icons/SignupIcon/SignupIcon";
import { UserRegister } from "../../components/Api/Api";
import IsNumber from "../../components/IsNumber/IsNumber";
import ParseError from "../../components/ParseError/ParseError";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
export default function Register() {
const navigation = useNavigation<RootDrawerParamList>();
@ -33,7 +34,7 @@ export default function Register() {
});
return (
<View style={styles.background}>
<View style={styles.container}>
<AnimatedContainer>
<View
style={{
paddingVertical: 4,
@ -167,7 +168,7 @@ export default function Register() {
>
<Text style={styles.text_white_small}>Register</Text>
</Button>
</View>
</AnimatedContainer>
</View>
);
}

51
src/routes/Revalidation/Revalidation.tsx Normal file
View file

@ -0,0 +1,51 @@
import * as React from "react";
import styles from "../../styles";
import { View, Text, ActivityIndicator } from "react-native";
import Button from "../../components/Button/Button";
import { TokenRefresh, UserInfo, UserLogin } from "../../components/Api/Api";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../features/redux/Store/Store";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { MotiView } from "moti";
import { colors } from "../../styles";
import { useEffect, useState } from "react";
import { useNavigation } from "@react-navigation/native";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import { setUser } from "../../features/redux/slices/AuthSlice/AuthSlice";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
export default function Revalidation() {
const dispatch = useDispatch();
const navigation = useNavigation<RootDrawerParamList>();
const creds = useSelector((state: RootState) => state.auth.creds);
console.log(JSON.stringify(creds));
const [state, setState] = useState("Checking for existing session");
useEffect(() => {
setState("Previous session found");
TokenRefresh().then(async (response) => {
if (response[0]) {
await dispatch(setUser(await UserInfo()));
setTimeout(() => {
navigation.navigate("Home");
}, 700);
} else {
setState("Session expired");
setTimeout(() => {
navigation.navigate("Login");
}, 700);
}
});
}, []);
return (
<View style={styles.background}>
<AnimatedContainer>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.blue_1} />
<Text style={styles.text_white_medium}>{state}</Text>
</AnimatedContainer>
</View>
);
}