refactor: extract sort config into pluginSortOptions

Author: DavidGBrett

src/pages/plugins/index.astro

@@ -8,6 +8,10 @@ import SectionSubheader from "@/components/SectionSubheader.astro";
 import LabelValue from "@/components/plugins/LabelValue.astro";
 import {TAGS} from "@/constants";
 import featuredPluginIds from "@/data/featured-plugins.yml";
+import {
+  DEFAULT_PLUGIN_SORT,
+  PLUGIN_SORT_LIST,
+} from "@/pages/plugins/pluginSortOptions";
 import Swiper from "@/components/Swiper.astro";
 
 const plugins = await getPluginsJson();
@@ -48,10 +52,11 @@ const hasFeaturedPlugins = featured.length > 0;
 
       <LabelValue label="Sort by">
         <select aria-label="Sort by" id="sort">
-          <option value="name-asc" selected>Name (A-Z)</option>
-          <option value="name-desc">Name (Z-A)</option>
-          <option value="first-release-desc">Release Date</option>
-          <option value="latest-release-desc">Last Updated</option>
+          {PLUGIN_SORT_LIST.map(option => (
+            <option value={option.value} selected={option.value === DEFAULT_PLUGIN_SORT}>
+              {option.label}
+            </option>
+          ))}
         </select>
       </LabelValue>
     </div>
@@ -111,6 +116,11 @@ const hasFeaturedPlugins = featured.length > 0;
 
 <script>
 import {TAGS} from "@/constants";
+import {
+  DEFAULT_PLUGIN_SORT,
+  isPluginSortValue,
+  PLUGIN_SORTS,
+} from "@/pages/plugins/pluginSortOptions";
 
 const searchInput = document.querySelector("#search") as HTMLInputElement;
 const tagsSelect = document.querySelector("#tags") as HTMLSelectElement;
@@ -119,14 +129,6 @@ const notFound = document.querySelector("#not-found") as HTMLElement;
 const store = document.querySelector("#store") as HTMLElement;
 
 const plugins = document.querySelectorAll("#store > .plugin") as NodeListOf<HTMLElement>;
-const defaultSortValue = "name-asc";
-const allowedSortValues = [
-  "name-asc",
-  "name-desc",
-  "latest-release-desc",
-  "first-release-desc",
-];
-
 searchInput.addEventListener("input", onFilterChange);
 tagsSelect.addEventListener("change", onFilterChange);
 sortSelect.addEventListener("change", onSortChange);
@@ -135,14 +137,14 @@ const url = new URL(window.location.href);
 
 const searchParam = url.searchParams.get("search") ?? "";
 let tagsParam: any = url.searchParams.get("tags") ?? "";
-let sortParam = url.searchParams.get("sort") ?? defaultSortValue;
+let sortParam = url.searchParams.get("sort") ?? DEFAULT_PLUGIN_SORT;
 
 if (!TAGS.includes(tagsParam)) {
   tagsParam = "";
 }
 
-if (!allowedSortValues.includes(sortParam)) {
-  sortParam = defaultSortValue;
+if (!isPluginSortValue(sortParam)) {
+  sortParam = DEFAULT_PLUGIN_SORT;
 }
 
 searchInput.value = searchParam;
@@ -182,11 +184,7 @@ function updateUrlParams(): void {
     url.searchParams.delete("tags");
   }
 
-  if (allowedSortValues.includes(sortValue)) {
-    url.searchParams.set("sort", sortValue);
-  } else {
-    url.searchParams.delete("sort");
-  }
+  url.searchParams.set("sort", sortValue);
 
   history.replaceState(null, "", url);
 }
@@ -232,31 +230,31 @@ function getDateTimestamp(plugin: HTMLElement, attributeName: string): number {
 function applySort(): void {
   const sortValue = sortSelect.value;
 
-  if (!allowedSortValues.includes(sortValue)) {
+  if (!isPluginSortValue(sortValue)) {
     return;
   }
 
   const sortedPlugins = Array.from(plugins).sort((a, b) => {
     switch (sortValue) {
-      case "latest-release-desc": {
+      case PLUGIN_SORTS.LATEST_RELEASE_DESC.value: {
         const latestA = getDateTimestamp(a, "data-latest-release-date");
         const latestB = getDateTimestamp(b, "data-latest-release-date");
         return latestB - latestA;
       }
 
-      case "first-release-desc": {
+      case PLUGIN_SORTS.FIRST_RELEASE_DESC.value: {
         const firstA = getDateTimestamp(a, "data-first-release-date");
         const firstB = getDateTimestamp(b, "data-first-release-date");
         return firstB - firstA;
       }
 
-      case "name-desc": {
+      case PLUGIN_SORTS.NAME_DESC.value: {
         const titleA = a.querySelector(".name")!.textContent!.trim().toLowerCase();
         const titleB = b.querySelector(".name")!.textContent!.trim().toLowerCase();
         return titleB.localeCompare(titleA);
       }
 
-      case "name-asc":
+      case PLUGIN_SORTS.NAME_ASC.value:
       default: {
         const titleA = a.querySelector(".name")!.textContent!.trim().toLowerCase();
         const titleB = b.querySelector(".name")!.textContent!.trim().toLowerCase();
@@ -265,7 +263,7 @@ function applySort(): void {
     }
   });
 
-  // Re-appending existing plugin nodes moves them into sorted order (no duplicates) 
+  // Re-appending existing plugin nodes moves them into sorted order (no duplicates)
   store.append(...sortedPlugins);
 }
 </script>

src/pages/plugins/pluginSortOptions.ts

@@ -0,0 +1,32 @@
+export const PLUGIN_SORTS = {
+  NAME_ASC: {
+    value: "name-asc",
+    label: "Name (A-Z)",
+  },
+  NAME_DESC: {
+    value: "name-desc",
+    label: "Name (Z-A)",
+  },
+  FIRST_RELEASE_DESC: {
+    value: "first-release-desc",
+    label: "Release Date",
+  },
+  LATEST_RELEASE_DESC: {
+    value: "latest-release-desc",
+    label: "Last Updated",
+  },
+} as const;
+
+export const PLUGIN_SORT_LIST = Object.values(PLUGIN_SORTS);
+
+export type PluginSortValue = typeof PLUGIN_SORTS[keyof typeof PLUGIN_SORTS]["value"];
+
+export const DEFAULT_PLUGIN_SORT: PluginSortValue = PLUGIN_SORTS.NAME_ASC.value;
+
+const PLUGIN_SORT_VALUE_SET = new Set<string>(
+  PLUGIN_SORT_LIST.map(option => option.value),
+);
+
+export function isPluginSortValue(value: string): value is PluginSortValue {
+  return PLUGIN_SORT_VALUE_SET.has(value);
+}