add collab page

Author: Kurtyjlee

peerprep-fe/package.json

@@ -37,6 +37,7 @@
     "zustand": "5.0.0-rc.2"
   },
   "devDependencies": {
+    "@types/amqplib": "^0.10.5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

peerprep-fe/pnpm-lock.yaml

@@ -5,26 +5,32 @@ import { useRouter } from 'next/navigation';
 import { User, Code } from 'lucide-react';
 import { consumeMessageFromQueue } from '@/lib/rabbitmq';
 import { Button } from '@/components/ui/button';
+import { useAuthStore } from '@/state/useAuthStore';
 
 export default function LoadingPage() {
   const [elapsedTime, setElapsedTime] = useState(0);
   const [usersWaiting, setUsersWaiting] = useState(4);
   const [matchStatus, setMatchStatus] = useState('searching');
   const router = useRouter();
+  const { user } = useAuthStore();
 
   const startConsumingMessages = async () => {
     try {
-      await consumeMessageFromQueue().then((message) => {
+      await consumeMessageFromQueue(user?.id!).then((message) => {
         if (message.status === 'matched') {
           console.log('Match found, your partner is', message.partner);
           setMatchStatus('matched');
-          // Redirect to the collaboration page after a short delay
+
           setTimeout(() => {
-            router.push(`/collaboration/${message.roomId}`);
+            router.push(`/collaboration`);
           }, 2000);
         } else {
           console.log('Match failed');
           setMatchStatus('failed');
+
+          setTimeout(() => {
+            router.push(`/`);
+          }, 2000);
         }
       });
     } catch (error) {

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type Props = {};
+
+const page = (props: Props) => {
+  return <div>This is the collaboration page</div>;
+};
+
+export default page;

peerprep-fe/src/app/collaboration/page.tsx

@@ -26,26 +26,6 @@ export default function Navbar() {
     }
   };
 
-  // const getProfileDetails = async () => {
-  //   const result = await axiosAuthClient.get('/auth/verify-token');
-  //   return result.data.data;
-  // };
-
-  // const handleMatchClick = async () => {
-  //   try {
-  //     const profileDetails = await getProfileDetails();
-  //     const message = {
-  //       _id: profileDetails.id,
-  //       name: profileDetails.username,
-  //       topic: 'TO BE ADDED',
-  //       difficulty: 'TO BE ADDED',
-  //     };
-  //     await sendMessageToQueue(message);
-  //   } catch (err) {
-  //     console.error('Error in handleMatchClick:', err);
-  //   }
-  // };
-
   return (
     <nav className="fixed top-0 z-10 w-full bg-gray-800 p-4">
       <div className="mx-auto flex max-w-7xl items-center justify-between">

peerprep-fe/src/components/navbar/Navbar.tsx

@@ -2,6 +2,7 @@
 'use server';
 
 import { connect } from 'amqplib';
+import { redirect } from 'next/navigation';
 
 export const sendMessageToQueue = async (message: Record<string, any>) => {
   try {
@@ -36,14 +37,14 @@ export const sendMessageToQueue = async (message: Record<string, any>) => {
   }
 };
 
-export const consumeMessageFromQueue = async () => {
+export const consumeMessageFromQueue = async (queue: string) => {
   return new Promise<any>((resolve, reject) => {
     (async () => {
       try {
         // Connect to RabbitMQ server
         const connection = await connect(process.env.RABBITMQ_URL!);
         const channel = await connection.createChannel();
-        const queue = process.env.MATCHING_SERVICE_QUEUE!;
+        // const queue = process.env.MATCHING_SERVICE_QUEUE!;
 
         // Ensure the queue exists
         await channel.assertQueue(queue, { durable: true });