feat(home page): add warning text when categories changed

uigywnkiub · Aug 8, 2024 · 30da7b4 · 30da7b4
1 parent c1c71ee
commit 30da7b4
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
@@ -190,3 +190,15 @@ export const deepCompareArrays = (array1: any[], array2: any[]): boolean => {
 
   return true // If all elements are deeply equal, the arrays are identical.
 }
+
+export const pluralize = (
+  count: number,
+  singular: string,
+  plural: string,
+): string => {
+  const pluralRules = new Intl.PluralRules('en-US')
+  const pluralCategory = pluralRules.select(count)
+  return pluralCategory === 'one' || pluralCategory === 'zero' || count === 0
+    ? singular
+    : plural
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,3 +1,5 @@
+import { PiWarningOctagonFill } from 'react-icons/pi'
+
 import type { Metadata } from 'next'
 
 import DEFAULT_CATEGORIES from '@/public/data/default-categories.json'
@@ -11,19 +13,24 @@ import {
 
 import {
   createTransaction,
-  getBalance,
+  getCachedAllTransactions,
   getCachedAuthSession,
-  getCurrency,
-  getTransactionLimit,
-  getTransactions,
+  getCachedBalance,
+  getCachedCurrency,
+  getCachedTransactionLimit,
+  getCachedTransactions,
   resetCategories,
 } from './lib/actions'
 import type {
   TGroupedTransactions,
   TTotalsTransaction,
   TTransaction,
 } from './lib/types'
-import { formatDate, getTransactionsWithChangedCategory } from './lib/utils'
+import {
+  formatDate,
+  getTransactionsWithChangedCategory,
+  pluralize,
+} from './lib/utils'
 import BalanceLine from './ui/balance-line'
 import InfoBadge from './ui/info-badge'
 import NoTransactionsPlug from './ui/no-transaction-text'
@@ -51,14 +58,14 @@ export default async function Home({
   const page = Number(searchParams?.[SEARCH_PARAM.PAGE]) || 1
   const userTransactionLimit = query
     ? Infinity
-    : await getTransactionLimit(userId)
+    : await getCachedTransactionLimit(userId)
   const limit = userTransactionLimit || DEFAULT_TRANSACTION_LIMIT
   const offset = (page - 1) * limit
   const [balance, currency, { transactions, totalEntries, totalPages }] =
     await Promise.all([
-      getBalance(userId),
-      getCurrency(userId),
-      getTransactions(userId, offset, limit),
+      getCachedBalance(userId),
+      getCachedCurrency(userId),
+      getCachedTransactions(userId, offset, limit),
     ])
 
   const haveCategories = transactions.every((t) => t.categories)
@@ -75,8 +82,11 @@ export default async function Home({
     userCategories,
   )
 
-  const transactionsWithChangedCategory =
-    getTransactionsWithChangedCategory(transactions)
+  const transactionsWithChangedCategory = getTransactionsWithChangedCategory(
+    await getCachedAllTransactions(userId),
+  )
+  const countTransactionsWithChangedCategory =
+    transactionsWithChangedCategory.length
 
   const filteredTransactionsByQuery = transactions.filter((t) => {
     return t.description.toLowerCase().includes(query.toLowerCase())
@@ -160,14 +170,20 @@ export default async function Home({
         transactionsWithChangedCategory={transactionsWithChangedCategory}
         currency={currency}
       />
-      <div className='mt-4'>
+      <div className='mx-auto mt-4 max-w-3xl'>
         {!query && (
           <PaginationList
             totalPages={totalPages}
             totalEntries={totalEntries}
             limit={limit}
           />
         )}
+        {countTransactionsWithChangedCategory > 0 && (
+          <p className='mt-4 text-center text-sm text-warning'>
+            <PiWarningOctagonFill className='inline animate-pulse' />{' '}
+            {`You still have ${countTransactionsWithChangedCategory} ${pluralize(countTransactionsWithChangedCategory, 'transaction', 'transactions')} with the old category.`}
+          </p>
+        )}
       </div>
     </>
   )

diff --git a/app/ui/transaction-form-edit.tsx b/app/ui/transaction-form-edit.tsx
@@ -205,7 +205,7 @@ function TransactionFormEdit({ transaction }: TProps) {
               <Badge
                 content=''
                 shape='rectangle'
-                color='danger'
+                color='warning'
                 variant='solid'
                 size='sm'
                 isDot

diff --git a/app/ui/transaction-item.tsx b/app/ui/transaction-item.tsx
@@ -147,7 +147,7 @@ Time: ${formatTime(createdAt)}`
             <Badge
               content=''
               shape='rectangle'
-              color='danger'
+              color='warning'
               variant='solid'
               size='sm'
               isDot
@@ -209,7 +209,7 @@ Time: ${formatTime(createdAt)}`
                     <Badge
                       content=''
                       shape='rectangle'
-                      color='danger'
+                      color='warning'
                       variant='solid'
                       size='sm'
                       isDot