feat: Display quest icons, refactor quest steps schema (#108)

.changeset/good-chairs-peel.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Display icons for quests and improve quest step appearance

convex/_generated/api.d.ts

@@ -17,10 +17,10 @@ import type {
 } from "convex/server";
 import type * as auth from "../auth.js";
 import type * as constants from "../constants.js";
-import type * as formFields from "../formFields.js";
 import type * as forms from "../forms.js";
 import type * as helpers from "../helpers.js";
 import type * as http from "../http.js";
+import type * as questSteps from "../questSteps.js";
 import type * as quests from "../quests.js";
 import type * as seed from "../seed.js";
 import type * as types from "../types.js";
@@ -38,10 +38,10 @@ import type * as usersQuests from "../usersQuests.js";
 declare const fullApi: ApiFromModules<{
   auth: typeof auth;
   constants: typeof constants;
-  formFields: typeof formFields;
   forms: typeof forms;
   helpers: typeof helpers;
   http: typeof http;
+  questSteps: typeof questSteps;
   quests: typeof quests;
   seed: typeof seed;
   types: typeof types;

convex/constants.ts

@@ -1,3 +1,174 @@
+import {
+  type RemixiconComponentType,
+  RiAccountCircleLine,
+  RiAppleFill,
+  RiAuctionLine,
+  RiAwardLine,
+  RiBankCardLine,
+  RiBankLine,
+  RiBasketballLine,
+  RiBlueskyFill,
+  RiBuildingLine,
+  RiCakeLine,
+  RiCapsuleLine,
+  RiCarLine,
+  RiChat1Line,
+  RiChromeFill,
+  RiCodeLine,
+  RiCommunityLine,
+  RiContactsBookLine,
+  RiDiscordFill,
+  RiDropboxFill,
+  RiFacebookCircleFill,
+  RiFileLine,
+  RiFlowerLine,
+  RiFolder2Line,
+  RiGithubFill,
+  RiGlobalLine,
+  RiGoogleFill,
+  RiGovernmentLine,
+  RiGraduationCapLine,
+  RiHandHeartLine,
+  RiHeartLine,
+  RiHomeLine,
+  RiHospitalLine,
+  RiIdCardLine,
+  RiImageLine,
+  RiInstagramFill,
+  RiKeyLine,
+  RiLightbulbLine,
+  RiLinkedinFill,
+  RiLock2Line,
+  RiMailLine,
+  RiMediumFill,
+  RiMentalHealthLine,
+  RiMusic2Line,
+  RiNewsLine,
+  RiPatreonFill,
+  RiPhoneLine,
+  RiPinterestFill,
+  RiPlantLine,
+  RiPlaystationFill,
+  RiPoliceBadgeLine,
+  RiRedditFill,
+  RiRestaurantLine,
+  RiRobot2Line,
+  RiScales3Line,
+  RiSchoolLine,
+  RiSettings3Line,
+  RiShapesLine,
+  RiShieldUserLine,
+  RiSignpostLine,
+  RiSlackFill,
+  RiSmartphoneLine,
+  RiSnapchatFill,
+  RiSofaLine,
+  RiSoundcloudFill,
+  RiSparklingLine,
+  RiSpotifyFill,
+  RiStore2Line,
+  RiSwitchFill,
+  RiSwordLine,
+  RiTeamLine,
+  RiTentLine,
+  RiTiktokFill,
+  RiToothLine,
+  RiTrophyLine,
+  RiTv2Line,
+  RiTwitterXFill,
+  RiUserLine,
+  RiWalletLine,
+  RiWhatsappFill,
+  RiWindowsFill,
+  RiYoutubeFill,
+} from "@remixicon/react";
+
+export const ICONS: Record<string, RemixiconComponentType> = {
+  account: RiAccountCircleLine,
+  bank: RiBankLine,
+  basketball: RiBasketballLine,
+  building: RiBuildingLine,
+  cake: RiCakeLine,
+  car: RiCarLine,
+  certificate: RiAwardLine,
+  chat: RiChat1Line,
+  code: RiCodeLine,
+  college: RiGraduationCapLine,
+  community: RiCommunityLine,
+  contacts: RiContactsBookLine,
+  creditCard: RiBankCardLine,
+  file: RiFileLine,
+  flower: RiFlowerLine,
+  folder: RiFolder2Line,
+  food: RiRestaurantLine,
+  gavel: RiAuctionLine,
+  giving: RiHandHeartLine,
+  global: RiGlobalLine,
+  government: RiGovernmentLine,
+  heart: RiHeartLine,
+  home: RiHomeLine,
+  hospital: RiHospitalLine,
+  id: RiIdCardLine,
+  image: RiImageLine,
+  key: RiKeyLine,
+  lightbulb: RiLightbulbLine,
+  lock: RiLock2Line,
+  mail: RiMailLine,
+  mentalHealth: RiMentalHealthLine,
+  music: RiMusic2Line,
+  news: RiNewsLine,
+  phone: RiPhoneLine,
+  pill: RiCapsuleLine,
+  plant: RiPlantLine,
+  police: RiPoliceBadgeLine,
+  robot: RiRobot2Line,
+  scale: RiScales3Line,
+  school: RiSchoolLine,
+  settings: RiSettings3Line,
+  shapes: RiShapesLine,
+  signpost: RiSignpostLine,
+  smartphone: RiSmartphoneLine,
+  socialSecurity: RiShieldUserLine,
+  sofa: RiSofaLine,
+  sparkles: RiSparklingLine,
+  store: RiStore2Line,
+  sword: RiSwordLine,
+  team: RiTeamLine,
+  tent: RiTentLine,
+  tooth: RiToothLine,
+  trophy: RiTrophyLine,
+  tv: RiTv2Line,
+  user: RiUserLine,
+  wallet: RiWalletLine,
+
+  // 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,
+};
+
 export enum JURISDICTIONS {
   AK = "Alaska",
   AL = "Alabama",

convex/questSteps.ts

@@ -0,0 +1,46 @@
+import { v } from "convex/values";
+import { query } from "./_generated/server";
+import { userMutation } from "./helpers";
+
+// TODO: Add `returns` value validation
+// https://docs.convex.dev/functions/validation
+
+export const create = userMutation({
+  args: {
+    questId: v.id("quests"),
+    title: v.string(),
+    description: v.optional(v.string()),
+  },
+  handler: async (ctx, args) => {
+    const questStepId = await ctx.db.insert("questSteps", {
+      questId: args.questId,
+      title: args.title,
+      description: args.description,
+      creationUser: ctx.userId,
+    });
+
+    const quest = await ctx.db.get(args.questId);
+
+    if (!quest) throw new Error("Quest not found");
+
+    await ctx.db.patch(args.questId, {
+      steps: [...(quest.steps ?? []), questStepId],
+    });
+  },
+});
+
+export const getStepsForQuest = query({
+  args: { questId: v.id("quests") },
+  handler: async (ctx, args) => {
+    const quest = await ctx.db.get(args.questId);
+    if (!quest) throw new Error("Quest not found");
+    if (!quest.steps) return [];
+
+    const steps = await Promise.all(
+      quest.steps.map(async (stepId) => {
+        return await ctx.db.get(stepId);
+      }),
+    );
+    return steps;
+  },
+});

convex/quests.ts

@@ -1,7 +1,7 @@
 import { v } from "convex/values";
 import { query } from "./_generated/server";
 import { userMutation } from "./helpers";
-import { jurisdiction } from "./types";
+import { icon, jurisdiction } from "./types";
 
 // TODO: Add `returns` value validation
 // https://docs.convex.dev/functions/validation
@@ -31,33 +31,21 @@ export const getQuest = query({
 });
 
 export const createQuest = userMutation({
-  args: { title: v.string(), jurisdiction: v.optional(jurisdiction) },
+  args: {
+    title: v.string(),
+    jurisdiction: v.optional(jurisdiction),
+    icon: icon,
+  },
   handler: async (ctx, args) => {
     return await ctx.db.insert("quests", {
       title: args.title,
+      icon: args.icon,
       jurisdiction: args.jurisdiction,
       creationUser: ctx.userId,
     });
   },
 });
 
-export const addQuestStep = userMutation({
-  args: { questId: v.id("quests"), title: v.string(), body: v.string() },
-  handler: async (ctx, args) => {
-    const existingSteps = (await ctx.db.get(args.questId))?.steps ?? [];
-
-    await ctx.db.patch(args.questId, {
-      steps: [
-        ...existingSteps,
-        {
-          title: args.title,
-          body: args.body,
-        },
-      ],
-    });
-  },
-});
-
 export const deleteQuest = userMutation({
   args: { questId: v.id("quests") },
   handler: async (ctx, args) => {