Merge pull request #293 from SPARCS-UP-Mindanao/292-fe-add-button-to-download-registrations-csv-in-admin-registrations-page-in-addition-to-pre-registrations-page

fix: working export csv button on registrations pages

Author: seangaaab

frontend/src/api/registrations.ts

@@ -35,6 +35,11 @@ export interface RegistrationDto {
   transactionId: string | null;
 }
 
+interface CsvResponse {
+  downloadLink: string;
+  objectKey: string;
+}
+
 const mapRegistrationDtoToRegistration = (registration: RegistrationDto): Registration => ({
   ...registration,
   type: 'registration'
@@ -101,3 +106,10 @@ export const deleteRegistration = (eventId: string, registrationId: string) =>
     url: `/registrations/${registrationId}`,
     queryParams: { eventId, entryId: registrationId }
   });
+
+export const getCsvRegistrations = (eventId: string) =>
+  createApi<CsvResponse>({
+    authorize: true,
+    method: 'get',
+    url: `/registrations/${eventId}/csv_download`
+  });

frontend/src/hooks/useGetCsv.ts

@@ -1,21 +1,41 @@
 import { useState } from 'react';
 import { getCsvPreRegistrations } from '@/api/preregistrations';
+import { getCsvRegistrations } from '@/api/registrations';
 import { CustomAxiosError } from '@/api/utils/createApi';
 import { useApi } from './useApi';
 import { useNotifyToast } from './useNotifyToast';
 
+type ApiResponse = {
+  data: {
+    downloadLink: string;
+    objectKey: string;
+  };
+  status: number;
+  errorData?: any;
+};
+
 export const useGetCsv = (eventId: string) => {
   const { errorToast } = useNotifyToast();
   const [isGettingCsv, setIsGettingCsv] = useState(false);
   const api = useApi();
 
-  const getCsv = async () => {
+  const getCsv = async (reg_status: 'preregistrations' | 'registrations') => {
     try {
       setIsGettingCsv(true);
-      const response = await api.execute(getCsvPreRegistrations(eventId));
-      const data = response.data;
+
+      let response: ApiResponse;
+
+      if (reg_status === 'preregistrations') {
+        response = await api.execute(getCsvPreRegistrations(eventId));
+      } else if (reg_status === 'registrations') {
+        response = await api.execute(getCsvRegistrations(eventId));
+      } else {
+        console.error('Invalid reg_status');
+        return;
+      }
 
       if (response.status === 200) {
+        const { data } = response;
         const link = document.createElement('a');
         link.href = data.downloadLink;
         link.download = data.objectKey;

frontend/src/pages/admin/event/registrations/AdminEventRegistrations.tsx

@@ -26,19 +26,21 @@ const AdminEventRegistrations: FC = () => {
   return (
     <section>
       <Tabs defaultValue={getDefaultValue()} className="flex flex-col items-center">
-        {isApprovalFlow && (
-          <div className="self-start flex justify-between w-full items-center">
-            <TabsList>
-              <TabsTrigger value="preregistrations">Pre-registrations</TabsTrigger>
-              <TabsTrigger value="registrations" disabled={status === 'preregistration'}>
-                Registrations
-              </TabsTrigger>
-            </TabsList>
-            <Button variant="positive" disabled={isGettingCsv} onClick={() => getCsv()}>
-              Export CSV
-            </Button>
+        <div className="self-start flex justify-between w-full items-center">
+          <div>
+            {isApprovalFlow && (
+              <TabsList>
+                <TabsTrigger value="preregistrations">Pre-registrations</TabsTrigger>
+                <TabsTrigger value="registrations" disabled={status === 'preregistration'}>
+                  Registrations
+                </TabsTrigger>
+              </TabsList>
+            )}
           </div>
-        )}
+          <Button variant="positive" disabled={isGettingCsv} onClick={() => getCsv(getDefaultValue())}>
+            Export CSV
+          </Button>
+        </div>
         <TabsContent value="preregistrations" className="w-full">
           <PreRegistrations />
         </TabsContent>