Showing
21 changed files
with
82 additions
and
42 deletions
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; | 2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; |
3 | import { socket, SocketProvider } from './contexts/SocketContext'; | 3 | import { socket, SocketProvider } from './contexts/SocketContext'; |
4 | -import { Login } from './pages/Login'; | 4 | +import Login from './pages/Login'; |
5 | -import { Room } from './pages/Room'; | 5 | +import Room from './pages/Room'; |
6 | -import { Rooms } from './pages/Rooms'; | 6 | +import Rooms from './pages/Rooms'; |
7 | 7 | ||
8 | const App: React.FC = () => { | 8 | const App: React.FC = () => { |
9 | return ( | 9 | return ( | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | 2 | ||
3 | -export const Footer: React.FC = () => { | 3 | +const Footer: React.FC = () => { |
4 | return ( | 4 | return ( |
5 | <div className="mt-auto flex justify-center items-center"> | 5 | <div className="mt-auto flex justify-center items-center"> |
6 | <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game"> | 6 | <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game"> |
... | @@ -19,3 +19,5 @@ export const Footer: React.FC = () => { | ... | @@ -19,3 +19,5 @@ export const Footer: React.FC = () => { |
19 | </div> | 19 | </div> |
20 | ); | 20 | ); |
21 | } | 21 | } |
22 | + | ||
23 | +export default Footer; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | -import { Footer } from './Footer'; | 2 | +import Footer from './Footer'; |
3 | 3 | ||
4 | -export const Main: React.FC = ({ children }) => { | 4 | +const Main: React.FC = ({ children }) => { |
5 | return ( | 5 | return ( |
6 | <div className="flex flex-col items-center w-screen h-screen"> | 6 | <div className="flex flex-col items-center w-screen h-screen"> |
7 | {children} | 7 | {children} |
... | @@ -9,3 +9,5 @@ export const Main: React.FC = ({ children }) => { | ... | @@ -9,3 +9,5 @@ export const Main: React.FC = ({ children }) => { |
9 | </div> | 9 | </div> |
10 | ); | 10 | ); |
11 | } | 11 | } |
12 | + | ||
13 | +export default Main; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -9,7 +9,7 @@ interface CanvasProps { | ... | @@ -9,7 +9,7 @@ interface CanvasProps { |
9 | isDrawer: boolean; | 9 | isDrawer: boolean; |
10 | } | 10 | } |
11 | 11 | ||
12 | -export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { | 12 | +const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { |
13 | const socket = useContext(SocketContext); | 13 | const socket = useContext(SocketContext); |
14 | const canvasRef = useRef<HTMLCanvasElement>(null); | 14 | const canvasRef = useRef<HTMLCanvasElement>(null); |
15 | 15 | ||
... | @@ -186,3 +186,5 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { | ... | @@ -186,3 +186,5 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { |
186 | </div> | 186 | </div> |
187 | ); | 187 | ); |
188 | } | 188 | } |
189 | + | ||
190 | +export default Canvas; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; | 1 | import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; |
2 | import SocketContext from '../../contexts/SocketContext'; | 2 | import SocketContext from '../../contexts/SocketContext'; |
3 | import { MessageType, RawMessage } from '../common/types'; | 3 | import { MessageType, RawMessage } from '../common/types'; |
4 | -import { ChatLine } from './ChatLine'; | 4 | +import ChatLine from './ChatLine'; |
5 | import { ChatData } from './types'; | 5 | import { ChatData } from './types'; |
6 | 6 | ||
7 | interface ChatProps { | 7 | interface ChatProps { |
... | @@ -9,7 +9,7 @@ interface ChatProps { | ... | @@ -9,7 +9,7 @@ interface ChatProps { |
9 | h: string; | 9 | h: string; |
10 | } | 10 | } |
11 | 11 | ||
12 | -export const Chat: React.FC<ChatProps> = (props) => { | 12 | +const Chat: React.FC<ChatProps> = (props) => { |
13 | const socket = useContext(SocketContext); | 13 | const socket = useContext(SocketContext); |
14 | const [ input, setInput ] = useState(''); | 14 | const [ input, setInput ] = useState(''); |
15 | const [ chatLines, setChatLines ] = useState<ChatData[]>([]); | 15 | const [ chatLines, setChatLines ] = useState<ChatData[]>([]); |
... | @@ -87,3 +87,5 @@ export const Chat: React.FC<ChatProps> = (props) => { | ... | @@ -87,3 +87,5 @@ export const Chat: React.FC<ChatProps> = (props) => { |
87 | </div> | 87 | </div> |
88 | ); | 88 | ); |
89 | } | 89 | } |
90 | + | ||
91 | +export default Chat; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -5,9 +5,11 @@ interface ChatLineProps { | ... | @@ -5,9 +5,11 @@ interface ChatLineProps { |
5 | chatData: ChatData; | 5 | chatData: ChatData; |
6 | } | 6 | } |
7 | 7 | ||
8 | -export const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => { | 8 | +const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => { |
9 | return ( | 9 | return ( |
10 | <div className='w-full px-3 py-1.5 bg-white | 10 | <div className='w-full px-3 py-1.5 bg-white |
11 | text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div> | 11 | text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div> |
12 | ); | 12 | ); |
13 | } | 13 | } |
14 | + | ||
15 | +export default ChatLine; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -2,10 +2,10 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; | ... | @@ -2,10 +2,10 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; |
2 | import { useLocation } from 'react-router'; | 2 | import { useLocation } from 'react-router'; |
3 | import SocketContext from '../../contexts/SocketContext'; | 3 | import SocketContext from '../../contexts/SocketContext'; |
4 | import { MessageType, RawMessage } from '../common/types'; | 4 | import { MessageType, RawMessage } from '../common/types'; |
5 | -import { Canvas } from './Canvas'; | 5 | +import Canvas from './Canvas'; |
6 | -import { RoundInfo } from './RoundInfo'; | 6 | +import RoundInfo from './RoundInfo'; |
7 | import { RoundData } from './types'; | 7 | import { RoundData } from './types'; |
8 | -import { Word } from './Word'; | 8 | +import Word from './Word'; |
9 | 9 | ||
10 | interface GameBoardLocation { | 10 | interface GameBoardLocation { |
11 | state: { username: string } | 11 | state: { username: string } |
... | @@ -15,7 +15,7 @@ interface GameBoardProps { | ... | @@ -15,7 +15,7 @@ interface GameBoardProps { |
15 | isInGame: boolean | 15 | isInGame: boolean |
16 | } | 16 | } |
17 | 17 | ||
18 | -export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { | 18 | +const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { |
19 | const socket = useContext(SocketContext); | 19 | const socket = useContext(SocketContext); |
20 | const location: GameBoardLocation = useLocation(); | 20 | const location: GameBoardLocation = useLocation(); |
21 | 21 | ||
... | @@ -92,3 +92,5 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { | ... | @@ -92,3 +92,5 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { |
92 | </div> | 92 | </div> |
93 | ); | 93 | ); |
94 | } | 94 | } |
95 | + | ||
96 | +export default GameBoard; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -12,7 +12,7 @@ interface ReadyProps { | ... | @@ -12,7 +12,7 @@ interface ReadyProps { |
12 | users: User[]; | 12 | users: User[]; |
13 | } | 13 | } |
14 | 14 | ||
15 | -export const Ready: React.FC<ReadyProps> = ({ users }) => { | 15 | +const Ready: React.FC<ReadyProps> = ({ users }) => { |
16 | const socket = useContext(SocketContext); | 16 | const socket = useContext(SocketContext); |
17 | const location: ReadyLocation = useLocation(); | 17 | const location: ReadyLocation = useLocation(); |
18 | 18 | ||
... | @@ -58,3 +58,5 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => { | ... | @@ -58,3 +58,5 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => { |
58 | onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button> | 58 | onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button> |
59 | ); | 59 | ); |
60 | } | 60 | } |
61 | + | ||
62 | +export default Ready; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -5,7 +5,7 @@ interface RoomInfoProps { | ... | @@ -5,7 +5,7 @@ interface RoomInfoProps { |
5 | roomData: RoomData; | 5 | roomData: RoomData; |
6 | } | 6 | } |
7 | 7 | ||
8 | -export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { | 8 | +const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { |
9 | return ( | 9 | return ( |
10 | <div className='m-3 my-8 w-5/6 flex items-center place-content-between'> | 10 | <div className='m-3 my-8 w-5/6 flex items-center place-content-between'> |
11 | <div>{roomData.name}</div> | 11 | <div>{roomData.name}</div> |
... | @@ -13,3 +13,5 @@ export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { | ... | @@ -13,3 +13,5 @@ export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { |
13 | </div> | 13 | </div> |
14 | ); | 14 | ); |
15 | } | 15 | } |
16 | + | ||
17 | +export default RoomInfo; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | -import { Timer } from './Timer'; | 2 | +import Timer from './Timer'; |
3 | 3 | ||
4 | interface RoundInfoProps { | 4 | interface RoundInfoProps { |
5 | round: number; | 5 | round: number; |
6 | wordChosen: string; | 6 | wordChosen: string; |
7 | } | 7 | } |
8 | 8 | ||
9 | -export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { | 9 | +const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { |
10 | return ( | 10 | return ( |
11 | <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'> | 11 | <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'> |
12 | <Timer /> | 12 | <Timer /> |
... | @@ -15,3 +15,5 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { | ... | @@ -15,3 +15,5 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { |
15 | </div> | 15 | </div> |
16 | ); | 16 | ); |
17 | } | 17 | } |
18 | + | ||
19 | +export default RoundInfo; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -7,7 +7,7 @@ interface timer { | ... | @@ -7,7 +7,7 @@ interface timer { |
7 | time: number; | 7 | time: number; |
8 | }; | 8 | }; |
9 | 9 | ||
10 | -export const Timer: React.FC = () => { | 10 | +const Timer: React.FC = () => { |
11 | const socket = useContext(SocketContext); | 11 | const socket = useContext(SocketContext); |
12 | 12 | ||
13 | const [ time, setTime ] = useState(0); | 13 | const [ time, setTime ] = useState(0); |
... | @@ -53,3 +53,5 @@ export const Timer: React.FC = () => { | ... | @@ -53,3 +53,5 @@ export const Timer: React.FC = () => { |
53 | </div> | 53 | </div> |
54 | ); | 54 | ); |
55 | } | 55 | } |
56 | + | ||
57 | +export default Timer; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { User } from './types'; | 2 | import { User } from './types'; |
3 | -import { UserStatus } from './UserStatus'; | 3 | +import UserStatus from './UserStatus'; |
4 | 4 | ||
5 | interface UserInfoProps { | 5 | interface UserInfoProps { |
6 | users: User[]; | 6 | users: User[]; |
7 | } | 7 | } |
8 | 8 | ||
9 | -export const UserInfo: React.FC<UserInfoProps> = ({ users }) => { | 9 | +const UserInfo: React.FC<UserInfoProps> = ({ users }) => { |
10 | return ( | 10 | return ( |
11 | <div className='w-7/12 h-60 flex justify-center'> | 11 | <div className='w-7/12 h-60 flex justify-center'> |
12 | {users.map((user) => (<UserStatus key={user.username} user={user} />))} | 12 | {users.map((user) => (<UserStatus key={user.username} user={user} />))} |
13 | </div> | 13 | </div> |
14 | ); | 14 | ); |
15 | } | 15 | } |
16 | + | ||
17 | +export default UserInfo | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -7,7 +7,7 @@ interface UserRoleProps { | ... | @@ -7,7 +7,7 @@ interface UserRoleProps { |
7 | isInGame: boolean; | 7 | isInGame: boolean; |
8 | } | 8 | } |
9 | 9 | ||
10 | -export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { | 10 | +const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { |
11 | const socket = useContext(SocketContext); | 11 | const socket = useContext(SocketContext); |
12 | const [ roles, setRoles ] = useState<RoleData[]>([]); | 12 | const [ roles, setRoles ] = useState<RoleData[]>([]); |
13 | 13 | ||
... | @@ -39,3 +39,5 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { | ... | @@ -39,3 +39,5 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { |
39 | </div> | 39 | </div> |
40 | ); | 40 | ); |
41 | } | 41 | } |
42 | + | ||
43 | +export default UserRole; | ... | ... |
... | @@ -5,7 +5,7 @@ interface UserStatusProps { | ... | @@ -5,7 +5,7 @@ interface UserStatusProps { |
5 | user: User; | 5 | user: User; |
6 | } | 6 | } |
7 | 7 | ||
8 | -export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { | 8 | +const UserStatus: React.FC<UserStatusProps> = ({ user }) => { |
9 | return ( | 9 | return ( |
10 | <div className='p-3 h-12 m-4 rounded-lg shadow'> | 10 | <div className='p-3 h-12 m-4 rounded-lg shadow'> |
11 | <div className={`${user.admin ? 'text-blue-500' : | 11 | <div className={`${user.admin ? 'text-blue-500' : |
... | @@ -16,3 +16,5 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { | ... | @@ -16,3 +16,5 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { |
16 | </div> | 16 | </div> |
17 | ) | 17 | ) |
18 | } | 18 | } |
19 | + | ||
20 | +export default UserStatus; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -9,7 +9,7 @@ interface WordProps { | ... | @@ -9,7 +9,7 @@ interface WordProps { |
9 | setWords: (value: React.SetStateAction<string[]>) => void; | 9 | setWords: (value: React.SetStateAction<string[]>) => void; |
10 | } | 10 | } |
11 | 11 | ||
12 | -export const Word: React.FC<WordProps> = (props) => { | 12 | +const Word: React.FC<WordProps> = (props) => { |
13 | const socket = useContext(SocketContext); | 13 | const socket = useContext(SocketContext); |
14 | 14 | ||
15 | const handleChoose = useCallback(() => { | 15 | const handleChoose = useCallback(() => { |
... | @@ -35,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => { | ... | @@ -35,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => { |
35 | onClick={() => handleChoose()}>{props.word}</button> | 35 | onClick={() => handleChoose()}>{props.word}</button> |
36 | ); | 36 | ); |
37 | } | 37 | } |
38 | + | ||
39 | +export default Word; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -8,7 +8,7 @@ interface CreateLocation { | ... | @@ -8,7 +8,7 @@ interface CreateLocation { |
8 | state: { username: string } | 8 | state: { username: string } |
9 | } | 9 | } |
10 | 10 | ||
11 | -export const Create: React.FC = () => { | 11 | +const Create: React.FC = () => { |
12 | const history = useHistory(); | 12 | const history = useHistory(); |
13 | const socket = useContext(SocketContext); | 13 | const socket = useContext(SocketContext); |
14 | const [ roomName, setRoomName ] = useState(''); | 14 | const [ roomName, setRoomName ] = useState(''); |
... | @@ -54,3 +54,5 @@ export const Create: React.FC = () => { | ... | @@ -54,3 +54,5 @@ export const Create: React.FC = () => { |
54 | </div> | 54 | </div> |
55 | ); | 55 | ); |
56 | } | 56 | } |
57 | + | ||
58 | +export default Create; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -4,7 +4,7 @@ interface RefreshProps { | ... | @@ -4,7 +4,7 @@ interface RefreshProps { |
4 | refreshRooms: () => void | 4 | refreshRooms: () => void |
5 | } | 5 | } |
6 | 6 | ||
7 | -export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { | 7 | +const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { |
8 | return ( | 8 | return ( |
9 | <button className="bg-green-500 active:bg-green-600 | 9 | <button className="bg-green-500 active:bg-green-600 |
10 | text-white uppercase text-xl | 10 | text-white uppercase text-xl |
... | @@ -15,3 +15,5 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { | ... | @@ -15,3 +15,5 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { |
15 | onClick={() => refreshRooms()}>⟳</button> | 15 | onClick={() => refreshRooms()}>⟳</button> |
16 | ); | 16 | ); |
17 | } | 17 | } |
18 | + | ||
19 | +export default Refresh; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -13,7 +13,7 @@ interface RoomBlockProps { | ... | @@ -13,7 +13,7 @@ interface RoomBlockProps { |
13 | room: Room | 13 | room: Room |
14 | } | 14 | } |
15 | 15 | ||
16 | -export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { | 16 | +const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { |
17 | const history = useHistory(); | 17 | const history = useHistory(); |
18 | const socket = useContext(SocketContext); | 18 | const socket = useContext(SocketContext); |
19 | const location: RoomBlockLocation = useLocation(); | 19 | const location: RoomBlockLocation = useLocation(); |
... | @@ -57,3 +57,5 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { | ... | @@ -57,3 +57,5 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { |
57 | </button> | 57 | </button> |
58 | ); | 58 | ); |
59 | } | 59 | } |
60 | + | ||
61 | +export default RoomBlock; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React, { useCallback, useContext, useState } from 'react'; | 1 | import React, { useCallback, useContext, 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 SocketContext from '../contexts/SocketContext'; | 5 | import SocketContext from '../contexts/SocketContext'; |
6 | 6 | ||
7 | -export const Login: React.FC = () => { | 7 | +const Login: React.FC = () => { |
8 | const history = useHistory(); | 8 | const history = useHistory(); |
9 | const socket = useContext(SocketContext); | 9 | const socket = useContext(SocketContext); |
10 | const [ username, setUsername ] = useState(""); | 10 | const [ username, setUsername ] = useState(""); |
... | @@ -51,3 +51,5 @@ export const Login: React.FC = () => { | ... | @@ -51,3 +51,5 @@ export const Login: React.FC = () => { |
51 | </Main> | 51 | </Main> |
52 | ) | 52 | ) |
53 | } | 53 | } |
54 | + | ||
55 | +export default Login; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React, { useCallback, useContext, useEffect, useState } from 'react'; | 1 | import React, { useCallback, useContext, useEffect, useState } from 'react'; |
2 | import { useHistory, useLocation } from 'react-router'; | 2 | import { useHistory, useLocation } 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 { Chat } from '../components/room/Chat'; | 5 | +import Chat from '../components/room/Chat'; |
6 | -import { GameBoard } from '../components/room/GameBoard'; | 6 | +import GameBoard from '../components/room/GameBoard'; |
7 | -import { Ready } from '../components/room/Ready'; | 7 | +import Ready from '../components/room/Ready'; |
8 | -import { RoomInfo } from '../components/room/RoomInfo'; | 8 | +import RoomInfo from '../components/room/RoomInfo'; |
9 | import { RoomData, UpdateRoomUser } from '../components/room/types'; | 9 | import { RoomData, UpdateRoomUser } from '../components/room/types'; |
10 | -import { UserInfo } from '../components/room/UserInfo'; | 10 | +import UserInfo from '../components/room/UserInfo'; |
11 | -import { UserRole } from '../components/room/UserRole'; | 11 | +import UserRole from '../components/room/UserRole'; |
12 | import SocketContext from '../contexts/SocketContext'; | 12 | import SocketContext from '../contexts/SocketContext'; |
13 | 13 | ||
14 | interface RoomLocation { | 14 | interface RoomLocation { |
15 | state: { roomData: RoomData } | 15 | state: { roomData: RoomData } |
16 | } | 16 | } |
17 | 17 | ||
18 | -export const Room: React.FC = () => { | 18 | +const Room: React.FC = () => { |
19 | const history = useHistory(); | 19 | const history = useHistory(); |
20 | const socket = useContext(SocketContext); | 20 | const socket = useContext(SocketContext); |
21 | const location: RoomLocation = useLocation(); | 21 | const location: RoomLocation = useLocation(); |
... | @@ -124,3 +124,5 @@ export const Room: React.FC = () => { | ... | @@ -124,3 +124,5 @@ export const Room: React.FC = () => { |
124 | </Main> | 124 | </Main> |
125 | ); | 125 | ); |
126 | } | 126 | } |
127 | + | ||
128 | +export default Room; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React, { useCallback, useContext, useEffect, useState } from 'react'; | 1 | 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'; | 5 | +import Create from '../components/rooms/Create'; |
6 | -import { Refresh } from '../components/rooms/Refrsh'; | 6 | +import Refresh from '../components/rooms/Refrsh'; |
7 | -import { RoomBlock } from '../components/rooms/RoomBlock'; | 7 | +import RoomBlock from '../components/rooms/RoomBlock'; |
8 | import { Room } from '../components/rooms/types'; | 8 | import { Room } from '../components/rooms/types'; |
9 | import SocketContext from '../contexts/SocketContext'; | 9 | import SocketContext from '../contexts/SocketContext'; |
10 | 10 | ||
11 | -export const Rooms: React.FC = () => { | 11 | +const Rooms: React.FC = () => { |
12 | const history = useHistory(); | 12 | const history = useHistory(); |
13 | const socket = useContext(SocketContext); | 13 | const socket = useContext(SocketContext); |
14 | const [ rooms, setRooms ] = useState<Room[]>([]); | 14 | const [ rooms, setRooms ] = useState<Room[]>([]); |
... | @@ -42,3 +42,5 @@ export const Rooms: React.FC = () => { | ... | @@ -42,3 +42,5 @@ export const Rooms: React.FC = () => { |
42 | </Main> | 42 | </Main> |
43 | ) | 43 | ) |
44 | } | 44 | } |
45 | + | ||
46 | +export default Rooms; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment