From e207b280fb17a2fdcf3d5b6c7c9a4f4e069d24f3 Mon Sep 17 00:00:00 2001
From: Byron Wall <byron@byroni.us>
Date: Mon, 25 Sep 2023 21:46:46 -0400
Subject: [PATCH] Add global banner with new awards (#90)

---
 src/app/GlobalNotifications.tsx             | 24 +++++++++++++++++++++
 src/app/layout.tsx                          |  2 ++
 src/components/SentenceQuestionPractice.tsx |  3 +++
 3 files changed, 29 insertions(+)
 create mode 100644 src/app/GlobalNotifications.tsx

diff --git a/src/app/GlobalNotifications.tsx b/src/app/GlobalNotifications.tsx
new file mode 100644
index 0000000..8373600
--- /dev/null
+++ b/src/app/GlobalNotifications.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import Link from "next/link";
+
+import { trpc } from "~/app/_trpc/client";
+
+export function GlobalNotifications() {
+  const { data: awards } = trpc.awardRouter.getAllAwardsForProfile.useQuery();
+
+  const hasUnclaimedAwards = awards?.some((award) => !award.imageId) ?? false;
+
+  if (!hasUnclaimedAwards) return null;
+
+  return (
+    <div className="my-2 bg-yellow-300 p-2 text-yellow-800">
+      <p className="text-center">
+        <Link href="/awards">
+          <strong>You have unclaimed awards!</strong> Go to the awards page to
+          claim them.
+        </Link>
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 02d73d1..d36c384 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { getServerAuthSession } from "~/server/auth";
 
 import Provider from "./_trpc/Provider";
 import { NextAuthProvider } from "./authProvider";
+import { GlobalNotifications } from "./GlobalNotifications";
 
 import { UserMenuOrLogin } from "../components/UserMenuOrLogin";
 
@@ -40,6 +41,7 @@ export default async function RootLayout({
                   <UserMenuOrLogin />
                 </div>
               </header>
+              <GlobalNotifications />
               <main className="flex-1">
                 <div className="container flex max-w-[96rem] flex-col items-center gap-4 text-center">
                   {children}
diff --git a/src/components/SentenceQuestionPractice.tsx b/src/components/SentenceQuestionPractice.tsx
index 721ff5d..6bf32b9 100644
--- a/src/components/SentenceQuestionPractice.tsx
+++ b/src/components/SentenceQuestionPractice.tsx
@@ -135,6 +135,9 @@ export function SentenceQuestionPractice() {
 
     // get the next sentence by invalidating query
     await utils.questionRouter.getPossibleSentences.invalidate();
+
+    // this is needed to update the award banner
+    await utils.awardRouter.getAllAwardsForProfile.invalidate();
   };
 
   if (isLoadingSentences) {