Added refresh button to homepage and made it possible to join and leave groups from list view

This commit is contained in:
Keannu Bernasol 2023-10-13 14:01:11 +08:00
parent 02eabd2b41
commit 0c9f53b84d
2 changed files with 119 additions and 25 deletions

View file

@ -0,0 +1,26 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function RefreshIcon(props: IconProps) {
return (
<>
<Svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
strokeWidth="2"
stroke={colors.icon_color}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></Path>
<Path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></Path>
</Svg>
</>
);
}

View file

@ -43,6 +43,7 @@ import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUST
import Modal from "react-native-modal";
import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
export default function Home() {
// Switch this condition to see the main map when debugging
@ -64,7 +65,6 @@ export default function Home() {
async function requestLocation() {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setLocationPermitted(true);
setFeedback("Allow location permissions to continue");
toast.show(
"Location permission was denied. Please allow in order to use StudE",
@ -78,6 +78,10 @@ export default function Home() {
return;
}
if (status == "granted") {
if (locationPermitted === false) {
setLocationPermitted(true);
}
let newLocation = await Location.getCurrentPositionAsync();
if (newLocation) {
// Only update location state if user's location has changed
@ -357,26 +361,51 @@ export default function Home() {
});
function CustomMap() {
if (dist && location && locationFetched) {
if (
(StudentStatusQuery.isFetching && studying) ||
StudentStatusListQuery.isFetching ||
StudyGroupQuery.isFetching ||
(StudentStatusQuery.isFetching && !studying) ||
StudentStatusListGlobalQuery.isFetching ||
StudyGroupGlobalQuery.isFetching
) {
return (
<>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</>
);
}
if (
(StudentStatusQuery.isFetching && studying) ||
StudentStatusListQuery.isFetching ||
StudyGroupQuery.isFetching ||
(StudentStatusQuery.isFetching && !studying) ||
StudentStatusListGlobalQuery.isFetching ||
StudyGroupGlobalQuery.isFetching
) {
return (
<>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</>
);
} else if (!locationPermitted) {
console.log(locationPermitted);
return (
<>
<Text style={styles.text_white_medium}>{feedback}</Text>
<Button onPress={async () => await requestLocation()}>
<Text style={styles.text_white_medium}>Allow Access</Text>
</Button>
</>
);
} else if (dist && location && locationFetched) {
if (dist <= 1 || map_distance_override) {
return (
<>
<View style={{ alignSelf: "flex-end" }}>
<Pressable
onPress={() => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
queryClient.invalidateQueries({
queryKey: ["user_status_list"],
});
queryClient.invalidateQueries({
queryKey: ["study_group_list"],
});
}}
>
<RefreshIcon size={32} />
</Pressable>
</View>
<MapView
mapType={"none"}
style={styles.map}
@ -862,17 +891,14 @@ export default function Home() {
} else {
return <MapRendererFar location={location.coords} dist={dist} />;
}
} else if (!locationPermitted) {
} else {
return (
<>
<Text style={styles.text_white_medium}>{feedback}</Text>
<Button onPress={async () => await requestLocation()}>
<Text style={styles.text_white_medium}>Allow Access</Text>
</Button>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</>
);
} else {
return <></>;
}
}
return (
@ -970,6 +996,47 @@ export default function Home() {
) : (
<></>
)}
{student_status?.study_group != studygroup.name ? (
<Pressable
style={{
...styles.button_template,
backgroundColor: colors.secondary_2,
}}
onPress={() => {
change_study_group.mutate({
study_group: studygroup.name,
subject: studygroup.subject,
});
setModalOpen(!modalOpen);
}}
>
<Text style={styles.text_white_tiny_bold}>
Join Group
</Text>
</Pressable>
) : (
<></>
)}
{student_status?.study_group == studygroup.name ? (
<Pressable
style={{
...styles.button_template,
backgroundColor: colors.secondary_2,
}}
onPress={() => {
change_study_group.mutate({
study_group: "",
});
setModalOpen(!modalOpen);
}}
>
<Text style={styles.text_white_tiny_bold}>
Leave Group
</Text>
</Pressable>
) : (
<></>
)}
</View>
);
})
@ -979,6 +1046,7 @@ export default function Home() {
</ScrollView>
</AnimatedContainer>
</Modal>
<AnimatedContainer>
<View style={{ borderRadius: 16, overflow: "hidden" }}>
<CustomMap />