Cleaned up code for user info page

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() {
             <Drawer.Screen name="Onboarding" component={Onboarding} />
             <Drawer.Screen name="Revalidation" component={Revalidation} />
             <Drawer.Screen name="Activation" component={Activation} />
-          <Drawer.Screen name="UserInfo" component={UserInfo} />
+            <Drawer.Screen name="UserInfo" component={UserInfo} />
           </Drawer.Navigator>
         </NavigationContainer>
       </QueryClientProvider>

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];

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<RootDrawerParamList>();
   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({
     first_name: "",
     last_name: "",
@@ -38,179 +46,141 @@ export default function UserInfo() {
     semester: "",
     course: "",
   });
-  const { data, isLoading, error } = useQuery("user", UserInfo, {
+  return (
-    retry: 0,
+    <ScrollView style={styles.background}>
-    onSuccess: (data) => console.log(data),
+      <AnimatedContainer>
-  });
+        <Text style={styles.text_white_large}>
-  if (!isLoading && !error) {
+          {user.first_name + " " + user.last_name}
-    return (
+        </Text>
-      <ScrollView style={styles.background}>
+        <View>
-        <AnimatedContainer>
+          <Image
-          <Text style={{ ...styles.text_white_medium, ...{ fontSize: 32 } }}>
+            source={require("./image/3135715.png")}
-            Kurt Toledo
+            style={styles.profile}
-          </Text>
+          />
-          <View>
+        </View>
-            <Image
+        <View style={styles.padding} />
-              source={require("./image/3135715.png")}
+        <View style={styles.flex_row}>
-              style={styles.profile}
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text}>First Name</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <TextInput
+              style={styles.input}
+              editable={isEditable}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, first_name: e.nativeEvent.text });
+              }}
+              value={user.first_name}
             />
-            <TouchableOpacity onPress={toggleUserActive} style={styles.button}>
-              <Text
-                style={[
-                  styles.text,
-                  isActive ? styles.activeText : styles.inactiveText,
-                ]}
-              >
-                Student {isActive ? "Active" : "Inactive"}
-              </Text>
-            </TouchableOpacity>
           </View>
-          <View
+        </View>
-            style={{
+        <View style={styles.flex_row}>
-              paddingVertical: 4,
+          <View style={{ flex: 1 }}>
-              marginBottom: 16,
+            <Text style={styles.text}>Last Name</Text>
-              marginTop: 8,
-              borderRadius: 4,
-              width: "90%",
-              backgroundColor: colors.head,
-            }}
-          />
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>First Name</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
           </View>
-          <View style={styles.formGroup}>
+          <View style={{ flex: 3 }}>
-            <View style={{ width: 70 }}>
+            <TextInput
-              <Text style={styles.text}>Last Name</Text>
+              style={[styles.input, !isEditable && styles.input]}
-            </View>
+              editable={isEditable}
-            <View style={{ flex: 1 }}>
+              onChange={(
-              <TextInput
+                e: NativeSyntheticEvent<TextInputChangeEventData>
-                style={[styles.input, !isEditable && styles.input]}
+              ): void => {
-                editable={isEditable}
+                setUser({ ...user, last_name: e.nativeEvent.text });
-                onChange={(
+              }}
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
+              value={user.last_name}
-                ): void => {
+            />
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
           </View>
-          <View
+        </View>
-            style={{
+        <View style={styles.padding} />
-              paddingVertical: 4,
+        <View style={styles.flex_row}>
-              marginBottom: 16,
+          <View style={{ flex: 1 }}>
-              marginTop: 8,
+            <Text style={styles.text}>Year Level</Text>
-              borderRadius: 4,
-              width: "90%",
-              backgroundColor: colors.head,
-            }}
-          />
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>Year Level</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
           </View>
-          <View style={styles.formGroup}>
+          <View style={{ flex: 3 }}>
-            <View style={{ width: 70 }}>
+            <TextInput
-              <Text style={styles.text}>Semester</Text>
+              style={[styles.input, !isEditable && styles.input]}
-            </View>
+              editable={isEditable}
-            <View style={{ flex: 1 }}>
+              onChange={(
-              <TextInput
+                e: NativeSyntheticEvent<TextInputChangeEventData>
-                style={[styles.input, !isEditable && styles.input]}
+              ): void => {
-                editable={isEditable}
+                setUser({ ...user, year_level: e.nativeEvent.text });
-                onChange={(
+              }}
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
+              value={user.year_level}
-                ): void => {
+            />
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
           </View>
-          <View style={styles.formGroup}>
+        </View>
-            <View style={{ width: 70 }}>
+        <View style={styles.flex_row}>
-              <Text style={styles.text}>Course</Text>
+          <View style={{ flex: 1 }}>
-            </View>
+            <Text style={styles.text}>Semester</Text>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
           </View>
-          <View
+          <View style={{ flex: 3 }}>
-            style={{
+            <TextInput
-              paddingVertical: 4,
+              style={[styles.input, !isEditable && styles.input]}
-              marginBottom: 16,
+              editable={isEditable}
-              marginTop: 8,
+              onChange={(
-              borderRadius: 4,
+                e: NativeSyntheticEvent<TextInputChangeEventData>
-              width: "90%",
+              ): void => {
-              backgroundColor: colors.head,
+                setUser({ ...user, semester: e.nativeEvent.text });
-            }}
+              }}
-          />
+              value={user.semester}
-          <View style={styles.formGroup}>
+            />
-            <View style={{ width: 80 }}>
-              <Text style={styles.text}>Subject</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <SelectDropdown
-                onSelect={(selectedItem, index) => {
-                  console.log(selectedItem, index);
-                }}
-                renderDropdownIcon={() => <DropdownIcon size={32} />}
-                buttonTextStyle={{
-                  color: "white",
-                }}
-                dropdownStyle={{
-                  backgroundColor: "#E3963E",
-                }}
-                data={options}
-                buttonStyle={{
-                  width: "90%",
-                  marginLeft: 10,
-                  backgroundColor: "#E3963E",
-                  borderRadius: 8,
-                }}
-              />
-            </View>
           </View>
-          <TouchableOpacity
+        </View>
-            style={styles.button_template}
+        <View style={styles.flex_row}>
-            onPress={() => setIsEditable(!isEditable)}
+          <View style={{ flex: 1 }}>
-          >
+            <Text style={styles.text}>Course</Text>
-            <Text style={styles.text_white_small}>
+          </View>
-              {isEditable ? "Save" : "Edit Profile"}
+          <View style={{ flex: 3 }}>
-            </Text>
+            <TextInput
-          </TouchableOpacity>
+              style={[styles.input, !isEditable && styles.input]}
-        </AnimatedContainer>
+              editable={isEditable}
-      </ScrollView>
+              onChange={(
-    );
+                e: NativeSyntheticEvent<TextInputChangeEventData>
-  }
+              ): void => {
+                setUser({ ...user, course: e.nativeEvent.text });
+              }}
+              value={user.course}
+            />
+          </View>
+        </View>
+        <View style={styles.padding} />
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text}>Subject</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <SelectDropdown
+              onSelect={(selectedItem, index) => {
+                console.log(selectedItem, index);
+              }}
+              renderDropdownIcon={() => <DropdownIcon size={32} />}
+              buttonTextStyle={{
+                color: "white",
+              }}
+              dropdownStyle={{
+                backgroundColor: "#E3963E",
+              }}
+              data={subjectOptions}
+              buttonStyle={{
+                width: "90%",
+                marginLeft: 10,
+                backgroundColor: "#E3963E",
+                borderRadius: 8,
+              }}
+            />
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button_template}
+          onPress={() => setIsEditable(!isEditable)}
+        >
+          <Text style={styles.text_white_small}>
+            {isEditable ? "Save" : "Edit Profile"}
+          </Text>
+        </TouchableOpacity>
+      </AnimatedContainer>
+    </ScrollView>
+  );
 }

src/styles.tsx

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