From 985d21b07fafe1b4154aa390c086a60c49e8a308 Mon Sep 17 00:00:00 2001
From: Waldemar <vgerun97@gmail.com>
Date: Thu, 26 Dec 2024 17:02:01 +0200
Subject: [PATCH] feat: add warn if categories mismatch

---
 app/categories/page.tsx          |  3 +++
 app/ui/categories/categories.tsx | 20 ++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/categories/page.tsx b/app/categories/page.tsx
index 943ea97..0a58783 100644
--- a/app/categories/page.tsx
+++ b/app/categories/page.tsx
@@ -18,6 +18,8 @@ export default async function Page() {
   const userId = session?.user?.email
   const transactions = await getAllTransactions(userId)
   const [userCategories] = transactions.map((t) => t.categories).filter(Boolean)
+  const areCategoriesLengthMismatch =
+    userCategories.length !== DEFAULT_CATEGORIES.length
 
   const content = (
     <>
@@ -31,6 +33,7 @@ export default async function Page() {
           <Categories
             userId={userId}
             userCategories={userCategories || DEFAULT_CATEGORIES}
+            areCategoriesLengthMismatch={areCategoriesLengthMismatch}
           />
         )}
       </div>
diff --git a/app/ui/categories/categories.tsx b/app/ui/categories/categories.tsx
index 637c684..d7aaf46 100644
--- a/app/ui/categories/categories.tsx
+++ b/app/ui/categories/categories.tsx
@@ -35,12 +35,19 @@ import { HoverableElement } from '../hoverables'
 import InfoText from '../info-text'
 import Category from './category'
 
+const RESET_CATEGORIES_BTN_TEXT = 'Reset categories'
+
 type TProps = {
   userId: TUserId
   userCategories: TTransaction['categories']
+  areCategoriesLengthMismatch: boolean
 }
 
-function Categories({ userId, userCategories }: TProps) {
+function Categories({
+  userId,
+  userCategories,
+  areCategoriesLengthMismatch,
+}: TProps) {
   const { isOpen, onOpen, onOpenChange } = useDisclosure()
   const [categories, setCategories] = useState(userCategories)
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
@@ -232,9 +239,18 @@ function Categories({ userId, userCategories }: TProps) {
             />
           }
         >
-          Reset categories
+          {RESET_CATEGORIES_BTN_TEXT}
         </Button>
       </div>
+      {areCategoriesLengthMismatch && (
+        <p className='mt-4 text-center text-sm text-warning'>
+          <PiWarningOctagonFill className='inline animate-pulse' /> We detected
+          a mismatch between your current categories and the default ones.
+          <br />
+          Press &quot;{RESET_CATEGORIES_BTN_TEXT}&quot; to restore the default
+          and overwrite your current categories.
+        </p>
+      )}
       <div className='mt-4 flex flex-col gap-2 md:mt-8'>
         <InfoText
           withDoubleAsterisk