Merge branch 'develop' into fix/history/ui-for-profile-and-history

Author: verakohh

.github/workflows/codecov.yml

@@ -15,22 +15,17 @@ jobs:
 
       - name: Set up Node
         uses: actions/setup-node@v4
+        with:
+          node-version: '20'
 
       - name: Install root dependencies
-        run: npm install
-        working-directory: ./cs3219-ay2526s1-project-g03
-
-      - name: Install workspace dependencies
-        run: npm install --workspaces
-        working-directory: ./cs3219-ay2526s1-project-g03
+        run: npm ci
 
       - name: Run tests
         run: npx jest --coverage
-        working-directory: ./cs3219-ay2526s1-project-g03
 
       - name: Upload results to Codecov
         if: always()
         uses: codecov/codecov-action@v5
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          directory: ./cs3219-ay2526s1-project-g03/coverage/
+          token: ${{ secrets.CODECOV_TOKEN }}

.prettierignore

@@ -1,3 +1,9 @@
 # Node
 node_modules/
 **/node_modules/
+
+# Database (local volumes)
+**/db
+**/db/**
+**/.mongodb
+**/.mongodb/**

ai/usage-log.md

@@ -1,19 +1,32 @@
-# Date/Time: 2025-10-24
-# Tool: Claude 4.5 Sonnet (Anthropic)
-# Prompt/Command: Requested for Claude to look through the code for all Controller and Route files and generate test cases.
-# Output Summary: Corresponding _.test.ts
-# Action Taken: 
-- [ ] Accepted as-is 
-- [ X ] Modified 
-- [ ] Rejected 
-# Author Notes: Correctness was verified by running Jest. Some `expect` logic was incorrect and modified where appropriate.
-
-# Date/Time: 2025-10-25
-# Tool: Claude 4.5 Sonnet (Anthropic)
-# Prompt/Command: Requested for Claude to look through the code for all user-service frontend code and generate test cases.
-# Output Summary: Corresponding _.test.ts
-# Action Taken: 
-- [ ] Accepted as-is 
-- [ X ] Modified 
-- [ ] Rejected 
-# Author Notes: Correctness was verified by running Jest. Some `expect` logic was incorrect and modified where appropriate.
+# Zhen Jie
+## Date/Time: 2025-10-24
+
+### Tool: Claude 4.5 Sonnet (Anthropic)
+
+#### Prompt/Command: Requested for Claude to look through the code for all Controller and Route files and generate test cases.
+
+##### Output Summary: Corresponding \_.test.ts
+
+##### Action Taken:
+
+- [ ] Accepted as-is
+- [ X ] Modified
+- [ ] Rejected
+
+##### Author Notes: Correctness was verified by running Jest. Some `expect` logic was incorrect and modified where appropriate.
+
+## Date/Time: 2025-10-25
+
+### Tool: Claude 4.5 Sonnet (Anthropic)
+
+#### Prompt/Command: Requested for Claude to look through the code for all user-service frontend code and generate test cases.
+
+##### Output Summary: Corresponding \_.test.ts
+
+##### Action Taken:
+
+- [ ] Accepted as-is
+- [ X ] Modified
+- [ ] Rejected
+
+##### Author Notes: Correctness was verified by running Jest. Some `expect` logic was incorrect and modified where appropriate.

babel.config.js

@@ -1,22 +1,18 @@
 // Adapted from https://medium.com/@tajircuet/support-of-import-meta-on-vite-jest-typescript-91b49eb0446f
 module.exports = {
-    presets: [
-        [
-            '@babel/preset-env',
-            { useBuiltIns: 'entry', corejs: '2',
-                targets: { node: 'current' } },
-        ],
-        '@babel/preset-typescript',
-    ],
-    plugins: [
-        function () {
-            return {
-                visitor: {
-                    MetaProperty(path) {
-                        path.replaceWithSourceString('process')
-                    },
-                },
-            }
+  presets: [
+    ['@babel/preset-env', {useBuiltIns: 'entry', corejs: '2', targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    function () {
+      return {
+        visitor: {
+          MetaProperty(path) {
+            path.replaceWithSourceString('process');
+          },
         },
-    ],
-}
+      };
+    },
+  ],
+};

docker-compose.yml

@@ -1,29 +1,31 @@
 services:
   # --- DATABASES ---
-  user-db-mongodb:
-    image: mongo
-    container_name: user-db-mongodb
-    restart: unless-stopped
-    env_file:
-      - .env
-    volumes:
-      - ./user-service/db:/data/db
-    networks:
-      - app-network
+  # For local volume dockerized testing
+  # Commented out - using MongoDB Atlas instead
+  # user-db-mongodb:
+  #   image: mongo
+  #   container_name: user-db-mongodb
+  #   restart: unless-stopped
+  #   env_file:
+  #     - .env
+  #   volumes:
+  #     - ./user-service/db:/data/db
+  #   networks:
+  #     - app-network
 
-  # For development purposes
-  user-db-mongo-express:
-    image: mongo-express
-    container_name: user-db-mongo-express
-    restart: unless-stopped  
-    ports:
-      - 8084:8081
-    env_file:
-      - .env
-    networks:
-      - app-network
-    depends_on:
-      - user-db-mongodb
+  # For local volume dokcerized development purposes
+  # user-db-mongo-express:
+  #   image: mongo-express
+  #   container_name: user-db-mongo-express
+  #   restart: unless-stopped  
+  #   ports:
+  #     - 8084:8081
+  #   env_file:
+  #     - .env
+  #   networks:
+  #     - app-network
+  #   depends_on:
+  #     - user-db-mongodb
 
   question-db-pg:
     image: postgres:14-alpine
@@ -98,8 +100,8 @@ services:
       - /app/node_modules
     networks:
       - app-network
-    depends_on:
-      - user-db-mongodb
+    # 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
 
   # Question service
@@ -202,6 +204,7 @@ services:
     env_file:
       - ./.env
     depends_on:
+    #   - user-db-mongodb # Uncomment if local volume
       question-db-pg:
         condition: service_healthy # Wait for DB to be ready
     volumes:

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

@@ -23,10 +23,10 @@ interface SessionSummary {
   question_difficulty: "Easy" | "Medium" | "Hard";
   partner_id: string;
   partner_username?: string;
-  is_solved_successfully: boolean;
+  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;
 }
 
 interface RecentSessionsListProps {
@@ -138,11 +138,11 @@ const RecentSessionsList: React.FC<RecentSessionsListProps> = ({ userId, limit,
 
               {/* 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/progressCard.tsx

@@ -5,34 +5,63 @@ import TopicProgress from './topicProgress';
 import styles from './progressCard.module.css';
 import ArrowDownIcon from '../../assets/arrow-down-icon.svg'; // Example icon
 import ArrowUpIcon from '../../assets/arrow-up-icon.svg'; // Example icon
+import useAuth from '@/hooks/useAuth';
+import { useQuery } from '@tanstack/react-query';
+import { getAllAttemptSummaries, getHistoryProgress } from '@/lib/api';
 
-// Placeholder data TODO: replace with data fetched from API
-const placeholderProgress = {
-  total_sessions_completed: 18,
-  total_successes: 15,
-  total_time_ms: 3600000, // 1 hour in milliseconds
-  current_streak: 24,
-};
+const ProgressCard = () => {
+  const [isOpen, setIsOpen] = useState(false); // Default to false
+  const { user} = useAuth();
 
-const placeholderRecentSessions = [
-  { id: 1, user: 'Jane', difficulty: 'Easy', duration: 45, status: 'Completed' },
-  { id: 2, user: 'Thomas', difficulty: 'Medium', duration: 60, status: 'Passed' }, // Assuming 'Passed' is a status
-  { id: 3, user: 'Alex', difficulty: 'Hard', duration: 500, status: 'Incomplete'},
-];
+  const { data: userProgress, isLoading } = useQuery({
+    queryKey: ['userProgress', user?._id],
+    queryFn: () => getHistoryProgress(user?._id),
+    enabled: !!user?._id,
+  });
 
-const placeholderTopicProgress = {
-  'Arrays': 4,
-  'Strings': 6,
-  'Binary Search': 18,
-  'Trees & Graphs': 2,
-  'Linked Lists': 3,
-  'Stack & Queue': 1,
-  'Hash Tables': 2,
-};
+  const stats = userProgress ? {
+    totalSessions: userProgress.total_sessions,
+    completed: userProgress.total_sessions_completed,
+    successRate: Math.round(userProgress.success_rate * 100), // Decimal to percentage
+    dayStreak: userProgress.current_streak,
+  } : {
+    totalSessions: 0,
+    completed: 0,
+    successRate: 0,
+    dayStreak: 0,
+  };
 
+  const { data: allSessions, isLoading: isLoadingSessions } = useQuery({
+    queryKey: ['recentSessions', user?._id],
+    queryFn: () => getAllAttemptSummaries(user?._id),
+    enabled: !!user?._id,
+    retry: 1,
+  });
+  
+  const recentSessions = allSessions?.slice(0, 3).map((session, index) => ({
+    id: index + 1,
+    user: session.partner_id,
+    difficulty: session.question_difficulty,
+    duration: session.time_taken_ms ? Math.round(session.time_taken_ms / 60000) : 0, // convert ms to minutes
+    status: session.is_solved_successfully ? 'Passed' : 'Failed', 
+  })) || [];
 
-const ProgressCard = () => {
-  const [isOpen, setIsOpen] = useState(false); // Default to false
+
+  const topicProgress = allSessions?.reduce((acc, session) => {
+    session.question_topics.forEach(topic => {
+      acc[topic] = (acc[topic] || 0) + 1;
+    });
+    return acc;
+  }, {} as Record<string, number>) || {};
+
+  console.log('🔍 RAW allSessions from API:', allSessions);
+if (allSessions && allSessions.length > 0) {
+  console.log('🔍 First session question_topics:', allSessions[0].question_topics);
+  console.log('🔍 Type of question_topics:', typeof allSessions[0].question_topics);
+  console.log('🔍 Is Array?:', Array.isArray(allSessions[0].question_topics));
+}
+
+  
 
   return (
     <div className={styles.progressCard}>
@@ -51,10 +80,10 @@ const ProgressCard = () => {
       {isOpen && (
         <div className={styles.content}>
           <div className={styles.topRow}>
-            <StatsGrid progress={placeholderProgress} />
-            <RecentSessions sessions={placeholderRecentSessions} />
+            <StatsGrid stats={stats} />
+            <RecentSessions sessions={recentSessions} />
           </div>
-          <TopicProgress progressData={placeholderTopicProgress} />
+          <TopicProgress progressData={topicProgress} />
         </div>
       )}
     </div>