Overnap

createRooms 프로토콜에 맞게 수정

1 import React, { useCallback, useContext, useState } from 'react'; 1 import React, { useCallback, useContext, useState } from 'react';
2 +import { useHistory, useLocation } from 'react-router-dom';
2 import SocketContext from '../../contexts/SocketContext'; 3 import SocketContext from '../../contexts/SocketContext';
3 import { MessageResponse, MessageType, RawMessage } from '../common/types'; 4 import { MessageResponse, MessageType, RawMessage } from '../common/types';
5 +import { RoomData } from '../room/types';
4 import { Room } from './types'; 6 import { Room } from './types';
5 7
8 +interface CreateLocation {
9 + state: { username: string }
10 +}
11 +
6 export const Create: React.FC = () => { 12 export const Create: React.FC = () => {
13 + const history = useHistory();
7 const socket = useContext(SocketContext); 14 const socket = useContext(SocketContext);
8 const [ roomName, setRoomName ] = useState(''); 15 const [ roomName, setRoomName ] = useState('');
16 + const location: CreateLocation = useLocation();
9 17
10 const createRooms = useCallback(() => { 18 const createRooms = useCallback(() => {
11 const rawMessage: RawMessage = { 19 const rawMessage: RawMessage = {
12 type: MessageType.ROOM_LIST_CREATE, 20 type: MessageType.ROOM_LIST_CREATE,
13 message: { name: roomName } 21 message: { name: roomName }
14 } 22 }
15 - socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => { 23 + socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
16 if (response.ok) { 24 if (response.ok) {
17 - // HOW? 25 + history.push({
26 + pathname: '/' + response.result!.uuid,
27 + state: {
28 + username: location.state.username,
29 + roomData: response.result!
30 + }
31 + });
32 + } else {
33 + console.log('방 생성 오류');
18 } 34 }
19 }); 35 });
20 }, [roomName]); 36 }, [roomName]);
......