feat(store): add sorting by download count

api/src/api/store/items.ts

@@ -159,8 +159,9 @@ export default function (fastify: FastifyInstance, _: unknown, done: () => void)
       page?: string;
       items?: string;
       query?: string;
+      sort?: "downloads" | "name";
     };
-  }>("/list/:type", (request, reply) => {
+  }>("/list/:type", async (request, reply) => {
     // @ts-expect-error includes bs
     if (!ADDON_TYPES.includes(request.params.type.replace(/s$/, ""))) {
       reply.code(400).send({
@@ -191,7 +192,7 @@ export default function (fastify: FastifyInstance, _: unknown, done: () => void)
       return;
     }
 
-    const manifests = listAddons(type, request.query.query);
+    let manifests = listAddons(type, request.query.query);
     const numPages = Math.ceil(manifests.length / perPage);
     if (page > numPages) {
       reply.code(404).send({
@@ -203,6 +204,48 @@ export default function (fastify: FastifyInstance, _: unknown, done: () => void)
     const start = (page - 1) * perPage;
     const end = start + perPage;
 
+    const sort = request.query.sort ?? "downloads";
+    if (sort === "downloads") {
+      const collection = fastify.mongo.db!.collection<StoreStats>("storeStats");
+      const aggregation = collection.aggregate([
+        {
+          $match: {
+            type: "install",
+          },
+        },
+        {
+          $group: {
+            _id: "$id",
+            ips: {
+              $addToSet: "$ipHash",
+            },
+          },
+        },
+        {
+          $project: {
+            count: {
+              $size: "$ips",
+            },
+          },
+        },
+        {
+          $sort: {
+            count: -1,
+          },
+        },
+      ]);
+      const stats = await aggregation.toArray();
+
+      manifests = manifests.sort((a, b) => {
+        const aStat = stats.find((x) => x._id === a.id);
+        const bStat = stats.find((x) => x._id === b.id);
+        if (!aStat && !bStat) return 0;
+        if (!aStat) return 1;
+        if (!bStat) return -1;
+        return bStat.count - aStat.count;
+      });
+    }
+
     return {
       page,
       numPages,

web/src/components/store/Store.tsx

@@ -14,6 +14,7 @@ import { toArray } from "../util/misc";
 import { getError, installAddon, useInstalledAddons } from "./utils";
 import { Routes } from "../../constants";
 import { RouteError } from "../../types";
+import { SelectField } from "../util/Form";
 
 type StoreKind = "plugin" | "theme";
 
@@ -238,6 +239,8 @@ export function StandaloneStoreItem({
 export default function Store({ kind, installedAddons, updateAddonList }: StoreProps): VNode {
   useTitle(`Replugged ${LABELS[kind]}`);
 
+  const [sort, setSort] = useState("downloads");
+
   const [query, setQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState(query);
 
@@ -252,12 +255,13 @@ export default function Store({ kind, installedAddons, updateAddonList }: StoreP
   );
 
   const itemsQuery = useInfiniteQuery<PaginatedStore>({
-    queryKey: ["store", kind, debouncedQuery],
+    queryKey: ["store", kind, debouncedQuery, sort],
     queryFn: async ({ pageParam: page }) => {
       const queryString = new URLSearchParams({
         page: page?.toString() ?? pageQuery ?? "1",
         items: (12).toString(),
         query: debouncedQuery,
+        sort,
       });
 
       const res = await fetch(`/api/store/list/${kind}?${queryString}`);
@@ -292,13 +296,26 @@ export default function Store({ kind, installedAddons, updateAddonList }: StoreP
       <h1 class={style.header}>Replugged {LABELS[kind]}</h1>
       <div class={style.grid}>
         {items.length > 0 || debouncedQuery ? (
-          <input
-            class={`${formStyle.textField} ${style.search}`}
-            type="text"
-            placeholder="Search"
-            value={query}
-            onInput={(e) => setQuery(e.currentTarget.value)}
-          />
+          <>
+            <SelectField
+              name="sort"
+              label="Sort By"
+              options={[
+                { id: "downloads", name: "Downloads" },
+                { id: "name", name: "Name" },
+              ]}
+              value={sort}
+              fieldClassName={style.sortSelect}
+              onChange={(e) => setSort(e.currentTarget.value)}
+            />
+            <input
+              class={`${formStyle.textField} ${style.search}`}
+              type="text"
+              placeholder="Search"
+              value={query}
+              onInput={(e) => setQuery(e.currentTarget.value)}
+            />
+          </>
         ) : null}
         <StoreBody
           {...itemsQuery}

web/src/components/store/store.module.css

@@ -6,6 +6,17 @@
   margin-bottom: 24px;
 }
 
+.sortSelect {
+  margin: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.search {
+  grid-column-end: -1;
+  align-self: end;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
@@ -24,10 +35,6 @@
   }
 }
 
-.search {
-  grid-column-end: -1;
-}
-
 .full-grid {
   grid-column: 1 / -1;
 }

web/src/components/util/Form.tsx

@@ -1,6 +1,7 @@
 import {
   type Attributes,
   type ComponentChild,
+  type JSX,
   ComponentChildren,
   VNode,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -20,6 +21,7 @@ type BaseProps = Attributes & {
   error?: ComponentChild;
   children: ComponentChild;
   required?: boolean;
+  className?: string;
 };
 
 type BaseFieldProps = Attributes & {
@@ -31,6 +33,7 @@ type BaseFieldProps = Attributes & {
   disabled?: boolean;
   raw?: boolean;
   rk?: number; // [Cynthia] this is used to force re-render of form fields, to help with errors sometimes not showing up
+  fieldClassName?: string;
 };
 
 type TextFieldProps = BaseFieldProps & {
@@ -42,6 +45,7 @@ type TextFieldProps = BaseFieldProps & {
 };
 type CheckboxFieldProps = BaseFieldProps & { value?: boolean };
 type SelectFieldProps = BaseFieldProps & {
+  onChange: JSX.GenericEventHandler<HTMLSelectElement>;
   value?: string;
   options: Array<{ id: string; name: string }>;
 };
@@ -81,7 +85,7 @@ function useField(note?: ComponentChild, error?: ComponentChild, rk?: number): F
 
 function BaseField(props: BaseProps): VNode {
   return (
-    <div className={style.field}>
+    <div className={[style.field, props.className].filter(Boolean).join(" ")}>
       <label className={style.label} for={props.id}>
         {props.label}
         {props.required && <span className={style.required}>*</span>}
@@ -167,7 +171,12 @@ export function SelectField(props: SelectFieldProps): VNode {
   const field = useField(props.note, props.error, props.rk);
 
   return (
-    <BaseField {...field} label={props.label} required={props.required} id={field.id}>
+    <BaseField
+      {...field}
+      label={props.label}
+      required={props.required}
+      id={field.id}
+      className={props.fieldClassName}>
       <select
         type="checkbox"
         id={field.id}
@@ -176,7 +185,8 @@ export function SelectField(props: SelectFieldProps): VNode {
         required={props.required}
         disabled={props.disabled}
         className={style.selectField}
-        onClick={field.onChange}>
+        onClick={field.onChange}
+        onChange={props.onChange}>
         {props.options.map(({ id, name }) => (
           <option key={id} value={id}>
             {name}