Merge pull request #1082 from datopian/changeset-release/main

Version Packages

packages/components/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @portaljs/components
 
+## 0.5.9
+
+### Patch Changes
+
+- [#1081](https://github.com/datopian/portaljs/pull/1081) [`2bbf3134`](https://github.com/datopian/portaljs/commit/2bbf3134896df3ecc66560bdf95bece143614c7b) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Fixed error to remove anchor from document
+
+## 0.5.8
+
+### Patch Changes
+
+- [#1079](https://github.com/datopian/portaljs/pull/1079) [`058d2367`](https://github.com/datopian/portaljs/commit/058d23678a024890f8a6d909ded9fc8fc11cf145) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Changed the download behaviour of the bucket viewer component and removed loading component while downloading
+
+## 0.5.7
+
+### Patch Changes
+
+- [#1077](https://github.com/datopian/portaljs/pull/1077) [`6d7acd27`](https://github.com/datopian/portaljs/commit/6d7acd27ed9299cbcc14eab906f2f0eb414656b8) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created property to present a component while is loading the download of the file and fixed download bug on pagination
+
 ## 0.5.6
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.5.6",
+  "version": "0.5.9",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [

packages/components/src/components/BucketViewer.tsx

@@ -9,9 +9,11 @@ export interface BucketViewerFilterSearchedDataEvent {
 export interface BucketViewerProps {
   onLoadTotalNumberOfItems?: (total: number) => void;
   domain: string;
+  downloadConfig?: {
+    hoverOfTheFileComponent?: ReactNode;
+  };
   suffix?: string;
   className?: string;
-  downloadComponent?: ReactNode;
   paginationConfig?: BucketViewerPaginationConfig;
   filterState?: BucketViewerFilterSearchedDataEvent;
   dataMapperFn: (rawData: Response) => Promise<BucketViewerData[]>;
@@ -34,20 +36,20 @@ export interface BucketViewerData {
 
 export function BucketViewer({
   domain,
-  downloadComponent,
   suffix,
   dataMapperFn,
   className,
   filterState,
   paginationConfig,
-  onLoadTotalNumberOfItems
+  downloadConfig,
+  onLoadTotalNumberOfItems,
 }: BucketViewerProps) {
-
   suffix = suffix ?? '/';
-  downloadComponent = downloadComponent ?? <></>;
 
+  const { hoverOfTheFileComponent } = downloadConfig ?? {};
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] = useState(-1);
+  const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] =
+    useState(-1);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [lastPage, setLastPage] = useState<number>(0);
   const [bucketFiles, setBucketFiles] = useState<BucketViewerData[]>([]);
@@ -65,9 +67,8 @@ export function BucketViewer({
       .finally(() => setIsLoading(false));
   }, [domain, suffix]);
 
-  useEffect(
-    () => {
-      if(paginationConfig) {
+  useEffect(() => {
+    if (paginationConfig) {
       const startIndex = paginationConfig
         ? currentPage * paginationConfig.itemsPerPage
         : 0;
@@ -76,45 +77,49 @@ export function BucketViewer({
         ? startIndex + paginationConfig.itemsPerPage
         : 0;
 
-        setLastPage(Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1);
+      setLastPage(
+        Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1
+      );
       setPaginatedData(filteredData.slice(startIndex, endIndex));
     }
-    }, 
-    [currentPage, filteredData]
-  );
-
-  useEffect(
-    () => {
-      if(onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length);
-    }, 
-    [filteredData]
-  )
+  }, [currentPage, filteredData]);
 
   useEffect(() => {
-      if(!filterState) return;
+    if (onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length);
+  }, [filteredData]);
+
+  useEffect(() => {
+    if (!filterState) return;
 
     if (filterState.startDate && filterState.endDate) {
-        setFilteredData(bucketFiles.filter(({ dateProps }) => 
+      setFilteredData(
+        bucketFiles.filter(({ dateProps }) =>
           dateProps
-            ? 
-              dateProps.date.getTime() >= filterState.startDate.getTime() 
-              && dateProps.date.getTime() <= filterState.endDate.getTime() 
+            ? dateProps.date.getTime() >= filterState.startDate.getTime() &&
+              dateProps.date.getTime() <= filterState.endDate.getTime()
             : true
-        ));
-      } else if(filterState.startDate) {
-        setFilteredData(bucketFiles.filter(({ dateProps }) => 
-          dateProps ? dateProps.date.getTime() >= filterState.startDate.getTime() : true
-        ));
-      } else if(filterState.endDate) {
-        setFilteredData(bucketFiles.filter(({ dateProps }) => 
-          dateProps ? dateProps.date.getTime() <= filterState.endDate.getTime() : true
-        ));
+        )
+      );
+    } else if (filterState.startDate) {
+      setFilteredData(
+        bucketFiles.filter(({ dateProps }) =>
+          dateProps
+            ? dateProps.date.getTime() >= filterState.startDate.getTime()
+            : true
+        )
+      );
+    } else if (filterState.endDate) {
+      setFilteredData(
+        bucketFiles.filter(({ dateProps }) =>
+          dateProps
+            ? dateProps.date.getTime() <= filterState.endDate.getTime()
+            : true
+        )
+      );
     } else {
       setFilteredData(bucketFiles);
     }
-    }, 
-    [filterState]
-  )
+  }, [filterState]);
 
   return isLoading ? (
     <div className="w-full flex items-center justify-center h-[300px]">
@@ -122,30 +127,17 @@ export function BucketViewer({
     </div>
   ) : bucketFiles ? (
     <>
-      {...(paginationConfig && bucketFiles
-        ? paginatedData
-        : filteredData
-      )?.map((data, i) => (
+      {...(paginationConfig && bucketFiles ? paginatedData : filteredData)?.map(
+        (data, i) => (
           <ul
             onClick={() => {
-            const anchorId = `download_anchor_${i}`;
-            const a: HTMLAnchorElement =
-              (document.getElementById(anchorId) as HTMLAnchorElement | null) ??
-              document.createElement('a');
-            a.id = anchorId;
-            if (a.download) a.click();
-            else {  
-              setIsLoading(true);
-              fetch(data.downloadFileUri)
-                .then((res) => res.blob())
-                .then((res) => {
-                  a.href = URL.createObjectURL(res);
-                  a.download = res.name ?? data.fileName;
+              const a: HTMLAnchorElement = document.createElement('a');
+              a.href = data.downloadFileUri;
+              a.target = `_blank`;
+              a.download = data.fileName;
               document.body.appendChild(a);
               a.click();
-                })
-                .finally(() => setIsLoading(false));
-            }
+              document.body.removeChild(a);
             }}
             key={i}
             onMouseEnter={() => setShowDownloadComponentOnLine(i)}
@@ -155,11 +147,12 @@ export function BucketViewer({
               'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer'
             }`}
           >
-          {
-            downloadComponent && showDownloadComponentOnLine === i 
-              ? downloadComponent
-              : <></>
-          }
+            {hoverOfTheFileComponent && showDownloadComponentOnLine === i ? (
+              hoverOfTheFileComponent
+            ) : (
+              <></>
+            )}
+            <div className="flex justify-between w-full items-center">
               <div>
                 <li>{data.fileName}</li>
                 {data.dateProps && data.dateProps.dateFormatter ? (
@@ -168,13 +161,16 @@ export function BucketViewer({
                   <></>
                 )}
               </div>
+            </div>
           </ul>
-      ))}
+        )
+      )}
       {paginationConfig ? (
-        <ul className={
+        <ul
+          className={
             paginationConfig.containerClassName
               ? paginationConfig.containerClassName
-              : "flex justify-end gap-x-[0.5rem] w-full"
+              : 'flex justify-end gap-x-[0.5rem] w-full'
           }
           style={paginationConfig.containerStyles ?? {}}
         >
@@ -182,7 +178,10 @@ export function BucketViewer({
             <button
               className="hover:cursor-pointer hover:disabled:cursor-not-allowed"
               disabled={currentPage === 0}
-              onClick={() => setCurrentPage(0)}>First</button>
+              onClick={() => setCurrentPage(0)}
+            >
+              First
+            </button>
           </li>
           <li>
             <button
@@ -193,9 +192,7 @@ export function BucketViewer({
               Previous
             </button>
           </li>
-          <label>
-            {currentPage + 1}
-          </label>
+          <label>{currentPage + 1}</label>
 
           <li>
             <button

packages/components/stories/BucketViewer.stories.ts

@@ -1,6 +1,9 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 
-import { BucketViewer, BucketViewerProps } from '../src/components/BucketViewer';
+import {
+  BucketViewer,
+  BucketViewerProps,
+} from '../src/components/BucketViewer';
 import LoadingSpinner from '../src/components/LoadingSpinner';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -10,19 +13,16 @@ const meta: Meta = {
   tags: ['autodocs'],
   argTypes: {
     domain: {
-      description:
-        'Bucket domain URI',
+      description: 'Bucket domain URI',
     },
     suffix: {
-      description:
-        'Suffix of bucket domain',
+      description: 'Suffix of bucket domain',
     },
-    downloadComponent: {
-      description:
-        'Component to be displayed on hover of each bucket data',
+    downloadConfig: {
+      description: `Bucket file download configuration`,
     },
     filterState: {
-      description: `State with values used to filter the bucket files`
+      description: `State with values used to filter the bucket files`,
     },
     paginationConfig: {
       description: `Configuration to show and stylise the pagination on the component`,
@@ -42,17 +42,15 @@ export const Normal: Story = {
     suffix: '/',
     dataMapperFn: async (rawData: Response) => {
       const result = await rawData.json();
-      return result.objects.map(
-        e => ({
+      return result.objects.map((e) => ({
         downloadFileUri: e.downloadLink,
-          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
         dateProps: {
           date: new Date(e.uploaded),
-            dateFormatter: (date) => date.toLocaleDateString()
-          }
-        })
-      )
-    }
+          dateFormatter: (date) => date.toLocaleDateString(),
+        },
+      }));
+    },
   },
 };
 
@@ -62,21 +60,19 @@ export const WithPagination: Story = {
     domain: 'https://ssen-smart-meter.datopian.workers.dev',
     suffix: '/',
     paginationConfig: {
-      itemsPerPage: 3
+      itemsPerPage: 3,
     },
     dataMapperFn: async (rawData: Response) => {
       const result = await rawData.json();
-      return result.objects.map(
-        e => ({
+      return result.objects.map((e) => ({
         downloadFileUri: e.downloadLink,
-          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
         dateProps: {
           date: new Date(e.uploaded),
-            dateFormatter: (date) => date.toLocaleDateString()
-          }
-        })
-      )
-    }
+          dateFormatter: (date) => date.toLocaleDateString(),
+        },
+      }));
+    },
   },
 };
 
@@ -85,19 +81,17 @@ export const WithComponentOnHoverOfEachBucketFile: Story = {
   args: {
     domain: 'https://ssen-smart-meter.datopian.workers.dev',
     suffix: '/',
-    downloadComponent: LoadingSpinner(),
+    downloadConfig: { hoverOfTheFileComponent: `HOVER COMPONENT` },
     dataMapperFn: async (rawData: Response) => {
       const result = await rawData.json();
-      return result.objects.map(
-        e => ({
+      return result.objects.map((e) => ({
         downloadFileUri: e.downloadLink,
-          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
         dateProps: {
           date: new Date(e.uploaded),
-            dateFormatter: (date) => date.toLocaleDateString()
-          }
-        })
-      )
-    }
+          dateFormatter: (date) => date.toLocaleDateString(),
+        },
+      }));
+    },
   },
 };