From e1b1c3a1b59c168a313340b9b8b7195c32550921 Mon Sep 17 00:00:00 2001
From: Byron Wall <byron@byroni.us>
Date: Mon, 25 Sep 2023 00:02:00 -0400
Subject: [PATCH] Only show new award images (#88)

Only show images when unclaimed awards exist
Commonize on a grid layout for all displays
---
 src/app/awards/page.tsx               | 58 ++++++++++++++-------------
 src/server/api/routers/awardRouter.ts | 25 ++++++++++--
 2 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/app/awards/page.tsx b/src/app/awards/page.tsx
index 4a482a1..ff25928 100644
--- a/src/app/awards/page.tsx
+++ b/src/app/awards/page.tsx
@@ -69,42 +69,34 @@ export default function AwardsPage() {
       <p>Current word count: {currentWordCount}</p>
       <p>Next award at: {nextWordAward}</p>
 
-      <div className="flex flex-wrap">
-        {wordCountAwards?.map((award) => (
-          <AwardCard key={award.id} award={award} />
-        ))}
-      </div>
+      <AwardList awards={wordCountAwards} />
 
       <h2>Sentence count awards</h2>
 
       <p>Current sentence count: {currentSentenceCount}</p>
       <p>Next award at: {nextSentenceAward}</p>
 
-      <div className="flex flex-wrap">
-        {sentenceCountAwards?.map((award) => (
-          <AwardCard key={award.id} award={award} />
-        ))}
-      </div>
+      <AwardList awards={sentenceCountAwards} />
 
       <h2>Word mastery awards</h2>
 
-      <div className="flex flex-wrap">
-        {wordMasteryAwards?.map((award) => (
-          <AwardCard key={award.id} award={award} />
-        ))}
-      </div>
-
-      <h2>Award images</h2>
-
-      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-        {(allAwardImages ?? []).map((image) => (
-          <AwardImageChoice
-            key={image.id}
-            image={image}
-            shouldClickToClaim={hasUnclaimedAwards}
-          />
-        ))}
-      </div>
+      <AwardList awards={wordMasteryAwards} />
+
+      {hasUnclaimedAwards && (
+        <>
+          <h2>Award images</h2>
+
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+            {(allAwardImages ?? []).map((image) => (
+              <AwardImageChoice
+                key={image.id}
+                image={image}
+                shouldClickToClaim={hasUnclaimedAwards}
+              />
+            ))}
+          </div>
+        </>
+      )}
 
       <Textarea
         value={imageUrls}
@@ -162,6 +154,8 @@ function AwardImageChoice({
     await addImageIdToAward.mutateAsync({
       imageId,
     });
+
+    await utils.awardRouter.getAllAwardsForProfile.invalidate();
   };
 
   const deleteImage = trpc.awardRouter.deleteImage.useMutation();
@@ -193,3 +187,13 @@ function AwardImageChoice({
     </div>
   );
 }
+
+function AwardList({ awards = [] }: { awards?: Award[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {awards.map((award) => (
+        <AwardCard key={award.id} award={award} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/server/api/routers/awardRouter.ts b/src/server/api/routers/awardRouter.ts
index 0966dc5..55eaf2e 100644
--- a/src/server/api/routers/awardRouter.ts
+++ b/src/server/api/routers/awardRouter.ts
@@ -71,13 +71,32 @@ export const awardRouter = createTRPCRouter({
       });
     }),
 
-  getAllAwardImages: protectedProcedure.query(async () => {
+  getAllAwardImages: protectedProcedure.query(async ({ ctx }) => {
+    const profileId = ctx.session.user.activeProfile.id;
+
     const allAwardImages = await prisma.awardImages.findMany();
 
+    const profileAwardImages = await prisma.profileAward.findMany({
+      where: {
+        profileId,
+      },
+      select: {
+        imageId: true,
+      },
+    });
+
+    // filter out any images that are already assigned to the profile
+    const filteredAwardImages = allAwardImages.filter(
+      (awardImage) =>
+        !profileAwardImages.find(
+          (profileAwardImage) => profileAwardImage.imageId === awardImage.id
+        )
+    );
+
     // shuffle those
-    allAwardImages.sort(() => Math.random() - 0.5);
+    filteredAwardImages.sort(() => Math.random() - 0.5);
 
-    return allAwardImages;
+    return filteredAwardImages;
   }),
 
   addImageIdToAward: protectedProcedure