feat: implement dashboard page for viewing active and past rooms (#18)

* feat(collaboration-service): integrate question service and enhance room management

- Added QUESTION_SERVICE_URL to configuration for fetching question details.
- Implemented fetchQuestionDetails method in RoomController to retrieve question data from the question service.
- Updated getRoomsByUserId method to include question details in the response.
- Enhanced roomRoutes to support fetching rooms by user ID with question details.
- Updated frontend API client to include a method for retrieving user rooms with question data.
- Added a new Dashboard link in the frontend navigation for improved user access.

* refactor(dashboard): enhance layout and error handling

- Updated DashboardPage layout for improved responsiveness and user experience.
- Adjusted error message display and loading indicators for better visibility.
- Refactored PastRoomsPanel to include duration formatting and improved structure.
- Added formatDuration function to calculate and display the duration between room creation and closure.
- Updated API client to include createdAt field in RoomDetails for better data handling.

* feat(matching): integrate matching store into practice and dashboard components

- Added useMatchingStore to manage matching state in PracticePage, LogoutButton, and ActiveRoomsPanel.
- Implemented redirection to the matching page when a user is in a matching state or room is preparing.
- Disabled logout and join room buttons when in a matching state to prevent user actions during matching.
- Enhanced ActiveRoomsPanel to display partner usernames and improved layout for better user experience.
- Sorted active rooms by creation date for better organization.

* chore(dependencies): update pnpm-lock.yaml

* fix: fix lint errors

Author: DanielJames0302

backend/collaboration-service/package.json

@@ -15,6 +15,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@y/websocket-server": "^0.1.1",
+    "axios": "^1.7.9",
     "amqplib": "^0.10.9",
     "cors": "^2.8.5",
     "express": "^5.1.0",

backend/collaboration-service/src/config.js

@@ -8,6 +8,8 @@ export const config = {
     "mongodb://admin:password@localhost:27017/peerprepCollabService?authSource=admin",
   // Room Management
   ROOM_TIMEOUT_MINUTES: parseInt(process.env.ROOM_TIMEOUT_MINUTES) || 10,
+  // Question service
+  QUESTION_SERVICE_URL: process.env.QUESTION_SERVICE_URL || "http://localhost:8003",
   // Yjs MongoDB Provider Persistence Settings
   PERSISTENCE_CONFIG: {
     multipleCollections: true, // each document gets an own collection in the database

backend/collaboration-service/src/controllers/roomController.js

@@ -1,5 +1,7 @@
 import { v4 as uuidv4 } from "uuid";
+import axios from "axios";
 import db from "../db.js";
+import config from "../config.js";
 import Room from "../models/roomModel.js";
 import roomManager from "../websocket/roomManager.js";
 
@@ -75,6 +77,85 @@ class RoomController {
     }
   }
 
+  /**
+   * Fetch question details from question service
+   * @param {string} questionId - Question ID
+   * @returns {Promise<Object|null>} - Question details (title, difficulty, topic) or null if not found
+   */
+  async fetchQuestionDetails(questionId) {
+    try {
+      const response = await axios.get(
+        `${config.QUESTION_SERVICE_URL}/v1/questions/${questionId}`,
+        { timeout: 5000 }
+      );
+      return {
+        _id: response.data._id,
+        title: response.data.title,
+        difficulty: response.data.difficulty,
+        topic: response.data.topic,
+      };
+    } catch (error) {
+      if (error.response?.status === 404) {
+        console.warn(`Question ${questionId} not found`);
+        return null;
+      }
+      
+      if (error.response) {
+        console.error(
+          `Failed to fetch question ${questionId}:`,
+          `Status ${error.response.status}`,
+          error.response.data?.error || error.response.statusText
+        );
+      } else if (error.request) {
+        console.error(
+          `Failed to fetch question ${questionId}:`,
+          `No response from question service at ${config.QUESTION_SERVICE_URL}.`,
+          `Error: ${error.message || 'Network error'}`
+        );
+      } else {
+        console.error(
+          `Failed to fetch question ${questionId}:`,
+          error.message || 'Unknown error'
+        );
+      }
+      
+      return null;
+    }
+  }
+
+  /**
+   * Get all rooms for a user with question details
+   * @param {string} userId - User ID
+   * @returns {Promise<Array<Object>>} - Array of room objects with question details
+   */
+  async getRoomsByUserId(userId) {
+    try {
+      const rooms = await Room.findRoomsByUserId(userId);
+      const roomsArray = rooms.map((room) => room.toObject());
+
+      const roomsWithQuestions = await Promise.all(
+        roomsArray.map(async (room) => {
+          if (room.questionId) {
+            const questionDetails = await this.fetchQuestionDetails(room.questionId);
+            return {
+              ...room,
+              question: questionDetails,
+            };
+          }
+          return {
+            ...room,
+            question: null,
+          };
+        })
+      );
+
+      return roomsWithQuestions;
+    } catch (error) {
+      console.error(`Failed to get rooms for user ${userId}:`, error);
+      throw error;
+    }
+  }
+
   /**
    * Get document content from Yjs persistence
    * @param {string} roomId - Room ID

backend/collaboration-service/src/http/httpServer.js

@@ -17,10 +17,13 @@ class HttpServer {
    * Set up Express middleware
    */
   setupMiddleware() {
+
     this.app.use(
       cors({
         origin: process.env.WEB_BASE_URL,
         credentials: true,
+        methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
+        allowedHeaders: ["Content-Type", "Authorization"],
       }),
     );
     this.app.use(express.json());

backend/collaboration-service/src/http/roomRoutes.js

@@ -34,6 +34,35 @@ const router = express.Router();
 //   }
 // });
 
+/**
+ * GET /api/v1/rooms?userId=<userId>
+ * Get all rooms for a user
+ */
+router.get("/", async (req, res) => {
+  try {
+    const { userId } = req.query;
+    
+    if (!userId) {
+      return res.status(400).json({
+        success: false,
+        error: "userId query parameter is required",
+      });
+    }
+    
+    const rooms = await roomController.getRoomsByUserId(userId);
+    res.json({
+      success: true,
+      rooms,
+    });
+  } catch (error) {
+    console.error("Failed to get rooms for user:", error);
+    res.status(500).json({
+      success: false,
+      error: error.message,
+    });
+  }
+});
+
 /**
  * GET /api/v1/rooms/:roomId
  * Get room information and document content

docker-compose.yml

@@ -138,12 +138,14 @@ services:
       - HTTP_PORT=8004
       - WS_PORT=8005
       - ROOM_TIMEOUT_MINUTES=10
+      - QUESTION_SERVICE_URL=http://question-service:8003
       - KAFKA_HOST=kafka
       - KAFKA_PORT=9092
       - KAFKA_BROKERS=kafka:9092
     depends_on:
       - mongodb
       - kafka
+      - question-service
     networks:
       - cs3219-peerprep-network
   execution-service:

frontend/src/app/dashboard/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Navbar from "@/components/ui/nav-bar";
+import ProtectedRoute from "@/components/auth/protected-route";
+import ActiveRoomsPanel from "@/components/dashboard/active-rooms-panel";
+import PastRoomsPanel from "@/components/dashboard/past-rooms-panel";
+import { useDashboardData } from "@/hooks/use-dashboard-data";
+
+export default function DashboardPage() {
+  const { activeRooms, pastRooms, isLoading, error } = useDashboardData();
+
+  return (
+    <ProtectedRoute>
+      <div className="h-screen flex flex-col bg-[#d4eaf8] overflow-hidden">
+        <Navbar />
+        <main className="flex-1 container mx-auto px-4 py-4 overflow-hidden">
+          {error && (
+            <div className="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
+              <p className="font-semibold">Error loading rooms</p>
+              <p>{error}</p>
+            </div>
+          )}
+
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-lg text-gray-600">Loading rooms...</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 h-full min-h-0">
+              <div className="h-full min-h-0">
+                <ActiveRoomsPanel rooms={activeRooms} />
+              </div>
+
+              <div className="h-full min-h-0">
+                <PastRoomsPanel rooms={pastRooms} />
+              </div>
+            </div>
+          )}
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}

frontend/src/app/matching/page.tsx

@@ -13,7 +13,7 @@ export default function MatchingPage() {
   const router = useRouter();
   const { user, isUser, isLoading } = useAuthContext();
   const { refreshAccessToken } = useAuth();
-  const { roomId, matchFound, initializeSocket, setUser, cleanup } = useMatchingStore();
+  const { roomId, matchFound, initializeSocket, setUser, cleanup, reset } = useMatchingStore();
 
   useEffect(() => {
     if (!isLoading && !isUser) {
@@ -23,9 +23,14 @@ export default function MatchingPage() {
 
   useEffect(() => {
     if (matchFound && roomId) {
-      router.push(`/practice/${roomId}`);
+      router.push("/dashboard");
+      // Reset matchFound flag after redirect to allow re-matching
+      // Reset after a short delay to ensure navigation happens first
+      setTimeout(() => {
+        reset();
+      }, 100);
     }
-  }, [matchFound, roomId, router]);
+  }, [matchFound, roomId, router, reset]);
 
   useEffect(() => {
     if (user) {

frontend/src/app/practice/[id]/page.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { useCollaborationState, useCollaborationActions } from "@/stores/collaboration-store";
 import ProtectedRoute from "@/components/auth/protected-route";
+import { useMatchingStore } from "@/stores/matching-store";
 
 const CodeEditorPanel = dynamic(() => import("@/components/practice/code-editor-panel"), {
   ssr: false,
@@ -25,6 +26,14 @@ export default function PracticePage() {
 
   const { roomDetails, isLoading, error } = useCollaborationState();
   const { fetchRoomDetails, fetchQuestionDetails, reset } = useCollaborationActions();
+  const isMatching = useMatchingStore((state) => state.isMatching);
+  const isRoomPreparing = useMatchingStore((state) => state.isRoomPreparing);
+
+  useEffect(() => {
+    if (isMatching || isRoomPreparing) {
+      router.push("/matching");
+    }
+  }, [isMatching, isRoomPreparing, router]);
 
   // Fetch room details on mount
   useEffect(() => {

frontend/src/components/auth/logout-button.tsx

@@ -4,9 +4,12 @@ import { AxiosError } from "axios";
 import { Button } from "@/components/ui/button";
 import { useAuthContext } from "@/contexts/auth-context";
 import { authAPI } from "@/lib/api-client";
+import { useMatchingStore } from "@/stores/matching-store";
 
 export default function LogoutButton() {
   const { logout } = useAuthContext();
+  const isMatching = useMatchingStore((state) => state.isMatching);
+  const isRoomPreparing = useMatchingStore((state) => state.isRoomPreparing);
 
   const handleLogout = async () => {
     try {
@@ -24,6 +27,7 @@ export default function LogoutButton() {
     <Button
       variant="logout"
       className="text-black"
+      disabled={isMatching || isRoomPreparing}
       onClick={() => {
         handleLogout();
       }}