Merge pull request #52 from CS3219-AY2526Sem1/fix/history/ui-for-profile-and-history

feat(frontend):add history-service to docker-compose and enhance RecentSessionsList

Author: ChinZJ

docker-compose.yml

@@ -1,6 +1,7 @@
 services:
   # --- DATABASES ---
   # For local volume dockerized testing
+  # Commented out - using MongoDB Atlas instead
   # user-db-mongodb:
   #   image: mongo
   #   container_name: user-db-mongodb
@@ -77,6 +78,7 @@ services:
       - question-service
       - matching-service
       - collaboration-service
+      - history-service
     networks:
       - app-network
 
@@ -98,7 +100,7 @@ services:
       - /app/node_modules
     networks:
       - app-network
-    # depends_on: # Uncomment if local volume
+    # depends_on: # Commented out - using MongoDB Atlas instead of local container
     #   - user-db-mongodb
     command: sh -c "npm run seed:admin || true && npm run dev" # for production change to npm start
 

frontend/src/components/userMenu.tsx

@@ -53,9 +53,9 @@ const UserMenu: React.FC = () => {
             </>
           ) : (
             <>
-              <button className="icon-button">
+              {/* <button className="icon-button">
                 <img src={NotificationIcon} alt="Notifications" className="notification-icon" />
-              </button>
+              </button> */}
 
               {isVerified ? (
                 <Link to="/profile/" className="icon-link">

frontend/src/features/progress/RecentSessionsList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getAllAttemptSummaries } from '../../lib/api';
 // --- FIX: Import both time formatters ---
@@ -22,36 +22,66 @@ interface SessionSummary {
   question_title: string;
   question_difficulty: "Easy" | "Medium" | "Hard";
   partner_id: string;
-  is_solved_successfully: boolean;
+  partner_username?: string;
+  is_solved_successfully: boolean | null;
   has_penalty: boolean; // We need this to determine "Incomplete"
   started_at: string;
-  time_taken_ms: number;
+  time_taken_ms: number | null;
 }
 
-const RecentSessionsList: React.FC<{ userId: string, limit: number }> = ({ userId, limit }) => {
+interface RecentSessionsListProps {
+  userId: string;
+  limit?: number;
+  summaries?: SessionSummary[];
+}
+
+const RecentSessionsList: React.FC<RecentSessionsListProps> = ({ userId, limit, summaries: providedSummaries }) => {
   const navigate = useNavigate();
   const [sessions, setSessions] = useState<SessionSummary[]>([]);
   const [loading, setLoading] = useState(true);
 
+  // Create a stable reference for providedSummaries to avoid dependency array issues
+  const summariesKey = useMemo(() => {
+    return providedSummaries ? JSON.stringify(providedSummaries.map(s => s.session_id)) : null;
+  }, [providedSummaries]);
+
   useEffect(() => {
-    if (!userId) return;
+    // If summaries are provided, use them directly
+    if (providedSummaries && providedSummaries.length >= 0) {
+      const sortedData = [...providedSummaries].sort((a:SessionSummary, b:SessionSummary) => 
+        new Date(b.started_at).getTime() - new Date(a.started_at).getTime()
+      );
+      setSessions(limit ? sortedData.slice(0, limit) : sortedData);
+      setLoading(false);
+      return;
+    }
+
+    // Otherwise, fetch from API
+    if (!userId) {
+      setLoading(false);
+      setSessions([]);
+      return;
+    }
 
     const fetchRecent = async () => {
       try {
         setLoading(true);
         const data = await getAllAttemptSummaries(userId);
         // Sort by date DESC (as getAllAttemptSummaries might not guarantee order)
-        const sortedData = data ? data.sort((a:SessionSummary, b:SessionSummary) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime()) : [];
-        setSessions(sortedData.slice(0, limit));
+        const sortedData = data ? data.sort((a:SessionSummary, b:SessionSummary) => 
+          new Date(b.started_at).getTime() - new Date(a.started_at).getTime()
+        ) : [];
+        setSessions(limit ? sortedData.slice(0, limit) : sortedData);
       } catch (error) {
         console.error("Failed to fetch recent sessions:", error);
+        setSessions([]);
       } finally {
         setLoading(false);
       }
     };
 
     fetchRecent();
-  }, [userId, limit]);
+  }, [userId, limit, summariesKey]);
 
   const handleSessionClick = (questionId: string) => {
     // Navigate to the detail page for that question
@@ -91,7 +121,7 @@ const RecentSessionsList: React.FC<{ userId: string, limit: number }> = ({ userI
                 <div className="flex items-center gap-4 text-sm text-muted-foreground">
                   <div className="flex items-center gap-1">
                     <User className="h-3 w-3" />
-                    {session.partner_id}
+                    {session.partner_username || session.partner_id}
                   </div>
                   <div className="flex items-center gap-1">
                     <Clock className="h-3 w-3" />
@@ -108,11 +138,11 @@ const RecentSessionsList: React.FC<{ userId: string, limit: number }> = ({ userI
 
               {/* API provides booleans, we derive the status */}
               <Badge className={
-                session.is_solved_successfully ? 'bg-green-500 text-white' : // "Passed" (blue)
-                session.has_penalty ? 'bg-orange-500 text-white' : // "Incomplete" (gray)
+                session.is_solved_successfully === true ? 'bg-green-500 text-white' : // "Passed" (green)
+                session.has_penalty ? 'bg-orange-500 text-white' : // "Incomplete" (orange)
                 'bg-red-500 text-white' // "Failed" (red)
               }>
-                {session.is_solved_successfully ? "Passed" : (session.has_penalty ? "Incomplete" : "Failed")}
+                {session.is_solved_successfully === true ? "Passed" : (session.has_penalty ? "Incomplete" : "Failed")}
               </Badge>
             </div>
           </Card>

frontend/src/features/progress/statsGrid.tsx

@@ -1,25 +1,72 @@
 import React from 'react';
-import StatBox from './statBox';
-import styles from './progressCard.module.css';
+import { Card } from "@/components/ui/card";
+import {
+  Trophy,
+  Target,
+  Clock,
+  TrendingUp,
+} from "lucide-react";
+import { formatDuration } from '../../lib/timeFormatters';
+
+interface Stat {
+  label: string;
+  value: string | number;
+  icon: React.ComponentType<{ className?: string }>;
+  color: string;
+}
 
 interface StatsGridProps {
-  stats: {
-    totalSessions: number;
-    completed: number;
-    successRate: number;
-    dayStreak: number;
-  };
+  progress: {
+    total_sessions_completed?: number;
+    total_successes?: number;
+    total_time_ms?: number;
+    current_streak?: number;
+  } | null;
 }
 
-const StatsGrid = ({ stats }: StatsGridProps) => {
+const StatsGrid: React.FC<StatsGridProps> = ({ progress }) => {
+  const stats: Stat[] = [
+    { 
+      label: "Sessions Completed", 
+      value: progress?.total_sessions_completed ?? 0, 
+      icon: Trophy, 
+      color: "text-yellow-500" 
+    },
+    { 
+      label: "Problems Solved", 
+      value: progress?.total_successes ?? 0, 
+      icon: Target, 
+      color: "text-green-500" 
+    },
+    { 
+      label: "Hours Practiced", 
+      value: formatDuration(progress?.total_time_ms), 
+      icon: Clock, 
+      color: "text-blue-500" 
+    },
+    { 
+      label: "Current Streak", 
+      value: progress?.current_streak ?? 0, 
+      icon: TrendingUp, 
+      color: "text-purple-500" 
+    },
+  ];
+
   return (
-    <div className={styles.statsGrid}>
-      <StatBox label="Total Sessions" value={stats.totalSessions} />
-      <StatBox label="Completed" value={stats.completed} />
-      <StatBox label="Success Rate" value={`${stats.successRate}%`} />
-      <StatBox label="Day Streak" value={stats.dayStreak} />
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+      {stats.map((stat) => (
+        <Card key={stat.label} className="p-6 bg-card border-0 shadow-card hover:shadow-elegant transition-smooth">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-3xl font-bold">{stat.value}</p>
+              <p className="text-sm text-muted-foreground mt-1">{stat.label}</p>
+            </div>
+            <stat.icon className={`h-10 w-10 ${stat.color}`} />
+          </div>
+        </Card>
+      ))}
     </div>
   );
 };
 
-export default StatsGrid;
+export default StatsGrid;

frontend/src/lib/api.ts

@@ -58,7 +58,7 @@ export const getTopics = async () => {
  * (For the stat bars on Home and Profile)
  */
 export const getHistoryProgress = async (userId: string) => {
-  const response = await historyApi.get(`/api/history/progress/${userId}`);
+  const response = await historyApi.get(`/api/history/progress/${encodeURIComponent(userId)}`);
   return response.data;
 };
 
@@ -67,7 +67,7 @@ export const getHistoryProgress = async (userId: string) => {
  * (For the main lists on Home and History Dashboard)
  */
 export const getAllAttemptSummaries = async (userId: string) => {
-  const response = await historyApi.get(`/api/history/all-summaries/${userId}`);
+  const response = await historyApi.get(`/api/history/all-summaries/${encodeURIComponent(userId)}`);
   return response.data;
 };
 
@@ -76,23 +76,23 @@ export const getAllAttemptSummaries = async (userId: string) => {
  * (For the "Question Detail" page - Pic 3)
  */
 export const getQuestionAttempts = async (userId: string, questionId: string) => {
-  const response = await historyApi.get(`/api/history/question-attempts/${userId}/${questionId}`);
+  const response = await historyApi.get(`/api/history/question-attempts/${encodeURIComponent(userId)}/${encodeURIComponent(questionId)}`);
   return response.data;
 };
 
 /**
  * Fetches the list of "active" question IDs for the reset page.
  */
 export const getActiveAttempts = async (userId: string) => {
-  const response = await historyApi.get(`/api/history/active-attempts/${userId}`);
+  const response = await historyApi.get(`/api/history/active-attempts/${encodeURIComponent(userId)}`);
   return response.data;
 };
 
 /**
  * Resets a list of questions, making them available for matching again.
  */
 export const resetQuestions = async (userId: string, questionIds: string[]) => {
-  const response = await historyApi.post(`/api/history/reset-questions/${userId}`, { questionIds });
+  const response = await historyApi.post(`/api/history/reset-questions/${encodeURIComponent(userId)}`, { questionIds });
   return response.data;
 };
 export const cancelMatch = async data => matchingApi.delete(`/api/matches/${data.userId}`, data);