feat: add warn if categories mismatch

uigywnkiub · Dec 26, 2024 · 985d21b · 985d21b
1 parent d058e91
commit 985d21b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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