add: Alert

tmuramat081 · Jun 11, 2024 · 99fc556 · 99fc556
1 parent b319db8
commit 99fc556
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/frontend/src/components/chat/dmPage/dmPage.tsx b/frontend/src/components/chat/dmPage/dmPage.tsx
@@ -1,7 +1,7 @@
 /*eslint-disable*/
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
-import Image from 'next/image';
+import Alert from '@mui/material/Alert';
 import { Avatar } from '@mui/material';
 import { useRouter } from 'next/navigation';
 import { useWebSocket } from '@/providers/webSocketProvider';
@@ -28,7 +28,10 @@ export default function DMPage({ params }: { params: string }) {
   const [blocked, setBlocked] = useState(false);
   const { socket: gameSocket } = useSocketStore();
   const { invitedFriendState } = useInvitedFriendStrore();
-  const updateInvitedFriendState = useInvitedFriendStrore((state) => state.updateInvitedFriendState);
+  const updateInvitedFriendState = useInvitedFriendStrore(
+    (state) => state.updateInvitedFriendState,
+  );
+  const [errorMessage, setErrorMessages] = useState<string>('');
 
   useEffect(() => {
     if (!socket || !params) return;
@@ -168,7 +171,7 @@ export default function DMPage({ params }: { params: string }) {
     const invitation: Invitation = {
       guestId: receiver.userId,
       hostId: loginUser.userId,
-    }
+    };
     gameSocket.emit('inviteFriend', invitation, (res: boolean) => {
       if (res) {
         console.log('Invited friend');
@@ -178,27 +181,29 @@ export default function DMPage({ params }: { params: string }) {
         console.error('Failed to invite friend');
       }
     });
-
   }, [socket, sender, receiver]);
 
   // 招待を受け入れる
-  const handleJoinClick = useCallback((friend: Friend) => {
-    // console.log(friend)
-    if (loginUser && socket) {
-      const match: Invitation = {
-        guestId: loginUser.userId,
-        hostId: friend.userId,
-      };
-      // console.log(match)
-      socket.emit('acceptInvitation', match, (res: boolean) => {
-        if (!res) {
-          // error表示
-          //setOpenDialogError(true);
-          console.error('Failed to accept invitation');
-        }
-      })
-    }
-  }, [loginUser, socket, receiver]);
+  const handleJoinClick = useCallback(
+    (friend: Friend) => {
+      // console.log(friend)
+      if (loginUser && socket) {
+        const match: Invitation = {
+          guestId: loginUser.userId,
+          hostId: friend.userId,
+        };
+        // console.log(match)
+        socket.emit('acceptInvitation', match, (res: boolean) => {
+          if (!res) {
+            // error表示
+            //setOpenDialogError(true);
+            console.error('Failed to accept invitation');
+          }
+        });
+      }
+    },
+    [loginUser, socket, receiver],
+  );
 
   const handleGoToGame = () => {
     if (!loginUser || !receiver || !socket) return;
@@ -214,7 +219,7 @@ export default function DMPage({ params }: { params: string }) {
         //setOpenDialogError(true);
         console.error('Failed to accept invitation');
       }
-    })    
+    });
     router.push('/game/index');
   };
 
@@ -223,6 +228,7 @@ export default function DMPage({ params }: { params: string }) {
 
   return (
     <div className="dm-container">
+      {errorMessage && <Alert severity="error">{errorMessage}</Alert>}
       {/* Backボタン */}
       <div className="back-button">
         <button

diff --git a/frontend/src/components/chat/roomPage/roomPage.tsx b/frontend/src/components/chat/roomPage/roomPage.tsx
@@ -3,6 +3,7 @@
 'use client';
 import React, { useState, useEffect, useCallback, use } from 'react';
 import Avatar from '@mui/material/Avatar';
+import Alert from '@mui/material/Alert';
 import { useWebSocket } from '@/providers/webSocketProvider';
 import { useAuth } from '@/providers/useAuth';
 import { UserInfo, ChatMessage, Room } from '@/types/chat/chat';
@@ -34,6 +35,7 @@ export default function RoomPage({ params }: { params: string }) {
   const [isPasswordVerified, setIsPasswordVerified] = useState(false);
   const [isPermissionGranted, setIsPermissionGranted] = useState(false);
   const [message, setMessage] = useState('');
+  const [errorMessage, setErrorMessages] = useState<string>('');
 
   useEffect(() => {
     if (!socket || !params) return;
@@ -44,7 +46,7 @@ export default function RoomPage({ params }: { params: string }) {
       .then((user) => {
         socket.emit('getUserCurrent', user);
         socket.emit('getAllUsers', user);
-        socket.emit('getRoomInfo', { user, params });
+        socket.emit('getRoomInfo', { user, roomId });
       })
       .catch((error) => {
         console.error('Error getting user:', error);
@@ -274,6 +276,7 @@ export default function RoomPage({ params }: { params: string }) {
         </div>
       ) : (
         <>
+          {errorMessage && <Alert severity="error">{errorMessage}</Alert>}
           {/* 戻るボタン */}
           <div className="back-button">
             <button