feat: Add quest categories (#160)

.changeset/healthy-buttons-deliver.md

@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Add quest categories

convex/constants.ts

@@ -1,183 +1,30 @@
 import {
   type RemixiconComponentType,
-  RiAccountCircleFill,
-  RiAppleFill,
+  RiAccountCircleLine,
   RiAtLine,
-  RiAuctionFill,
-  RiAwardFill,
-  RiBankCardFill,
-  RiBankFill,
-  RiBasketballFill,
-  RiBlueskyFill,
-  RiBuildingFill,
-  RiCakeFill,
+  RiBankLine,
   RiCalendarLine,
-  RiCapsuleFill,
-  RiCarFill,
-  RiChat1Fill,
+  RiChat3Line,
   RiCheckboxLine,
-  RiChromeFill,
-  RiCodeFill,
-  RiCommunityFill,
-  RiContactsBookFill,
-  RiDiscordFill,
-  RiDropboxFill,
+  RiComputerLine,
   RiDropdownList,
-  RiFacebookCircleFill,
-  RiFileFill,
-  RiFlowerFill,
-  RiFolder2Fill,
-  RiGithubFill,
-  RiGlobalFill,
-  RiGoogleFill,
-  RiGovernmentFill,
-  RiGraduationCapFill,
-  RiHandHeartFill,
+  RiGamepadLine,
+  RiGraduationCapLine,
   RiHashtag,
-  RiHeartFill,
-  RiHomeFill,
-  RiHospitalFill,
-  RiIdCardFill,
-  RiImageFill,
+  RiHeartPulseLine,
+  RiHome4Line,
   RiInputField,
-  RiInstagramFill,
-  RiKeyFill,
-  RiLightbulbFill,
-  RiLinkedinFill,
-  RiLock2Fill,
-  RiMailFill,
-  RiMediumFill,
-  RiMentalHealthFill,
-  RiMusic2Fill,
-  RiNewsFill,
+  RiMailLine,
+  RiMapPinLine,
+  RiMovie2Line,
   RiParagraph,
-  RiPatreonFill,
-  RiPhoneFill,
   RiPhoneLine,
-  RiPinterestFill,
-  RiPlantFill,
-  RiPlaystationFill,
-  RiPoliceBadgeFill,
-  RiRedditFill,
-  RiRestaurantFill,
-  RiRobot2Fill,
-  RiScales3Fill,
-  RiSchoolFill,
-  RiSettings3Fill,
-  RiShapesFill,
-  RiShieldUserFill,
-  RiSignpostFill,
-  RiSlackFill,
-  RiSmartphoneFill,
-  RiSnapchatFill,
-  RiSofaFill,
-  RiSoundcloudFill,
-  RiSparklingFill,
-  RiSpotifyFill,
-  RiStore2Fill,
-  RiSwitchFill,
-  RiSwordFill,
-  RiTeamFill,
-  RiTentFill,
-  RiTiktokFill,
-  RiToothFill,
-  RiTrophyFill,
-  RiTv2Fill,
-  RiTwitterXFill,
-  RiUserFill,
-  RiWalletFill,
-  RiWhatsappFill,
-  RiWindowsFill,
-  RiYoutubeFill,
+  RiQuestionLine,
+  RiScales3Line,
+  RiShoppingBag4Line,
+  RiSignpostLine,
 } from "@remixicon/react";
 
-export const ICONS: Record<string, RemixiconComponentType> = {
-  account: RiAccountCircleFill,
-  bank: RiBankFill,
-  basketball: RiBasketballFill,
-  building: RiBuildingFill,
-  cake: RiCakeFill,
-  car: RiCarFill,
-  certificate: RiAwardFill,
-  chat: RiChat1Fill,
-  code: RiCodeFill,
-  college: RiGraduationCapFill,
-  community: RiCommunityFill,
-  contacts: RiContactsBookFill,
-  creditCard: RiBankCardFill,
-  file: RiFileFill,
-  flower: RiFlowerFill,
-  folder: RiFolder2Fill,
-  food: RiRestaurantFill,
-  gavel: RiAuctionFill,
-  giving: RiHandHeartFill,
-  global: RiGlobalFill,
-  government: RiGovernmentFill,
-  heart: RiHeartFill,
-  home: RiHomeFill,
-  hospital: RiHospitalFill,
-  id: RiIdCardFill,
-  image: RiImageFill,
-  key: RiKeyFill,
-  lightbulb: RiLightbulbFill,
-  lock: RiLock2Fill,
-  mail: RiMailFill,
-  mentalHealth: RiMentalHealthFill,
-  music: RiMusic2Fill,
-  news: RiNewsFill,
-  phone: RiPhoneFill,
-  pill: RiCapsuleFill,
-  plant: RiPlantFill,
-  police: RiPoliceBadgeFill,
-  robot: RiRobot2Fill,
-  scale: RiScales3Fill,
-  school: RiSchoolFill,
-  settings: RiSettings3Fill,
-  shapes: RiShapesFill,
-  signpost: RiSignpostFill,
-  smartphone: RiSmartphoneFill,
-  socialSecurity: RiShieldUserFill,
-  sofa: RiSofaFill,
-  sparkles: RiSparklingFill,
-  store: RiStore2Fill,
-  sword: RiSwordFill,
-  team: RiTeamFill,
-  tent: RiTentFill,
-  tooth: RiToothFill,
-  trophy: RiTrophyFill,
-  tv: RiTv2Fill,
-  user: RiUserFill,
-  wallet: RiWalletFill,
-
-  // Logos
-  apple: RiAppleFill,
-  bluesky: RiBlueskyFill,
-  chrome: RiChromeFill,
-  discord: RiDiscordFill,
-  dropbox: RiDropboxFill,
-  facebook: RiFacebookCircleFill,
-  github: RiGithubFill,
-  google: RiGoogleFill,
-  instagram: RiInstagramFill,
-  linkedin: RiLinkedinFill,
-  medium: RiMediumFill,
-  patreon: RiPatreonFill,
-  pinterest: RiPinterestFill,
-  playstation: RiPlaystationFill,
-  reddit: RiRedditFill,
-  slack: RiSlackFill,
-  snapchat: RiSnapchatFill,
-  soundcloud: RiSoundcloudFill,
-  spotify: RiSpotifyFill,
-  switch: RiSwitchFill,
-  tiktok: RiTiktokFill,
-  twitter: RiTwitterXFill,
-  whatsapp: RiWhatsappFill,
-  windows: RiWindowsFill,
-  youtube: RiYoutubeFill,
-} as const;
-export type Icon = keyof typeof ICONS;
-
 export const JURISDICTIONS = {
   AK: "Alaska",
   AL: "Alabama",
@@ -293,3 +140,71 @@ export const SORT_QUESTS_BY = {
   oldest: "Oldest",
 } as const;
 export type SortQuestsBy = keyof typeof SORT_QUESTS_BY;
+
+interface CategoryDetails {
+  label: string;
+  icon: RemixiconComponentType;
+}
+export const CATEGORIES: Record<string, CategoryDetails> = {
+  core: {
+    label: "Core",
+    icon: RiSignpostLine,
+  },
+  entertainment: {
+    label: "Arts and Entertainment",
+    icon: RiMovie2Line,
+  },
+  devices: {
+    label: "Devices",
+    icon: RiComputerLine,
+  },
+  education: {
+    label: "Education",
+    icon: RiGraduationCapLine,
+  },
+  finance: {
+    label: "Finance",
+    icon: RiBankLine,
+  },
+  gaming: {
+    label: "Gaming",
+    icon: RiGamepadLine,
+  },
+  government: {
+    label: "Government",
+    icon: RiScales3Line,
+  },
+  health: {
+    label: "Health",
+    icon: RiHeartPulseLine,
+  },
+  housing: {
+    label: "Housing and Utilities",
+    icon: RiHome4Line,
+  },
+  personal: {
+    label: "Personal",
+    icon: RiAccountCircleLine,
+  },
+  shopping: {
+    label: "Shopping",
+    icon: RiShoppingBag4Line,
+  },
+  social: {
+    label: "Social",
+    icon: RiChat3Line,
+  },
+  subscriptions: {
+    label: "Subscriptions",
+    icon: RiMailLine,
+  },
+  travel: {
+    label: "Travel",
+    icon: RiMapPinLine,
+  },
+  other: {
+    label: "Other",
+    icon: RiQuestionLine,
+  },
+};
+export type Category = keyof typeof CATEGORIES;

convex/quests.ts

@@ -1,7 +1,7 @@
 import { v } from "convex/values";
 import { query } from "./_generated/server";
 import { userMutation } from "./helpers";
-import { icon, jurisdiction } from "./validators";
+import { category, jurisdiction } from "./validators";
 
 // TODO: Add `returns` value validation
 // https://docs.convex.dev/functions/validation
@@ -13,6 +13,16 @@ export const getAllQuests = query({
   },
 });
 
+export const getAllQuestsInCategory = query({
+  args: { category: v.string() },
+  handler: async (ctx, args) => {
+    return await ctx.db
+      .query("quests")
+      .withIndex("category", (q) => q.eq("category", args.category))
+      .collect();
+  },
+});
+
 export const getAllActiveQuests = query({
   args: {},
   handler: async (ctx) => {
@@ -34,12 +44,12 @@ export const createQuest = userMutation({
   args: {
     title: v.string(),
     jurisdiction: v.optional(jurisdiction),
-    icon: icon,
+    category: v.optional(category),
   },
   handler: async (ctx, args) => {
     return await ctx.db.insert("quests", {
       title: args.title,
-      icon: args.icon,
+      category: args.category,
       jurisdiction: args.jurisdiction,
       creationUser: ctx.userId,
     });

convex/schema.ts

@@ -2,8 +2,8 @@ import { authTables } from "@convex-dev/auth/server";
 import { defineSchema, defineTable } from "convex/server";
 import { v } from "convex/values";
 import {
+  category,
   field,
-  icon,
   jurisdiction,
   role,
   sortQuestsBy,
@@ -13,19 +13,21 @@ import {
 /**
  * Represents a collection of steps and forms for a user to complete.
  * @param title - The title of the quest. (e.g. "Court Order")
+ * @param category - The category of the quest. (e.g. "Social")
  * @param creationUser - The user who created the quest.
- * @param state - The US State the quest applies to. (e.g. "MA")
+ * @param jurisdiction - The US State the quest applies to. (e.g. "MA")
  * @param deletionTime - Time in ms since epoch when the quest was deleted.
  * @param steps - An ordered list of steps to complete the quest.
  */
 const quests = defineTable({
-  icon: icon,
   title: v.string(),
+  icon: v.optional(v.string()), // TODO: Delete
+  category: v.optional(category),
   creationUser: v.id("users"),
   jurisdiction: v.optional(jurisdiction),
   deletionTime: v.optional(v.number()),
   steps: v.optional(v.array(v.id("questSteps"))),
-});
+}).index("category", ["category"]);
 
 /**
  * Represents a single step in a quest.

convex/seed.ts

@@ -45,21 +45,9 @@ const seed = internalMutation(async (ctx) => {
       const questJurisdiction = faker.helpers.arrayElement(
         Object.keys(JURISDICTIONS),
       );
-      const iconForQuestTitle = (title: string) => {
-        switch (title) {
-          case "Court Order":
-            return "gavel";
-          case "State ID":
-            return "id";
-          case "Birth Certificate":
-            return "certificate";
-          default:
-            return "signpost";
-        }
-      };
       await ctx.db.insert("quests", {
-        icon: iconForQuestTitle(questTitle),
         title: questTitle,
+        category: "core",
         jurisdiction: questJurisdiction,
         creationUser: userId,
       });