Overnap

Merge branch 'feature/rooms-buttons' into develop

...@@ -12,6 +12,7 @@ export interface RawMessage { ...@@ -12,6 +12,7 @@ export interface RawMessage {
12 export const MessageType = { 12 export const MessageType = {
13 LOGIN: "login", 13 LOGIN: "login",
14 ROOM_LIST_REQUEST: "roomList", 14 ROOM_LIST_REQUEST: "roomList",
15 + ROOM_LIST_CREATE: "createRoom",
15 ROOM_JOIN: "joinRoom", 16 ROOM_JOIN: "joinRoom",
16 ROOM_LEAVE: "leaveRoom", 17 ROOM_LEAVE: "leaveRoom",
17 ROOM_USER_UPDATE: "updateRoomUser", 18 ROOM_USER_UPDATE: "updateRoomUser",
......
1 +import React, { useCallback, useContext, useState } from 'react';
2 +import { useHistory, useLocation } from 'react-router-dom';
3 +import SocketContext from '../../contexts/SocketContext';
4 +import { MessageResponse, MessageType, RawMessage } from '../common/types';
5 +import { RoomData } from '../room/types';
6 +import { Room } from './types';
7 +
8 +interface CreateLocation {
9 + state: { username: string }
10 +}
11 +
12 +export const Create: React.FC = () => {
13 + const history = useHistory();
14 + const socket = useContext(SocketContext);
15 + const [ roomName, setRoomName ] = useState('');
16 + const location: CreateLocation = useLocation();
17 +
18 + const createRooms = useCallback(() => {
19 + const rawMessage: RawMessage = {
20 + type: MessageType.ROOM_LIST_CREATE,
21 + message: { name: roomName }
22 + }
23 + socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
24 + if (response.ok) {
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('방 생성 오류');
34 + }
35 + });
36 + }, [roomName]);
37 +
38 + return (
39 + <div className="flex items-center">
40 + <input type="text"
41 + placeholder="Room name"
42 + className="h-8 px-3 py-1.5 bg-white
43 + placeholder-gray-400 text-gray-700 text-sm
44 + rounded shadow outline-none focus:outline-none"
45 + value={roomName}
46 + onChange={e => setRoomName(e.target.value)}
47 + />
48 + <button className="bg-green-500 active:bg-green-600
49 + text-white uppercase text-xl
50 + w-10 h-8 pb-0.5 ml-3 rounded shadow round
51 + outline-none focus:outline-none hover:shadow-md
52 + ease-linear transition-all duration-100"
53 + type="button"
54 + onClick={() => createRooms()}>+</button>
55 + </div>
56 + );
57 +}
1 +import React from 'react';
2 +
3 +interface RefreshProps {
4 + refreshRooms: () => void
5 +}
6 +
7 +export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
8 + return (
9 + <button className="bg-green-500 active:bg-green-600
10 + text-white uppercase text-xl
11 + w-10 h-8 pb-0.5 mr-2 rounded shadow round
12 + outline-none focus:outline-none hover:shadow-md
13 + ease-linear transition-all duration-100"
14 + type="button"
15 + onClick={() => refreshRooms()}>⟳</button>
16 + );
17 +}
...@@ -2,6 +2,8 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; ...@@ -2,6 +2,8 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
2 import { useHistory } from 'react-router'; 2 import { useHistory } from 'react-router';
3 import { Main } from '../components/common/Main'; 3 import { Main } from '../components/common/Main';
4 import { MessageResponse, MessageType, RawMessage } from '../components/common/types'; 4 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
5 +import { Create } from '../components/rooms/Create';
6 +import { Refresh } from '../components/rooms/Refrsh';
5 import { RoomBlock } from '../components/rooms/RoomBlock'; 7 import { RoomBlock } from '../components/rooms/RoomBlock';
6 import { Room } from '../components/rooms/types'; 8 import { Room } from '../components/rooms/types';
7 import SocketContext from '../contexts/SocketContext'; 9 import SocketContext from '../contexts/SocketContext';
...@@ -30,6 +32,10 @@ export const Rooms: React.FC = () => { ...@@ -30,6 +32,10 @@ export const Rooms: React.FC = () => {
30 32
31 return ( 33 return (
32 <Main> 34 <Main>
35 + <div className='mt-8 flex'>
36 + <Refresh refreshRooms={refreshRooms}/>
37 + <Create />
38 + </div>
33 <div className='mt-auto w-screen flex flex-col items-center'> 39 <div className='mt-auto w-screen flex flex-col items-center'>
34 {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))} 40 {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))}
35 </div> 41 </div>
......