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

Moved callouts to a separate component

Browse source
This commit is contained in:
Keannu Bernasol 2023-08-15 14:53:58 +08:00
parent 146d80cc98
commit 040ffb622c
2 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/CustomMapCallout/CustomMapCallout.tsx Normal file
View file

@ -0,0 +1,41 @@
import { Callout } from "react-native-maps";
import { LocationType } from "../../interfaces/Interfaces";
import styles from "../../styles";
import { Text } from "react-native";
// Map popup for user's location
type props = {
location: LocationType;
studying: boolean;
subject?: string;
};
export default function CustomMapCallout(props: props) {
let { location, studying, subject } = props;
if (location && location.coords) {
if (studying) {
return (
<Callout>
<Text style={styles.text_black_tiny}>
You are here {"\n"}
X: {Math.round(location.coords.longitude) + "\n"}
Z: {Math.round(location.coords.latitude) + "\n"}
Studying: {subject}
</Text>
</Callout>
);
} else {
return (
<Callout>
<Text style={styles.text_black_tiny}>
You are here {"\n"}
X: {Math.round(location.coords.longitude) + "\n"}
Z: {Math.round(location.coords.latitude)}
</Text>
</Callout>
);
}
}
return <></>;
}

35
src/routes/Home/Home.tsx
View file

@ -22,6 +22,7 @@ import {
} from "../../components/Api/Api";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useToast } from "react-native-toast-notifications";
import CustomMapCallout from "../../components/CustomMapCallout/CustomMapCallout";
export default function Home() {
// Switch this condition to see the main map when debugging
@ -188,34 +189,6 @@ export default function Home() {
},
});
// Map popup for user's location
function CustomCallout() {
if (location && location.coords) {
if (studying) {
return (
<Callout>
<Text style={styles.text_black_tiny}>
You are here {"\n"}
X: {Math.round(location.coords.longitude) + "\n"}
Z: {Math.round(location.coords.latitude) + "\n"}
Studying: {subject}
</Text>
</Callout>
);
} else {
return (
<Callout>
<Text style={styles.text_black_medium}>
You are here {"\n"}
X: {Math.round(location.coords.longitude) + "\n"}
Z: {Math.round(location.coords.latitude)}
</Text>
</Callout>
);
}
}
return <></>;
}
function CustomMap() {
if (dist && location) {
if (dist <= 2 || map_debug) {
@ -289,7 +262,11 @@ export default function Home() {
}}
pinColor={colors.primary_1}
>
<CustomCallout />
<CustomMapCallout
location={location}
studying={studying}
subject={subject}
/>
</Marker>
</MapView>
<Button