Merge pull request #25 from like-minded-nus/staging

use toast to notify report
like-minded-nus · Apr 25, 2024 · ac8590d · ac8590d
2 parents 4dbd75c + cba8bdb
commit ac8590d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/app/matches/chatroom/chatroom.tsx b/app/matches/chatroom/chatroom.tsx
@@ -14,7 +14,7 @@ import { useSearchParams } from 'next/navigation';
 import { GoReport } from 'react-icons/go';
 import ReportModal from './report-modal';
 import ChatroomVouchertModal from './chatroom-voucher-modal';
-import { FaCropSimple } from 'react-icons/fa6';
+import { toast, Toaster } from 'sonner';
 
 const Chatroom = () => {
   // Redux store
@@ -38,6 +38,7 @@ const Chatroom = () => {
   const [profiles, setProfiles] = useState([]);
   const [commonPassionsList, setCommonPassionsList] = useState([]);
   const [commonPassionIds, setCommonPassionIds] = useState<number[]>([]);
+  const [isUserReported, setIsUserReported] = useState<boolean>(false);
 
   const messagesEndRef = useRef<null | HTMLDivElement>(null);
   const messagesContainerRef = useRef<null | HTMLDivElement>(null);
@@ -393,10 +394,21 @@ const Chatroom = () => {
     setInputValue('');
   };
 
+  useEffect(() => {
+    if (isUserReported === true) {
+      toast.success('User is reported!', {
+        duration: 2000,
+      });
+      setIsUserReported(false);
+    }
+  }, [isUserReported]);
+
   return (
     <div className='my-4 flex h-[92%] w-[77.5dvw] flex-col items-center justify-start'>
+      <Toaster />
       <ReportModal
         isOpen={reportModalIsOpen}
+        setIsUserReported={setIsUserReported}
         reportedUserId={receiverUserId}
         reportedByUserId={sessionProfile.userId}
         onClose={() => setReportModalIsOpen(false)}

diff --git a/app/matches/chatroom/report-modal.tsx b/app/matches/chatroom/report-modal.tsx
@@ -6,13 +6,15 @@ import { Passion } from '@/models/passion';
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
+  setIsUserReported: (a: boolean) => void;
   reportedUserId: string;
   reportedByUserId: number;
 }
 
 const ReportModal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
+  setIsUserReported,
   reportedUserId,
   reportedByUserId,
 }) => {
@@ -43,6 +45,7 @@ const ReportModal: React.FC<ModalProps> = ({
     if (resJson.status != 200) {
       console.error(resJson.status + ' ' + resJson.message);
     } else {
+      setIsUserReported(true);
       onClose();
       console.log('user reported!');
     }