Added start studying page

App.tsx

@@ -23,6 +23,7 @@ import { StatusBar } from "expo-status-bar";
 import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";
 import SubjectsPage from "./src/routes/SubjectsPage/SubjectsPage";
 import Loading from "./src/routes/Loading/Loading";
+import StartStudying from "./src/routes/StartStudying/StartStudying";
 
 const Drawer = createDrawerNavigator();
 
@@ -75,6 +76,7 @@ export default function App() {
             <Drawer.Screen name="Activation" component={Activation} />
             <Drawer.Screen name="User Info" component={UserInfoPage} />
             <Drawer.Screen name="Subjects" component={SubjectsPage} />
+            <Drawer.Screen name="Start Studying" component={StartStudying} />
           </Drawer.Navigator>
         </NavigationContainer>
       </Provider>

src/interfaces/Interfaces.tsx

@@ -1,3 +1,5 @@
+import * as Location from "expo-location";
+
 export interface IconProps {
   size: number;
 }
@@ -133,7 +135,7 @@ export interface StudentData {
   course_shortname: string;
   year_level: string;
   yearlevel_shortname: string;
-  subjects: Subject[]; // To-do
+  subjects: string[]; // To-do
   username: string;
 }
 
@@ -149,3 +151,5 @@ export interface StudentStatusParams {
   location?: Location;
   active?: boolean;
 }
+
+export type LocationType = Location.LocationObject;

src/routes/Home/Home.tsx

@@ -7,9 +7,15 @@ import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
 import { PostStudentStatus } from "../../components/Api/Api";
-import { StudentStatusParams } from "../../interfaces/Interfaces";
+import {
-type LocationType = Location.LocationObject;
+  RootDrawerParamList,
+  StudentStatusParams,
+} from "../../interfaces/Interfaces";
+import { LocationType } from "../../interfaces/Interfaces";
+import { useNavigation } from "@react-navigation/native";
+
 export default function Home() {
+  const navigation = useNavigation<RootDrawerParamList>();
   const [location, setLocation] = useState<LocationType | null>(null);
   const [dist, setDist] = useState<number | null>(null);
   const [feedback, setFeedback] = useState(
@@ -158,15 +164,7 @@ export default function Home() {
             </MapView>
             <Button
               onPress={async () => {
-                const postData: StudentStatusParams = {
+                navigation.navigate("Start Studying", { location: location });
-                  subject: "System Administration and Maintenance",
-                  location: {
-                    latitude: location.coords.latitude,
-                    longtitude: location.coords.longitude,
-                  },
-                };
-                await PostStudentStatus(postData);
-                console.log(postData);
               }}
             >
               <Text style={styles.text_white_medium}>Start Studying</Text>

src/routes/StartStudying/StartStudying.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import styles from "../../styles";
+import { View, Text } from "react-native";
+import { useState } from "react";
+import {
+  UserInfoParams,
+  Subject,
+  OptionType,
+} from "../../interfaces/Interfaces";
+import Button from "../../components/Button/Button";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { UserInfo } from "../../components/Api/Api";
+import { colors } from "../../styles";
+import DropDownPicker from "react-native-dropdown-picker";
+import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
+import { useSelector } from "react-redux";
+import { RootState } from "../../features/redux/Store/Store";
+
+export default function StartStudying({ route }: any) {
+  const { location } = route.params;
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState("");
+
+  // Subject choices
+  const [selected_subject, setSelectedSubject] = useState("");
+  const [subjectsOpen, setSubjectsOpen] = useState(false);
+  const [subjects, setSubjects] = useState<OptionType[]>([]);
+  const StudentInfo = useQuery({
+    queryKey: ["user"],
+    queryFn: UserInfo,
+    onSuccess: (data: UserInfoParams) => {
+      let subjects = data[1].subjects.map((subject: string) => ({
+        label: subject,
+        value: subject,
+      }));
+      setSubjects(subjects);
+    },
+    onError: () => {
+      setFeedback("Unable to query available subjects");
+    },
+  });
+  if (location && location.coords) {
+    return (
+      <View style={styles.background}>
+        <AnimatedContainerNoScroll>
+          <View style={styles.flex_row}>
+            <View style={{ flex: 1 }}>
+              <Text style={styles.text_white_small_bold}>Start Studying</Text>
+            </View>
+            <View style={{ flex: 3 }}>
+              <DropDownPicker
+                zIndex={1000}
+                max={16}
+                open={subjectsOpen}
+                value={selected_subject}
+                items={subjects}
+                setOpen={(open) => {
+                  setSubjectsOpen(open);
+                }}
+                setValue={setSelectedSubject}
+                placeholderStyle={{
+                  ...styles.text_white_tiny_bold,
+                  ...{ textAlign: "left" },
+                }}
+                placeholder="Select subject"
+                multipleText="Select subject"
+                style={styles.input}
+                textStyle={{
+                  ...styles.text_white_tiny_bold,
+                  ...{ textAlign: "left" },
+                }}
+                modalContentContainerStyle={{
+                  backgroundColor: colors.primary_2,
+                  borderWidth: 0,
+                  zIndex: 1000,
+                }}
+                autoScroll
+                dropDownDirection="BOTTOM"
+                listMode="MODAL"
+              />
+            </View>
+          </View>
+          <View style={{ zIndex: -1 }}>
+            <View style={styles.padding} />
+            <Text style={styles.text_white_small}>
+              {location.coords.longitude + "\n" + location.coords.latitude}
+            </Text>
+            <Button onPress={() => {}}>
+              <Text style={styles.text_white_small}>Start Studying</Text>
+            </Button>
+            <View style={styles.padding} />
+            <Text style={styles.text_white_small}>{feedback}</Text>
+          </View>
+        </AnimatedContainerNoScroll>
+      </View>
+    );
+  }
+  return <View />;
+}