feat(mobile): [Category] pick icons for incomes and expenses (#97)

| Expenses | Incomes | | --- | --- | | <img alt="Screenshot 2024-07-10 at 19 27 16" src="https://github.com/sixpm-ai/6pm/assets/16166195/78aeb06e-8161-42ff-8ff9-c341dcc4b7d9"> | <img alt="Screenshot 2024-07-10 at 19 27 20" src="https://github.com/sixpm-ai/6pm/assets/16166195/3c05953a-8e58-4fae-afb7-73a3201b8b4f"> |
get6pm · Jul 11, 2024 · 42573b5 · 42573b5
1 parent b85f272
commit 42573b5
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 35 deletions.
diff --git a/apps/mobile/app/(app)/category/index.tsx b/apps/mobile/app/(app)/category/index.tsx
@@ -7,11 +7,13 @@ import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useRouter } from 'expo-router'
 import { SectionList } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function CategoriesScreen() {
   const { i18n } = useLingui()
   const router = useRouter()
   const { data: categories = [], isLoading, refetch } = useCategories()
+  const { bottom } = useSafeAreaInsets()
 
   const incomeCategories = categories.filter(
     (category) => category.type === 'INCOME',
@@ -27,14 +29,15 @@ export default function CategoriesScreen() {
 
   return (
     <SectionList
-      className="py-3 bg-card flex-1"
+      className="bg-card flex-1"
+      contentContainerStyle={{ paddingBottom: bottom }}
       refreshing={isLoading}
       onRefresh={refetch}
       sections={sections}
       keyExtractor={(item) => item.id}
       renderItem={({ item: category }) => <CategoryItem category={category} />}
       renderSectionHeader={({ section: { title } }) => (
-        <Text className="text-muted-foreground mx-6">{title}</Text>
+        <Text className="text-muted-foreground mx-6 bg-card py-2">{title}</Text>
       )}
       renderSectionFooter={({ section }) => (
         <>

diff --git a/apps/mobile/components/category/category-form.tsx b/apps/mobile/components/category/category-form.tsx
@@ -1,8 +1,12 @@
+import {
+  CATEGORY_EXPENSE_ICONS,
+  CATEGORY_INCOME_ICONS,
+} from '@/lib/icons/category-icons'
 import { type CategoryFormValues, zCategoryFormValues } from '@6pm/validation'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
 import { View } from 'react-native'
 import type { TextInput } from 'react-native'
@@ -30,13 +34,24 @@ export const CategoryForm = ({
     resolver: zodResolver(zCategoryFormValues),
     defaultValues: {
       name: '',
-      icon: 'CreditCard',
+      icon:
+        defaultValues?.type === 'INCOME'
+          ? CATEGORY_INCOME_ICONS[0]
+          : CATEGORY_EXPENSE_ICONS[0],
       ...defaultValues,
       type: defaultValues?.type || 'EXPENSE',
     },
   })
   const type = categoryForm.watch('type')
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    categoryForm.setValue(
+      'icon',
+      type === 'INCOME' ? CATEGORY_INCOME_ICONS[0] : CATEGORY_EXPENSE_ICONS[0],
+    )
+  }, [type])
+
   const isTypeHidden = hiddenFields.includes('type')
 
   return (

diff --git a/apps/mobile/lib/icons/category-icons.ts b/apps/mobile/lib/icons/category-icons.ts
@@ -1,30 +1,58 @@
 import type { icons } from 'lucide-react-native'
 
 export const CATEGORY_EXPENSE_ICONS: Array<keyof typeof icons> = [
-  'WalletMinimal',
-  'Coins',
-  'Banknote',
-  'Bitcoin',
-  'CreditCard',
-  'Gem',
-  'HandCoins',
-  'Handshake',
-  'PiggyBank',
-  'SmartphoneNfc',
-  'BadgeCent',
-  'BadgeDollarSign',
-  'BadgeEuro',
-  'BadgeIndianRupee',
-  'BadgeJapaneseYen',
-  'BadgePoundSterling',
-  'BadgeRussianRuble',
-  'BadgeSwissFranc',
-  // 'Paintbrush',
-  // 'BrickWall',
-  // 'CookingPot',
+  'Banana',
+  'ChefHat',
+  'Apple',
+  'Beef',
+  'Cake',
+  'Citrus',
+  'Cherry',
+  'Croissant',
+  'CupSoda',
+  'Drumstick',
+  'Salad',
+  'Coffee',
+  'Popcorn',
+  'Sandwich',
+  'Utensils',
+  'Pizza',
+  'Wine',
+  'Armchair',
+  'Lamp',
+  'BedDouble',
+  'Drill',
+  'Home',
+  'Refrigerator',
+  'Cat',
+  'Bird',
+  'Dog',
+  'Rabbit',
+  'Fish',
+  'Turtle',
+  'Shirt',
+  'ShoppingBasket',
+  'Luggage',
+  'Plane',
+  'TentTree',
+  'CarFront',
+  'CarTaxiFront',
+  'Ship',
+  'TrainFront',
+  'Dumbbell',
+  'Pill',
+  'Hospital',
+  'Stethoscope',
+  'Ribbon',
+  'Cannabis',
+  'Sprout',
+  'Flower2',
+  'TreePalm',
+  'CircleHelp',
 ]
 
 export const CATEGORY_INCOME_ICONS: Array<keyof typeof icons> = [
+  'CircleHelp',
   'WalletMinimal',
   'Coins',
   'Banknote',
@@ -36,14 +64,10 @@ export const CATEGORY_INCOME_ICONS: Array<keyof typeof icons> = [
   'PiggyBank',
   'SmartphoneNfc',
   'BadgeCent',
-  'BadgeDollarSign',
-  'BadgeEuro',
-  'BadgeIndianRupee',
-  'BadgeJapaneseYen',
-  'BadgePoundSterling',
-  'BadgeRussianRuble',
-  'BadgeSwissFranc',
-  // 'Paintbrush',
-  // 'BrickWall',
-  // 'CookingPot',
+  'Trophy',
+  'Clover',
+  'LineChart',
+  'Store',
+  'BriefcaseBusiness',
+  'Building2',
 ].reverse() as Array<keyof typeof icons>