Badges to user page from DB

app/db/index.ts

@@ -1,9 +1,11 @@
 import * as users from "./models/users.server";
 import * as plusSuggestions from "./models/plusSuggestions.server";
 import * as plusVotes from "./models/plusVotes.server";
+import * as badges from "./models/badges.server";
 
 export const db = {
   users,
   plusSuggestions,
   plusVotes,
+  badges,
 };

app/db/models/badges.server.ts

@@ -0,0 +1,20 @@
+import { sql } from "../sql";
+import type { Badge, User } from "../types";
+
+const countsByUserIdStm = sql.prepare(`
+  select "Badge"."code", "Badge"."displayName", count("BadgeOwner"."code") as count 
+    from "BadgeOwner" 
+    join "Badge" on "Badge"."code" = "BadgeOwner"."code"
+    where "BadgeOwner"."userId" = $userId 
+    group by "BadgeOwner"."code", "BadgeOwner"."userId"
+  `);
+
+export type CountsByUserId = Array<
+  Pick<Badge, "code" | "displayName"> & {
+    count: number;
+  }
+>;
+
+export function countsByUserId(userId: User["id"]) {
+  return countsByUserIdStm.all({ userId }) as CountsByUserId;
+}

app/routes/u.$identifier.tsx

@@ -6,6 +6,7 @@ import { z } from "zod";
 import { Main } from "~/components/Main";
 import { SubNav, SubNavLink } from "~/components/SubNav";
 import { db } from "~/db";
+import type { CountsByUserId } from "~/db/models/badges.server";
 import type { User } from "~/db/types";
 import { useUser } from "~/modules/auth";
 import { makeTitle, notFoundIfFalsy } from "~/utils/remix";
@@ -30,7 +31,10 @@ export type UserPageLoaderData = Pick<
   | "twitch"
   | "twitter"
   | "bio"
-> & { country?: { name: string; emoji: string; code: string } };
+> & {
+  country?: { name: string; emoji: string; code: string };
+  badges: CountsByUserId;
+};
 
 export const loader: LoaderFunction = ({ params }) => {
   const { identifier } = userParamsSchema.parse(params);
@@ -58,6 +62,7 @@ export const loader: LoaderFunction = ({ params }) => {
             code: user.country,
           }
         : undefined,
+    badges: db.badges.countsByUserId(user.id),
   });
 };