From 28d720f77d2f6f1bc9a9c159761f9a12538f07d9 Mon Sep 17 00:00:00 2001
From: Eva Decker <eva@namesake.fyi>
Date: Sat, 19 Oct 2024 21:37:06 -0400
Subject: [PATCH] feat: Add quest completion meter (#136)

---
 .changeset/fuzzy-items-grin.md                |  5 ++
 convex/userQuests.ts                          | 17 ++++-
 src/components/ProgressBar/ProgressBar.tsx    |  2 +-
 .../_authenticated/admin/quests/index.tsx     |  2 +-
 src/routes/_authenticated/quests/route.tsx    | 69 +++++++++++--------
 5 files changed, 65 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/fuzzy-items-grin.md

diff --git a/.changeset/fuzzy-items-grin.md b/.changeset/fuzzy-items-grin.md
new file mode 100644
index 0000000..0f6eccd
--- /dev/null
+++ b/.changeset/fuzzy-items-grin.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Add quest completion meter
diff --git a/convex/userQuests.ts b/convex/userQuests.ts
index 9db4182..d91a80a 100644
--- a/convex/userQuests.ts
+++ b/convex/userQuests.ts
@@ -40,7 +40,7 @@ export const getAvailableQuestsForUser = userQuery({
   },
 });
 
-export const getQuestCount = query({
+export const getGlobalQuestCount = query({
   args: { questId: v.id("quests") },
   handler: async (ctx, args) => {
     const quests = await ctx.db
@@ -52,6 +52,21 @@ export const getQuestCount = query({
   },
 });
 
+export const getCompletedQuestCount = userQuery({
+  handler: async (ctx) => {
+    const userQuests = await ctx.db
+      .query("userQuests")
+      .withIndex("userId", (q) => q.eq("userId", ctx.userId))
+      .collect();
+
+    const completedQuests = userQuests.filter(
+      (quest) => quest.completionTime !== undefined,
+    );
+
+    return completedQuests.length;
+  },
+});
+
 export const create = userMutation({
   args: { questId: v.id("quests") },
   handler: async (ctx, args) => {
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 40bbb8f..9d39507 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -26,7 +26,7 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
           </div>
           <div className="w-64 h-2 rounded-full bg-gray-4 dark:bg-graydark-4 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
             <div
-              className={`absolute top-0 h-full rounded-full bg-purple-9 dark:bg-purpledark-9 forced-colors:bg-[Highlight] ${isIndeterminate ? "left-full animate-in duration-10 [--tw-enter-translate-x:calc(-16rem-1%)] slide-out-to-right-full repeat-infinite ease-out" : "left-0"}`}
+              className={`absolute top-0 h-full rounded-full bg-purple-9 dark:bg-purpledark-9 transition-all forced-colors:bg-[Highlight] ${isIndeterminate ? "left-full animate-in duration-10 [--tw-enter-translate-x:calc(-16rem-1%)] slide-out-to-right-full repeat-infinite ease-out" : "left-0"}`}
               style={{ width: `${isIndeterminate ? 40 : percentage}%` }}
             />
           </div>
diff --git a/src/routes/_authenticated/admin/quests/index.tsx b/src/routes/_authenticated/admin/quests/index.tsx
index 8af50dc..b8df6b1 100644
--- a/src/routes/_authenticated/admin/quests/index.tsx
+++ b/src/routes/_authenticated/admin/quests/index.tsx
@@ -117,7 +117,7 @@ const QuestTableRow = ({
 }: {
   quest: DataModel["quests"]["document"];
 }) => {
-  const questCount = useQuery(api.userQuests.getQuestCount, {
+  const questCount = useQuery(api.userQuests.getGlobalQuestCount, {
     questId: quest._id,
   });
   const deleteQuest = useMutation(api.quests.deleteQuest);
diff --git a/src/routes/_authenticated/quests/route.tsx b/src/routes/_authenticated/quests/route.tsx
index 66d31c3..0009911 100644
--- a/src/routes/_authenticated/quests/route.tsx
+++ b/src/routes/_authenticated/quests/route.tsx
@@ -7,6 +7,7 @@ import {
   GridList,
   GridListItem,
   Modal,
+  ProgressBar,
 } from "@/components";
 import { api } from "@convex/_generated/api";
 import type { Id } from "@convex/_generated/dataModel";
@@ -113,6 +114,7 @@ function IndexRoute() {
 
   const MyQuests = () => {
     const myQuests = useQuery(api.userQuests.getQuestsForCurrentUser);
+    const completedQuests = useQuery(api.userQuests.getCompletedQuestCount);
 
     if (myQuests === undefined) return;
 
@@ -129,34 +131,47 @@ function IndexRoute() {
         />
       );
 
+    const totalQuests = myQuests.length;
+
     return (
-      <GridList aria-label="My quests">
-        {myQuests.map((quest) => {
-          if (quest === null) return null;
-
-          const Icon = ICONS[quest.icon];
-
-          return (
-            <GridListItem
-              textValue={quest.title}
-              key={quest._id}
-              href={{ to: "/quests/$questId", params: { questId: quest._id } }}
-            >
-              <div className="flex items-center gap-2">
-                <Icon className="text-gray-dim" />
-                <p className="font-bold text-lg">{quest.title}</p>
-                {quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
-              </div>
-            </GridListItem>
-          );
-        })}
-        <GridListItem
-          textValue="Add quest"
-          onAction={() => setIsNewQuestModalOpen(true)}
-        >
-          <RiAddLine /> Add quest
-        </GridListItem>
-      </GridList>
+      <div className="flex flex-col gap-4">
+        <ProgressBar
+          label="Quests complete"
+          value={completedQuests}
+          maxValue={totalQuests}
+          valueLabel={`${completedQuests} of ${totalQuests}`}
+        />
+        <GridList aria-label="My quests">
+          {myQuests.map((quest) => {
+            if (quest === null) return null;
+
+            const Icon = ICONS[quest.icon];
+
+            return (
+              <GridListItem
+                textValue={quest.title}
+                key={quest._id}
+                href={{
+                  to: "/quests/$questId",
+                  params: { questId: quest._id },
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <Icon className="text-gray-dim" />
+                  <p className="font-bold text-lg">{quest.title}</p>
+                  {quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
+                </div>
+              </GridListItem>
+            );
+          })}
+          <GridListItem
+            textValue="Add quest"
+            onAction={() => setIsNewQuestModalOpen(true)}
+          >
+            <RiAddLine /> Add quest
+          </GridListItem>
+        </GridList>
+      </div>
     );
   };