♻️ Refactor TableHead and TableRows components ♻️

Aszurar · Jan 16, 2024 · 34afcc5 · 34afcc5
1 parent f08eba2
commit 34afcc5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 33 deletions.
diff --git a/src/components/Dashboard/TableHead/index.tsx b/src/components/Dashboard/TableHead/index.tsx
@@ -1,16 +1,20 @@
 import * as Table from '../../Table'
+import { useResponsiveness } from '../../../hook/useResponsiveness'
 
 type TableHeadProps = {
-  isMobile: boolean
   transactionsTotal: number
 }
 
-export function TableHead({ isMobile, transactionsTotal }: TableHeadProps) {
+export function TableHead({ transactionsTotal }: TableHeadProps) {
+  const { isMobile } = useResponsiveness()
+
   if (isMobile) {
     return (
       <>
         <Table.Head className="text-xl">Transações</Table.Head>
-        <Table.Head>{transactionsTotal} items</Table.Head>
+        <Table.Head className="font-medium">
+          {transactionsTotal} items
+        </Table.Head>
       </>
     )
   }

diff --git a/src/components/Dashboard/TableRows/index.tsx b/src/components/Dashboard/TableRows/index.tsx
@@ -2,22 +2,39 @@ import { FiTrash } from 'react-icons/fi'
 
 import * as Table from '../../Table'
 import { Button } from '../../Button'
+import { Loading } from '../../Loading'
 import { useTransactions } from '../../../hook/useTransactions'
+import { useResponsiveness } from '../../../hook/useResponsiveness'
 import { dateFormatter, priceFormatter } from '../../../utils/formatter'
 
-type TableRows = {
-  isMobile: boolean
-}
+export function TableRows() {
+  const { isMobile } = useResponsiveness()
 
-export function TableRows({ isMobile }: TableRows) {
-  const { transactions, handleRemoveTransactionById } = useTransactions()
+  const {
+    transactions,
+    handleRemoveTransactionById,
+    isDeleteTransactionLoading,
+  } = useTransactions()
 
   return transactions.map((transaction) => {
     const dataFormatted = dateFormatter.format(new Date(transaction.date))
     const priceFormatted = priceFormatter.format(transaction.price)
     const priceFormattedWithSignalOrNot =
       transaction.type === 'outcome' ? `- ${priceFormatted}` : priceFormatted
 
+    const isLoadingIcon =
+      isDeleteTransactionLoading.id === transaction.id &&
+      isDeleteTransactionLoading.value
+
+    const buttonIcon = isLoadingIcon ? (
+      <Loading
+        className="border-gray-500 border-top-4-table 
+        dark:border-top-4-table-dark"
+      />
+    ) : (
+      <FiTrash className="text-lg " />
+    )
+
     return (
       <Table.Row key={transaction.id} variant="body">
         {isMobile ? (
@@ -29,10 +46,11 @@ export function TableRows({ isMobile }: TableRows) {
               <Table.Data className="">
                 <Button
                   variant="ghost"
+                  disabled={isLoadingIcon}
                   className="h-8 w-8"
                   onClick={() => handleRemoveTransactionById(transaction.id)}
                 >
-                  <FiTrash className="text-lg " />
+                  {buttonIcon}
                 </Button>
               </Table.Data>
             </div>
@@ -59,10 +77,11 @@ export function TableRows({ isMobile }: TableRows) {
             <Table.Data>
               <Button
                 variant="ghost"
+                disabled={isLoadingIcon}
                 className="h-8 w-8"
                 onClick={() => handleRemoveTransactionById(transaction.id)}
               >
-                <FiTrash className="text-lg " />
+                {buttonIcon}
               </Button>
             </Table.Data>
           </>

diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 
 import * as Table from '../Table'
@@ -10,9 +9,6 @@ import { useTransactions } from '../../hook/useTransactions'
 export function Dashboard() {
   const [parent] = useAutoAnimate()
 
-  const [currentBrowserWidth, setCurrentBrowserWidth] = useState(0)
-  const isMobile = currentBrowserWidth < 640
-
   const {
     transactions,
     balance,
@@ -25,24 +21,12 @@ export function Dashboard() {
 
   const transactionsTotal = transactions.length
 
-  function onUpdateCurrentBrowserWidth() {
-    setCurrentBrowserWidth(window.innerWidth)
-  }
-
-  useEffect(() => {
-    window.addEventListener('resize', onUpdateCurrentBrowserWidth)
-    return () => {
-      window.removeEventListener('resize', onUpdateCurrentBrowserWidth)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   return (
     <main className="h-dashboard bg-background-primary px-6 dark:bg-zinc-950">
       <div className="mx-auto max-w-app">
         <section
-          className={`phone-lg:-mt-16 -mt-12 flex gap-5 overflow-x-scroll px-1 
-            pb-1 sm:gap-8 sm:px-0 sm:pb-0`}
+          className={`-mt-12 flex gap-5 overflow-x-scroll px-1 
+            pb-1 sm:gap-8 sm:px-0 sm:pb-0 phone-lg:-mt-16`}
         >
           <HighLightCard
             value={incomeTotal}
@@ -65,14 +49,11 @@ export function Dashboard() {
           <Table.Root>
             <Table.Header>
               <Table.Row variant="head">
-                <TableHead
-                  isMobile={isMobile}
-                  transactionsTotal={transactionsTotal}
-                />
+                <TableHead transactionsTotal={transactionsTotal} />
               </Table.Row>
             </Table.Header>
             <Table.Body ref={parent}>
-              <TableRows isMobile={isMobile} />
+              <TableRows />
             </Table.Body>
           </Table.Root>
         </section>