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

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

Author: verakohh

docker-compose.yml

@@ -1,7 +1,6 @@
 services:
   # --- DATABASES ---
   # For local volume dockerized testing
-  # Commented out - using MongoDB Atlas instead
   # user-db-mongodb:
   #   image: mongo
   #   container_name: user-db-mongodb
@@ -78,7 +77,6 @@ services:
       - question-service
       - matching-service
       - collaboration-service
-      - history-service
     networks:
       - app-network
 
@@ -100,7 +98,7 @@ services:
       - /app/node_modules
     networks:
       - app-network
-    # depends_on: # Commented out - using MongoDB Atlas instead of local container
+    # depends_on: # Uncomment if local volume
     #   - 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, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getAllAttemptSummaries } from '../../lib/api';
 // --- FIX: Import both time formatters ---
@@ -22,66 +22,36 @@ interface SessionSummary {
   question_title: string;
   question_difficulty: "Easy" | "Medium" | "Hard";
   partner_id: string;
-  partner_username?: string;
-  is_solved_successfully: boolean | null;
+  is_solved_successfully: boolean;
   has_penalty: boolean; // We need this to determine "Incomplete"
   started_at: string;
-  time_taken_ms: number | null;
+  time_taken_ms: number;
 }
 
-interface RecentSessionsListProps {
-  userId: string;
-  limit?: number;
-  summaries?: SessionSummary[];
-}
-
-const RecentSessionsList: React.FC<RecentSessionsListProps> = ({ userId, limit, summaries: providedSummaries }) => {
+const RecentSessionsList: React.FC<{ userId: string, limit: number }> = ({ userId, limit }) => {
   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 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;
-    }
+    if (!userId) 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(limit ? sortedData.slice(0, limit) : sortedData);
+        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));
       } catch (error) {
         console.error("Failed to fetch recent sessions:", error);
-        setSessions([]);
       } finally {
         setLoading(false);
       }
     };
 
     fetchRecent();
-  }, [userId, limit, summariesKey]);
+  }, [userId, limit]);
 
   const handleSessionClick = (questionId: string) => {
     // Navigate to the detail page for that question
@@ -121,7 +91,7 @@ const RecentSessionsList: React.FC<RecentSessionsListProps> = ({ userId, limit,
                 <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_username || session.partner_id}
+                    {session.partner_id}
                   </div>
                   <div className="flex items-center gap-1">
                     <Clock className="h-3 w-3" />
@@ -138,11 +108,11 @@ const RecentSessionsList: React.FC<RecentSessionsListProps> = ({ userId, limit,
 
               {/* API provides booleans, we derive the status */}
               <Badge className={
-                session.is_solved_successfully === true ? 'bg-green-500 text-white' : // "Passed" (green)
-                session.has_penalty ? 'bg-orange-500 text-white' : // "Incomplete" (orange)
+                session.is_solved_successfully ? 'bg-green-500 text-white' : // "Passed" (blue)
+                session.has_penalty ? 'bg-orange-500 text-white' : // "Incomplete" (gray)
                 'bg-red-500 text-white' // "Failed" (red)
               }>
-                {session.is_solved_successfully === true ? "Passed" : (session.has_penalty ? "Incomplete" : "Failed")}
+                {session.is_solved_successfully ? "Passed" : (session.has_penalty ? "Incomplete" : "Failed")}
               </Badge>
             </div>
           </Card>

frontend/src/features/progress/statsGrid.tsx

@@ -1,72 +1,25 @@
 import React from 'react';
-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;
-}
+import StatBox from './statBox';
+import styles from './progressCard.module.css';
 
 interface StatsGridProps {
-  progress: {
-    total_sessions_completed?: number;
-    total_successes?: number;
-    total_time_ms?: number;
-    current_streak?: number;
-  } | null;
+  stats: {
+    totalSessions: number;
+    completed: number;
+    successRate: number;
+    dayStreak: number;
+  };
 }
 
-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" 
-    },
-  ];
-
+const StatsGrid = ({ stats }: StatsGridProps) => {
   return (
-    <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 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>
   );
 };
 
-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/${encodeURIComponent(userId)}`);
+  const response = await historyApi.get(`/api/history/progress/${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/${encodeURIComponent(userId)}`);
+  const response = await historyApi.get(`/api/history/all-summaries/${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/${encodeURIComponent(userId)}/${encodeURIComponent(questionId)}`);
+  const response = await historyApi.get(`/api/history/question-attempts/${userId}/${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/${encodeURIComponent(userId)}`);
+  const response = await historyApi.get(`/api/history/active-attempts/${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/${encodeURIComponent(userId)}`, { questionIds });
+  const response = await historyApi.post(`/api/history/reset-questions/${userId}`, { questionIds });
   return response.data;
 };
 export const cancelMatch = async data => matchingApi.delete(`/api/matches/${data.userId}`, data);