Create.tsx
1.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useCallback, useContext, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
import { Room } from './types';
export const Create: React.FC = () => {
const socket = useContext(SocketContext);
const [ roomName, setRoomName ] = useState('');
const createRooms = useCallback(() => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LIST_CREATE,
message: { name: roomName }
}
socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
if (response.ok) {
// HOW?
}
});
}, [roomName]);
return (
<div>
<input type="text"
placeholder="Username"
className="px-3 py-1.5 bg-white
placeholder-gray-400 text-gray-700 text-sm
rounded shadow outline-none focus:outline-none"
value={roomName}
onChange={e => setRoomName(e.target.value)}
/>
<button className="bg-green-500 active:bg-green-600
text-white uppercase text-xl
w-10 h-8 pb-0.5 ml-3 rounded shadow round
outline-none focus:outline-none hover:shadow-md
ease-linear transition-all duration-100"
type="button"
onClick={() => createRooms()}>+</button>
</div>
);
}