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

Merge pull request #16 from lemeow125/feature/qol-fixes

Browse source 
Feature/qol fixes
This commit is contained in:
Keannu Bernasol 2023-10-28 09:42:34 +08:00 committed by GitHub
commit 0cad7458be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 115 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/DrawerSettings/CustomDrawerContent.tsx
View file

@ -143,7 +143,7 @@ export default function CustomDrawerContent(props: {}) {
<DrawerButton
onPress={async () => {
// We don't clear student statuses when logging out on debug
if (!debug) {
if (debug) {
queryClient.clear();
dispatch(logout());
await AsyncStorage.clear();

2
src/icons/CaretLeftIcon/CaretLeftIcon.tsx
View file

@ -3,7 +3,7 @@ import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function CaretLeftIcon(props: IconProps) {
export default function CaretRightIcon(props: IconProps) {
return (
<>
<Svg

28
src/icons/CaretRightIcon/CaretRightIcon.tsx Normal file
View file

@ -0,0 +1,28 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function CaretRightIcon(props: IconProps) {
return (
<>
<Svg
height={props.size + "px"}
width={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={colors.icon_color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path
d="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
stroke-width="0"
fill={colors.icon_color}
></Path>
</Svg>
</>
);
}

30
src/routes/ConversationPage/ConversationPage.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { ActivityIndicator, Image } from "react-native";
import { ActivityIndicator, Image, Pressable } from "react-native";
import styles from "../../styles";
import {
View,
@ -36,6 +36,7 @@ import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContai
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useSelector } from "react-redux";
import { RootState } from "../../features/redux/Store/Store";
import CaretRightIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
export default function ConversationPage() {
const toast = useToast();
@ -70,6 +71,7 @@ export default function ConversationPage() {
enabled:
student_status?.study_group != "" && student_status?.study_group != null,
queryKey: ["study_group"],
refetchInterval: 10000,
queryFn: async () => {
const data = await GetStudyGroup(student_status?.study_group || "");
if (data[0] == false) {
@ -127,7 +129,7 @@ export default function ConversationPage() {
// Avatar List
const [users, setUsers] = useState<GroupMessageAvatarType[]>([]);
const AvatarsQuery = useQuery({
refetchInterval: 3000,
refetchInterval: 10000,
enabled:
student_status?.study_group != null ||
(student_status?.study_group != "" &&
@ -162,7 +164,7 @@ export default function ConversationPage() {
mutationFn: async (info: MessagePostType) => {
const data = await PostMessage(info);
if (data[0] != true) {
return Promise.reject(new Error());
return Promise.reject(new Error(data[1]));
}
return data;
},
@ -209,7 +211,9 @@ export default function ConversationPage() {
paddingRight: 4,
}}
>
{studygroup.students.length} studying
{!StudyGroupQuery.isFetching
? studygroup.students.length + " studying"
: "Loading"}
</Text>
{users.map((user: GroupMessageAvatarType, index: number) => {
if (index > 6) {
@ -293,6 +297,7 @@ export default function ConversationPage() {
<Text style={styles.text_white_small}>There are no messages</Text>
)}
</ScrollView>
<View style={styles.flex_row}>
<TextInput
style={styles.chatbox}
placeholder="Send a message..."
@ -310,6 +315,23 @@ export default function ConversationPage() {
setMessage("");
}}
/>
<Pressable
style={{
backgroundColor: colors.secondary_3,
borderRadius: 16,
alignSelf: "center",
marginLeft: 16,
}}
onPress={() => {
send_message.mutate({
message_content: message,
});
setMessage("");
}}
>
<CaretRightIcon size={48} />
</Pressable>
</View>
</AnimatedContainer>
</View>
);

9
src/routes/CreateGroup/CreateGroup.tsx
View file

@ -24,6 +24,7 @@ import MapView, { UrlTile, Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
import { useToast } from "react-native-toast-notifications";
import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
export default function CreateGroup({ route }: any) {
const { location, subject } = route.params;
@ -82,9 +83,9 @@ export default function CreateGroup({ route }: any) {
duration: 2000,
animationType: "slide-in",
});
// Set a delay before going back to homepage to hopefully let the queries refresh in time
// Set a delay before going back to conversation page to hopefully let the queries refresh in time
setTimeout(() => {
navigation.navigate("Home");
navigation.navigate("Conversation");
}, 200);
},
onError: (error: Error) => {
@ -100,7 +101,7 @@ export default function CreateGroup({ route }: any) {
if (location) {
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<AnimatedContainer>
<View style={{ zIndex: -1 }}>
<View style={styles.padding} />
<View style={{ borderRadius: 16, overflow: "hidden" }}>
@ -183,7 +184,7 @@ export default function CreateGroup({ route }: any) {
</View>
<View style={styles.padding} />
</AnimatedContainerNoScroll>
</AnimatedContainer>
</View>
);
}

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

@ -44,6 +44,7 @@ import Modal from "react-native-modal";
import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
import AsyncStorage from "@react-native-async-storage/async-storage";
export default function Home() {
// Switch this condition to see the main map when debugging
@ -61,7 +62,7 @@ export default function Home() {
const [modalOpen, setModalOpen] = useState(false);
const [modalByGroup, setModalByGroup] = useState(false);
async function requestLocation() {
async function requestLocationPermission() {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setFeedback("Allow location permissions to continue");
@ -75,12 +76,13 @@ export default function Home() {
}
);
return;
}
if (status == "granted") {
if (locationPermitted === false) {
} else {
setLocationPermitted(true);
}
}
async function requestLocation() {
if (locationPermitted) {
let newLocation = await Location.getCurrentPositionAsync();
if (newLocation) {
// Only update location state if user's location has changed
@ -96,23 +98,18 @@ export default function Home() {
}
}
// Refresh every 10 seconds
requestLocation();
useEffect(() => {
console.log("changed");
console.log(locationPermitted);
requestLocation();
}, [locationPermitted]);
useEffect(() => {
requestLocationPermission();
// Refresh every 30 seconds
const interval = setInterval(() => {
requestLocation();
}, 30000);
setTimeout(() => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
queryClient.invalidateQueries({
queryKey: ["user_status_list"],
});
queryClient.invalidateQueries({
queryKey: ["study_group_list"],
});
requestLocation();
}, 2000);
return () => clearInterval(interval);
}, []);
@ -129,6 +126,9 @@ export default function Home() {
}
}
async function clear_messages_notification_cache() {
AsyncStorage.setItem("messages", "");
}
// Student Status
const [studying, setStudying] = useState(false);
const [subject, setSubject] = useState("");
@ -167,7 +167,7 @@ export default function Home() {
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
@ -220,7 +220,7 @@ export default function Home() {
return data;
},
onSuccess: () => {
if (student_status?.study_group) {
if (student_status?.study_group == "") {
// Display separate toast if you stop studying while in a study group
toast.show("You left study group \n" + student_status?.study_group, {
type: "success",
@ -228,7 +228,9 @@ export default function Home() {
duration: 2000,
animationType: "slide-in",
});
clear_messages_notification_cache();
}
queryClient.invalidateQueries({ queryKey: ["user_status"] });
// Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
@ -380,12 +382,14 @@ export default function Home() {
</>
);
} else if (
(StudentStatusQuery.isFetching && studying) ||
StudentStatusListQuery.isFetching ||
StudyGroupQuery.isFetching ||
(StudentStatusQuery.isFetching && !studying) ||
StudentStatusListGlobalQuery.isFetching ||
StudyGroupGlobalQuery.isFetching
(!StudentStatusQuery.isSuccess &&
studying &&
!StudentStatusListQuery.isSuccess &&
!StudyGroupQuery.isSuccess) ||
(!StudentStatusQuery.isSuccess &&
!studying &&
!StudentStatusListGlobalQuery.isSuccess &&
!StudyGroupGlobalQuery.isSuccess)
) {
return (
<>
@ -598,6 +602,7 @@ export default function Home() {
study_group: studygroup.name,
subject: studygroup.subject,
});
navigation.navigate("Conversation");
}}
>
<Text style={styles.text_white_tiny_bold}>
@ -932,6 +937,8 @@ export default function Home() {
return <MapRendererFar location={location.coords} dist={dist} />;
}
} else {
requestLocationPermission();
requestLocation();
return (
<>
<View style={{ paddingVertical: 8 }} />
@ -1049,6 +1056,7 @@ export default function Home() {
study_group: studygroup.name,
subject: studygroup.subject,
});
navigation.navigate("Conversation");
setModalOpen(!modalOpen);
}}
>

1
src/routes/Register/Register.tsx
View file

@ -17,6 +17,7 @@ import { UserRegister } from "../../components/Api/Api";
import IsNumber from "../../components/IsNumber/IsNumber";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { useToast } from "react-native-toast-notifications";
import { ScrollView } from "react-native-gesture-handler";
export default function Register() {
const navigation = useNavigation<RootDrawerParamList>();

3
src/styles.tsx
View file

@ -44,8 +44,9 @@ const styles = StyleSheet.create({
justifyContent: "center",
display: "flex",
flexDirection: "column",
flex: 1,
flexGrow: 1,
paddingHorizontal: 4,
paddingVertical: 32,
},
flex_row: {
display: "flex",