keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleaned up code for user info page

Browse source
This commit is contained in:
Keannu Bernasol 2023-07-17 15:10:44 +08:00
parent 2ff22f63df
commit f9931a1fdd
4 changed files with 181 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
App.tsx
View file

@ -18,7 +18,7 @@ import Revalidation from "./src/routes/Revalidation/Revalidation";
import Activation from "./src/routes/Activation/Activation"; import Activation from "./src/routes/Activation/Activation";
import UserInfo from "./src/routes/UserInfo/UserInfo"; import UserInfo from "./src/routes/UserInfo/UserInfo";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; import { QueryClientProvider, QueryClient } from "react-query";
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();

25
src/interfaces/Interfaces.tsx
View file

@ -70,3 +70,28 @@ export interface OnboardingParams {
course: string; course: string;
semester: string; semester: string;
} }
export interface StudentData {
avatar: string;
course: string;
email: string;
first_name: string;
is_banned: boolean;
last_name: string;
semester: string;
student_id_number: string;
subjects: any[]; // To-do
user_status: {
active: boolean;
landmark: string;
location: any; // To-do
study_group: any[]; // To-do
subject: string;
timestamp: string;
user: string;
};
username: string;
year_level: string;
}
export type UserInfoParams = [boolean, StudentData];

132
src/routes/UserInfo/UserInfo.tsx
View file

@ -11,7 +11,10 @@ import { colors } from "../../styles";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Button from "../../components/Button/Button"; import Button from "../../components/Button/Button";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { RootDrawerParamList } from "../../interfaces/Interfaces"; import {
RootDrawerParamList,
UserInfoParams,
} from "../../interfaces/Interfaces";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer"; import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { TouchableOpacity, Image } from "react-native"; import { TouchableOpacity, Image } from "react-native";
import { ScrollView } from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
@ -19,18 +22,23 @@ import SelectDropdown from "react-native-select-dropdown";
import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon"; import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { UserInfo as GetUserInfo } from "../../components/Api/Api"; import { UserInfo as GetUserInfo } from "../../components/Api/Api";
import { err } from "react-native-svg/lib/typescript/xml";
export default function UserInfo() { export default function UserInfo() {
const UserInfo = useQuery("user", GetUserInfo, {
onSuccess: (data: UserInfoParams) => {
setUser({
...user,
first_name: data[1].first_name,
last_name: data[1].last_name,
year_level: data[1].year_level,
semester: data[1].semester,
course: data[1].course,
});
},
});
const navigation = useNavigation<RootDrawerParamList>(); const navigation = useNavigation<RootDrawerParamList>();
const [isEditable, setIsEditable] = useState(false); const [isEditable, setIsEditable] = useState(false);
const options = ["", "", "", ""]; const subjectOptions = ["", "", "", ""];
const [isActive, setIsActive] = useState(false);
const toggleUserActive = () => {
setIsActive(!isActive);
};
//const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds);
const [user, setUser] = useState({ const [user, setUser] = useState({
first_name: "", first_name: "",
last_name: "", last_name: "",
@ -38,148 +46,111 @@ export default function UserInfo() {
semester: "", semester: "",
course: "", course: "",
}); });
const { data, isLoading, error } = useQuery("user", UserInfo, {
retry: 0,
onSuccess: (data) => console.log(data),
});
if (!isLoading && !error) {
return ( return (
<ScrollView style={styles.background}> <ScrollView style={styles.background}>
<AnimatedContainer> <AnimatedContainer>
<Text style={{ ...styles.text_white_medium, ...{ fontSize: 32 } }}> <Text style={styles.text_white_large}>
Kurt Toledo {user.first_name + " " + user.last_name}
</Text> </Text>
<View> <View>
<Image <Image
source={require("./image/3135715.png")} source={require("./image/3135715.png")}
style={styles.profile} style={styles.profile}
/> />
<TouchableOpacity onPress={toggleUserActive} style={styles.button}>
<Text
style={[
styles.text,
isActive ? styles.activeText : styles.inactiveText,
]}
>
Student {isActive ? "Active" : "Inactive"}
</Text>
</TouchableOpacity>
</View> </View>
<View <View style={styles.padding} />
style={{ <View style={styles.flex_row}>
paddingVertical: 4, <View style={{ flex: 1 }}>
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>First Name</Text> <Text style={styles.text}>First Name</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 3 }}>
<TextInput <TextInput
style={[styles.input, !isEditable && styles.input]} style={styles.input}
editable={isEditable} editable={isEditable}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
): void => { ): void => {
setUser({ ...user, first_name: e.nativeEvent.text }); setUser({ ...user, first_name: e.nativeEvent.text });
}} }}
value={user.first_name}
/> />
</View> </View>
</View> </View>
<View style={styles.formGroup}> <View style={styles.flex_row}>
<View style={{ width: 70 }}> <View style={{ flex: 1 }}>
<Text style={styles.text}>Last Name</Text> <Text style={styles.text}>Last Name</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 3 }}>
<TextInput <TextInput
style={[styles.input, !isEditable && styles.input]} style={[styles.input, !isEditable && styles.input]}
editable={isEditable} editable={isEditable}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
): void => { ): void => {
setUser({ ...user, first_name: e.nativeEvent.text }); setUser({ ...user, last_name: e.nativeEvent.text });
}} }}
value={user.last_name}
/> />
</View> </View>
</View> </View>
<View <View style={styles.padding} />
style={{ <View style={styles.flex_row}>
paddingVertical: 4, <View style={{ flex: 1 }}>
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<View style={styles.formGroup}>
<View style={{ width: 70 }}>
<Text style={styles.text}>Year Level</Text> <Text style={styles.text}>Year Level</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 3 }}>
<TextInput <TextInput
style={[styles.input, !isEditable && styles.input]} style={[styles.input, !isEditable && styles.input]}
editable={isEditable} editable={isEditable}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
): void => { ): void => {
setUser({ ...user, first_name: e.nativeEvent.text }); setUser({ ...user, year_level: e.nativeEvent.text });
}} }}
value={user.year_level}
/> />
</View> </View>
</View> </View>
<View style={styles.formGroup}> <View style={styles.flex_row}>
<View style={{ width: 70 }}> <View style={{ flex: 1 }}>
<Text style={styles.text}>Semester</Text> <Text style={styles.text}>Semester</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 3 }}>
<TextInput <TextInput
style={[styles.input, !isEditable && styles.input]} style={[styles.input, !isEditable && styles.input]}
editable={isEditable} editable={isEditable}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
): void => { ): void => {
setUser({ ...user, first_name: e.nativeEvent.text }); setUser({ ...user, semester: e.nativeEvent.text });
}} }}
value={user.semester}
/> />
</View> </View>
</View> </View>
<View style={styles.formGroup}> <View style={styles.flex_row}>
<View style={{ width: 70 }}> <View style={{ flex: 1 }}>
<Text style={styles.text}>Course</Text> <Text style={styles.text}>Course</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 3 }}>
<TextInput <TextInput
style={[styles.input, !isEditable && styles.input]} style={[styles.input, !isEditable && styles.input]}
editable={isEditable} editable={isEditable}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
): void => { ): void => {
setUser({ ...user, first_name: e.nativeEvent.text }); setUser({ ...user, course: e.nativeEvent.text });
}} }}
value={user.course}
/> />
</View> </View>
</View> </View>
<View <View style={styles.padding} />
style={{ <View style={styles.flex_row}>
paddingVertical: 4, <View style={{ flex: 1 }}>
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<View style={styles.formGroup}>
<View style={{ width: 80 }}>
<Text style={styles.text}>Subject</Text> <Text style={styles.text}>Subject</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 3 }}>
<SelectDropdown <SelectDropdown
onSelect={(selectedItem, index) => { onSelect={(selectedItem, index) => {
console.log(selectedItem, index); console.log(selectedItem, index);
@ -191,7 +162,7 @@ export default function UserInfo() {
dropdownStyle={{ dropdownStyle={{
backgroundColor: "#E3963E", backgroundColor: "#E3963E",
}} }}
data={options} data={subjectOptions}
buttonStyle={{ buttonStyle={{
width: "90%", width: "90%",
marginLeft: 10, marginLeft: 10,
@ -212,5 +183,4 @@ export default function UserInfo() {
</AnimatedContainer> </AnimatedContainer>
</ScrollView> </ScrollView>
); );
}
} }

21
src/styles.tsx
View file

@ -121,7 +121,7 @@ const styles = StyleSheet.create({
profile: { profile: {
height: 80, height: 80,
width: 80, width: 80,
alignSelf: 'center', alignSelf: "center",
}, },
input: { input: {
height: 40, height: 40,
@ -131,30 +131,17 @@ const styles = StyleSheet.create({
color: colors.text_default, color: colors.text_default,
backgroundColor: colors.blue_1, backgroundColor: colors.blue_1,
borderRadius: 8, borderRadius: 8,
borderColor: '#FFAC1C', borderColor: "#FFAC1C",
padding: 8, padding: 8,
}, },
formGroup: {
display: "flex",
flexDirection: "row",
alignItems: "center",
},
text: { text: {
marginLeft: 5, marginLeft: 5,
color: colors.text_default, color: colors.text_default,
fontSize: font_sizes.small, fontSize: font_sizes.small,
fontWeight: "bold", fontWeight: "bold",
}, },
button: { padding: {
padding: 10, paddingVertical: 8,
backgroundColor: colors.blue_2,
borderRadius: 5,
},
activeText: {
color: 'green',
},
inactiveText: {
color: 'white',
}, },
}); });
export default styles; export default styles;