feat(web): support csv download for Dataset in setting page (#410)

Co-authored-by: nina992 <[email protected]>
reearth · May 10, 2023 · 3bb0a04 · 3bb0a04
1 parent d68440d
commit 3bb0a04
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 9 deletions.
diff --git a/web/src/components/atoms/Icon/Icons/download.svg b/web/src/components/atoms/Icon/Icons/download.svg
diff --git a/web/src/components/atoms/Icon/Icons/spinner.svg b/web/src/components/atoms/Icon/Icons/spinner.svg
diff --git a/web/src/components/atoms/Icon/icons.ts b/web/src/components/atoms/Icon/icons.ts
@@ -35,6 +35,8 @@ import PcIcon from "./Icons/pcIcon.svg";
 import GoogleDriveIcon from "./Icons/googleDriveIcon.svg";
 import SheetFileIcon from "./Icons/sheet-file.svg";
 import Update from "./Icons/update.svg";
+import Download from "./Icons/download.svg";
+import Spinner from "./Icons/spinner.svg";
 
 // Asset
 import AssetGrid from "./Icons/assetGrid.svg";
@@ -179,6 +181,8 @@ export default {
   datasetAdd: DatasetAdd,
   file: File,
   update: Update,
+  download: Download,
+  spinner: Spinner,
   googleDrive: GoogleDriveIcon,
   sheetFile: SheetFileIcon,
   computer: PcIcon,

diff --git a/web/src/components/molecules/Settings/Project/Dataset/DatasetItem/index.tsx b/web/src/components/molecules/Settings/Project/Dataset/DatasetItem/index.tsx
@@ -13,17 +13,31 @@ export type Props = {
   id: string;
   name: string;
   removeDatasetSchema?: (schemaId: string) => void;
+  onDownloadFile?: (id: string, name: string, onLoad: () => void) => void;
 };
 
-const DatasetItem: React.FC<Props> = ({ className, id, name, removeDatasetSchema }) => {
+const DatasetItem: React.FC<Props> = ({
+  className,
+  id,
+  name,
+  removeDatasetSchema,
+  onDownloadFile,
+}) => {
   const t = useT();
-
   const [isHover, setHover] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
+  const [isDownloading, setDownloading] = useState(false);
+
   const handleRemoveDatasetSchema = useCallback(
     () => removeDatasetSchema?.(id),
     [id, removeDatasetSchema],
   );
+  const handleDownloadFile = useCallback(() => {
+    setDownloading(true);
+    onDownloadFile?.(id, name, () => {
+      setDownloading(false);
+    });
+  }, [id, name, onDownloadFile]);
 
   const onClose = useCallback(() => {
     setIsVisible(false);
@@ -39,6 +53,11 @@ const DatasetItem: React.FC<Props> = ({ className, id, name, removeDatasetSchema
         {isHover && (
           <Actions>
             <TrashIcon icon="bin" size={20} onClick={() => setIsVisible(true)} />
+            {!isDownloading && (
+              <DownloadIcon icon="download" size={20} onClick={handleDownloadFile} />
+            )}
+
+            {isDownloading && <SpinIcon icon="spinner" size={20} />}
           </Actions>
         )}
         <Preview>
@@ -91,13 +110,14 @@ const Preview = styled.div`
 const Actions = styled.div`
   position: absolute;
   top: 0;
-  left: 0;
+  right: 0;
   width: 100%;
   height: 100%;
   background: rgba(34, 34, 34, 0.9);
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  justify-content: flex-start;
   padding: 10px;
   box-sizing: border-box;
 `;
@@ -118,7 +138,35 @@ const Name = styled.div`
 const TrashIcon = styled(Icon)`
   color: #ff3c53;
   cursor: pointer;
+  padding: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+const DownloadIcon = styled(Icon)`
+  cursor: pointer;
+  color: ${props => props.theme.main.text};
+  padding: 10px;
+  bottom: 0;
+  right: 0;
+`;
+
+const SpinIcon = styled(Icon)`
+  display: inline-block;
   padding: 10px;
+  color: ${props => props.theme.main.text};
+  bottom: 0;
+  right: 0;
+  animation: spin 1s linear infinite;
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
 `;
 
 export default DatasetItem;
diff --git a/web/src/components/molecules/Settings/Project/Dataset/DatasetList/index.stories.tsx b/web/src/components/molecules/Settings/Project/Dataset/DatasetList/index.stories.tsx
@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions";
 import { Meta } from "@storybook/react";
 
 import DatasetList from ".";
@@ -14,4 +15,10 @@ export default {
   component: DatasetList,
 } as Meta;
 
-export const Default = () => <DatasetList items={items} />;
+export const Default = () => (
+  <DatasetList
+    items={items}
+    removeDatasetSchema={action("removeDatasetSchema")}
+    onDownloadFile={action("onDownloadFile")}
+  />
+);
diff --git a/web/src/components/molecules/Settings/Project/Dataset/DatasetList/index.tsx b/web/src/components/molecules/Settings/Project/Dataset/DatasetList/index.tsx
@@ -14,13 +14,19 @@ export type Props = {
   hasMore?: boolean;
   removeDatasetSchema?: (schemaId: string) => void;
   onGetMoreDataSets?: () => void;
+  onDownloadFile?: (id: string, name: string, onLoad: () => void) => void;
 };
 
-const DatasetList: React.FC<Props> = ({ items, removeDatasetSchema }) => {
+const DatasetList: React.FC<Props> = ({ items, removeDatasetSchema, onDownloadFile }) => {
   return (
     <Wrapper>
       {items.map(item => (
-        <DatasetItem key={item.id} {...item} removeDatasetSchema={removeDatasetSchema} />
+        <DatasetItem
+          key={item.id}
+          {...item}
+          removeDatasetSchema={removeDatasetSchema}
+          onDownloadFile={onDownloadFile}
+        />
       ))}
     </Wrapper>
   );

diff --git a/web/src/components/molecules/Settings/Project/Dataset/DatasetSection/index.tsx b/web/src/components/molecules/Settings/Project/Dataset/DatasetSection/index.tsx
@@ -13,12 +13,14 @@ type Props = {
   datasetSchemas: Item[];
   removeDatasetSchema: (schemaId: string) => void;
   onDatasetImport?: (file: File, datasetSchemaId: string | null) => void | Promise<void>;
+  onDownloadFile?: (id: string, name: string, onLoad: () => void) => void;
 };
 
 const DatasetSection: React.FC<Props> = ({
   datasetSchemas,
   removeDatasetSchema,
   onDatasetImport,
+  onDownloadFile,
 }) => {
   const t = useT();
   const handleFileSelect = useFileInput(files => onDatasetImport?.(files[0], null), {
@@ -32,7 +34,11 @@ const DatasetSection: React.FC<Props> = ({
       actions={
         <Button large buttonType="secondary" text={t("Add Dataset")} onClick={handleFileSelect} />
       }>
-      <StyledDatasetList items={datasetSchemas} removeDatasetSchema={removeDatasetSchema} />
+      <StyledDatasetList
+        items={datasetSchemas}
+        removeDatasetSchema={removeDatasetSchema}
+        onDownloadFile={onDownloadFile}
+      />
     </Section>
   );
 };

diff --git a/web/src/components/organisms/Settings/Project/Dataset/hooks.ts b/web/src/components/organisms/Settings/Project/Dataset/hooks.ts
@@ -1,6 +1,7 @@
 import { useApolloClient } from "@apollo/client";
 import { useCallback } from "react";
 
+import { useAuth } from "@reearth/auth";
 import {
   DatasetsListQuery,
   useGetProjectSceneQuery,
@@ -19,6 +20,7 @@ const datasetPerPage = 20;
 
 export default (projectId: string) => {
   const t = useT();
+  const { getAccessToken } = useAuth();
   const [currentWorkspace] = useSessionWorkspace();
   const [lastWorkspace] = useWorkspace();
 
@@ -108,6 +110,32 @@ export default (projectId: string) => {
     [client, importData, sceneId],
   );
 
+  //Download file
+
+  const handleDownloadFile = useCallback(
+    async (id: string, name: string, onLoad: () => void) => {
+      if (!id || !window.REEARTH_CONFIG?.api) return;
+
+      const accessToken = await getAccessToken();
+      if (!accessToken) return;
+
+      const res = await fetch(`${window.REEARTH_CONFIG.api}/datasets/${id}`, {
+        headers: {
+          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+        },
+      });
+      const blob = await res.blob();
+      const download = document.createElement("a");
+      download.download = name;
+      download.href = URL.createObjectURL(blob);
+      download.click();
+      if (onLoad) {
+        onLoad();
+      }
+    },
+    [getAccessToken],
+  );
+
   return {
     currentWorkspace: currentWorkspace ?? lastWorkspace,
     currentProject,
@@ -117,5 +145,6 @@ export default (projectId: string) => {
     handleDatasetImport,
     handleRemoveDataset,
     handleGetMoreDataSets,
+    handleDownloadFile,
   };
 };
diff --git a/web/src/components/organisms/Settings/Project/Dataset/index.tsx b/web/src/components/organisms/Settings/Project/Dataset/index.tsx
@@ -23,6 +23,7 @@ const Dataset: React.FC<Props> = ({ projectId }) => {
     handleRemoveDataset,
     handleDatasetImport,
     handleGetMoreDataSets,
+    handleDownloadFile,
   } = useHooks(projectId);
 
   return (
@@ -38,6 +39,7 @@ const Dataset: React.FC<Props> = ({ projectId }) => {
           datasetSchemas={datasetSchemas}
           removeDatasetSchema={handleRemoveDataset}
           onDatasetImport={handleDatasetImport}
+          onDownloadFile={handleDownloadFile}
         />
       ) : (
         <ArchivedMessage />