sdy

add useEffect

1 -import React from "react"; 1 +import React, { useEffect } from "react";
2 import styled from "styled-components"; 2 import styled from "styled-components";
3 import Header from "../../Components/Header"; 3 import Header from "../../Components/Header";
4 import Input from "../../Components/Input"; 4 import Input from "../../Components/Input";
...@@ -147,9 +147,16 @@ const StyledLink = styled(Link)` ...@@ -147,9 +147,16 @@ const StyledLink = styled(Link)`
147 } 147 }
148 `; 148 `;
149 149
150 -export default ({ location, message, onSubmit, messageArray }) => { 150 +export default ({
151 + location,
152 + message,
153 + onSubmit,
154 + messageArray,
155 + subscribeToNewMessage,
156 +}) => {
151 const { pathname } = location; 157 const { pathname } = location;
152 const roomName = pathname.slice(1, pathname.length); 158 const roomName = pathname.slice(1, pathname.length);
159 + useEffect(() => subscribeToNewMessage(), []);
153 160
154 return ( 161 return (
155 <Wrapper> 162 <Wrapper>
...@@ -172,15 +179,17 @@ export default ({ location, message, onSubmit, messageArray }) => { ...@@ -172,15 +179,17 @@ export default ({ location, message, onSubmit, messageArray }) => {
172 <Title>Selected Menu Title</Title> 179 <Title>Selected Menu Title</Title>
173 </ChatScreenHeader> 180 </ChatScreenHeader>
174 <ChatScreenBox> 181 <ChatScreenBox>
175 - {messageArray && 182 + <ul>
176 - messageArray.seeAllMessage.map((e) => ( 183 + {messageArray &&
177 - <Message 184 + messageArray.seeAllMessage.map((e) => (
178 - text={e.text} 185 + <Message
179 - time={e.createdAt} 186 + text={e.text}
180 - key={e.id} 187 + time={e.createdAt}
181 - avatar={e.sender.avatarUrl} 188 + key={e.id}
182 - /> 189 + avatar={e.sender.avatarUrl}
183 - ))} 190 + />
191 + ))}
192 + </ul>
184 <InputContainer className="InputContainer"> 193 <InputContainer className="InputContainer">
185 <form onSubmit={onSubmit}> 194 <form onSubmit={onSubmit}>
186 <Input 195 <Input
......