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

@@ -1,17 +1,19 @@
 import { CSSProperties, ReactNode, useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 
-export interface BucketViewerFilterSearchedDataEvent { 
+export interface BucketViewerFilterSearchedDataEvent {
   startDate?: Date;
-  endDate?: Date; 
+  endDate?: Date;
 }
 
 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,56 +67,59 @@ export function BucketViewer({
       .finally(() => setIsLoading(false));
   }, [domain, suffix]);
 
-  useEffect(
+  useEffect(() => {
-    () => {
+    if (paginationConfig) {
-      if(paginationConfig) {
+      const startIndex = paginationConfig
-        const startIndex = paginationConfig
+        ? currentPage * paginationConfig.itemsPerPage
-          ? currentPage * paginationConfig.itemsPerPage
+        : 0;
-          : 0;
 
-        const endIndex = paginationConfig
+      const endIndex = paginationConfig
-          ? startIndex + paginationConfig.itemsPerPage
+        ? startIndex + paginationConfig.itemsPerPage
-          : 0;
+        : 0;
 
-        setLastPage(Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1);
+      setLastPage(
-        setPaginatedData(filteredData.slice(startIndex, endIndex));
+        Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1
-      }
+      );
-    }, 
+      setPaginatedData(filteredData.slice(startIndex, endIndex));
-    [currentPage, filteredData]
+    }
-  );
+  }, [currentPage, filteredData]);
-
-  useEffect(
-    () => {
-      if(onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length);
-    }, 
-    [filteredData]
-  )
 
   useEffect(() => {
-      if(!filterState) return;
+    if (onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length);
+  }, [filteredData]);
 
-      if (filterState.startDate && filterState.endDate) {
+  useEffect(() => {
-        setFilteredData(bucketFiles.filter(({ dateProps }) => 
+    if (!filterState) return;
-          dateProps 
+
-            ? 
+    if (filterState.startDate && filterState.endDate) {
-              dateProps.date.getTime() >= filterState.startDate.getTime() 
+      setFilteredData(
-              && dateProps.date.getTime() <= filterState.endDate.getTime() 
+        bucketFiles.filter(({ dateProps }) =>
+          dateProps
+            ? dateProps.date.getTime() >= filterState.startDate.getTime() &&
+              dateProps.date.getTime() <= filterState.endDate.getTime()
             : true
-        ));
+        )
-      } else if(filterState.startDate) {
+      );
-        setFilteredData(bucketFiles.filter(({ dateProps }) => 
+    } else if (filterState.startDate) {
-          dateProps ? dateProps.date.getTime() >= filterState.startDate.getTime() : true
+      setFilteredData(
-        ));
+        bucketFiles.filter(({ dateProps }) =>
-      } else if(filterState.endDate) {
+          dateProps
-        setFilteredData(bucketFiles.filter(({ dateProps }) => 
+            ? dateProps.date.getTime() >= filterState.startDate.getTime()
-          dateProps ? dateProps.date.getTime() <= filterState.endDate.getTime() : true
+            : true
-        ));
+        )
-      } else {
+      );
-        setFilteredData(bucketFiles);
+    } else if (filterState.endDate) {
-      }
+      setFilteredData(
-    }, 
+        bucketFiles.filter(({ dateProps }) =>
-    [filterState]
+          dateProps
-  )
+            ? dateProps.date.getTime() <= filterState.endDate.getTime()
+            : true
+        )
+      );
+    } else {
+      setFilteredData(bucketFiles);
+    }
+  }, [filterState]);
 
   return isLoading ? (
     <div className="w-full flex items-center justify-center h-[300px]">
@@ -122,67 +127,61 @@ export function BucketViewer({
     </div>
   ) : bucketFiles ? (
     <>
-      {...(paginationConfig && bucketFiles
+      {...(paginationConfig && bucketFiles ? paginatedData : filteredData)?.map(
-        ? paginatedData
+        (data, i) => (
-        : filteredData
+          <ul
-      )?.map((data, i) => (
+            onClick={() => {
-        <ul
+              const a: HTMLAnchorElement = document.createElement('a');
-          onClick={() => {
+              a.href = data.downloadFileUri;
-            const anchorId = `download_anchor_${i}`;
+              a.target = `_blank`;
-            const a: HTMLAnchorElement =
+              a.download = data.fileName;
-              (document.getElementById(anchorId) as HTMLAnchorElement | null) ??
+              document.body.appendChild(a);
-              document.createElement('a');
+              a.click();
-            a.id = anchorId;
+              document.body.removeChild(a);
-            if (a.download) a.click();
+            }}
-            else {  
+            key={i}
-              setIsLoading(true);
+            onMouseEnter={() => setShowDownloadComponentOnLine(i)}
-              fetch(data.downloadFileUri)
+            onMouseLeave={() => setShowDownloadComponentOnLine(undefined)}
-                .then((res) => res.blob())
+            className={`${
-                .then((res) => {
+              className ??
-                  a.href = URL.createObjectURL(res);
+              'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer'
-                  a.download = res.name ?? data.fileName;
+            }`}
-                  document.body.appendChild(a);
+          >
-                  a.click();
+            {hoverOfTheFileComponent && showDownloadComponentOnLine === i ? (
-                })
+              hoverOfTheFileComponent
-                .finally(() => setIsLoading(false));
-            }
-          }}
-          key={i}
-          onMouseEnter={() => setShowDownloadComponentOnLine(i)}
-          onMouseLeave={() => setShowDownloadComponentOnLine(undefined)}
-          className={`${
-            className ??
-            'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer'
-          }`}
-        >
-          {
-            downloadComponent && showDownloadComponentOnLine === i 
-              ? downloadComponent
-              : <></>
-          }
-          <div>
-            <li>{data.fileName}</li>
-            {data.dateProps && data.dateProps.dateFormatter ? (
-              <li>{data.dateProps.dateFormatter(data.dateProps.date)}</li>
             ) : (
               <></>
             )}
-          </div>
+            <div className="flex justify-between w-full items-center">
-        </ul>
+              <div>
-      ))}
+                <li>{data.fileName}</li>
+                {data.dateProps && data.dateProps.dateFormatter ? (
+                  <li>{data.dateProps.dateFormatter(data.dateProps.date)}</li>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+          </ul>
+        )
+      )}
       {paginationConfig ? (
-        <ul className={
+        <ul
-            paginationConfig.containerClassName 
+          className={
-              ? paginationConfig.containerClassName 
+            paginationConfig.containerClassName
-              : "flex justify-end gap-x-[0.5rem] w-full"
+              ? paginationConfig.containerClassName
-            }
+              : 'flex justify-end gap-x-[0.5rem] w-full'
-            style={paginationConfig.containerStyles ?? {}}
+          }
-          >
+          style={paginationConfig.containerStyles ?? {}}
+        >
           <li>
-            <button 
+            <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>
+          <label>{currentPage + 1}</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:
+      description: 'Bucket domain URI',
-        'Bucket domain URI',
     },
     suffix: {
-      description:
+      description: 'Suffix of bucket domain',
-        'Suffix of bucket domain',
     },
-    downloadComponent: {
+    downloadConfig: {
-      description:
+      description: `Bucket file download configuration`,
-        'Component to be displayed on hover of each bucket data',
     },
     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(
+      return result.objects.map((e) => ({
-        e => ({
+        downloadFileUri: e.downloadLink,
-          downloadFileUri: e.downloadLink,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
-          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+        dateProps: {
-          dateProps: {
+          date: new Date(e.uploaded),
-            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(
+      return result.objects.map((e) => ({
-        e => ({
+        downloadFileUri: e.downloadLink,
-          downloadFileUri: e.downloadLink,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
-          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+        dateProps: {
-          dateProps: {
+          date: new Date(e.uploaded),
-            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(
+      return result.objects.map((e) => ({
-        e => ({
+        downloadFileUri: e.downloadLink,
-          downloadFileUri: e.downloadLink,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
-          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+        dateProps: {
-          dateProps: {
+          date: new Date(e.uploaded),
-            date: new Date(e.uploaded),
+          dateFormatter: (date) => date.toLocaleDateString(),
-            dateFormatter: (date) => date.toLocaleDateString()
+        },
-          }
+      }));
-        })
+    },
-      )
-    }
   },
 };