From 0febd67cf93f683f94dbec6b8a593ed23c4f33b5 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 4 Jul 2022 14:31:34 +0300
Subject: [PATCH] Fix BadgeContainer key on user profile

---
 app/db/models/badges.server.ts     | 4 ++--
 app/routes/u.$identifier/index.tsx | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/db/models/badges.server.ts b/app/db/models/badges.server.ts
index 7ce1a6ab7..f07f924d1 100644
--- a/app/db/models/badges.server.ts
+++ b/app/db/models/badges.server.ts
@@ -2,7 +2,7 @@ import { sql } from "../sql";
 import type { Badge, User } from "../types";
 
 const countsByUserIdStm = sql.prepare(`
-  select "Badge"."code", "Badge"."displayName", count("BadgeOwner"."badgeId") as count 
+  select "Badge"."code", "Badge"."displayName", "Badge"."id", count("BadgeOwner"."badgeId") as count 
     from "BadgeOwner" 
     join "Badge" on "Badge"."id" = "BadgeOwner"."badgeId"
     where "BadgeOwner"."userId" = $userId 
@@ -10,7 +10,7 @@ const countsByUserIdStm = sql.prepare(`
   `);
 
 export type CountsByUserId = Array<
-  Pick<Badge, "code" | "displayName"> & {
+  Pick<Badge, "code" | "displayName" | "id"> & {
     count: number;
   }
 >;
diff --git a/app/routes/u.$identifier/index.tsx b/app/routes/u.$identifier/index.tsx
index 0d44567b2..f1d7c5867 100644
--- a/app/routes/u.$identifier/index.tsx
+++ b/app/routes/u.$identifier/index.tsx
@@ -145,8 +145,7 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
         {smallBadges.length > 0 ? (
           <div className="u__small-badges">
             {smallBadges.map((badge) => (
-              // xxx: should use badge.id - code is not necessarily unique
-              <div key={badge.code} className="u__small-badge-container">
+              <div key={badge.id} className="u__small-badge-container">
                 <img
                   src={`/gif/badges/${badge.code}.gif`}
                   alt={badge.displayName}