From 296d033848bf5df369ca24c28e537af315652889 Mon Sep 17 00:00:00 2001 From: outsung Date: Fri, 19 Feb 2021 03:09:53 +0900 Subject: [PATCH] added connect with server for room --- src/container/favorites/index.ts | 23 +++++++++ src/container/riot/index.ts | 16 ------- src/container/room/index.ts | 56 ++++++++++++++++++++++ src/container/users/index.ts | 22 --------- src/pages/Studio/Favorites/index.ts | 2 +- src/pages/Studio/Room/index.tsx | 74 ++++++++++++++++++++++++----- src/pages/Studio/index.tsx | 45 ++++++++---------- src/utils/socket.ts | 13 +++++ 8 files changed, 175 insertions(+), 76 deletions(-) create mode 100644 src/container/favorites/index.ts delete mode 100644 src/container/riot/index.ts create mode 100644 src/container/room/index.ts create mode 100644 src/utils/socket.ts diff --git a/src/container/favorites/index.ts b/src/container/favorites/index.ts new file mode 100644 index 0000000..05b370e --- /dev/null +++ b/src/container/favorites/index.ts @@ -0,0 +1,23 @@ +import callApi from '../../utils/api'; + +export type getFavoritesRes = { + result: 1 | -1; + favorites: string[]; +}; +export const getFavorites = function () { + return callApi.get<{}, getFavoritesRes>(`users/favorites`); +}; + +export type patchFavoritesReq = { + favorites: string[]; +}; +export type patchFavoritesRes = { + result: 1 | -1; + favorites: string[]; +}; +export const patchFavorites = function (req: patchFavoritesReq) { + return callApi.patch( + `users/favorites`, + req, + ); +}; diff --git a/src/container/riot/index.ts b/src/container/riot/index.ts deleted file mode 100644 index 7eeb870..0000000 --- a/src/container/riot/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import callApi from '../../utils/api'; - -export type updateLolInfoRes = { - result: 1 | -1; - idx: string; - id: string; - nickname: string; - profileImageUrl: string; - lolTear: string; - lolLevel: string; - lolLane: string; - lolChampion: string; -}; -export const updateLolInfo = function (idx: string) { - return callApi.get<{}, updateLolInfoRes>(`users/lolInfo/${idx}`); -}; diff --git a/src/container/room/index.ts b/src/container/room/index.ts new file mode 100644 index 0000000..0e95822 --- /dev/null +++ b/src/container/room/index.ts @@ -0,0 +1,56 @@ +import callApi from '../../utils/api'; + +export type getRoomRes = { + result: 1 | -1; + room: string[]; +}; +export const getRoom = function () { + return callApi.get<{}, getRoomRes>(`users/room`); +}; + +export type patchRoomReq = { + room: string[]; +}; +export type patchRoomRes = { + result: 1 | -1; + room: string[]; +}; +export const patchRoom = function (req: patchRoomReq) { + return callApi.patch(`users/room`, req); +}; + +export type message = { + _id: string; + writer: string; + contents: string; + date: Date; + read: number; +}; +export type getRoomByJwtAndIdxRes = { + result: 1 | -1; + _id: string; + users: string[]; + messages: message[]; +}; +export const getRoomByJwtAndIdx = function (_id: string) { + return callApi.get<{}, getRoomByJwtAndIdxRes>(`rooms/user/${_id}`); +}; + +export type addMessageInRoomReq = { + contents: string; +}; +export type addMessageInRoomRes = { + result: 1 | -1; + _id: string; + users: string[]; + messages: message[]; +}; +export const addMessageInRoom = function ( + _id: string, + req: addMessageInRoomReq, +) { + return callApi.post( + `rooms/${_id}`, + req, + ); +}; diff --git a/src/container/users/index.ts b/src/container/users/index.ts index 9cd2d31..41e0290 100644 --- a/src/container/users/index.ts +++ b/src/container/users/index.ts @@ -146,25 +146,3 @@ export type patchUserRes = { export const patchUser = function (req: patchUserReq) { return callApi.patch(`users`, req); }; - -export type getFavoritesRes = { - result: 1 | -1; - favorites: string[]; -}; -export const getFavorites = function () { - return callApi.get<{}, getFavoritesRes>(`users/favorites`); -}; - -export type patchFavoritesReq = { - favorites: string[]; -}; -export type patchFavoritesRes = { - result: 1 | -1; - favorites: string[]; -}; -export const patchFavorites = function (req: patchFavoritesReq) { - return callApi.patch( - `users/favorites`, - req, - ); -}; diff --git a/src/pages/Studio/Favorites/index.ts b/src/pages/Studio/Favorites/index.ts index ea5b347..d0fd28c 100644 --- a/src/pages/Studio/Favorites/index.ts +++ b/src/pages/Studio/Favorites/index.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { getFavorites, patchFavorites } from '../../../container/users'; +import { getFavorites, patchFavorites } from '../../../container/favorites'; export default function useFavorites() { const [favorites, setFavorites] = useState([]); diff --git a/src/pages/Studio/Room/index.tsx b/src/pages/Studio/Room/index.tsx index 3d5d944..b24ecba 100644 --- a/src/pages/Studio/Room/index.tsx +++ b/src/pages/Studio/Room/index.tsx @@ -1,4 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; + +import { + getRoom, + getRoomByJwtAndIdx, + getRoomByJwtAndIdxRes, +} from '../../../container/room'; import { RoomBox, @@ -15,9 +21,18 @@ const TEST = 'https://s3.us-west-2.amazonaws.com/secure.notion-static.com/8d66f61f-4cde-446b-8046-170777277cd9/outsung.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210216%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210216T105108Z&X-Amz-Expires=86400&X-Amz-Signature=9abea07855cccd82aa1623cb1a22520d092eff97b4b09c52b27a4110ae74ada8&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22outsung.png%22'; export function useRoom() { + const [room, setRoom] = useState([]); const [focusRoom, setFocusRoom] = useState(''); const roomClicked = Boolean(focusRoom); + const init = async () => { + const res = await getRoom(); + setRoom(res && res.result === 1 && res.room ? res.room : []); + }; + useEffect(() => { + init(); + }, []); + const onFocusRoom = (_id: string) => { setFocusRoom(_id); }; @@ -25,16 +40,17 @@ export function useRoom() { setFocusRoom(''); }; - return { roomClicked, focusRoom, onFocusRoom, onBlurRoom }; + return { room, roomClicked, focusRoom, onFocusRoom, onBlurRoom }; } type roomProps = { isMain: boolean; favorites: string[]; + room: string[]; onFocusRoom: (_id: string) => void; // itemClick: () => void; }; -export function Room({ isMain, favorites, onFocusRoom }: roomProps) { +export function Room({ isMain, favorites, room, onFocusRoom }: roomProps) { const isFavorites = Boolean(favorites.length); const itemClick = (e: React.MouseEvent) => { @@ -46,19 +62,15 @@ export function Room({ isMain, favorites, onFocusRoom }: roomProps) { - {/* 즐겨찾기 */} {favorites.map((f, k) => ( ))} - - test1 - - - test2 - + {room.map((r, k) => ( + + ))} + @@ -75,11 +87,47 @@ export function RoomPage({ focusRoom, onBlurRoom, }: roomPageProps) { + const [room, setRoom] = useState(); + + const init = useCallback(async () => { + if (!focusRoom) return; + setRoom(undefined); + + const res = await getRoomByJwtAndIdx(focusRoom); + if (res && res.result === 1) setRoom(res); + }, [focusRoom]); + useEffect(() => { + init(); + }, [init]); + return ( -

제작중...

-
나와 {focusRoom}유저의 체팅 방
- 돌아가기 + {room ? ( + <> +

{room._id}

+

{room.users}

+
+ {room.messages.map((m, k) => ( +
+

{m._id}

+

{m.contents}

+

{m.date}

+

{m.read}

+

{m.writer}

+
+ ))} +
+ + ) : ( +
...
+ )} + { + onBlurRoom(); + }} + > + 돌아가기 + ); } diff --git a/src/pages/Studio/index.tsx b/src/pages/Studio/index.tsx index 513663d..e354069 100644 --- a/src/pages/Studio/index.tsx +++ b/src/pages/Studio/index.tsx @@ -1,11 +1,14 @@ -import React, { Suspense, useEffect, useState, useRef } from 'react'; +import React, { + Suspense, + useEffect, + useState, + useRef, + useCallback, +} from 'react'; // import * as THREE from 'three'; import { Canvas } from 'react-three-fiber'; import { softShadows } from '@react-three/drei'; import { Physics } from '@react-three/cannon'; -import socketio from 'socket.io-client'; - -import callCookie from '../../utils/cookie'; import { PhyPlane, PhyString } from '../../components/Phy'; import { PhyBoxInfo } from './PhyBoxInfo'; @@ -14,6 +17,7 @@ import { Mypage, PhyBoxMypage, useMypage } from './Mypage'; import useFavorites from './Favorites'; import { Room, RoomPage, useRoom } from './Room'; +import callSocket from '../../utils/socket'; // import Controls from '../../utils/Controls'; import Loader from '../../components/Loader'; import history from '../../utils/browserHistory'; @@ -40,10 +44,8 @@ function getRandomArbitrary(min: number, max: number) { softShadows({}); -const serverUrl = - 'https://duo-serverrr.herokuapp.com' || 'http://localhost:5000'; - function Studio() { + const socket = useRef({} as SocketIOClient.Socket); const [mypageClicked, setMypageClicked] = useState(false); const [optionClicked, setOptionClicked] = useState(false); const [clicked, setClicked] = useState(); @@ -53,29 +55,23 @@ function Studio() { const { favorites, addFavorites, removeFavorites } = useFavorites(); const { me, newMe, changeNewMe, onSaveNewMe, onCancelNewMe } = useMypage(); - const { roomClicked, focusRoom, onFocusRoom, onBlurRoom } = useRoom(); + const { room, roomClicked, focusRoom, onFocusRoom, onBlurRoom } = useRoom(); - const init = async function () { + const init = useCallback(async () => { setUsers(await allget()); - }; - - useEffect(() => { - init(); - }, []); - - useEffect(() => { - const socket = socketio.connect( - `${serverUrl}?auth=${callCookie.get('jwt')}`, - ); - socket.emit('login'); - socket.on('online', (onlineString: string[]) => { + socket.current = callSocket.connect(); + socket.current.emit('login'); + socket.current.on('online', (onlineString: string[]) => { setOnlineUsersIdx(onlineString); }); + }, []); - return function () { - socket.disconnect(); + useEffect(() => { + init(); + return () => { + callSocket.disconnect(socket.current); }; - }, []); + }, [init]); const clickUpdateBtn = async (_id: string) => { if (!users) return; @@ -138,6 +134,7 @@ function Studio() { !(roomClicked || mypageClicked || optionClicked || Boolean(clicked)) } favorites={favorites} + room={room} onFocusRoom={onFocusRoom} /> + socketio.connect( + `${process.env.REACT_APP_API_URL?.replace( + '/api/', + '', + )}?auth=${callCookie.get('jwt')}`, + ), + disconnect: (socket: SocketIOClient.Socket) => socket.disconnect(), +};