added connect with server for room

outsung · Feb 18, 2021 · 296d033 · 296d033
1 parent 3ab5e5a
commit 296d033
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 76 deletions.
diff --git a/src/container/favorites/index.ts 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<patchFavoritesReq, patchFavoritesRes>(
+    `users/favorites`,
+    req,
+  );
+};
diff --git a/src/container/riot/index.ts b/src/container/riot/index.ts
diff --git a/src/container/room/index.ts 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<patchRoomReq, patchRoomRes>(`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<addMessageInRoomReq, addMessageInRoomRes>(
+    `rooms/${_id}`,
+    req,
+  );
+};
diff --git 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<patchUserReq, updateLolInfoRes>(`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<patchFavoritesReq, patchFavoritesRes>(
-    `users/favorites`,
-    req,
-  );
-};
diff --git 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<string[]>([]);

diff --git 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,26 +21,36 @@ 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<string[]>([]);
   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);
   };
   const onBlurRoom = () => {
     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<HTMLDivElement, MouseEvent>) => {
@@ -46,19 +62,15 @@ export function Room({ isMain, favorites, onFocusRoom }: roomProps) {
     <RoomBox className={isMain ? '' : 'right'}>
       <RoomBoxUl>
         <RoomBoxFavorites className={isFavorites ? '' : 'off'}>
-          {/* 즐겨찾기 */}
           {favorites.map((f, k) => (
             <RoomBoxItem key={k} onClick={itemClick} url={TEST} data-idx={f} />
           ))}
         </RoomBoxFavorites>
         <RoomBoxDivider className={isFavorites ? '' : 'off'} />
         <RoomBoxLately>
-          <RoomBoxItem style={{ fontSize: '15px' }} onClick={itemClick}>
-            test1
-          </RoomBoxItem>
-          <RoomBoxItem style={{ fontSize: '15px' }} onClick={itemClick}>
-            test2
-          </RoomBoxItem>
+          {room.map((r, k) => (
+            <RoomBoxItem key={k} onClick={itemClick} data-idx={r} />
+          ))}
         </RoomBoxLately>
         <RoomBoxItem onClick={itemClick}>+</RoomBoxItem>
       </RoomBoxUl>
@@ -75,11 +87,47 @@ export function RoomPage({
   focusRoom,
   onBlurRoom,
 }: roomPageProps) {
+  const [room, setRoom] = useState<getRoomByJwtAndIdxRes>();
+
+  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 (
     <RoomPageBox className={roomClicked ? 'on' : ''}>
-      <h1>제작중...</h1>
-      <div>나와 {focusRoom}유저의 체팅 방</div>
-      <RoomPageBoxBackBtn onClick={onBlurRoom}>돌아가기</RoomPageBoxBackBtn>
+      {room ? (
+        <>
+          <h1>{room._id}</h1>
+          <h1>{room.users}</h1>
+          <div>
+            {room.messages.map((m, k) => (
+              <div key={k}>
+                <h3>{m._id}</h3>
+                <h3>{m.contents}</h3>
+                <h3>{m.date}</h3>
+                <h3>{m.read}</h3>
+                <h3>{m.writer}</h3>
+              </div>
+            ))}
+          </div>
+        </>
+      ) : (
+        <div>...</div>
+      )}
+      <RoomPageBoxBackBtn
+        onClick={() => {
+          onBlurRoom();
+        }}
+      >
+        돌아가기
+      </RoomPageBoxBackBtn>
     </RoomPageBox>
   );
 }
diff --git 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<string>();
@@ -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}
       />
       <RoomPage

diff --git a/src/utils/socket.ts b/src/utils/socket.ts
@@ -0,0 +1,13 @@
+import socketio from 'socket.io-client';
+import callCookie from './cookie';
+
+export default {
+  connect: () =>
+    socketio.connect(
+      `${process.env.REACT_APP_API_URL?.replace(
+        '/api/',
+        '',
+      )}?auth=${callCookie.get('jwt')}`,
+    ),
+  disconnect: (socket: SocketIOClient.Socket) => socket.disconnect(),
+};