feat(web): implement CSV and BibTeX export for catalogue lists

Mearman · Mearman · commit 59ac39c9bb35 · 2026-01-12T21:39:54.000Z
Users can now export their catalogue lists to CSV and BibTeX formats.
CSV export includes all entities with ID, type, notes, position, and date.
BibTeX export is works-only and creates basic BibTeX entries with
OpenAlex IDs and user notes.

Changes:
- Add exportListAsCSV function to useCatalogue hook
- Add exportListAsBibTeX function to useCatalogue hook
- Add escapeCSVValue helper for proper CSV formatting
- Add convertToBibTeX helper for BibTeX entry generation
- Update exportListAsFile to handle csv and bibtex formats
- Update ExportModal to enable CSV and BibTeX options
- Remove "not implemented" alert from ExportModal
- Add proper error messages for BibTeX with no works
diff --git a/apps/web/src/components/catalogue/ExportModal.tsx b/apps/web/src/components/catalogue/ExportModal.tsx
@@ -37,32 +37,22 @@ export const ExportModal = ({ listId, listTitle, onClose }: ExportModalProps) =>
     setIsExporting(true);
     setExportSuccess(false);
     try {
-      // Call the appropriate export method based on format
-      if (selectedFormat === "json" || selectedFormat === "compressed") {
-        await exportListAsFile(listId, selectedFormat);
-
-        logger.debug("catalogue-ui", "List exported successfully", {
-          listId,
-          listTitle,
-          format: selectedFormat,
-        });
-
-        setExportSuccess(true);
-
-        notifications.show({
-          title: "Export Successful",
-          message: `List exported as ${selectedFormat.toUpperCase()} format`,
-          color: "green",
-          icon: <IconCheck size={ICON_SIZE.MD} />,
-        });
-      } else {
-        // CSV and BibTeX not yet implemented
-        notifications.show({
-          title: "Not Implemented",
-          message: `${selectedFormat.toUpperCase()} export is not yet implemented`,
-          color: "yellow",
-        });
-      }
+      await exportListAsFile(listId, selectedFormat);
+
+      logger.debug("catalogue-ui", "List exported successfully", {
+        listId,
+        listTitle,
+        format: selectedFormat,
+      });
+
+      setExportSuccess(true);
+
+      notifications.show({
+        title: "Export Successful",
+        message: `List exported as ${selectedFormat.toUpperCase()} format`,
+        color: "green",
+        icon: <IconCheck size={ICON_SIZE.MD} />,
+      });
     } catch (error) {
       logger.error("catalogue-ui", "Failed to export list", {
         listId,
@@ -72,7 +62,7 @@ export const ExportModal = ({ listId, listTitle, onClose }: ExportModalProps) =>
 
       notifications.show({
         title: "Export Failed",
-        message: "Failed to export list. Please try again.",
+        message: error instanceof Error ? error.message : "Failed to export list. Please try again.",
         color: "red",
       });
     } finally {
@@ -111,14 +101,12 @@ export const ExportModal = ({ listId, listTitle, onClose }: ExportModalProps) =>
             value="csv"
             label="CSV"
             description="Spreadsheet-compatible format"
-            disabled
             aria-describedby="csv-description"
           />
           <Radio
             value="bibtex"
             label="BibTeX"
             description="Bibliography format (works only)"
-            disabled
             aria-describedby="bibtex-description"
           />
         </Stack>
@@ -137,20 +125,13 @@ export const ExportModal = ({ listId, listTitle, onClose }: ExportModalProps) =>
         </Alert>
       )}
 
-      {(selectedFormat === "csv" || selectedFormat === "bibtex") && (
-        <Alert icon={<IconAlertCircle size={ICON_SIZE.MD} />} color="yellow">
-          This export format is not yet implemented. Please use JSON or Compressed Data format.
-        </Alert>
-      )}
-
       <Group justify="flex-end" gap="xs">
         <Button variant="subtle" onClick={onClose} disabled={isExporting}>
           {exportSuccess ? "Done" : "Cancel"}
         </Button>
         <Button
           onClick={handleExport}
           loading={isExporting}
-          disabled={selectedFormat === "csv" || selectedFormat === "bibtex"}
           leftSection={<IconDownload size={ICON_SIZE.MD} />}
           data-testid="export-list-button"
         >
diff --git a/apps/web/src/hooks/useCatalogue.ts b/apps/web/src/hooks/useCatalogue.ts
@@ -150,7 +150,9 @@ export interface UseCatalogueReturn {
   // File Export
   exportList: (listId: string) => Promise<ExportFormat>;
   exportListCompressed: (listId: string) => Promise<string>;
-  exportListAsFile: (listId: string, format: "json" | "compressed") => Promise<void>;
+  exportListAsFile: (listId: string, format: "json" | "compressed" | "csv" | "bibtex") => Promise<void>;
+  exportListAsCSV: (listId: string) => Promise<void>;
+  exportListAsBibTeX: (listId: string) => Promise<void>;
 
   // Import Methods
   importList: (data: ExportFormat) => Promise<string>;
@@ -843,9 +845,179 @@ export const useCatalogue = (options: UseCatalogueOptions = {}): UseCatalogueRet
     }
   }, [exportList, storage]);
 
+  // Helper function to escape CSV values
+  const escapeCSVValue = useCallback((value: string): string => {
+    // Wrap in quotes if it contains comma, quote, or newline
+    if (value.includes(',') || value.includes('"') || value.includes('\n')) {
+      return `"${value.replaceAll(/"/g, '""')}"`;
+    }
+    return value;
+  }, []);
+
+  // Export list as CSV
+  const exportListAsCSV = useCallback(async (listId: string): Promise<void> => {
+    try {
+      const list = await storage.getList(listId);
+      if (!list) {
+        throw new Error("List not found");
+      }
+
+      const listEntities = await storage.getListEntities(listId);
+
+      // Create CSV header
+      const headers = ["Entity ID", "Entity Type", "Notes", "Position", "Added At"];
+      let csv = headers.map(escapeCSVValue).join(",") + "\n";
+
+      // Add data rows
+      for (const entity of listEntities) {
+        const row = [
+          entity.entityId,
+          entity.entityType,
+          entity.notes || "",
+          entity.position?.toString() || "",
+          entity.addedAt instanceof Date ? entity.addedAt.toISOString() : entity.addedAt || "",
+        ];
+        csv += row.map(escapeCSVValue).join(",") + "\n";
+      }
+
+      // Create filename
+      const date = new Date().toISOString().split('T')[0];
+      const sanitizedTitle = list.title
+        .replaceAll(/[^0-9a-z]/gi, '-')
+        .replaceAll(/-+/g, '-')
+        .replaceAll(/^-/g, '')
+        .replaceAll(/-$/g, '')
+        .toLowerCase();
+      const filename = `catalogue-${sanitizedTitle}-${date}.csv`;
+
+      // Create blob and trigger download
+      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.append(link);
+      link.click();
+
+      link.remove();
+      URL.revokeObjectURL(url);
+
+      logger.debug(CATALOGUE_LOGGER_CONTEXT, "CSV export completed", {
+        listId,
+        entityCount: listEntities.length,
+        filename,
+      });
+    } catch (error) {
+      logger.error(CATALOGUE_LOGGER_CONTEXT, "Failed to export list as CSV", { listId, error });
+      throw error;
+    }
+  }, [storage, escapeCSVValue]);
+
+  // Helper function to convert entity to BibTeX format
+  const convertToBibTeX = useCallback((entity: CatalogueEntity): string | null => {
+    // Only works can be exported to BibTeX
+    if (entity.entityType !== "works") {
+      return null;
+    }
+
+    const citationKey = entity.entityId.replace(/^W/, ''); // Remove W prefix for key
+    const bibTeXType = "misc"; // Default to misc since we have limited data
+
+    // Basic BibTeX entry with the data we have
+    let bibtex = `@${bibTeXType}{${citationKey},\n`;
+    bibtex += `  openalex = {${entity.entityId}},\n`;
+
+    if (entity.notes) {
+      bibtex += `  note = {${entity.notes.replaceAll(/"/g, "{").replaceAll(/}/g, "}")}},\n`;
+    }
+
+    bibtex += `}`;
+
+    return bibtex;
+  }, []);
+
+  // Export list as BibTeX (works only)
+  const exportListAsBibTeX = useCallback(async (listId: string): Promise<void> => {
+    try {
+      const list = await storage.getList(listId);
+      if (!list) {
+        throw new Error("List not found");
+      }
+
+      const listEntities = await storage.getListEntities(listId);
+
+      // Filter only works
+      const works = listEntities.filter(e => e.entityType === "works");
+
+      if (works.length === 0) {
+        throw new Error("No works found in this list. BibTeX export is only available for works.");
+      }
+
+      let bibtex = "";
+      const skippedEntities: { entityId: string; type: string }[] = [];
+
+      for (const entity of listEntities) {
+        const entry = convertToBibTeX(entity);
+        if (entry) {
+          bibtex += entry + "\n\n";
+        } else {
+          skippedEntities.push({ entityId: entity.entityId, type: entity.entityType });
+        }
+      }
+
+      // Create filename
+      const date = new Date().toISOString().split('T')[0];
+      const sanitizedTitle = list.title
+        .replaceAll(/[^0-9a-z]/gi, '-')
+        .replaceAll(/-+/g, '-')
+        .replaceAll(/^-/g, '')
+        .replaceAll(/-$/g, '')
+        .toLowerCase();
+      const filename = `bibliography-${sanitizedTitle}-${date}.bib`;
+
+      // Create blob and trigger download
+      const blob = new Blob([bibtex], { type: "text/plain;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.append(link);
+      link.click();
+
+      link.remove();
+      URL.revokeObjectURL(url);
+
+      logger.debug(CATALOGUE_LOGGER_CONTEXT, "BibTeX export completed", {
+        listId,
+        worksExported: works.length,
+        skippedCount: skippedEntities.length,
+        skippedTypes: skippedEntities.map(s => s.type),
+        filename,
+      });
+    } catch (error) {
+      logger.error(CATALOGUE_LOGGER_CONTEXT, "Failed to export list as BibTeX", { listId, error });
+      throw error;
+    }
+  }, [storage, convertToBibTeX]);
+
   // Export list as downloadable file
-  const exportListAsFile = useCallback(async (listId: string, format: "json" | "compressed"): Promise<void> => {
+  const exportListAsFile = useCallback(async (listId: string, format: "json" | "compressed" | "csv" | "bibtex"): Promise<void> => {
     try {
+      if (format === "csv") {
+        await exportListAsCSV(listId);
+        return;
+      }
+      if (format === "bibtex") {
+        await exportListAsBibTeX(listId);
+        return;
+      }
+
       const list = await storage.getList(listId);
       if (!list) {
         throw new Error("List not found");
@@ -906,7 +1078,7 @@ export const useCatalogue = (options: UseCatalogueOptions = {}): UseCatalogueRet
       logger.error(CATALOGUE_LOGGER_CONTEXT, "Failed to export list as file", { listId, format, error });
       throw error;
     }
-  }, [storage, exportList, exportListCompressed]);
+  }, [storage, exportList, exportListCompressed, exportListAsCSV, exportListAsBibTeX]);
 
   // Import list from ExportFormat data
   const importList = useCallback(async (data: ExportFormat): Promise<string> => {
@@ -1211,6 +1383,8 @@ export const useCatalogue = (options: UseCatalogueOptions = {}): UseCatalogueRet
     exportList,
     exportListCompressed,
     exportListAsFile,
+    exportListAsCSV,
+    exportListAsBibTeX,
 
     // Import Methods
     importList,
