Skip to content

Commit

Permalink
Merge pull request #1079 from datopian/fix/changed-the-download-behavior
Browse files Browse the repository at this point in the history
Changed behavior of the download data bucket viewer component
  • Loading branch information
Gutts-n authored Jan 25, 2024
2 parents 7d010cf + 058d236 commit 2bffd13
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 58 deletions.
5 changes: 5 additions & 0 deletions .changeset/proud-schools-rhyme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@portaljs/components': patch
---

Changed the download behaviour of the bucket viewer component and removed loading component while downloading
46 changes: 8 additions & 38 deletions packages/components/src/components/BucketViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export interface BucketViewerProps {
onLoadTotalNumberOfItems?: (total: number) => void;
domain: string;
downloadConfig?: {
downloadingMessageComponent?: ReactNode;
hoverOfTheFileComponent?: ReactNode;
};
suffix?: string;
Expand Down Expand Up @@ -47,14 +46,10 @@ export function BucketViewer({
}: BucketViewerProps) {
suffix = suffix ?? '/';

const { downloadingMessageComponent, hoverOfTheFileComponent } =
downloadConfig ?? {};
const { hoverOfTheFileComponent } = downloadConfig ?? {};
const [isLoading, setIsLoading] = useState<boolean>(false);
const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] =
useState(-1);
const [showDownloadLoadingOnFile, setShowDownloadLoadingOnFile] = useState(
new Map<string, boolean>()
);
const [currentPage, setCurrentPage] = useState<number>(0);
const [lastPage, setLastPage] = useState<number>(0);
const [bucketFiles, setBucketFiles] = useState<BucketViewerData[]>([]);
Expand Down Expand Up @@ -136,31 +131,13 @@ export function BucketViewer({
(data, i) => (
<ul
onClick={() => {
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();
});
}
const a: HTMLAnchorElement = document.createElement('a');
a.href = data.downloadFileUri;
a.target = `_blank`;
a.download = data.fileName;
document.body.appendChild(a);
a.click();
document.removeChild(a);
}}
key={i}
onMouseEnter={() => setShowDownloadComponentOnLine(i)}
Expand All @@ -184,13 +161,6 @@ export function BucketViewer({
<></>
)}
</div>
{showDownloadLoadingOnFile.get(data.fileName) ? (
downloadingMessageComponent ?? (
<label>Downloading file...</label>
)
) : (
<></>
)}
</div>
</ul>
)
Expand Down
20 changes: 0 additions & 20 deletions packages/components/stories/BucketViewer.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,23 +95,3 @@ export const WithComponentOnHoverOfEachBucketFile: Story = {
},
},
};

export const WithLoadingComponentWhileDownloadTheBucketFile: Story = {
name: 'With loading component while download the bucket file',
args: {
domain: 'https://ssen-smart-meter.datopian.workers.dev',
suffix: '/',
downloadConfig: { downloadingMessageComponent: 'COMPONENT....' },
dataMapperFn: async (rawData: Response) => {
const result = await rawData.json();
return result.objects.map((e) => ({
downloadFileUri: e.downloadLink,
fileName: e.key.replace(/^(\w+\/)/g, ''),
dateProps: {
date: new Date(e.uploaded),
dateFormatter: (date) => date.toLocaleDateString(),
},
}));
},
},
};

1 comment on commit 2bffd13

@vercel
Copy link

@vercel vercel bot commented on 2bffd13 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

portaljs-storybook – ./packages/components/

storybook.portaljs.org
portaljs-storybook-git-main-datopian1.vercel.app
portaljs-storybook.vercel.app
portaljs-storybook-datopian1.vercel.app

Please sign in to comment.