Merge pull request #307 from SWM-FIRE/dev

fix minor erros

src/adapters/roomConnection.ts → src/adapters/useRoomConnection.ts

@@ -1,5 +1,4 @@
 import { toast } from 'react-hot-toast';
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import connectedUsersStore from '../stores/room/connectedUsersStore';
@@ -13,7 +12,7 @@ import mediaStateChange from './mediaStateChange';
 import { SOCKET_EVENT } from './event.enum';
 import { getUser } from '../api/main';
 
-export const roomConnection = (roomId: string) => {
+export const useRoomConnection = (roomId: string) => {
   const navigate = useNavigate();
   const {
     connectedUsers,

src/components/main/CheckInvite.tsx

@@ -13,8 +13,8 @@ export default function CheckInvite({
   const navigate = useNavigate();
 
   const { isLoading, data, error } = useRoom(inviteCode);
-  if (isLoading) return null;
-  if (error) return null;
+  if (isLoading) return <div>loading</div>;
+  if (error) return <div>error</div>;
 
   const refuseInvite = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();

src/components/main/block/filterBlock.ts

@@ -21,7 +21,7 @@ export const filterBlock = (data, searchInput: string) => {
     if (a.current < b.current) {
       return 1;
     }
-    return b.itemId - a.itemId;
+    return Date.parse(b.createdAt) - Date.parse(a.createdAt);
   });
   return newData;
 };

src/components/main/lobby/Chatting.tsx

@@ -10,16 +10,6 @@ export default function Chat() {
   const { messages } = lobbyMessageStore();
   const { uid } = userStore();
 
-  useEffect(() => {
-    moveScrollToReceiveMessage('auto', true);
-  }, []);
-
-  useEffect(() => {
-    if (messages[messages.length - 1]?.uid === uid)
-      moveScrollToReceiveMessage('smooth', true);
-    else moveScrollToReceiveMessage('smooth', false);
-  }, [messages]);
-
   const moveScrollToReceiveMessage = useCallback(
     (behavior: string, isFirstView: boolean) => {
       if (chatWindow.current) {
@@ -37,6 +27,16 @@ export default function Chat() {
     [],
   );
 
+  useEffect(() => {
+    moveScrollToReceiveMessage('auto', true);
+  }, [moveScrollToReceiveMessage]);
+
+  useEffect(() => {
+    if (messages[messages.length - 1]?.uid === uid)
+      moveScrollToReceiveMessage('smooth', true);
+    else moveScrollToReceiveMessage('smooth', false);
+  }, [messages, moveScrollToReceiveMessage, uid]);
+
   return (
     <Component>
       <ChattingList ref={chatWindow}>

src/components/main/lobby/Participants.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
+import { ConnectedUserInterface } from 'src/interface/user.interface';
 import SingleParticipant from './SingleParticipant';
 
 export default function Participants({ connectedUsers }) {
   return (
     <Container>
-      {connectedUsers.map((user) => {
+      {connectedUsers.map((user: ConnectedUserInterface) => {
         return <SingleParticipant user={user} key={user?.uid} />;
       })}
     </Container>

src/components/main/roomPasswordModal/RoomPasswordModal.tsx

@@ -14,6 +14,7 @@ export default React.memo(function RoomPasswordModal({
 }) {
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
+
   useEffect(() => {
     if (roomSocket.socket === null) {
       generateSocket();
@@ -31,12 +32,13 @@ export default React.memo(function RoomPasswordModal({
       });
   }, [closeModal, navigate, roomId, password]);
 
-  const onChange = (event) => {
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     event.preventDefault();
     setPassword(event.target.value);
   };
+
   const onSubmit = useCallback(
-    (event) => {
+    (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
       roomSocket.socket?.emit('canJoinRoom', {
         room: roomId.toString(),
@@ -45,12 +47,7 @@ export default React.memo(function RoomPasswordModal({
     },
     [password, roomId],
   );
-  const isDisabled = () => {
-    if (password?.length === 4) {
-      return false;
-    }
-    return true;
-  };
+
   return (
     <ModalBackground onClick={closeModal}>
       <ModalBox onClick={(e) => e.stopPropagation()}>
@@ -73,7 +70,7 @@ export default React.memo(function RoomPasswordModal({
             maxLength={4}
             minLength={4}
           />
-          <Button disabled={isDisabled()}>확인</Button>
+          <Button disabled={password.length !== 4}>확인</Button>
         </Form>
       </ModalBox>
     </ModalBackground>

src/components/ready/RoomDetail.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
+import { PermissionName } from 'src/interface/video.interface';
 import Card from './card/Card';
 
 export default function RoomDetail({ roomNo: roomId, setIsPrompt }) {
   const navigate = useNavigate();
 
-  // eslint-disable-next-line no-undef
   const permissionName = 'microphone' as PermissionName;
   const checkValid = !!navigator.permissions?.query;
 

src/components/room/screenShare/AudioTracking.tsx

@@ -7,7 +7,7 @@ export default function AudioTracking({ stream }) {
   const [vol, setVol] = useState<number>(0);
 
   useEffect(() => {
-    let myInterval;
+    let myInterval: ReturnType<typeof setInterval>;
     if (stream && stream.getAudioTracks().length > 0) {
       const { analyser, bufferLength, dataArray } = audioContext(stream);
       myInterval = setInterval(() => {

src/components/room/sideBar/SingleParticipant.tsx

@@ -5,7 +5,7 @@ import MyAvatar from '../../../assets/avatar/MyAvatar';
 import { ReactComponent as MicOn } from '../../../assets/svg/SmallMicOn.svg';
 import { ReactComponent as MicOff } from '../../../assets/svg/SmallMicOff.svg';
 import { ReactComponent as Crown } from '../../../assets/svg/Crown.svg';
-import VideoUserInterface from '../../../interface/VideoUser.interface';
+import { videoUserInterface } from '../../../interface/video.interface';
 
 export default function SingleParticipant({
   isMe,
@@ -14,7 +14,7 @@ export default function SingleParticipant({
 }: {
   isMe: boolean;
   moderator: number;
-  user: VideoUserInterface;
+  user: videoUserInterface;
 }) {
   const [showSideProfile, setShowSideProfile] = useState<boolean>(false);
 

src/components/room/sideProfileModal/ControlVolume.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ReactComponent as VolumeOn } from '../../../assets/svg/VolumeOn.svg';
 import { ReactComponent as VolumeOff } from '../../../assets/svg/VolumeOff.svg';
-import VideoUserInterface from '../../../interface/VideoUser.interface';
+import { videoUserInterface } from '../../../interface/video.interface';
 import connectedUsersStore from '../../../stores/room/connectedUsersStore';
 
-export default function ControlVolume({ user }: { user: VideoUserInterface }) {
+export default function ControlVolume({ user }: { user: videoUserInterface }) {
   const { setVolumeByUid } = connectedUsersStore();
   const [userSpeaker, setUserSpeaker] = useState(user.enabledAudio);
   const [newVolume, setNewVolume] = useState<number>(

src/components/room/sideProfileModal/SideProfileModal.tsx

@@ -11,7 +11,7 @@ import UserInfo from './UserInfo';
 import Buttons from './Buttons';
 import FriendButtons from './FriendButtons';
 import ControlVolume from './ControlVolume';
-import VideoUserInterface from '../../../interface/VideoUser.interface';
+import { videoUserInterface } from '../../../interface/video.interface';
 
 export default function SideProfileModal({
   toggle,
@@ -21,7 +21,7 @@ export default function SideProfileModal({
 }: {
   toggle: React.Dispatch<React.SetStateAction<boolean>>;
   isMe: boolean;
-  user: VideoUserInterface;
+  user: videoUserInterface;
   moderator: number;
 }) {
   const { roomId } = useParams();

src/interface/block.interface.ts

@@ -9,6 +9,8 @@ export default interface blockInterface {
   tags: string[];
   current: number;
   total: number;
+  // string으로 받지만 사용시에 parse하여 사용
+  createdAt: string;
   theme: string;
   isPublic: boolean;
 }

src/interface/user.interface.ts

@@ -3,3 +3,10 @@ export default interface User {
   nickname: string;
   uid?: number;
 }
+
+export interface ConnectedUserInterface {
+  nickname: string;
+  uid: number;
+  avatar: number;
+  sid: string;
+}

src/interface/video.interface.ts

@@ -0,0 +1,18 @@
+export type PermissionName =
+  | 'geolocation'
+  | 'notifications'
+  | 'persistent-storage'
+  | 'push'
+  | 'screen-wake-lock'
+  | 'xr-spatial-tracking';
+
+export interface videoUserInterface {
+  nickname: string;
+  uid: number;
+  avatar: number;
+  sid: string;
+  enabledVideo: boolean;
+  enabledAudio: boolean;
+  isAlreadyEntered: boolean;
+  volume: number;
+}

src/pages/Ready.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
+import { PermissionName } from 'src/interface/video.interface';
 import { useCreateMediaStream } from '../hooks/useCreateMediaStream';
 import UserMediaStreamStore from '../stores/room/userMediaStreamStore';
 import SettingModal from '../components/atoms/settingModal/SettingModal';
@@ -21,7 +22,6 @@ export default function ReadyPage() {
   const [isSetting, setIsSetting] = useState(false);
 
   useEffect(() => {
-    // eslint-disable-next-line no-undef
     const permissionName = 'microphone' as PermissionName;
     const checkValid = !!navigator.permissions?.query;
 

src/pages/Room.tsx

@@ -4,7 +4,7 @@ import { Toaster } from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
 import { getTheme } from '../styles/getTheme';
 import onChatMessage from '../adapters/receiveMessage';
-import { roomConnection } from '../adapters/roomConnection';
+import { useRoomConnection } from '../adapters/useRoomConnection';
 import useRoom from '../hooks/useRoom';
 import usePeerConnection from '../hooks/usePeerConnection';
 import usePopHistory from '../hooks/usePopHistory';
@@ -49,7 +49,7 @@ export default function Room() {
   }, [setYoutubeModal]);
   const theme = getTheme(data?.theme);
 
-  roomConnection(roomId);
+  useRoomConnection(roomId);
   onChatMessage(roomId);
   usePeerConnection();
   usePopHistory(roomId);

src/stores/connectedLobbyUsers.ts

@@ -1,20 +1,14 @@
 /* eslint-disable no-unused-vars */
 import create from 'zustand';
-
-interface User {
-  nickname: string;
-  uid: number;
-  avatar: number;
-  sid: string;
-}
+import { ConnectedUserInterface } from 'src/interface/user.interface';
 
 interface connectedUsers {
-  connectedUsers: User[];
-  setUsers: (_users: User[]) => void;
-  appendUser: (_user: User) => void;
+  connectedUsers: ConnectedUserInterface[];
+  setUsers: (_users: ConnectedUserInterface[]) => void;
+  appendUser: (_user: ConnectedUserInterface) => void;
   removeUser: (_user: string) => void;
-  findUserBySid: (_sid: string) => User;
-  findUserByUid: (_uid: number) => User;
+  findUserBySid: (_sid: string) => ConnectedUserInterface;
+  findUserByUid: (_uid: number) => ConnectedUserInterface;
 }
 const connectedLobbyUsers = create<connectedUsers>((set, get) => ({
   connectedUsers: [],