Implement organise dashboard by lesson (#9)

* Implement organise dashboard by lesson

* Clean up code and improve external links

* Add sorting for exercises for more deterministic behaviour

* Improve data structure of Exercise

* Add constants index.ts

* Address comments

Author: jovnc

src/api/queries/get_exercises.ts

@@ -1,15 +1,76 @@
+import { EXERCISES_DIRECTORY_URL } from "@/constants";
+import { DetourInfo, Exercise, LessonInfo } from "@/types/exercise";
 import axios from "axios"
 import { useQuery } from "react-query"
 
-export interface Exercise {
-  exercise_name: string;
-  tags: string[];
+export interface ExerciseRaw {
+  lesson?: LessonInfo;
+  detour?: DetourInfo;
+  identifier: string;
+  wip?: number;
 }
 
-export const getExercises = async () => {
+type ExercisesResponse = Record<string, ExerciseRaw>;
+
+/**
+ * Parses a lesson title like to extract tour (T) and lesson (L) numbers.
+ */
+function parseExerciseOrder(title: string): { tour: number; lesson: number } | null {
+  const match = title.match(/^T(\d+)L(\d+)/);
+  if (!match) {
+    return null;
+  }
+  return {
+    tour: parseInt(match[1], 10),
+    lesson: parseInt(match[2], 10),
+  };
+}
+
+/**
+ * Compares two exercises for sorting: by tour (T) first, then by lesson (L).
+ */
+function compareExercises(a: Exercise, b: Exercise): number {
+  const orderA = parseExerciseOrder(a.parentLesson.title);
+  const orderB = parseExerciseOrder(b.parentLesson.title);
+
+  if (orderA == null && orderB == null) return 0;
+  if (orderA == null) return 1;
+  if (orderB == null) return -1;
+
+  if (orderA.tour !== orderB.tour) {
+    return orderA.tour - orderB.tour;
+  }
+  return orderA.lesson - orderB.lesson;
+}
+
+export const getExercises = async (): Promise<Exercise[]> => {
   try {
-    const result = await axios.get<Exercise[]>("https://raw.githubusercontent.com/git-mastery/exercises/refs/heads/gh-pages/exercises.json");
-    return result.data;
+    const result = await axios.get<ExercisesResponse>(
+      `${EXERCISES_DIRECTORY_URL}/exercises.json`
+    );
+
+    const exercises: Exercise[] = [];
+    for (const [key, value] of Object.entries(result.data)) {
+      // Filter WIP exercises at API layer since they're not meant to be visible
+      // This is more performant since we only filter once at fetch time, not on every render
+      if (value?.wip === 1) {
+        continue;
+      }
+      
+      const lesson = value.lesson ?? value.detour?.lesson;
+      if (!lesson) {
+        continue;
+      }
+      
+      exercises.push({
+        key,
+        identifier: value.identifier,
+        parentLesson: lesson,
+        detour: value.detour,
+      });
+    }
+
+    return exercises.sort(compareExercises);
   } catch {
     return [];
   }
@@ -21,4 +82,3 @@ export const useGetExercisesQuery = () => {
     queryFn: () => getExercises(),
   });
 }
-

src/components/dashboard/ExerciseGroupTable.tsx

@@ -0,0 +1,90 @@
+import { BASE_URL, ExerciseStatus } from "@/constants";
+import { Exercise } from "@/types/exercise";
+
+interface ExerciseTableProps {
+  exercises: Exercise[];
+  progress: Map<string, string>;
+}
+
+function getStatusDisplay(status: string | undefined): { text: string; icon: string } {
+  switch (status) {
+    case undefined: // Needed for TypeScript strictness
+    case null:  
+      return { text: "Not Started", icon: "⚪" };
+    case ExerciseStatus.COMPLETED:
+    case ExerciseStatus.SUCCESSFUL: // SUCCESSFUL is for backwards compatibility
+      return { text: "Completed", icon: "✅" };
+    case ExerciseStatus.INCOMPLETE:
+      return { text: "Incomplete", icon: "⏳" };
+    case ExerciseStatus.ERROR:
+      return { text: "Error", icon: "❌" };
+    default:
+      return { text: status, icon: "🔄" };
+  }
+}
+
+function ExerciseContextLabel({ exercise }: { exercise: Exercise }) {
+  const linkClass = "text-blue-600 hover:underline";
+  const lessonLink = `${BASE_URL}/${exercise.parentLesson.path}`;
+
+  if (exercise.detour) {
+    const detourLink = `${BASE_URL}/${exercise.detour.lesson.path}`;
+    return (
+      <span className="text-gray-500 text-sm ml-2">
+        (in <a href={detourLink} target="_blank" rel="noopener noreferrer" className={linkClass}>
+          {exercise.parentLesson.title} &#8594; Detour: {exercise.detour.title}
+        </a>)
+      </span>
+    );
+  }
+  return (
+    <span className="text-gray-500 text-sm ml-2">
+      (in <a href={lessonLink} target="_blank" rel="noopener noreferrer" className={linkClass}>
+        {exercise.parentLesson.title}
+      </a>)
+    </span>
+  );
+}
+
+function ExerciseTable({ exercises, progress }: ExerciseTableProps) {
+  return (
+    <table className="table-fixed w-full bg-white border border-gray-300 rounded-sm">
+      <thead>
+        <tr>
+          <th className="bg-gray-200 border border-gray-300 px-4 py-2 text-left">
+            Exercise
+          </th>
+          <th className="bg-gray-200 border border-gray-300 px-4 py-2 text-left w-40">
+            Status
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {exercises.map((exercise) => {
+          const status = getStatusDisplay(progress.get(exercise.identifier));
+          const lessonPath = exercise.detour?.lesson.path ?? exercise.parentLesson.path;
+          return (
+            <tr key={exercise.key}>
+              <td className="border border-gray-300 px-4 py-2 text-left">
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={`${BASE_URL}/${lessonPath}/exercise-${exercise.identifier}`}
+                >
+                  <code className="underline text-blue-800">{exercise.identifier}</code>
+                </a>
+                <ExerciseContextLabel exercise={exercise} />
+              </td>
+              <td className="border border-gray-300 px-4 py-2 text-left">
+                <span className="mr-2">{status.icon}</span>
+                {status.text}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export default ExerciseTable;

src/components/dashboard/ExerciseTable.tsx

@@ -1,3 +1,3 @@
 export { default as DashboardHeader } from "./DashboardHeader";
 export { default as StatusMessage } from "./StatusMessage";
-export { default as ExerciseGroupTable } from "./ExerciseGroupTable";
+export { default as ExerciseTable } from "./ExerciseTable";

src/components/dashboard/index.ts

@@ -0,0 +1,10 @@
+export const BASE_URL = "https://git-mastery.github.io";
+
+export const EXERCISES_DIRECTORY_URL = `${BASE_URL}/exercises-directory`;
+
+export const ExerciseStatus = {
+  SUCCESSFUL: "SUCCESSFUL",
+  COMPLETED: "Completed",
+  INCOMPLETE: "Incomplete",
+  ERROR: "Error",
+} as const;

src/constants/index.ts

@@ -1,11 +1,12 @@
-import { Exercise, useGetExercisesQuery } from "@/api/queries/get_exercises";
+import { useGetExercisesQuery } from "@/api/queries/get_exercises";
 import { useGetUserQuery } from "@/api/queries/get_user";
 import { useGetUserProgressQuery } from "@/api/queries/get_user_progress";
 import {
   DashboardHeader,
-  ExerciseGroupTable,
+  ExerciseTable,
   StatusMessage,
 } from "@/components/dashboard";
+import { EXERCISES_DIRECTORY_URL, ExerciseStatus } from "@/constants";
 import Spinner from "@/components/ui/Spinner";
 import { useCallback, useMemo } from "react";
 import { useParams } from "react-router";
@@ -34,9 +35,9 @@ function DashboardPage() {
       if (!progress.has(up.exercise_name)) {
         progress.set(up.exercise_name, up.status);
       } else if (
-        (progress.get(up.exercise_name) !== "SUCCESSFUL" ||
-          progress.get(up.exercise_name) !== "Completed") &&
-        (up.status === "SUCCESSFUL" || up.status === "Completed")
+        (progress.get(up.exercise_name) !== ExerciseStatus.COMPLETED &&
+          progress.get(up.exercise_name) !== ExerciseStatus.SUCCESSFUL) &&
+        (up.status === ExerciseStatus.SUCCESSFUL || up.status === ExerciseStatus.COMPLETED)
       ) {
         // Take any success
         progress.set(up.exercise_name, up.status);
@@ -48,27 +49,6 @@ function DashboardPage() {
 
   const { data: exercises, isLoading: isProblemSetsLoading } = useGetExercisesQuery();
 
-  const exerciseGroups = useMemo(() => {
-    if (isProblemSetsLoading || exercises == null) {
-      return new Map<string, Exercise[]>();
-    }
-
-    const repoGroups = new Map<string, Exercise[]>();
-    for (const exercise of exercises) {
-      for (const tag of exercise.tags) {
-        if (parsedUserProgress.has(exercise.exercise_name)) {
-          if (!repoGroups.has(tag)) {
-            repoGroups.set(tag, []);
-          }
-          repoGroups.get(tag)!.push(exercise);
-        }
-      }
-    }
-
-    const sortedGroups = new Map([...repoGroups.entries()].sort());
-    return sortedGroups;
-  }, [exercises, isProblemSetsLoading, parsedUserProgress]);
-
   const refreshUserProgress = useCallback(async () => {
     await refetchUserProgress();
   }, [refetchUserProgress]);
@@ -118,28 +98,26 @@ function DashboardPage() {
       );
     }
 
-    if (exerciseGroups.size === 0) {
+    if (exercises == null || exercises.length === 0) {
       return (
         <StatusMessage
           buttonText="Go to exercises directory ↗"
-          buttonHref="https://git-mastery.github.io/exercises-directory"
+          buttonHref={EXERCISES_DIRECTORY_URL}
           variant="primary"
           external
         >
-          <p>You have not completed any exercises yet</p>
+          <p>No exercises available</p>
         </StatusMessage>
       );
     }
 
-    return Array.from(exerciseGroups).map(([groupName, exercises]) => (
-      <ExerciseGroupTable
-        key={groupName}
-        groupName={groupName}
+    return (
+      <ExerciseTable
         exercises={exercises}
         progress={parsedUserProgress}
       />
-    ));
-  }, [isLoading, user, userProgress, exerciseGroups, parsedUserProgress, username]);
+    );
+  }, [isLoading, user, userProgress, exercises, parsedUserProgress, username]);
 
   return (
     <div className="lg:w-[40%] my-16 mx-auto md:w-[60%] w-[80%]">

src/pages/dashboard/(username)/index.tsx

@@ -0,0 +1,16 @@
+export interface LessonInfo {
+  path: string;
+  title: string;
+}
+
+export interface DetourInfo {
+  lesson: LessonInfo;
+  title: string;
+}
+
+export interface Exercise {
+  key: string;
+  identifier: string;
+  parentLesson: LessonInfo;
+  detour?: DetourInfo;
+}