⚡ Add TableRowMobile and TableRowWeb components to use memo ⚡

src/components/Dashboard/TableRows/TableRowMobile/index.tsx

@@ -0,0 +1,48 @@
+import { memo } from 'react'
+import { FiTrash } from 'react-icons/fi'
+
+import { TransactionProps } from '..'
+import * as Table from '../../../Table'
+import { Button } from '../../../Button'
+
+type TableRowWebProps = {
+  transaction: TransactionProps
+  handleRemoveTransactionById: (id: string) => void
+}
+
+export function TableRowMobile({
+  transaction,
+  handleRemoveTransactionById,
+}: TableRowWebProps) {
+  return (
+    <>
+      <div className=" flex items-center justify-between">
+        <Table.Data variant="description">{transaction.description}</Table.Data>
+        <Table.Data className="">
+          <Button
+            variant="ghost"
+            // disabled={isLoadingIcon}
+            className="h-8 w-8"
+            onClick={() => handleRemoveTransactionById(transaction.id)}
+          >
+            <FiTrash className="text-lg " />
+          </Button>
+        </Table.Data>
+      </div>
+
+      <Table.Data variant={transaction.type}>{transaction.price}</Table.Data>
+
+      <div className="mt-3 flex justify-between sm:mt-0 sm:block">
+        <Table.Data>{transaction.category}</Table.Data>
+        <Table.Data>{transaction.date}</Table.Data>
+      </div>
+    </>
+  )
+}
+
+export const TableRowMobileMemoized = memo(
+  TableRowMobile,
+  (prevProps, nextProps) => {
+    return prevProps.transaction.id === nextProps.transaction.id
+  },
+)

src/components/Dashboard/TableRows/TableRowWeb/index.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react'
+import { FiTrash } from 'react-icons/fi'
+
+import { TransactionProps } from '..'
+import * as Table from '../../../Table'
+import { Button } from '../../../Button'
+
+type TableRowWebProps = {
+  transaction: TransactionProps
+  handleRemoveTransactionById: (id: string) => void
+}
+
+export function TableRowWeb({
+  transaction,
+  handleRemoveTransactionById,
+}: TableRowWebProps) {
+  return (
+    <>
+      <Table.Data variant="description">{transaction.description}</Table.Data>
+      <Table.Data variant={transaction.type}>{transaction.price}</Table.Data>
+      <Table.Data>{transaction.category}</Table.Data>
+      <Table.Data>{transaction.date}</Table.Data>
+      <Table.Data>
+        <Button
+          variant="ghost"
+          // disabled={isLoadingIcon}
+          className="h-8 w-8"
+          onClick={() => handleRemoveTransactionById(transaction.id)}
+        >
+          <FiTrash className="text-lg " />
+        </Button>
+      </Table.Data>
+    </>
+  )
+}
+
+export const TableRowWebMemoized = memo(TableRowWeb, (prevProps, nextProps) => {
+  return prevProps.transaction.id === nextProps.transaction.id
+})

src/components/Dashboard/TableRows/index.tsx

@@ -1,90 +1,59 @@
-import { FiTrash } from 'react-icons/fi'
-
 import * as Table from '../../Table'
-import { Button } from '../../Button'
-import { Loading } from '../../Loading'
+// import { Loading } from '../../Loading'
+import { TableRowWebMemoized } from './TableRowWeb'
+import { TableRowMobileMemoized } from './TableRowMobile'
+import { ITransactions } from '../../../dto/transactions'
 import { useTransactions } from '../../../hook/useTransactions'
 import { useResponsiveness } from '../../../hook/useResponsiveness'
 import { dateFormatter, priceFormatter } from '../../../utils/formatter'
 
+export type TransactionProps = Omit<ITransactions, 'date' | 'price'> & {
+  date: string
+  price: string
+}
+
 export function TableRows() {
   const { isMobile } = useResponsiveness()
 
-  const {
-    transactions,
-    handleRemoveTransactionById,
-    isDeleteTransactionLoading,
-  } = useTransactions()
+  const { transactions, handleRemoveTransactionById } = 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 " />
-    )
+    const transactionData: TransactionProps = {
+      ...transaction,
+      date: dataFormatted,
+      price: priceFormattedWithSignalOrNot,
+    }
+
+    // This branch will not use json-server, but localStorage so don't need this
+    // 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 ? (
-          <>
-            <div className=" flex items-center justify-between">
-              <Table.Data variant="description">
-                {transaction.description}
-              </Table.Data>
-              <Table.Data className="">
-                <Button
-                  variant="ghost"
-                  disabled={isLoadingIcon}
-                  className="h-8 w-8"
-                  onClick={() => handleRemoveTransactionById(transaction.id)}
-                >
-                  {buttonIcon}
-                </Button>
-              </Table.Data>
-            </div>
-
-            <Table.Data variant={transaction.type}>
-              {priceFormattedWithSignalOrNot}
-            </Table.Data>
-
-            <div className="mt-3 flex justify-between sm:mt-0 sm:block">
-              <Table.Data>{transaction.category}</Table.Data>
-              <Table.Data>{dataFormatted}</Table.Data>
-            </div>
-          </>
+          <TableRowMobileMemoized
+            transaction={transactionData}
+            handleRemoveTransactionById={handleRemoveTransactionById}
+          />
         ) : (
-          <>
-            <Table.Data variant="description">
-              {transaction.description}
-            </Table.Data>
-            <Table.Data variant={transaction.type}>
-              {priceFormattedWithSignalOrNot}
-            </Table.Data>
-            <Table.Data>{transaction.category}</Table.Data>
-            <Table.Data>{dataFormatted}</Table.Data>
-            <Table.Data>
-              <Button
-                variant="ghost"
-                disabled={isLoadingIcon}
-                className="h-8 w-8"
-                onClick={() => handleRemoveTransactionById(transaction.id)}
-              >
-                {buttonIcon}
-              </Button>
-            </Table.Data>
-          </>
+          <TableRowWebMemoized
+            transaction={transactionData}
+            handleRemoveTransactionById={handleRemoveTransactionById}
+          />
         )}
       </Table.Row>
     )