Showing
1 changed file
with
30 additions
and
0 deletions
web/src/components/room/Chat.tsx
0 → 100644
1 | +import React, { useContext, useEffect, useState } from 'react'; | ||
2 | +import SocketContext from '../../contexts/SocketContext'; | ||
3 | +import { MessageType, RawMessage } from '../common/types'; | ||
4 | +import { ChatData } from './types'; | ||
5 | + | ||
6 | +export const Chat: React.FC = () => { | ||
7 | + const socket = useContext(SocketContext); | ||
8 | + const [ input, setInput ] = useState(''); | ||
9 | + const [ chatLines, setChatLines ] = useState<ChatData[]>([]); | ||
10 | + | ||
11 | + useEffect(() => { | ||
12 | + socket.on(MessageType.ROOM_CHAT, (data: ChatData) => { | ||
13 | + setChatLines([...chatLines, data]); | ||
14 | + }); | ||
15 | + | ||
16 | + return () => { | ||
17 | + socket.off(MessageType.ROOM_CHAT); | ||
18 | + } | ||
19 | + }, []); | ||
20 | + | ||
21 | + return ( | ||
22 | + <div className='w-2/12 h-60 rounded shadow'> | ||
23 | + {chatLines.map((line) => (<div/>))} | ||
24 | + <input className='w-5/6 px-3 py-2 bg-white | ||
25 | + placeholder-gray-400 text-gray-700 text-sm | ||
26 | + rounded shadow outline-none focus:outline-none' | ||
27 | + onChange={e => setInput(e.target.value)}></input> | ||
28 | + </div> | ||
29 | + ); | ||
30 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment