sdy

update Queries

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 );
......