From a65a3a84aad94ccff4b07eb26a7989ce79774476 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 27 Oct 2023 22:03:46 +0800
Subject: [PATCH] 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

---
 src/icons/CaretLeftIcon/CaretLeftIcon.tsx     |  6 +-
 src/icons/CaretRightIcon/CaretLeftIcon.tsx    | 28 +++++++++
 .../ConversationPage/ConversationPage.tsx     | 58 +++++++++++++------
 3 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 src/icons/CaretRightIcon/CaretLeftIcon.tsx

diff --git a/src/icons/CaretLeftIcon/CaretLeftIcon.tsx b/src/icons/CaretLeftIcon/CaretLeftIcon.tsx
index e2caaa5..d6f2c5c 100644
--- a/src/icons/CaretLeftIcon/CaretLeftIcon.tsx
+++ b/src/icons/CaretLeftIcon/CaretLeftIcon.tsx
@@ -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>
     </>
diff --git a/src/icons/CaretRightIcon/CaretLeftIcon.tsx b/src/icons/CaretRightIcon/CaretLeftIcon.tsx
new file mode 100644
index 0000000..e2caaa5
--- /dev/null
+++ b/src/icons/CaretRightIcon/CaretLeftIcon.tsx
@@ -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>
+    </>
+  );
+}
diff --git a/src/routes/ConversationPage/ConversationPage.tsx b/src/routes/ConversationPage/ConversationPage.tsx
index b2fd297..5f433ef 100644
--- a/src/routes/ConversationPage/ConversationPage.tsx
+++ b/src/routes/ConversationPage/ConversationPage.tsx
@@ -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>
     );