add code for sending messages

Josephenoch · Oct 25, 2022 · aab3f66 · aab3f66
1 parent f43c867
commit aab3f66
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 301 deletions.
diff --git a/amplify/backend/api/chatupmobile/schema.graphql b/amplify/backend/api/chatupmobile/schema.graphql
@@ -18,7 +18,7 @@ type Message @model @auth(rules: [{allow: public}]) {
   chatRoomID: ID! @index(name: "byChatRoom", sortKeyFields: ["text"])
   chatRoom: ChatRoom! @belongsTo(fields: ["chatRoomID"])
   senderID: ID! @index(name: "byUser", sortKeyFields: ["text"])
-  sender: ChatRoom! @belongsTo(fields: ["senderID"])
+  sender: User! @belongsTo(fields: ["senderID"])
 }
 
 type ChatRoom @model @auth(rules: [{allow: public}]) {

diff --git a/src/components/InputBox/index.jsx b/src/components/InputBox/index.jsx
@@ -2,11 +2,25 @@ import { StyleSheet, Text, View, TextInput } from 'react-native'
 import {AntDesign, MaterialIcons} from "@expo/vector-icons"
 import { useState } from 'react'
 import { SafeAreaView } from 'react-native-safe-area-context'
-const InputBox = () => {
+import { API, Auth, graphqlOperation } from 'aws-amplify'
+import { createMessage } from '../../graphql/mutations'
+import { useNavigation } from '@react-navigation/native'
+const InputBox = ({roomID}) => {
   const [message, setMessage] = useState("")
-  const handleSend = () =>{
-    if(message) console.warn("Sending new message", message)
-  }
+  const navigation = useNavigation()
+  const handleSend = async () =>{
+    const currentUser = await Auth.currentAuthenticatedUser()
+    if(message){
+        await API.graphql(graphqlOperation(createMessage,{
+            input:{
+                text: message,
+                chatRoomID: roomID,
+                senderID:  currentUser.attributes.sub
+            }
+        }))
+        setMessage("")
+    }
+}
   return (
     <SafeAreaView
         edges={['bottom']}

diff --git a/src/components/Message/index.jsx b/src/components/Message/index.jsx
@@ -1,18 +1,24 @@
 import { StyleSheet, Text, View } from 'react-native'
-import React, { useMemo } from 'react'
+import React, {  useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import relativeTime from "dayjs/plugin/relativeTime"
+import { Auth } from 'aws-amplify'
 
 dayjs.extend(relativeTime)
 const Message = ({message}) => {
-  const  isMyMessage = useMemo(() => {
-    return message.user.id === "u1"
-  }, [message?.user?.id])
+  const [isSender, setIsSender] = useState(false)
+  const  isMyMessage = async() => {
+    const userID = (await Auth.currentAuthenticatedUser())?.attributes?.sub
+    setIsSender(message.senderID === userID)
+  }
+  useEffect(()=>{
+    isMyMessage()
+  },[])
   return (
     <View 
         style={[styles.rootContainer, {
-            backgroundColor: isMyMessage ? "#DCF8C5" : "white",
-            alignSelf: isMyMessage ? "flex-end" : "flex-start"
+            backgroundColor: isSender ? "#DCF8C5" : "white",
+            alignSelf: isSender ? "flex-end" : "flex-start"
         }]}
     >
       <Text>{message?.text}</Text>

diff --git a/src/graphql/mutations.js b/src/graphql/mutations.js
@@ -144,23 +144,18 @@ export const createMessage = /* GraphQL */ `
       senderID
       sender {
         id
+        name
+        status
+        imageURL
+        isOnline
         messages {
           nextToken
         }
-        members {
+        chatRooms {
           nextToken
         }
-        lastMessage {
-          id
-          text
-          chatRoomID
-          senderID
-          createdAt
-          updatedAt
-        }
         createdAt
         updatedAt
-        chatRoomLastMessageId
       }
       createdAt
       updatedAt
@@ -199,23 +194,18 @@ export const updateMessage = /* GraphQL */ `
       senderID
       sender {
         id
+        name
+        status
+        imageURL
+        isOnline
         messages {
           nextToken
         }
-        members {
+        chatRooms {
           nextToken
         }
-        lastMessage {
-          id
-          text
-          chatRoomID
-          senderID
-          createdAt
-          updatedAt
-        }
         createdAt
         updatedAt
-        chatRoomLastMessageId
       }
       createdAt
       updatedAt
@@ -254,23 +244,18 @@ export const deleteMessage = /* GraphQL */ `
       senderID
       sender {
         id
+        name
+        status
+        imageURL
+        isOnline
         messages {
           nextToken
         }
-        members {
+        chatRooms {
           nextToken
         }
-        lastMessage {
-          id
-          text
-          chatRoomID
-          senderID
-          createdAt
-          updatedAt
-        }
         createdAt
         updatedAt
-        chatRoomLastMessageId
       }
       createdAt
       updatedAt
@@ -318,9 +303,12 @@ export const createChatRoom = /* GraphQL */ `
         senderID
         sender {
           id
+          name
+          status
+          imageURL
+          isOnline
           createdAt
           updatedAt
-          chatRoomLastMessageId
         }
         createdAt
         updatedAt
@@ -372,9 +360,12 @@ export const updateChatRoom = /* GraphQL */ `
         senderID
         sender {
           id
+          name
+          status
+          imageURL
+          isOnline
           createdAt
           updatedAt
-          chatRoomLastMessageId
         }
         createdAt
         updatedAt
@@ -426,9 +417,12 @@ export const deleteChatRoom = /* GraphQL */ `
         senderID
         sender {
           id
+          name
+          status
+          imageURL
+          isOnline
           createdAt
           updatedAt
-          chatRoomLastMessageId
         }
         createdAt
         updatedAt

diff --git a/src/graphql/queries.js b/src/graphql/queries.js
@@ -90,23 +90,18 @@ export const getMessage = /* GraphQL */ `
       senderID
       sender {
         id
+        name
+        status
+        imageURL
+        isOnline
         messages {
           nextToken
         }
-        members {
+        chatRooms {
           nextToken
         }
-        lastMessage {
-          id
-          text
-          chatRoomID
-          senderID
-          createdAt
-          updatedAt
-        }
         createdAt
         updatedAt
-        chatRoomLastMessageId
       }
       createdAt
       updatedAt
@@ -133,9 +128,12 @@ export const listMessages = /* GraphQL */ `
         senderID
         sender {
           id
+          name
+          status
+          imageURL
+          isOnline
           createdAt
           updatedAt
-          chatRoomLastMessageId
         }
         createdAt
         updatedAt
@@ -182,9 +180,12 @@ export const getChatRoom = /* GraphQL */ `
         senderID
         sender {
           id
+          name
+          status
+          imageURL
+          isOnline
           createdAt
           updatedAt
-          chatRoomLastMessageId
         }
         createdAt
         updatedAt