diff --git a/App.tsx b/App.tsx
index 66975af..4a264f5 100644
--- a/App.tsx
+++ b/App.tsx
@@ -18,7 +18,7 @@ import Revalidation from "./src/routes/Revalidation/Revalidation";
import Activation from "./src/routes/Activation/Activation";
import UserInfo from "./src/routes/UserInfo/UserInfo";
import { useState, useEffect } from "react";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { QueryClientProvider, QueryClient } from "react-query";
const Drawer = createDrawerNavigator();
@@ -67,7 +67,7 @@ export default function App() {
-
+
diff --git a/src/interfaces/Interfaces.tsx b/src/interfaces/Interfaces.tsx
index d9671ec..09c02cb 100644
--- a/src/interfaces/Interfaces.tsx
+++ b/src/interfaces/Interfaces.tsx
@@ -70,3 +70,28 @@ export interface OnboardingParams {
course: 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];
diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfo/UserInfo.tsx
index 856f817..17eba0f 100644
--- a/src/routes/UserInfo/UserInfo.tsx
+++ b/src/routes/UserInfo/UserInfo.tsx
@@ -11,7 +11,10 @@ import { colors } from "../../styles";
import { useState, useEffect } from "react";
import Button from "../../components/Button/Button";
import { useNavigation } from "@react-navigation/native";
-import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import {
+ RootDrawerParamList,
+ UserInfoParams,
+} from "../../interfaces/Interfaces";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { TouchableOpacity, Image } from "react-native";
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 { useQuery } from "react-query";
import { UserInfo as GetUserInfo } from "../../components/Api/Api";
-import { err } from "react-native-svg/lib/typescript/xml";
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();
const [isEditable, setIsEditable] = useState(false);
- const options = ["", "", "", ""];
- const [isActive, setIsActive] = useState(false);
- const toggleUserActive = () => {
- setIsActive(!isActive);
- };
- //const dispatch = useDispatch();
- // const creds = useSelector((state: RootState) => state.auth.creds);
+ const subjectOptions = ["", "", "", ""];
const [user, setUser] = useState({
first_name: "",
last_name: "",
@@ -38,179 +46,141 @@ export default function UserInfo() {
semester: "",
course: "",
});
- const { data, isLoading, error } = useQuery("user", UserInfo, {
- retry: 0,
- onSuccess: (data) => console.log(data),
- });
- if (!isLoading && !error) {
- return (
-
-
-
- Kurt Toledo
-
-
-
+
+
+ {user.first_name + " " + user.last_name}
+
+
+
+
+
+
+
+ First Name
+
+
+
+ ): void => {
+ setUser({ ...user, first_name: e.nativeEvent.text });
+ }}
+ value={user.first_name}
/>
-
-
- Student {isActive ? "Active" : "Inactive"}
-
-
-
-
-
- First Name
-
-
-
- ): void => {
- setUser({ ...user, first_name: e.nativeEvent.text });
- }}
- />
-
+
+
+
+ Last Name
-
-
- Last Name
-
-
-
- ): void => {
- setUser({ ...user, first_name: e.nativeEvent.text });
- }}
- />
-
+
+
+ ): void => {
+ setUser({ ...user, last_name: e.nativeEvent.text });
+ }}
+ value={user.last_name}
+ />
-
-
-
- Year Level
-
-
-
- ): void => {
- setUser({ ...user, first_name: e.nativeEvent.text });
- }}
- />
-
+
+
+
+
+ Year Level
-
-
- Semester
-
-
-
- ): void => {
- setUser({ ...user, first_name: e.nativeEvent.text });
- }}
- />
-
+
+
+ ): void => {
+ setUser({ ...user, year_level: e.nativeEvent.text });
+ }}
+ value={user.year_level}
+ />
-
-
- Course
-
-
-
- ): void => {
- setUser({ ...user, first_name: e.nativeEvent.text });
- }}
- />
-
+
+
+
+ Semester
-
-
-
- Subject
-
-
- {
- console.log(selectedItem, index);
- }}
- renderDropdownIcon={() => }
- buttonTextStyle={{
- color: "white",
- }}
- dropdownStyle={{
- backgroundColor: "#E3963E",
- }}
- data={options}
- buttonStyle={{
- width: "90%",
- marginLeft: 10,
- backgroundColor: "#E3963E",
- borderRadius: 8,
- }}
- />
-
+
+
+ ): void => {
+ setUser({ ...user, semester: e.nativeEvent.text });
+ }}
+ value={user.semester}
+ />
- setIsEditable(!isEditable)}
- >
-
- {isEditable ? "Save" : "Edit Profile"}
-
-
-
-
- );
- }
+
+
+
+ Course
+
+
+
+ ): void => {
+ setUser({ ...user, course: e.nativeEvent.text });
+ }}
+ value={user.course}
+ />
+
+
+
+
+
+ Subject
+
+
+ {
+ console.log(selectedItem, index);
+ }}
+ renderDropdownIcon={() => }
+ buttonTextStyle={{
+ color: "white",
+ }}
+ dropdownStyle={{
+ backgroundColor: "#E3963E",
+ }}
+ data={subjectOptions}
+ buttonStyle={{
+ width: "90%",
+ marginLeft: 10,
+ backgroundColor: "#E3963E",
+ borderRadius: 8,
+ }}
+ />
+
+
+ setIsEditable(!isEditable)}
+ >
+
+ {isEditable ? "Save" : "Edit Profile"}
+
+
+
+
+ );
}
diff --git a/src/styles.tsx b/src/styles.tsx
index 88d451e..29c380b 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -120,9 +120,9 @@ const styles = StyleSheet.create({
},
profile: {
height: 80,
- width: 80,
- alignSelf: 'center',
- },
+ width: 80,
+ alignSelf: "center",
+ },
input: {
height: 40,
margin: 12,
@@ -131,30 +131,17 @@ const styles = StyleSheet.create({
color: colors.text_default,
backgroundColor: colors.blue_1,
borderRadius: 8,
- borderColor: '#FFAC1C',
- padding: 8,
- },
- formGroup: {
- display: "flex",
- flexDirection: "row",
- alignItems: "center",
+ borderColor: "#FFAC1C",
+ padding: 8,
},
text: {
marginLeft: 5,
color: colors.text_default,
fontSize: font_sizes.small,
- fontWeight: "bold",
- },
- button: {
- padding: 10,
- backgroundColor: colors.blue_2,
- borderRadius: 5,
+ fontWeight: "bold",
},
- activeText: {
- color: 'green',
- },
- inactiveText: {
- color: 'white',
+ padding: {
+ paddingVertical: 8,
},
});
export default styles;