quality: refactor index.tsx for better maintenability

Author: aeltorio

client/src/components/icons.tsx

@@ -313,26 +313,14 @@ export const EditIcon = React.memo(({
       stroke={color}
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="2"
+      strokeWidth="1.5"
       viewBox="0 0 24 24"
       width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g>
-        <g>
-          <path d="M389.844,182.85c-6.743,0-12.21,5.467-12.21,12.21v222.968c0,23.562-19.174,42.735-42.736,42.735H67.157
-			c-23.562,0-42.736-19.174-42.736-42.735V150.285c0-23.562,19.174-42.735,42.736-42.735h267.741c6.743,0,12.21-5.467,12.21-12.21
-			s-5.467-12.21-12.21-12.21H67.157C30.126,83.13,0,113.255,0,150.285v267.743c0,37.029,30.126,67.155,67.157,67.155h267.741
-			c37.03,0,67.156-30.126,67.156-67.155V195.061C402.054,188.318,396.587,182.85,389.844,182.85z"/>
-          <path d="M483.876,20.791c-14.72-14.72-38.669-14.714-53.377,0L221.352,229.944c-0.28,0.28-3.434,3.559-4.251,5.396l-28.963,65.069
-			c-2.057,4.619-1.056,10.027,2.521,13.6c2.337,2.336,5.461,3.576,8.639,3.576c1.675,0,3.362-0.346,4.96-1.057l65.07-28.963
-			c1.83-0.815,5.114-3.97,5.396-4.25L483.876,74.169c7.131-7.131,11.06-16.61,11.06-26.692
-			C494.936,37.396,491.007,27.915,483.876,20.791z M466.61,56.897L257.457,266.05c-0.035,0.036-0.055,0.078-0.089,0.107
-			l-33.989,15.131L238.51,247.3c0.03-0.036,0.071-0.055,0.107-0.09L447.765,38.058c5.038-5.039,13.819-5.033,18.846,0.005
-			c2.518,2.51,3.905,5.855,3.905,9.414C470.516,51.036,469.127,54.38,466.61,56.897z"/>
-        </g>
-      </g>
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
     </svg>
   );
 }

client/src/pages/index.tsx

@@ -49,6 +49,7 @@ import { usePurchaseAmounts } from "./page-components/usePurchaseAmounts";
 import { ActionCell } from "./page-components/ActionCell";
 import { StatusCell } from "./page-components/StatusCell";
 import { PurchaseIdCell } from "./page-components/PurchaseIdCell";
+import { usePurchaseTableColumns } from "./page-components/purchaseTableColumns";
 
 /**
  * Main page of the application displaying purchase data in a tabular format
@@ -149,34 +150,6 @@ export default function IndexPage() {
     setRefreshTrigger((prev) => prev + 1);
   };
 
-  /**
-   * Renders the action column for a purchase row based on its status
-   *
-   * The available actions depend on the purchase status:
-   * - If refunded, displays a "Refunded" label
-   * - If no feedback, shows "Create Feedback" button
-   * - If has feedback but no publication, shows "Publish Feedback" button
-   * - If has feedback and publication, shows "Refund" button
-   *
-   * @param {Object} item - The purchase item data
-   * @param {string} item.purchase - Purchase ID
-   * @param {boolean} item.refunded - Whether the purchase has been refunded
-   * @param {boolean} item.hasFeedback - Whether the purchase has feedback
-   * @param {boolean} item.hasPublication - Whether the feedback has been published
-   * @param {number} item.amount - The purchase amount
-   * @returns {JSX.Element} The rendered action column content
-   */
-  const renderActionColumn = (item: PurchaseStatus) => (
-    <ActionCell
-      item={item}
-      hasWritePermission={hasWritePermission}
-      onCreateFeedback={handleCreateFeedback}
-      onReturnItem={handleReturnItem}
-      onPublishFeedback={handlePublishFeedback}
-      onRefundPurchase={handleRefundPurchases}
-    />
-  );
-
   /**
    * Handles opening the return modal for a specific purchase
    * Show a confirmation Modal to confirm the return
@@ -240,6 +213,19 @@ export default function IndexPage() {
     setGeneratePublicLink(true);
   };
 
+  // Use custom hook for table columns configuration
+  const { columns, emptyContent } = usePurchaseTableColumns({
+    hasWritePermission,
+    onCreateFeedback: handleCreateFeedback,
+    onReturnItem: handleReturnItem,
+    onPublishFeedback: handlePublishFeedback,
+    onRefundPurchase: handleRefundPurchases,
+    onEditPurchase: handleEditPurchase,
+    onGenerateLink: handleGenerateLink,
+    onSetScreenshot: setScreenshot,
+    onCreateNewPurchase: () => setCreateNewPurchase(true),
+  });
+
   return (
     <DefaultLayout>
       <section
@@ -257,138 +243,7 @@ export default function IndexPage() {
         ) : (
           <div className="flex gap-3 max-w-screen">
             <PaginatedTable
-              columns={[
-                {
-                  field: "purchase",
-                  label: t("purchase"),
-                  sortable: false,
-                  cellCopyable: true,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                  render: (item: PurchaseStatus) => (
-                    <PurchaseIdCell
-                      purchaseId={item.purchase}
-                      hasPublication={item.hasPublication}
-                      onEditPurchase={handleEditPurchase}
-                      onGenerateLink={handleGenerateLink}
-                    />
-                  ),
-                },
-                {
-                  field: "date",
-                  label: t("date"),
-                  sortable: true,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                },
-                {
-                  field: "order",
-                  label: t("order"),
-                  sortable: true,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                  render: (item: PurchaseStatus) => {
-                    return (
-                      <>
-                        <Link
-                          className="text-blue-500 hover:underline break-keep"
-                          target="_blank"
-                          to={`${import.meta.env.AMAZON_BASE_URL}${item.order}`}
-                        >
-                          {cleanAmazonOrderNumber(item.order)}
-                        </Link>
-                        <CopyButton
-                          className="absolute top-0 right-0"
-                          value={item.order}
-                        />
-                      </>
-                    );
-                  },
-                },
-                {
-                  field: "description",
-                  label: t("description"),
-                  sortable: false,
-                  render: (item: PurchaseStatus) => (
-                    <StatusCell
-                      text={item.description}
-                      screenshot={item.purchaseScreenshot}
-                      screenshotSummary={item.screenshotSummary}
-                      copyTooltipKey="copy-screenshots"
-                      onScreenshotClick={setScreenshot}
-                    />
-                  ),
-                  onCellAction: (item: PurchaseStatus) => {
-                    item.screenshotSummary
-                      ? setScreenshot([
-                        item.purchaseScreenshot || Transparent1x1WebpPixel,
-                        item.screenshotSummary,
-                      ])
-                      : setScreenshot(item.purchaseScreenshot || Transparent1x1WebpPixel);
-                  },
-                },
-                {
-                  field: "amount",
-                  label: t("amount"),
-                  sortable: false,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                },
-                {
-                  field: "hasFeedback",
-                  label: t("hasFeedback"),
-                  sortable: false,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                },
-                {
-                  field: "hasPublication",
-                  label: t("hasPublication"),
-                  sortable: false,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                  render: (item: PurchaseStatus) => (
-                    <StatusCell
-                      text={item.hasPublication ? t("yes") : t("no")}
-                      screenshot={item.publicationScreenshot}
-                      copyTooltipKey="copy-screenshot"
-                      onScreenshotClick={(screenshot) => setScreenshot(screenshot)}
-                    />
-                  ),
-                  onCellAction: (item) => {
-                    if (item.hasPublication) {
-                      setScreenshot(item.publicationScreenshot);
-                    }
-                  },
-                },
-                {
-                  field: "refunded",
-                  label: t("refunded"),
-                  sortable: false,
-                  className: "hidden md:table-cell",
-                  headerClassName: "hidden md:table-cell",
-                  render: (item: PurchaseStatus) => {
-                    return item.refunded ? (
-                      <>
-                        {item.transactionId && item.transactionId.length >= 4 && !item.transactionId.startsWith("REFUND_") ? (
-                          <Link
-                            className="text-blue-500 hover:underline break-keep"
-                            target="_blank"
-                            to={`${import.meta.env.PAYPAL_TRANSACTION_BASE_URL}${item.transactionId}`}>{t("yes")}
-                          </Link>
-                        ) : (
-                          <span>{t("yes")}</span>
-                        )}
-                      </>) :
-                      <>{t("no")}</>;
-                  }
-                },
-                {
-                  field: "actions",
-                  label: t("actions"),
-                  render: (item) => renderActionColumn(item),
-                },
-              ]}
+              columns={columns}
               dataUrl={`${import.meta.env.API_BASE_URL}/purchase-status?limitToNotRefunded=${toggleAllPurchases ? "false" : "true"}`}
               manualData={searchResults.length > 0 ? searchData : undefined}
               manualIsLoading={searchDataLoading}
@@ -399,22 +254,7 @@ export default function IndexPage() {
               refreshTrigger={refreshTrigger}
               rowKey="purchase"
               title={getTitleComponent}
-              emptyContent={
-                <div className="text-center text-muted-foreground p-4">
-                  {t("no-data-available")}
-                  {hasWritePermission && (
-                    <div className="mt-4">
-                      <Button
-                        color="primary"
-                        startContent={<EditIcon />}
-                        onPress={() => setCreateNewPurchase(true)}
-                      >
-                        {t("new-purchase")}
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              }
+              emptyContent={emptyContent}
             />
           </div>
         )}