Merge pull request #96 from ghoul2017/codex/add-published-gifts-csv-export

Add CSV export for published gifts table

Author: rk234

app/src/components/tables/PublishedGiftsTable/PublishedGiftsTable.tsx

@@ -5,6 +5,7 @@ import { DataTable } from "../DataTable";
 import { columns } from "./columns";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { downloadCsv, serializeCsv } from "@/lib/csv";
 import { cn } from "@/lib/utils";
 import { StatusSummaryHeader } from "./StatusSummaryHeader";
 import {
@@ -58,11 +59,44 @@ export function PublishedGiftsTable({
     return result;
   }, [activeFilter, giftStatusFilter, data]);
 
+  const exportData = useMemo(() => {
+    const normalizedSearch = globalSearch.trim().toLowerCase();
+    if (!normalizedSearch) return filteredData;
+
+    return filteredData.filter((row) =>
+      [
+        row.giftName,
+        row.giftStatus,
+        row.sponsorType,
+        row.sponsorName,
+        row.sponsorEmail,
+        row.dateOfFulfillment,
+        row.productUrl,
+      ].some((value) =>
+        String(value ?? "")
+          .toLowerCase()
+          .includes(normalizedSearch),
+      ),
+    );
+  }, [filteredData, globalSearch]);
+
   const tableKey = `${activeFilter ?? "all"}-${giftStatusFilter ?? "all"}`;
 
   const handleExport = () => {
-    // TODO: Implement export functionality
-    console.log("Export clicked");
+    const csv = serializeCsv(exportData, [
+      { header: "Gift Name", value: (row) => row.giftName },
+      { header: "Gift Status", value: (row) => row.giftStatus },
+      { header: "Sponsor Type", value: (row) => row.sponsorType },
+      { header: "Sponsor Name", value: (row) => row.sponsorName },
+      { header: "Sponsor Email", value: (row) => row.sponsorEmail },
+      {
+        header: "Date of Fulfillment",
+        value: (row) => row.dateOfFulfillment,
+      },
+      { header: "Product URL", value: (row) => row.productUrl },
+    ]);
+
+    downloadCsv("published-gifts.csv", csv);
   };
 
   return (

app/src/lib/csv.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { serializeCsv } from "./csv";
+
+describe("serializeCsv", () => {
+  it("serializes headers and row values", () => {
+    const csv = serializeCsv(
+      [
+        { name: "Blanket", status: "claimed" },
+        { name: "Puzzle", status: "unclaimed" },
+      ],
+      [
+        { header: "Gift Name", value: (row) => row.name },
+        { header: "Status", value: (row) => row.status },
+      ],
+    );
+
+    expect(csv).toBe(
+      ["Gift Name,Status", "Blanket,claimed", "Puzzle,unclaimed"].join("\r\n"),
+    );
+  });
+
+  it("escapes commas, quotes, and newlines", () => {
+    const csv = serializeCsv(
+      [{ note: 'Needs "large", blue\nbox' }],
+      [{ header: "Note", value: (row) => row.note }],
+    );
+
+    expect(csv).toBe('Note\r\n"Needs ""large"", blue\nbox"');
+  });
+
+  it("serializes nullish values as empty cells", () => {
+    const csv = serializeCsv(
+      [{ name: undefined, email: null }],
+      [
+        { header: "Name", value: (row) => row.name },
+        { header: "Email", value: (row) => row.email },
+      ],
+    );
+
+    expect(csv).toBe("Name,Email\r\n,");
+  });
+
+  it("neutralizes formula-like leading characters", () => {
+    const csv = serializeCsv(
+      [
+        { note: "=2+2" },
+        { note: "+SUM(A1:A2)" },
+        { note: "-10" },
+        { note: "@cmd" },
+      ],
+      [{ header: "Note", value: (row) => row.note }],
+    );
+
+    expect(csv).toBe("Note\r\n'=2+2\r\n'+SUM(A1:A2)\r\n'-10\r\n'@cmd");
+  });
+});

app/src/lib/csv.ts

@@ -0,0 +1,46 @@
+export type CsvColumn<T> = {
+  header: string;
+  value: (row: T) => unknown;
+};
+
+export function serializeCsv<T>(
+  rows: Array<T>,
+  columns: Array<CsvColumn<T>>,
+): string {
+  const headerRow = columns.map((column) => serializeCsvCell(column.header));
+  const dataRows = rows.map((row) =>
+    columns.map((column) => serializeCsvCell(column.value(row))),
+  );
+
+  return [headerRow, ...dataRows].map((row) => row.join(",")).join("\r\n");
+}
+
+export function downloadCsv(filename: string, csv: string) {
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+
+  link.href = url;
+  link.download = filename;
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}
+
+function serializeCsvCell(value: unknown): string {
+  if (value === null || value === undefined) return "";
+
+  let stringValue = value instanceof Date ? value.toISOString() : String(value);
+
+  if (/^[=+\-@]/.test(stringValue)) {
+    stringValue = `'${stringValue}`;
+  }
+
+  if (/[",\r\n]/.test(stringValue)) {
+    return `"${stringValue.replaceAll('"', '""')}"`;
+  }
+
+  return stringValue;
+}