From 6d7acd27ed9299cbcc14eab906f2f0eb414656b8 Mon Sep 17 00:00:00 2001 From: Gutts-n Date: Wed, 24 Jan 2024 17:15:14 -0300 Subject: [PATCH] Created property to present a component while is loading the download of the file and fixed download bug on pagination --- .changeset/four-brooms-decide.md | 5 + .../src/components/BucketViewer.tsx | 249 ++++++++++-------- .../stories/BucketViewer.stories.ts | 102 +++---- 3 files changed, 201 insertions(+), 155 deletions(-) create mode 100644 .changeset/four-brooms-decide.md diff --git a/.changeset/four-brooms-decide.md b/.changeset/four-brooms-decide.md new file mode 100644 index 000000000..78431ea7f --- /dev/null +++ b/.changeset/four-brooms-decide.md @@ -0,0 +1,5 @@ +--- +'@portaljs/components': patch +--- + +Created property to present a component while is loading the download of the file and fixed download bug on pagination diff --git a/packages/components/src/components/BucketViewer.tsx b/packages/components/src/components/BucketViewer.tsx index d46a1209e..c3dd60bc3 100644 --- a/packages/components/src/components/BucketViewer.tsx +++ b/packages/components/src/components/BucketViewer.tsx @@ -1,17 +1,20 @@ 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?: { + downloadingMessageComponent?: ReactNode; + hoverOfTheFileComponent?: ReactNode; + }; suffix?: string; className?: string; - downloadComponent?: ReactNode; paginationConfig?: BucketViewerPaginationConfig; filterState?: BucketViewerFilterSearchedDataEvent; dataMapperFn: (rawData: Response) => Promise; @@ -34,20 +37,24 @@ export interface BucketViewerData { export function BucketViewer({ domain, - downloadComponent, suffix, dataMapperFn, className, filterState, paginationConfig, - onLoadTotalNumberOfItems + downloadConfig, + onLoadTotalNumberOfItems, }: BucketViewerProps) { - suffix = suffix ?? '/'; - downloadComponent = downloadComponent ?? <>; + const { downloadingMessageComponent, hoverOfTheFileComponent } = + downloadConfig ?? {}; const [isLoading, setIsLoading] = useState(false); - const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] = useState(-1); + const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] = + useState(-1); + const [showDownloadLoadingOnFile, setShowDownloadLoadingOnFile] = useState( + new Map() + ); const [currentPage, setCurrentPage] = useState(0); const [lastPage, setLastPage] = useState(0); const [bucketFiles, setBucketFiles] = useState([]); @@ -65,56 +72,59 @@ export function BucketViewer({ .finally(() => setIsLoading(false)); }, [domain, suffix]); - useEffect( - () => { - if(paginationConfig) { - const startIndex = paginationConfig - ? currentPage * paginationConfig.itemsPerPage - : 0; - - const endIndex = paginationConfig - ? startIndex + paginationConfig.itemsPerPage - : 0; - - setLastPage(Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1); - setPaginatedData(filteredData.slice(startIndex, endIndex)); - } - }, - [currentPage, filteredData] - ); + useEffect(() => { + if (paginationConfig) { + const startIndex = paginationConfig + ? currentPage * paginationConfig.itemsPerPage + : 0; + + const endIndex = paginationConfig + ? startIndex + paginationConfig.itemsPerPage + : 0; + + setLastPage( + Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1 + ); + setPaginatedData(filteredData.slice(startIndex, endIndex)); + } + }, [currentPage, filteredData]); - useEffect( - () => { - if(onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length); - }, - [filteredData] - ) + useEffect(() => { + if (onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length); + }, [filteredData]); useEffect(() => { - if(!filterState) return; - - if (filterState.startDate && filterState.endDate) { - setFilteredData(bucketFiles.filter(({ dateProps }) => - dateProps - ? - dateProps.date.getTime() >= filterState.startDate.getTime() - && dateProps.date.getTime() <= filterState.endDate.getTime() + if (!filterState) return; + + if (filterState.startDate && filterState.endDate) { + setFilteredData( + 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 }) => - 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] - ) + ) + ); + } 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]); return isLoading ? (
@@ -122,67 +132,86 @@ export function BucketViewer({
) : bucketFiles ? ( <> - {...(paginationConfig && bucketFiles - ? paginatedData - : filteredData - )?.map((data, i) => ( -
    { - 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; - document.body.appendChild(a); - a.click(); - }) - .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 - : <> - } -
    -
  • {data.fileName}
    • - {data.dateProps && data.dateProps.dateFormatter ? ( -
  • {data.dateProps.dateFormatter(data.dateProps.date)}
    • + {...(paginationConfig && bucketFiles ? paginatedData : filteredData)?.map( + (data, i) => ( +
      { + const anchorId = `download_anchor_${data.fileName} `; + const a: HTMLAnchorElement = + (document.getElementById( + anchorId + ) as HTMLAnchorElement | null) ?? document.createElement('a'); + a.id = anchorId; + if (a.download) a.click(); + else { + setShowDownloadLoadingOnFile((lastState) => { + lastState.set(data.fileName, true); + return new Map(lastState); + }); + fetch(data.downloadFileUri) + .then((res) => res.blob()) + .then((res) => { + setShowDownloadLoadingOnFile((lastState) => { + lastState.set(data.fileName, false); + return new Map(lastState); + }); + a.href = URL.createObjectURL(res); + a.download = res.name ?? data.fileName; + document.body.appendChild(a); + a.click(); + }); + } + }} + key={i} + onMouseEnter={() => setShowDownloadComponentOnLine(i)} + onMouseLeave={() => setShowDownloadComponentOnLine(undefined)} + className={`${ + className ?? + 'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer' + }`} + > + {hoverOfTheFileComponent && showDownloadComponentOnLine === i ? ( + hoverOfTheFileComponent ) : ( <> )} -
    -
- ))} +
+
+
  • {data.fileName}
    • + {data.dateProps && data.dateProps.dateFormatter ? ( +
  • {data.dateProps.dateFormatter(data.dateProps.date)}
    • + ) : ( + <> + )} +
    + {showDownloadLoadingOnFile.get(data.fileName) ? ( + downloadingMessageComponent ?? ( + + ) + ) : ( + <> + )} +
    + + ) + )} {paginationConfig ? ( -
      +
      • - + onClick={() => setCurrentPage(0)} + > + First +
        • - +