Add interfaces

Author: tyouwei

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

@@ -6,7 +6,7 @@ import { User, Code } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useAuthStore } from '@/state/useAuthStore';
 import { consumeMessageFromQueue, sendMessageToQueue } from '@/lib/rabbitmq';
-import { Match } from '@/types/types';
+import { UserMatchingResponse } from '@/types/types';
 
 export default function LoadingPage() {
   const [elapsedTime, setElapsedTime] = useState(0);
@@ -17,9 +17,9 @@ export default function LoadingPage() {
 
   // Function to consume messages from the RabbitMQ queue
   const handleStartListening = () => {
-    const onMessageReceived = (message: Match) => {
+    const onMessageReceived = (message: UserMatchingResponse) => {
       if (message.status == "matched") {
-        console.log('Match found, your partner is', message.match);
+        console.log('Match found, your partner is', message.match.name);
         setMatchStatus('matched');
       } else {
         console.log('Match failed');

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,10 +48,17 @@ interface User {
   username: string;
 }
 
-interface Match {
-  status: string;
-  match: string;
+interface UserMatchingRequest {
+  _id: string;
+  name?: string;
+  difficulty?: string;
+  topic?: string;
+  type: string;
+}
 
+interface UserMatchingResponse {
+  status: string;
+  match: UserMatchingRequest;
 }
 
 export type {
@@ -61,5 +68,6 @@ export type {
   FilterBadgeProps,
   FilterSelectProps,
   User,
-  Match,
+  UserMatchingResponse,
+  UserMatchingRequest,
 };