Overnap
Builds for 1 pipeline failed in 1 minute 24 seconds

Merge branch 'feature/rooms' into develop

......@@ -23,7 +23,7 @@
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "npm run twcss && react-scripts start",
"start": "npm run twcss && set PORT=3001 && react-scripts start",
"build": "npm run twcss && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
......
......@@ -5,11 +5,11 @@ import { MessageResponse, MessageType } from '../common/types';
import { RoomData } from '../room/types';
import { Room } from './types';
interface RoomProps {
interface RoomBlockProps {
room: Room
}
export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
const history = useHistory();
const socket = useContext(SocketContext);
const joinRoom = () => {
......
import React from 'react';
import { io } from 'socket.io-client';
export const socket = io('http://localhost/');
export const socket = io('http://localhost:3000/');
const SocketContext = React.createContext(socket);
export const SocketProvider = SocketContext.Provider;
......
import React, { useContext, useEffect, useState } from 'react';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Main } from '../components/common/Main';
import { MessageResponse, MessageType } from '../components/common/types';
import { RoomInfo } from '../components/rooms/RoomInfo';
import { RoomBlock } from '../components/rooms/RoomBlock';
import { Room } from '../components/rooms/types';
import SocketContext from '../contexts/SocketContext';
......@@ -9,25 +9,7 @@ export const Rooms: React.FC = () => {
const socket = useContext(SocketContext);
const [ rooms, setRooms ] = useState<Room[]>([]);
// for test
const testingRoom1: Room = {
uuid: '23525',
name: 'Hello World!',
currentUsers: 3,
maxUsers: 4
}
const testingRoom2: Room = {
uuid: '235252134',
name: 'Bonjour World!',
currentUsers: 6,
maxUsers: 6
}
useEffect(() => {
setRooms([testingRoom1, testingRoom2]);
// refreshRooms()
}, []);
const refreshRooms = () => {
const refreshRooms = useCallback(() => {
socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
if (response.ok) {
setRooms(response.result!);
......@@ -36,14 +18,14 @@ export const Rooms: React.FC = () => {
console.log("방 목록을 수신하지 못함");
}
});
}
}, []);
// useEffect(refreshRooms, []);
useEffect(refreshRooms, []);
return (
<Main>
<div className='mt-auto w-screen flex flex-col items-center'>
{rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
{rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))}
</div>
</Main>
)
......