Better sorting

src/lib/components/SortButtons.svelte

@@ -3,44 +3,47 @@
     import { sortOverviews } from "$lib/scripts/util";
     import { overview } from "$lib/scripts/OverviewStore";
     import { sort_info } from "$lib/scripts/SortStore.ts";
+    import { SortType, Column } from "$lib/scripts/Column";
 
     let overview_store;
 
     overview.subscribe((value) => {
         overview_store = value;
     });
 
-    let sort_col: string;
+    let sort_col: Column;
     let sort_descending: boolean;
 
     sort_info.subscribe((sort_values) => {
         sort_col = sort_values.sort_col;
         sort_descending = sort_values.sort_descending;
     });
 
+    // Type refers to the whether this column is to be sorted in alphabetical
+    // order or numerical order
     const columns = [
-        "Plugin Owner",
-        "Plugin Name",
-        "Stars",
-        "Commit Date",
-        "Build Status",
+        new Column("Plugin Owner", SortType.alphabetical),
+        new Column("Plugin Name", SortType.alphabetical),
+        new Column("Stars", SortType.numerical),
+        new Column("Commit Date", SortType.numerical),
+        new Column("Build Status", SortType.alphabetical)
     ];
 
-    function sortButton(this_col: string) {
-        if (this_col === sort_col) {
+    function sortButton(column: Column) {
+        if (column.name === sort_col.name) {
             sort_descending = !sort_descending;
         } else {
             sort_descending = true;
         }
 
         overview_store.filtered_overviews = sortOverviews(
             overview_store.filtered_overviews,
-            this_col,
+            column,
             sort_descending,
         );
 
         sort_info.set({
-            sort_col: this_col,
+            sort_col: column,
             sort_descending: sort_descending,
         });
 
@@ -54,10 +57,10 @@
     {#each columns as column}
         <button class="sortButton" on:click={() => sortButton(column)}>
             <div class="float-left">
-                {column}
+                {column.name}
             </div>
             <svg fill="none" width="10" height="10" class="svg">
-                {#if sort_col !== column}
+                {#if sort_col.name !== column.name}
                     <path
                         stroke-width="3"
                         stroke="rgb(119, 119, 119)"

src/lib/scripts/Column.ts

@@ -0,0 +1,14 @@
+export enum SortType {
+    alphabetical = "alphabetical",
+    numerical = "numerical"
+};
+
+export class Column {
+    name = "";
+    sort_type = "alphabetical";
+
+    constructor(name: string, sort_type: SortType) {
+        this.name = name;
+        this.sort_type = sort_type;
+    }
+}

src/lib/scripts/SortStore.ts

@@ -1,6 +1,7 @@
 import { writable } from "svelte/store";
+import { SortType, Column } from "$lib/scripts/Column";
 
 export const sort_info = writable({
-  sort_col: "Plugin Name",
+  sort_col: new Column("Stars", SortType.numerical),
   sort_descending: true,
 });

src/lib/scripts/util.ts

@@ -1,13 +1,14 @@
 import { overview } from "$lib/scripts/OverviewStore";
+import { SortType, type Column } from "$lib/scripts/Column";
 
 export function sortOverviews(
   filtered_overviews: Object[],
-  sort_col: string,
+  sort_col: Column,
   sort_descending: boolean,
 ) {
   function compareElements(a: Object, b: Object) {
-    const A = a[sort_col as keyof Object];
-    const B = b[sort_col as keyof Object];
+    const A = a[sort_col.name as keyof Object];
+    const B = b[sort_col.name as keyof Object];
 
     if (A < B) {
       return sort_descending === true ? 1 : -1;
@@ -18,6 +19,13 @@ export function sortOverviews(
     return 0;
   }
 
+  // It turns out that similar to how 4 > 3 is true f > b is true, so if we
+  // want to sort alphabetically in the manner expected we need to reverse the
+  // sort order for alphabetical column
+  if (sort_col.sort_type === SortType.alphabetical) {
+    sort_descending = !sort_descending;
+  }
+
   filtered_overviews.sort(compareElements);
   return filtered_overviews;
 }

src/routes/+page.svelte

@@ -11,6 +11,7 @@
     import { sort_info } from "$lib/scripts/SortStore.ts";
     import { sortOverviews, formatDate } from "$lib/scripts/util";
     import FilterButton from "$lib/components/FilterButton.svelte";
+    import type { Column } from "$lib/scripts/Column";
 
     let repo_overviews: Array<Object>;
     let search_filter: string;
@@ -38,7 +39,7 @@
         num_pages = value.num_pages;
     })
 
-    let sort_col: string;
+    let sort_col: Column;
     let sort_descending: boolean;
 
     sort_info.subscribe((sort_values) => {