Showing
1 changed file
with
29 additions
and
18 deletions
| 1 | -import React from "react"; | 1 | +import React, { useEffect } from "react"; |
| 2 | -import { useMutation, useQuery } from "@apollo/react-hooks"; | 2 | +import { useMutation, useQuery, useSubscription } from "@apollo/react-hooks"; |
| 3 | import ChatPresenter from "./ChatPresenter"; | 3 | import ChatPresenter from "./ChatPresenter"; |
| 4 | import { withRouter } from "react-router-dom"; | 4 | import { withRouter } from "react-router-dom"; |
| 5 | import { | 5 | import { |
| 6 | CREATE_MESSAGE, | 6 | CREATE_MESSAGE, |
| 7 | GET_ROOM_BY_NAME, | 7 | GET_ROOM_BY_NAME, |
| 8 | SEE_ALL_MESSAGE, | 8 | SEE_ALL_MESSAGE, |
| 9 | + SUBSCRIPTION_MSG, | ||
| 9 | } from "./ChatQueries"; | 10 | } from "./ChatQueries"; |
| 10 | import useInput from "../../Hooks/useInput"; | 11 | import useInput from "../../Hooks/useInput"; |
| 11 | import { toast } from "react-toastify"; | 12 | import { toast } from "react-toastify"; |
| 12 | -import defaultProfile from "../imgs/defaultProfile.jpg"; | ||
| 13 | 13 | ||
| 14 | export default withRouter(({ location }) => { | 14 | export default withRouter(({ location }) => { |
| 15 | const { pathname } = location; | 15 | const { pathname } = location; |
| 16 | const roomName = pathname.slice(1, pathname.length); | 16 | const roomName = pathname.slice(1, pathname.length); |
| 17 | const [createMsg] = useMutation(CREATE_MESSAGE); | 17 | const [createMsg] = useMutation(CREATE_MESSAGE); |
| 18 | - //const { data } = useSubscription(SUBSCRIPTION_MSG); | 18 | + const { data: subScription } = useSubscription(SUBSCRIPTION_MSG); |
| 19 | 19 | ||
| 20 | const message = useInput(""); | 20 | const message = useInput(""); |
| 21 | 21 | ||
| 22 | - let messageObj, roomNum, messageText, messageTime, newMsgObj, messageArray; | 22 | + let messageObj, roomNum, messageArray; |
| 23 | 23 | ||
| 24 | const { data: getRoom } = useQuery(GET_ROOM_BY_NAME, { | 24 | const { data: getRoom } = useQuery(GET_ROOM_BY_NAME, { |
| 25 | variables: { roomName }, | 25 | variables: { roomName }, |
| ... | @@ -31,17 +31,37 @@ export default withRouter(({ location }) => { | ... | @@ -31,17 +31,37 @@ export default withRouter(({ location }) => { |
| 31 | roomNum = Number(roomId); | 31 | roomNum = Number(roomId); |
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | - const { data: messageList } = useQuery(SEE_ALL_MESSAGE, { | 34 | + const { subscribeToMore, data: messageList } = useQuery(SEE_ALL_MESSAGE, { |
| 35 | variables: { roomId: roomNum }, | 35 | variables: { roomId: roomNum }, |
| 36 | }); | 36 | }); |
| 37 | + | ||
| 37 | if (messageList !== undefined) { | 38 | if (messageList !== undefined) { |
| 38 | messageList.seeAllMessage.map((e) => { | 39 | messageList.seeAllMessage.map((e) => { |
| 39 | if (e.sender.avatarUrl === "") { | 40 | if (e.sender.avatarUrl === "") { |
| 41 | + e.sender.avatarUrl = "../../imgs/defaultProfile.jpg"; | ||
| 40 | } | 42 | } |
| 41 | }); | 43 | }); |
| 42 | messageArray = messageList; | 44 | messageArray = messageList; |
| 43 | } | 45 | } |
| 44 | 46 | ||
| 47 | + let testObj; | ||
| 48 | + testObj = subscribeToMore({ | ||
| 49 | + document: SUBSCRIPTION_MSG, | ||
| 50 | + updateQuery: (prev, { subscriptionData }) => { | ||
| 51 | + console.log("prev : ", prev); | ||
| 52 | + console.log("subscriptionData : ", subscriptionData); | ||
| 53 | + if (!subscriptionData.data) return prev; | ||
| 54 | + const newFeedItem = subscriptionData.data.subMessage; | ||
| 55 | + console.log("newFeedItem : ", newFeedItem); | ||
| 56 | + return Object.assign({}, prev, { | ||
| 57 | + seeAllMessage: { | ||
| 58 | + id, | ||
| 59 | + }, | ||
| 60 | + }); | ||
| 61 | + }, | ||
| 62 | + }); | ||
| 63 | + console.log(testObj); | ||
| 64 | + | ||
| 45 | const onSubmit = async (e) => { | 65 | const onSubmit = async (e) => { |
| 46 | e.preventDefault(); | 66 | e.preventDefault(); |
| 47 | if (message.value !== undefined || message.value !== "") { | 67 | if (message.value !== undefined || message.value !== "") { |
| ... | @@ -54,29 +74,20 @@ export default withRouter(({ location }) => { | ... | @@ -54,29 +74,20 @@ export default withRouter(({ location }) => { |
| 54 | }); | 74 | }); |
| 55 | if (!messageObj) { | 75 | if (!messageObj) { |
| 56 | toast.error("fail to create new message !, try again"); | 76 | toast.error("fail to create new message !, try again"); |
| 57 | - } else { | ||
| 58 | - const { | ||
| 59 | - data: { | ||
| 60 | - createMessage: { text, createdAt }, | ||
| 61 | - }, | ||
| 62 | - } = messageObj; | ||
| 63 | - messageText = text; | ||
| 64 | - messageTime = createdAt; | ||
| 65 | - newMsgObj = messageObj; | ||
| 66 | } | 77 | } |
| 67 | } catch { | 78 | } catch { |
| 68 | toast.error("text must be not empty"); | 79 | toast.error("text must be not empty"); |
| 69 | } | 80 | } |
| 70 | } | 81 | } |
| 71 | }; | 82 | }; |
| 83 | + | ||
| 84 | + useEffect(() => {}); | ||
| 85 | + | ||
| 72 | return ( | 86 | return ( |
| 73 | <ChatPresenter | 87 | <ChatPresenter |
| 74 | location={location} | 88 | location={location} |
| 75 | message={message} | 89 | message={message} |
| 76 | onSubmit={onSubmit} | 90 | onSubmit={onSubmit} |
| 77 | - messageText={messageText} | ||
| 78 | - messageTime={messageTime} | ||
| 79 | - newMsgObj={newMsgObj} | ||
| 80 | messageArray={messageArray} | 91 | messageArray={messageArray} |
| 81 | /> | 92 | /> |
| 82 | ); | 93 | ); | ... | ... |
-
Please register or login to post a comment