feat: add sound when limit is over (#137)

app/ui/home/transaction-form.tsx

@@ -154,7 +154,7 @@ function TransactionForm({ currency, userCategories }: TProps) {
   useEffect(() => setCategory(newCategoryState), [newCategoryState])
   const categoryName = Array.from(category)[0]?.toString()
   useEffect(() => {
-    if (categoryName) {
+    if (categoryName && categoryName !== DEFAULT_CATEGORY) {
       setInLocalStorage(LOCAL_STORAGE_KEY.SELECTED_CATEGORY_NAME, categoryName)
     }
 

app/ui/limit-toast.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
-import { useDebounce } from 'react-use'
+import { useAudio, useDebounce } from 'react-use'
 
 import DEFAULT_CATEGORIES from '@/public/data/default-categories.json'
 
@@ -31,13 +31,17 @@ type TProps = {
 }
 
 export default function LimitToast({ triggerBy }: TProps) {
+  const [audio, , audioControls] = useAudio({
+    src: '/sounds/error-limit-over.mp3',
+  })
+
   const init = async () => {
-    try {
-      const selectedCategoryName = getFromLocalStorage(
-        LOCAL_STORAGE_KEY.SELECTED_CATEGORY_NAME,
-      )
-      if (!selectedCategoryName) return null
+    const selectedCategoryName = getFromLocalStorage(
+      LOCAL_STORAGE_KEY.SELECTED_CATEGORY_NAME,
+    )
+    if (!selectedCategoryName) return
 
+    try {
       const session = await getCachedAuthSession()
       const userId = session?.user?.email
       const [limitsRaw, transactions] = await Promise.all([
@@ -85,6 +89,7 @@ export default function LimitToast({ triggerBy }: TProps) {
           ),
           duration: TOAST_DURATION * 1.5,
         })
+        audioControls.play()
       }
     } catch (err) {
       throw err
@@ -98,5 +103,5 @@ export default function LimitToast({ triggerBy }: TProps) {
     if (!isReady()) cancel()
   }, [cancel, isReady])
 
-  return null
+  return audio
 }

app/ui/limits/limits.tsx

@@ -346,7 +346,9 @@ function Limits({ userId, currency, transactions, userCategories }: TProps) {
                         items={userCategories}
                         selectedKeys={category}
                         onSelectionChange={setCategory}
-                        disabledKeys={disabledCategories}
+                        disabledKeys={disabledCategories.concat(
+                          DEFAULT_CATEGORY,
+                        )}
                       >
                         {userCategories.map((category, idx, arr) => (
                           <SelectSection
@@ -519,6 +521,9 @@ function Limits({ userId, currency, transactions, userCategories }: TProps) {
                           />
                         }
                         description='Edit category limit'
+                        classNames={{
+                          description: 'text-default-500',
+                        }}
                       >
                         Edit
                       </DropdownItem>
@@ -538,6 +543,9 @@ function Limits({ userId, currency, transactions, userCategories }: TProps) {
                           />
                         }
                         description='Permanently delete category limit'
+                        classNames={{
+                          description: 'text-default-500',
+                        }}
                       >
                         Delete
                       </DropdownItem>
@@ -550,10 +558,7 @@ function Limits({ userId, currency, transactions, userCategories }: TProps) {
         })}
       </ul>
       <div className='mt-4 flex flex-col gap-2 text-left md:mt-8'>
-        <InfoText
-          withDoubleAsterisk
-          text='The calculation of limits is based on transactions by the current month.'
-        />
+        <InfoText text='The calculation of limits is based on transactions by the current month.' />
         <InfoText text='Your limits will not be deleted automatically in the new month.' />
       </div>