refactor: enhance sorting logic for lessons and resources using Intl.Collator

Author: Jared-Gross

src/components/common/lessons/lessons.ts

@@ -69,7 +69,15 @@ export class LessonListContainer {
 
             const lessons = await LessonsAPI.getByOutcome(this.outcome.outcomeId);
 
-            const entries = Object.entries(lessons?.data ?? {});
+            const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+
+            const entries = Object.entries(lessons?.data ?? {}).sort(([, a], [, b]) => {
+                const nameCompare = collator.compare(a.data.name, b.data.name);
+                if (nameCompare !== 0) return nameCompare;
+
+                return collator.compare(a.data.topic, b.data.topic);
+            });
+
             if (entries.length === 0) {
                 this.showEmptyMessage("No lessons have been added yet.");
                 return;

src/components/common/resources/resource.ts

@@ -68,7 +68,9 @@ export class ResourceListContainer {
 
             const resources = await ResourceAPI.getByOutcome(this.outcome.outcomeId);
 
-            const items = resources?.data ?? [];
+            const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+
+            const items = (resources?.data ?? []).sort((a, b) => collator.compare(a, b));
             if (!items.length) {
                 this.showEmptyMessage("No resources linked to this outcome yet.");
                 return;

src/pages/library/library.ts

@@ -44,9 +44,11 @@ document.addEventListener("DOMContentLoaded", async () => {
     function render(list: Record<string, LessonRecord>) {
         libraryDiv.innerHTML = "";
 
-        const entries = Object.entries(list).sort(([, a], [, b]) =>
-            a.data.name.localeCompare(b.data.name, undefined, { numeric: true })
-        );
+        const entries = Object.entries(list).sort(([, a], [, b]) => {
+            const nameCompare = a.data.topic.localeCompare(b.data.topic, undefined, { numeric: true });
+            if (nameCompare !== 0) return nameCompare;
+            return a.data.name.localeCompare(b.data.name, undefined, { numeric: true });
+        });
 
         if (!entries.length) {
             const p = document.createElement("p");