Finished the development of the BucketViewer component

packages/components/src/components/BucketViewer.tsx

@@ -1,78 +1,46 @@
 import { useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
-import { XMLParser } from 'fast-xml-parser';
 
 export interface BucketViewerProps {
   domain: string;
   suffix?: string;
+  className?: string;
+  dataMapperFn: (rawData: Response) => Promise<BucketViewerData[]>;
 }
 
-interface BucketResponse {
-  ListBucketResult: ListBucketResult;
+export interface BucketViewerData {
+  fileName: string;
+  downloadFileUri: string;
+  dateProps?: {
+    date: Date;
+    dateFormatter: (date: Date) => string;
+  };
 }
 
-interface ListBucketResult {
-  Name: string;
-  Prefix: string;
-  MaxKeys: number;
-  IsTruncated: boolean;
-  Contents: Content[];
-  Marker: string;
-  NextMarker: string;
-}
-
-interface Content {
-  Key: string;
-  LastModified: string;
-  ETag: string;
-  Size: number;
-  StorageClass: StorageClass;
-  Owner?: Owner;
-  Type: Type;
-}
-
-interface Owner {
-  ID: number;
-  DisplayName: number;
-}
-
-enum StorageClass {
-  Standard = 'STANDARD',
-}
-
-enum Type {
-  Normal = 'Normal',
-}
-
-export function BucketViewer({ domain, suffix }: BucketViewerProps) {
+export function BucketViewer({
+  domain,
+  suffix,
+  dataMapperFn,
+  className,
+}: BucketViewerProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [bucket, setBucket] = useState<BucketResponse>();
+  const [bucketFiles, setBucketFiles] = useState<BucketViewerData[]>([]);
   suffix = suffix ?? '/';
 
   useEffect(() => {
     setIsLoading(true);
     fetch(`${domain}${suffix}`)
-      .then((res) => res.text())
-      .then((res) => {
-        const parsedXml: BucketResponse = new XMLParser().parse(res);
-        let {
-          ListBucketResult: { Contents },
-        } = parsedXml;
-        Contents = Contents ?? [];
-        parsedXml.ListBucketResult.Contents = Array.isArray(Contents)
-          ? Contents
-          : [Contents];
-        setBucket(parsedXml);
-      })
+      .then((res) => dataMapperFn(res))
+      .then((data) => setBucketFiles(data))
       .finally(() => setIsLoading(false));
   }, [domain, suffix]);
   return isLoading ? (
     <div className="w-full flex items-center justify-center h-[300px]">
       <LoadingSpinner />
     </div>
-  ) : bucket ? (
+  ) : bucketFiles ? (
     <>
-      {...bucket?.ListBucketResult?.Contents?.map((c, i) => (
+      {...bucketFiles?.map((data, i) => (
         <ul
           onClick={() => {
             const anchorId = `download_anchor_${i}`;
@@ -83,11 +51,11 @@ export function BucketViewer({ domain, suffix }: BucketViewerProps) {
             if (a.download) a.click();
             else {
               setIsLoading(true);
-              fetch(`${domain}${suffix}${c.Key}`)
+              fetch(data.downloadFileUri)
                 .then((res) => res.blob())
                 .then((res) => {
                   a.href = URL.createObjectURL(res);
-                  a.download = res.name ?? c.ETag.replace(/\"/g, '');
+                  a.download = res.name ?? data.fileName;
                   document.body.appendChild(a);
                   a.click();
                 })
@@ -95,16 +63,17 @@ export function BucketViewer({ domain, suffix }: BucketViewerProps) {
             }
           }}
           key={i}
-          className="mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer"
+          className={`${
+            className ??
+            'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer'
+          }`}
         >
-          <li>{c.Key}</li>
-          <li>{c.ETag}</li>
-          <li>{c.Owner?.DisplayName}</li>
-          <li>{c.Owner?.ID}</li>
-          <li>{c.Size}</li>
-          <li>{c.StorageClass}</li>
-          <li>{c.Type}</li>
-          <li>{c.LastModified}</li>
+          <li>{data.fileName}</li>
+          {data.dateProps ? (
+            <li>{data.dateProps.dateFormatter(data.dateProps.date)}</li>
+          ) : (
+            <></>
+          )}
         </ul>
       ))}
     </>