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

Added enter button to conversation page and fixed error not properly displaying when sending an invalid message. Also added refresh interval of 20 seconds to study group query in conversations page to automatically refresh students count

Browse source
This commit is contained in:
Keannu Bernasol 2023-10-27 22:03:46 +08:00
parent 88d8ce05b8
commit a65a3a84aa
3 changed files with 70 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
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
@ -18,9 +18,9 @@ export default function CaretLeftIcon(props: IconProps) {
>
<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"
d="M9 6c0 -.852 .986 -1.297 1.623 -.783l.084 .076l6 6a1 1 0 0 1 .083 1.32l-.083 .094l-6 6l-.094 .083l-.077 .054l-.096 .054l-.036 .017l-.067 .027l-.108 .032l-.053 .01l-.06 .01l-.057 .004l-.059 .002l-.059 -.002l-.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 -12.059z"
stroke-width="0"
fill={colors.icon_color}
fill="currentColor"
></Path>
</Svg>
</>

28
src/icons/CaretRightIcon/CaretLeftIcon.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 CaretLeftIcon(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>
</>
);
}

58
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: 20,
queryFn: async () => {
const data = await GetStudyGroup(student_status?.study_group || "");
if (data[0] == false) {
@ -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;
},
@ -293,23 +295,41 @@ export default function ConversationPage() {
<Text style={styles.text_white_small}>There are no messages</Text>
)}
</ScrollView>
<TextInput
style={styles.chatbox}
placeholder="Send a message..."
placeholderTextColor="white"
value={message}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setMessage(e.nativeEvent.text);
}}
onSubmitEditing={() => {
send_message.mutate({
message_content: message,
});
setMessage("");
}}
/>
<View style={styles.flex_row}>
<TextInput
style={styles.chatbox}
placeholder="Send a message..."
placeholderTextColor="white"
value={message}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setMessage(e.nativeEvent.text);
}}
onSubmitEditing={() => {
send_message.mutate({
message_content: message,
});
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>
);