Task 255 add more categories (#258)

* Type safe category icons

* Use default category variable instead of magic string

* Display the general category in picker

* Add missing sw categories and assign unique icons

* Resolve type issues between string and categoryItem

* Replace any with unknown

Author: krokosik

src/components/AddExpense/CategoryPicker.tsx

@@ -1,21 +1,18 @@
-import { Banknote } from 'lucide-react';
-import { useMemo } from 'react';
+import { CATEGORIES, type CategoryItem } from '~/lib/category';
 
 import { Button } from '../ui/button';
-import { CategoryIcons } from '../ui/categoryIcons';
+import { CategoryIcon } from '../ui/categoryIcons';
 import { AppDrawer, DrawerClose } from '../ui/drawer';
 
 export const CategoryPicker: React.FC<{
   category: string;
   onCategoryPick: (category: string) => void;
 }> = ({ category, onCategoryPick }) => {
-  const CategoryIcon = useMemo(() => CategoryIcons[category] ?? Banknote, [category]);
-
   return (
     <AppDrawer
       trigger={
         <div className="flex w-[70px] justify-center rounded-lg border py-2">
-          <CategoryIcon size={20} />
+          <CategoryIcon category={category} size={20} />
         </div>
       }
       title="Categories"
@@ -27,117 +24,28 @@ export const CategoryPicker: React.FC<{
           <div key={categoryName} className="mb-8">
             <h3 className="mb-4 text-lg font-semibold">{categoryDetails.name}</h3>
             <div className="flex flex-wrap justify-between gap-2">
-              {categoryDetails.items.map((item) =>
-                Object.entries(item).map(([key, value]) => {
-                  const Icon = CategoryIcons[key] ?? CategoryIcons[categoryName] ?? Banknote;
-                  return (
-                    <DrawerClose key={key}>
-                      <Button
-                        variant="ghost"
-                        className="flex w-[75px] flex-col gap-1 py-8 text-center"
-                        onClick={() => {
-                          onCategoryPick(key === 'other' ? categoryName : key);
-                        }}
-                      >
-                        <span className="block text-2xl">
-                          <Icon />
-                        </span>
-                        <span className="block text-xs capitalize">{value}</span>
-                      </Button>
-                    </DrawerClose>
-                  );
-                }),
-              )}
+              {Object.entries(categoryDetails.items).map(([key, value]) => (
+                <DrawerClose key={key}>
+                  <Button
+                    variant="ghost"
+                    className="flex w-[75px] flex-col gap-1 py-8 text-center"
+                    onClick={() => {
+                      onCategoryPick(key === 'other' ? categoryName : key);
+                    }}
+                  >
+                    <span className="block text-2xl">
+                      <CategoryIcon
+                        category={(key === 'other' ? categoryName : key) as CategoryItem}
+                      />
+                    </span>
+                    <span className="block text-xs capitalize">{value}</span>
+                  </Button>
+                </DrawerClose>
+              ))}
             </div>
           </div>
         );
       })}
     </AppDrawer>
   );
 };
-
-const CATEGORIES = {
-  entertainment: {
-    name: 'Entertainment',
-    items: [
-      {
-        games: 'Games',
-        movies: 'Movies',
-        music: 'Music',
-        sports: 'Sports',
-        other: 'Entertainment',
-      },
-    ],
-  },
-  food: {
-    name: 'Food & Drinks',
-    items: [
-      {
-        diningOut: 'Dining Out',
-        groceries: 'Groceries',
-        liquor: 'Liquor',
-        other: 'Food & Drinks',
-      },
-    ],
-  },
-  home: {
-    name: 'Home',
-    items: [
-      {
-        electronics: 'Electronics',
-        furniture: 'Furniture',
-        supplies: 'Supplies',
-        maintenance: 'Maintenance',
-        mortgage: 'Mortgage',
-        pets: 'Pets',
-        rent: 'Rent',
-        services: 'Services',
-        other: 'Home',
-      },
-    ],
-  },
-  life: {
-    name: 'Life',
-    items: [
-      {
-        childcare: 'Childcare',
-        clothing: 'Clothing',
-        education: 'Education',
-        gifts: 'Gifts',
-        medical: 'Medical',
-        taxes: 'Taxes',
-        other: 'Life',
-      },
-    ],
-  },
-  travel: {
-    name: 'Travel',
-    items: [
-      {
-        bus: 'Bus',
-        train: 'Train',
-        car: 'Car',
-        fuel: 'Fuel',
-        parking: 'Parking',
-        plane: 'Plane',
-        taxi: 'Taxi',
-        other: 'Travel',
-      },
-    ],
-  },
-  utilities: {
-    name: 'Utilities',
-    items: [
-      {
-        cleaning: 'Cleaning',
-        electricity: 'Electricity',
-        gas: 'Gas',
-        internet: 'Internet',
-        trash: 'Trash',
-        phone: 'Phone',
-        water: 'Water',
-        other: 'Utilities',
-      },
-    ],
-  },
-};

src/components/Expense/ExpensePage.tsx

@@ -1,6 +1,5 @@
 import { type Expense, type ExpenseParticipant, type User } from '@prisma/client';
 import { format, isSameDay } from 'date-fns';
-import { Banknote } from 'lucide-react';
 import Image from 'next/image';
 import { type User as NextUser } from 'next-auth';
 import React from 'react';
@@ -9,7 +8,7 @@ import React from 'react';
 import { toUIString } from '~/utils/numbers';
 
 import { UserAvatar } from '../ui/avatar';
-import { CategoryIcons } from '../ui/categoryIcons';
+import { CategoryIcon } from '../ui/categoryIcons';
 import { AppDrawer } from '../ui/drawer';
 import { Separator } from '../ui/separator';
 
@@ -28,16 +27,14 @@ type ExpenseDetailsProps = {
 const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storagePublicUrl }) => {
   const youPaid = expense.paidBy === user.id;
 
-  const CategoryIcon = CategoryIcons[expense.category] ?? Banknote;
-
   // const sendNotificationMutation = api.user.sendExpensePushNotification.useMutation();
 
   return (
     <div className="">
       <div className="mb-4 flex items-start justify-between gap-2 px-6">
         <div className="flex items-start gap-4">
           <div className="rounded-lg border p-2 text-xl">
-            <CategoryIcon className="text-gray-400" size={24} />
+            <CategoryIcon category={expense.category} className="text-gray-400" size={24} />
           </div>
           <div className="flex flex-col gap-2">
             <p className="">{expense.name}</p>

src/components/Friend/GroupSettleup.tsx

@@ -3,6 +3,7 @@ import { ArrowRightIcon } from 'lucide-react';
 import React, { type ReactNode, useCallback, useState } from 'react';
 import { toast } from 'sonner';
 
+import { DEFAULT_CATEGORY } from '~/lib/category';
 import { api } from '~/utils/api';
 import { BigMath, toSafeBigInt } from '~/utils/numbers';
 import { displayName } from '~/utils/strings';
@@ -51,7 +52,7 @@ export const GroupSettleUp: React.FC<{
           },
         ],
         paidBy: sender.id,
-        category: 'general',
+        category: DEFAULT_CATEGORY,
       },
       {
         onSuccess: () => {

src/components/Friend/Settleup.tsx

@@ -4,6 +4,7 @@ import { type User as NextUser } from 'next-auth';
 import React, { useState } from 'react';
 import { toast } from 'sonner';
 
+import { DEFAULT_CATEGORY } from '~/lib/category';
 import { api } from '~/utils/api';
 import { BigMath, toSafeBigInt, toUIString } from '~/utils/numbers';
 
@@ -57,7 +58,7 @@ export const SettleUp: React.FC<{
           },
         ],
         paidBy: isCurrentUserPaying ? currentUser.id : friend.id,
-        category: 'general',
+        category: DEFAULT_CATEGORY,
       },
       {
         onSuccess: () => {

src/components/ui/categoryIcons.tsx

@@ -2,11 +2,13 @@ import {
   Baby,
   Backpack,
   Banknote,
+  Bike,
   Bone,
   Bus,
   Car,
   CarTaxiFront,
   Construction,
+  DoorOpen,
   FerrisWheel,
   Flame,
   Fuel,
@@ -18,15 +20,20 @@ import {
   Hammer,
   HandIcon,
   Home,
+  Hotel,
   type LucideIcon,
+  type LucideProps,
   Music,
   Paintbrush,
+  Paintbrush2,
   ParkingCircle,
   Phone,
   Pizza,
   Plane,
   Plug,
   Popcorn,
+  ReceiptText,
+  Shield,
   Shirt,
   ShoppingCart,
   Sofa,
@@ -41,7 +48,9 @@ import {
   Zap,
 } from 'lucide-react';
 
-export const CategoryIcons: Record<string, LucideIcon> = {
+import { type CategoryItem, DEFAULT_CATEGORY } from '~/lib/category';
+
+export const CategoryIcons: Record<CategoryItem, LucideIcon> = {
   games: Gamepad2,
   movies: Popcorn,
   music: Music,
@@ -54,19 +63,19 @@ export const CategoryIcons: Record<string, LucideIcon> = {
   home: Home,
   electronics: Plug,
   furniture: Sofa,
-  supplies: Sofa,
+  supplies: Paintbrush2,
   maintenance: Construction,
   mortgage: HandIcon,
   pets: Bone,
-  rent: Home,
+  rent: DoorOpen,
   services: Hammer,
   life: Sprout,
   childcare: Baby,
   clothing: Shirt,
   education: GraduationCap,
   gifts: Gift,
   medical: Stethoscope,
-  taxes: Banknote,
+  taxes: ReceiptText,
   travel: Backpack,
   bus: Bus,
   train: TrainFront,
@@ -84,13 +93,18 @@ export const CategoryIcons: Record<string, LucideIcon> = {
   general: Banknote,
   cleaning: Paintbrush,
   trash: Trash,
+  insurance: Shield,
+  bicycle: Bike,
+  hotel: Hotel,
 };
 
-export const CategoryIcon: React.FC<{ category: string; className?: string }> = ({
-  category,
+export const DEFAULT_CATEGORY_ICON = CategoryIcons[DEFAULT_CATEGORY];
+
+export const CategoryIcon: React.FC<{ category?: string } & LucideProps> = ({
+  category = DEFAULT_CATEGORY,
   ...props
 }) => {
-  const Icon = CategoryIcons[category] ?? Banknote;
+  const Icon = CategoryIcons[category as CategoryItem] ?? DEFAULT_CATEGORY_ICON;
 
   return <Icon {...props} />;
 };