Merge pull request #89 from CS3219-AY2425S1/improvement/amqp_over_ws

Bug fixes and remove redundant features

Author: simbayippy

peerprep-fe/src/app/(main)/match/page.tsx

@@ -6,50 +6,53 @@ import { User, Code } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useAuthStore } from '@/state/useAuthStore';
 import { consumeMessageFromQueue, sendMessageToQueue } from '@/lib/rabbitmq';
+import { UserMatchingResponse } from '@/types/types';
 
 export default function LoadingPage() {
   const [elapsedTime, setElapsedTime] = useState(0);
-  const [usersWaiting, setUsersWaiting] = useState(0);
   const [matchStatus, setMatchStatus] = useState('searching');
   const router = useRouter();
   const { user } = useAuthStore();
   const listenerInitialized = useRef(false);
 
   // Function to consume messages from the RabbitMQ queue
   const handleStartListening = () => {
-    const onMessageReceived = (message: any) => {
+    const onMessageReceived = (message: UserMatchingResponse) => {
       if (message.status == "matched") {
-        console.log('Match found, your partner is', message.match?.user);
+        console.log('Match found, your partner is', message.match.name);
         setMatchStatus('matched');
       } else {
         console.log('Match failed');
         setMatchStatus('failed');
       }
     };
-    consumeMessageFromQueue(user?.id!, onMessageReceived);
+    if (user?.id) {
+      consumeMessageFromQueue(user.id, onMessageReceived);
+    } else {
+      console.warn("User ID is undefined. This is not supposed to happen.");
+    }
   };
 
   useEffect(() => {
     if (!listenerInitialized.current) {
-      setElapsedTime(0);
-      setMatchStatus('searching');
-      handleStartListening(); // Set up listener only once
-
+      handleStartListening();
       listenerInitialized.current = true; // Mark as initialized
+    }
 
-      const interval = setInterval(() => {
-        setElapsedTime((prevTime) => prevTime + 1);
-      }, 1000);
+    setElapsedTime(0);
+    setMatchStatus('searching');
 
-      // Cleanup function
-      return () => {
-        clearInterval(interval); // Clean up interval on unmount
-      };
-    }
+    const interval = setInterval(() => {
+      setElapsedTime((prevTime) => prevTime + 1);
+    }, 1000);
+
+    // Cleanup function
+    return () => {
+      clearInterval(interval); // Clean up interval on unmount
+    };
   }, []);
 
   useEffect(() => {
-    console.log(usersWaiting);
     if (elapsedTime >= 60 && matchStatus === 'searching') {
       console.log('Elapsed time reached 60 seconds. Match timed out.');
       setMatchStatus('timeout');
@@ -95,10 +98,6 @@ export default function LoadingPage() {
                 Time elapsed: {elapsedTime} seconds
               </div>
             </div>
-            <div className="flex items-center space-x-2 text-sm">
-              <User className="h-4 w-4" />
-              <span>{usersWaiting} users waiting</span>
-            </div>
             <Button
               onClick={handleCancel}
               className="w-full max-w-md bg-purple-600 hover:bg-purple-700"

peerprep-fe/src/components/dialogs/PreMatch.tsx

@@ -15,6 +15,7 @@ import { TopicsPopover } from '@/app/(main)/components/filter/TopicsPopover';
 import { sendMessageToQueue } from '@/lib/rabbitmq';
 import { axiosAuthClient } from '@/network/axiosClient';
 import { DIFFICULTY_OPTIONS } from '@/lib/constants';
+import { UserMatchingRequest } from '@/types/types';
 
 export function PreMatch() {
   const [open, setOpen] = useState(false);
@@ -25,7 +26,7 @@ export function PreMatch() {
   const handleConfirm = async () => {
     try {
       const profileDetails = await getProfileDetails();
-      const message = {
+      const message : UserMatchingRequest = {
         _id: profileDetails.id,
         name: profileDetails.username,
         topic: selectedTopics[0] || '', // TODO: change to list, but current backend only accepts 1

peerprep-fe/src/lib/rabbitmq.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { UserMatchingRequest, UserMatchingResponse } from '@/types/types';
 import { Client, IFrame, IMessage } from '@stomp/stompjs';
 
 let isConnected = false;
 
-const sendMessageToQueue = async (message: Record<string, any>) => {
+const sendMessageToQueue = async (message: UserMatchingRequest) => {
   const uri = process.env.NEXT_PUBLIC_RABBITMQ_URL;
   const user = process.env.NEXT_PUBLIC_RABBITMQ_USER;
   const pass = process.env.NEXT_PUBLIC_RABBITMQ_PW;
@@ -52,7 +53,7 @@ const sendMessageToQueue = async (message: Record<string, any>) => {
 
 const consumeMessageFromQueue = async (
   queue: string,
-  onMessage: (message: any) => void,
+  onMessage: (message: UserMatchingResponse) => void,
 ) => {
   const uri = process.env.NEXT_PUBLIC_RABBITMQ_URL;
   const user = process.env.NEXT_PUBLIC_RABBITMQ_USER;

peerprep-fe/src/types/types.ts

@@ -48,11 +48,26 @@ interface User {
   username: string;
 }
 
+interface UserMatchingRequest {
+  _id: string;
+  name?: string;
+  difficulty?: string;
+  topic?: string;
+  type: string;
+}
+
+interface UserMatchingResponse {
+  status: string;
+  match: UserMatchingRequest;
+}
+
 export type {
   Problem,
   ProblemDialogData,
   ProblemRequestData,
   FilterBadgeProps,
   FilterSelectProps,
   User,
+  UserMatchingResponse,
+  UserMatchingRequest,
 };