feat: export participant list button

improve file naming of export participation urls exported file. improve component file naming to differentiate bt export participant list and export participation urls functionalities
complexdatacollective · Jan 29, 2024 · 7014f54 · 7014f54
1 parent 4fc934f
commit 7014f54
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 17 deletions.
diff --git a/app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx b/app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx
@@ -11,6 +11,7 @@ import AddParticipantButton from '~/app/(dashboard)/dashboard/participants/_comp
 import { useState } from 'react';
 import { DeleteParticipantsDialog } from '~/app/(dashboard)/dashboard/participants/_components/DeleteParticipantsDialog';
 import { ExportParticipantUrlSection } from '~/app/(dashboard)/dashboard/participants/_components/ExportParticipantUrlSection';
+import ExportParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportParticipants';
 export const ParticipantsTable = ({
   initialData,
 }: {
@@ -41,6 +42,7 @@ export const ParticipantsTable = ({
       <div className="flex gap-2">
         <AddParticipantButton existingParticipants={participants} />
         <ImportCSVModal />
+        <ExportParticipants participants={participants} />
         <DeleteAllParticipantsButton />
       </div>
       <ExportParticipantUrlSection />

diff --git a/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipantURLs.tsx b/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipantURLs.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { Protocol, type Participant } from '@prisma/client';
+import { Download } from 'lucide-react';
+import { unparse } from 'papaparse';
+import { useState } from 'react';
+import { Button } from '~/components/ui/Button';
+import { useToast } from '~/components/ui/use-toast';
+import { useDownload } from '~/hooks/useDownload';
+import { getBaseUrl } from '~/trpc/shared';
+
+function ExportCSVParticipantURLs({
+  participants,
+  protocol,
+  disabled,
+}: {
+  participants: Participant[] | undefined;
+  protocol: Protocol | undefined;
+  disabled: boolean;
+}) {
+  const download = useDownload();
+  const [isExporting, setIsExporting] = useState(false);
+  const { toast } = useToast();
+
+  const handleExport = () => {
+    try {
+      setIsExporting(true);
+      if (!participants) return;
+      if (!protocol?.id) return;
+
+      // CSV file format
+      const csvData = participants.map((participant) => ({
+        id: participant.id,
+        identifier: participant.identifier,
+        interview_url: `${getBaseUrl()}/onboard/${protocol.id}/?participantId=${
+          participant.id
+        }`,
+      }));
+
+      const csv = unparse(csvData, { header: true });
+
+      // Create a download link
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      // trigger the download
+      const protocolNameWithoutExtension = protocol.name.split('.')[0];
+      const fileName = `participation_urls_${protocolNameWithoutExtension}.csv`;
+      download(url, fileName);
+      // Clean up the URL object
+      URL.revokeObjectURL(url);
+      toast({
+        description: 'Participation URLs CSV exported successfully',
+        variant: 'success',
+        duration: 3000,
+      });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while exporting participation URLs',
+        variant: 'destructive',
+      });
+      throw new Error('An error occurred while exporting participation URLs');
+    }
+
+    setIsExporting(false);
+  };
+
+  return (
+    <Button disabled={disabled || isExporting} onClick={handleExport}>
+      <Download className="mr-2 h-4 w-4" />
+      {isExporting ? 'Exporting...' : 'Export Participation URLs'}
+    </Button>
+  );
+}
+
+export default ExportCSVParticipantURLs;
diff --git a/app/(dashboard)/dashboard/participants/_components/ExportParticipantUrlSection.tsx b/app/(dashboard)/dashboard/participants/_components/ExportParticipantUrlSection.tsx
@@ -11,7 +11,7 @@ import {
 } from '~/components/ui/select';
 
 import { api } from '~/trpc/client';
-import ExportCSVParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipants';
+import ExportCSVParticipantURLs from '~/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipantURLs';
 
 export const ExportParticipantUrlSection = () => {
   const { data: protocolData, isLoading: isLoadingProtocols } =
@@ -69,8 +69,8 @@ export const ExportParticipantUrlSection = () => {
           </SelectContent>
         </Select>
 
-        <ExportCSVParticipants
-          protocolId={selectedProtocol?.id}
+        <ExportCSVParticipantURLs
+          protocol={selectedProtocol}
           participants={participants}
           disabled={isLoadingParticipants || !selectedProtocol}
         />

diff --git a/...nts/_components/ExportCSVParticipants.tsx → ...ipants/_components/ExportParticipants.tsx b/...nts/_components/ExportCSVParticipants.tsx → ...ipants/_components/ExportParticipants.tsx
@@ -7,16 +7,11 @@ import { useState } from 'react';
 import { Button } from '~/components/ui/Button';
 import { useToast } from '~/components/ui/use-toast';
 import { useDownload } from '~/hooks/useDownload';
-import { getBaseUrl } from '~/trpc/shared';
 
-function ExportCSVParticipants({
+function ExportParticipants({
   participants,
-  protocolId,
-  disabled,
 }: {
   participants: Participant[] | undefined;
-  protocolId: string | undefined;
-  disabled: boolean;
 }) {
   const download = useDownload();
   const [isExporting, setIsExporting] = useState(false);
@@ -26,15 +21,11 @@ function ExportCSVParticipants({
     try {
       setIsExporting(true);
       if (!participants) return;
-      if (!protocolId) return;
 
       // CSV file format
       const csvData = participants.map((participant) => ({
         id: participant.id,
         identifier: participant.identifier,
-        interview_url: `${getBaseUrl()}/onboard/${protocolId}/?participantId=${
-          participant.id
-        }`,
       }));
 
       const csv = unparse(csvData, { header: true });
@@ -64,11 +55,11 @@ function ExportCSVParticipants({
   };
 
   return (
-    <Button disabled={disabled || isExporting} onClick={handleExport}>
+    <Button disabled={isExporting} onClick={handleExport} variant="outline">
       <Download className="mr-2 h-4 w-4" />
-      {isExporting ? 'Exporting...' : 'Export Participation URLs'}
+      {isExporting ? 'Exporting...' : 'Export Participant List'}
     </Button>
   );
 }
 
-export default ExportCSVParticipants;
+export default ExportParticipants;
diff --git a/app/(dashboard)/dashboard/protocols/_components/ParticipationUrlModal.tsx b/app/(dashboard)/dashboard/protocols/_components/ParticipationUrlModal.tsx
@@ -19,7 +19,7 @@ import {
 
 import { Button } from '~/components/ui/Button';
 import { api } from '~/trpc/client';
-import ExportCSVParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipants';
+import ExportCSVParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipantURLs';
 import { ParticipantSelectionDropdown } from '~/app/(dashboard)/dashboard/_components/ParticipantSelectionDropdown';
 
 export const ParticipationUrlModal = () => {