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