Add history-service to docker-compose and enhance RecentSessionsList component

- Updated docker-compose.yml to include the history-service.
- Refactored RecentSessionsList component to accept optional summaries prop for improved performance.
- Enhanced API calls in frontend to handle user IDs more securely with URL encoding.
- Updated various components to utilize React Query for data fetching, improving loading states and error handling.
- Added partner username fetching in history service to display in RecentSessionsList and QuestionDetailPage.
- Improved error handling in history service and added default responses for missing user progress.
- Refactored progress-related components to use a consistent data structure and improved UI responsiveness.

Author: verakohh

docker-compose.yml

@@ -76,6 +76,7 @@ services:
       - question-service
       - matching-service
       - collaboration-service
+      - history-service
     networks:
       - app-network
 

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;
+  partner_username?: string;
   is_solved_successfully: boolean;
   has_penalty: boolean; // We need this to determine "Incomplete"
   started_at: string;
   time_taken_ms: number;
 }
 
-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" />

frontend/src/features/progress/progressCard.tsx

@@ -7,11 +7,11 @@ import ArrowDownIcon from '../../assets/arrow-down-icon.svg'; // Example icon
 import ArrowUpIcon from '../../assets/arrow-up-icon.svg'; // Example icon
 
 // Placeholder data TODO: replace with data fetched from API
-const placeholderStats = {
-  totalSessions: 24,
-  completed: 18,
-  successRate: 75,
-  dayStreak: 24,
+const placeholderProgress = {
+  total_sessions_completed: 18,
+  total_successes: 15,
+  total_time_ms: 3600000, // 1 hour in milliseconds
+  current_streak: 24,
 };
 
 const placeholderRecentSessions = [
@@ -51,7 +51,7 @@ const ProgressCard = () => {
       {isOpen && (
         <div className={styles.content}>
           <div className={styles.topRow}>
-            <StatsGrid stats={placeholderStats} />
+            <StatsGrid progress={placeholderProgress} />
             <RecentSessions sessions={placeholderRecentSessions} />
           </div>
           <TopicProgress progressData={placeholderTopicProgress} />

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);