From 029ef84671fa7d86c3e748b38a3742b60d275e34 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Sun, 6 Aug 2023 14:25:09 +0800 Subject: [PATCH] Improved API, added loading page, initial changes to homepage, and fixed irregular field on user info page not being centered --- App.tsx | 6 +- package-lock.json | 38 +++++ package.json | 1 + src/components/Api/Api.tsx | 24 +++- src/interfaces/Interfaces.tsx | 10 ++ src/routes/Home/Home.tsx | 169 +++++++++++++---------- src/routes/Loading/Loading.tsx | 17 +++ src/routes/UserInfoPage/UserInfoPage.tsx | 2 +- src/styles.tsx | 3 +- 9 files changed, 188 insertions(+), 82 deletions(-) create mode 100644 src/routes/Loading/Loading.tsx diff --git a/App.tsx b/App.tsx index bf69a4b..86b7055 100644 --- a/App.tsx +++ b/App.tsx @@ -1,4 +1,5 @@ import "react-native-gesture-handler"; +import { Text } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator } from "@react-navigation/drawer"; import { Provider } from "react-redux"; @@ -21,6 +22,7 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; 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"; const Drawer = createDrawerNavigator(); @@ -28,7 +30,7 @@ const linking = { prefixes: [Linking.makeUrl("/")], config: { screens: { - Home: "home", + Home: "", Login: "login", Register: "register", Onboarding: "onboarding", @@ -59,7 +61,7 @@ export default function App() { - + }> =1.10.1", + "react-native-reanimated": ">=2.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-native": { + "optional": true + } + } + }, + "node_modules/@gorhom/portal": { + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/@gorhom/portal/-/portal-1.0.14.tgz", + "integrity": "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==", + "dependencies": { + "nanoid": "^3.3.1" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/@graphql-typed-document-node/core": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz", diff --git a/package.json b/package.json index 5af9ec0..37610e6 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "web": "expo start --web" }, "dependencies": { + "@gorhom/bottom-sheet": "^4.4.7", "@react-native-async-storage/async-storage": "1.17.11", "@react-navigation/drawer": "^6.6.3", "@react-navigation/native": "^6.1.7", diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx index 3bbe997..e7df9e3 100644 --- a/src/components/Api/Api.tsx +++ b/src/components/Api/Api.tsx @@ -6,7 +6,7 @@ import { OnboardingParams, PatchStudentData, RegistrationParams, - StudentData, + StudentStatusParams, } from "../../interfaces/Interfaces"; export let backendURL = "https://stude.keannu1.duckdns.org"; @@ -17,8 +17,8 @@ if (__DEV__) { } // Switch this on if you wanna run production URLs while in development -let use_production = true; -if (use_production) { +let use_production = false; +if (__DEV__ && use_production) { backendURL = "https://stude.keannu1.duckdns.org"; backendURLWebsocket = "ws://stude.keannu1.duckdns.org"; } @@ -257,3 +257,21 @@ export async function OnboardingUpdateStudentInfo(info: OnboardingParams) { return [false, error_message]; }); } + +export async function PostStudentStatus(info: StudentStatusParams) { + const config = await GetConfig(); + console.log(info); + return instance + .post("/api/v1/student_status/self/", info, config) + .then((response) => { + console.log("heh1"); + return [true, response.data]; + }) + .catch((error) => { + let error_message = ""; + if (error.response) error_message = error.response.data; + else error_message = "Unable to reach servers"; + console.log("heh2", error); + return [false, error_message]; + }); +} diff --git a/src/interfaces/Interfaces.tsx b/src/interfaces/Interfaces.tsx index 40b0348..2eeb8d0 100644 --- a/src/interfaces/Interfaces.tsx +++ b/src/interfaces/Interfaces.tsx @@ -138,3 +138,13 @@ export interface StudentData { } export type UserInfoParams = [boolean, StudentData]; + +interface Location { + latitude: number; + longtitude: number; +} + +export interface StudentStatusParams { + subject: string; + location: Location; +} diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index b5eac06..89b88c8 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -6,6 +6,8 @@ import MapView, { Callout, Marker, UrlTile } from "react-native-maps"; 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"; type LocationType = Location.LocationObject; export default function Home() { const [location, setLocation] = useState(null); @@ -74,85 +76,102 @@ export default function Home() { if (dist >= 2) { // Just switch this condition for map debugging return ( - - - + console.log(location)} - draggable - onDragEnd={(e) => { - const newLocation = e.nativeEvent.coordinate; - const distance = GetDistance( - newLocation.latitude, - newLocation.longitude, - location.coords.latitude, - location.coords.longitude - ); - console.log("Distance:", distance); - if (distance <= 0.1) { - // If the new location is within 100 meters of the actual location, update the location state - setLocation({ - ...location, - coords: { - ...location.coords, - latitude: newLocation.latitude, - longitude: newLocation.longitude, - }, - }); - } else { - // If the new location is more than 100 meters away from the actual location, reset the marker to the actual location - setLocation({ - ...location, - }); - } - }} - pinColor={colors.primary_1} + loadingBackgroundColor={colors.secondary_2} > - - - You are here {"\n"} - X: {Math.round(location.coords.longitude) + "\n"} - Z: {Math.round(location.coords.latitude)} - - - - + + console.log(location)} + draggable + onDragEnd={(e) => { + const newLocation = e.nativeEvent.coordinate; + const distance = GetDistance( + newLocation.latitude, + newLocation.longitude, + location.coords.latitude, + location.coords.longitude + ); + console.log("Distance:", distance); + if (distance <= 0.1) { + // If the new location is within 100 meters of the actual location, update the location state + setLocation({ + ...location, + coords: { + ...location.coords, + latitude: newLocation.latitude, + longitude: newLocation.longitude, + }, + }); + } else { + // If the new location is more than 100 meters away from the actual location, reset the marker to the actual location + setLocation({ + ...location, + }); + } + }} + pinColor={colors.primary_1} + > + + + You are here {"\n"} + X: {Math.round(location.coords.longitude) + "\n"} + Z: {Math.round(location.coords.latitude)} + + + + + + ); } else { return ( diff --git a/src/routes/Loading/Loading.tsx b/src/routes/Loading/Loading.tsx new file mode 100644 index 0000000..9fb7c7c --- /dev/null +++ b/src/routes/Loading/Loading.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import styles from "../../styles"; +import { View, Text, ActivityIndicator } from "react-native"; +import { colors } from "../../styles"; +import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer"; + +export default function Loading() { + return ( + + + + + Loading StudE... + + + ); +} diff --git a/src/routes/UserInfoPage/UserInfoPage.tsx b/src/routes/UserInfoPage/UserInfoPage.tsx index 0453bd6..d713a2f 100644 --- a/src/routes/UserInfoPage/UserInfoPage.tsx +++ b/src/routes/UserInfoPage/UserInfoPage.tsx @@ -361,7 +361,7 @@ export default function UserInfoPage() { - + { mutation.mutate({ diff --git a/src/styles.tsx b/src/styles.tsx index c0fb9e6..546847e 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -171,7 +171,8 @@ const styles = StyleSheet.create({ width: "70%", }, map: { - height: Viewport.height * 0.8, + marginVertical: 4, + height: Viewport.height * 0.7, width: Viewport.width * 0.8, alignSelf: "center", },