Merge pull request #1 from hyeon-9yu/feature/UOSTime#54-2

chat 마크업 수정
gusrb3164 · Aug 7, 2021 · cf49c97 · cf49c97
2 parents 8237e8b + 2068566
commit cf49c97
Show file tree

Hide file tree

Showing 9 changed files with 786 additions and 718 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "sass-loader": "^11.0.1",
     "socket.io-client": "2.3.1",
     "style-loader": "^2.0.0",
+    "swr": "^0.5.6",
     "uuid": "3.4.0",
     "web-vitals": "^1.1.0",
     "webpack": "^5.24.2",

diff --git a/src/utils/api.js b/src/utils/api.js
@@ -3,8 +3,7 @@
 /* eslint-disable prefer-const */
 import axios from 'axios';
 
-
-const { API_URL_BASE } =  process.env;
+const { API_URL_BASE } = process.env;
 
 const makeAPI = (method, path) => {
   return () => {
@@ -15,30 +14,29 @@ const makeAPI = (method, path) => {
       data: {},
 
       setPathParam: (...pathParams) => {
-        const pathVars = pathParams.map(param => `/${param}`)
-                  .reduce((acc, cur) => acc + cur);
-
+        const pathVars = pathParams.map(param => `/${param}`).reduce((acc, cur) => acc + cur);
+
         API.url += pathVars;
         return API;
       },
       setQuery: queries => {
         const queryStr = Object.entries(queries)
-                              .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
-                              .join('&');
+          .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+          .join('&');
         API.url = `${API.url}?${queryStr}`;
-        
+
         return API;
       },
       setBody: body => {
         API.data = body;
 
         return API;
-      }
-    }
+      },
+    };
 
     return API;
-  }
-}
+  };
+};
 
 // API CONFIG OBJECT
 const GET = url => ({ method: 'GET', url });
@@ -47,7 +45,6 @@ const PUT = url => ({ method: 'PUT', url });
 const PATCH = url => ({ method: 'PATCH', url });
 const DELETE = url => ({ method: 'DELETE', url });
 
-
 // API CONFIG LIST
 
 export const API_LOGIN = makeAPI(POST, '/user/login');
@@ -68,17 +65,15 @@ export const API_GET_ALL_LECTURES = makeAPI(GET, '/lecture');
 export const API_UPDATE_LECTURES = makeAPI(PATCH, '/lecture');
 export const API_GET_HISTORIES = makeAPI(GET, '/history');
 
-
-
 const axiosInstance = axios.create({
-  baseURL: `${API_URL_BASE}/api`,
-  timeout: 20000
+  baseURL: 'http://localhost:2021/api',
+  timeout: 20000,
 });
 
 axiosInstance.interceptors.request.use(
   config => {
     const token = window.localStorage.getItem('token');
-    if(token) {
+    if (token) {
       config.headers.Authorization = localStorage.getItem('token');
     }
     return config;
@@ -87,9 +82,9 @@ axiosInstance.interceptors.request.use(
     console.error(error);
 
     alert('서버를 찾을 수 없어요...');
-    return null
-  }
-)
+    return null;
+  },
+);
 
 axiosInstance.interceptors.response.use(
   config => {
@@ -98,16 +93,16 @@ axiosInstance.interceptors.response.use(
   error => {
     const failResponse = error.response;
     return Promise.resolve(failResponse);
-  }
-)
+  },
+);
 
 export async function requestAPI(apiConfig, data) {
   const config = {
     url: apiConfig.url,
     method: apiConfig.method,
-    data: data ? data : apiConfig.data
+    data: data ? data : apiConfig.data,
   };
-  try{
+  try {
     const response = await axiosInstance.request(config);
 
     // for test
@@ -117,7 +112,7 @@ export async function requestAPI(apiConfig, data) {
     return response;
   } catch (error) {
     console.error('Error', error);
-    
+
     return null;
   }
 }
diff --git a/src/views/chat/MainMenu.jsx b/src/views/chat/MainMenu.jsx
@@ -1,29 +1,29 @@
 import React from 'react';
 import { Menu, MenuItem } from '@material-ui/core';
 
-export default function MainMenu({anchorEl, open, onClose, options}) {
-    return (
-        <Menu
-            id="long-menu"
-            anchorEl={anchorEl}
-            getContentAnchorEl={null}
-            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-            transformOrigin={{ vertical: "top", horizontal: "right" }}
-            keepMounted
-            open={open}
-            onClose={onClose}
-            PaperProps={{
-            style: {
-                maxHeight: 48 * 4.5,
-                width: '20ch',
-            },
-            }}
-        >
-            {options.map((option) => (
-            <MenuItem key={option} selected={option === 'Pyxis'}>
-                {option}
-            </MenuItem>
-            ))}
-        </Menu>
-    )
-}
+export default function MainMenu({ anchorEl, open, onClose, options }) {
+  return (
+    <Menu
+      id="long-menu"
+      anchorEl={anchorEl}
+      getContentAnchorEl={null}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      keepMounted
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        style: {
+          maxHeight: 48 * 4.5,
+          width: '20ch',
+        },
+      }}
+    >
+      {options.map(option => (
+        <MenuItem key={option} selected={option === 'Pyxis'}>
+          {option}
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+}
diff --git a/src/views/chat/RoomInfoMenu.jsx b/src/views/chat/RoomInfoMenu.jsx
@@ -4,58 +4,56 @@ import { userInfoDialogState } from '@states/UserInfoDialog';
 import { makeStyles, Menu, MenuItem, Typography } from '@material-ui/core';
 import userIcon from '@img/fontawesome/chat-user.svg';
 
-export default function RoomInfoMenu({anchorEl, chatRoom, open, onClose}) {
-    const setUserInfoDialog = useSetRecoilState(userInfoDialogState);
-
-    const classes = useStyles();
+export default function RoomInfoMenu({ anchorEl, chatRoom, open, onClose }) {
+  const setUserInfoDialog = useSetRecoilState(userInfoDialogState);
 
-    const options = JSON.stringify(chatRoom)!=='{}' ? chatRoom.participants : [];
-
-    const onItemClick = (e) => {
-        const userId = e.currentTarget.getAttribute('name');
+  const classes = useStyles();
 
-        setUserInfoDialog({
-            userId: userId,
-            open: true
-        });
-    }
+  const options = JSON.stringify(chatRoom) !== '{}' ? chatRoom.participants : [];
 
-    return (
-        <Menu
-            id="long-menu"
-            anchorEl={anchorEl}
-            getContentAnchorEl={null}
-            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-            transformOrigin={{ vertical: "top", horizontal: "center" }}
-            keepMounted
-            open={open}
-            onClose={onClose}
-            PaperProps={{
-            style: {
-                maxHeight: 48 * 4.5,
-                width: '20ch',
-            },
-            }}
-        >
-            {
-                options.map((option, idx) => (
-                    <MenuItem name={option._id} key={idx} selected={option === 'Pyxis'} onClick={onItemClick}>
-                        <img className={classes.icon} src={userIcon} />
-                        <Typography className={classes.name}>{option.name}</Typography>
-                    </MenuItem>
-                    ))
-            }
-        </Menu>
-    )
+  const onItemClick = e => {
+    const userId = e.currentTarget.getAttribute('name');
+
+    setUserInfoDialog({
+      userId: userId,
+      open: true,
+    });
+  };
+
+  return (
+    <Menu
+      id="long-menu"
+      anchorEl={anchorEl}
+      getContentAnchorEl={null}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+      keepMounted
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        style: {
+          maxHeight: 48 * 4.5,
+          width: '20ch',
+        },
+      }}
+    >
+      {options.map((option, idx) => (
+        <MenuItem name={option._id} key={idx} selected={option === 'Pyxis'} onClick={onItemClick}>
+          <img className={classes.icon} src={userIcon} />
+          <Typography className={classes.name}>{option.name}</Typography>
+        </MenuItem>
+      ))}
+    </Menu>
+  );
 }
 
 const useStyles = makeStyles({
-    icon: {
-        width: '30px',
-        height: '30px',
-        marginRight: '5px'
-    },
-    name: {
-        textAlign: 'center'
-    }
-})
+  icon: {
+    width: '30px',
+    height: '30px',
+    marginRight: '5px',
+  },
+  name: {
+    textAlign: 'center',
+  },
+});