feat: add download button

package.json

@@ -7,7 +7,7 @@
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git",
     "@graasp/query-client": "github:graasp/graasp-query-client.git",
     "@graasp/translations": "github:graasp/graasp-translations.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git",
+    "@graasp/ui": "github:graasp/graasp-ui.git#105/downloadButton",
     "@graasp/utils": "github:graasp/graasp-utils.git",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "5.0.0-beta.4",

src/components/main/Item.js

@@ -1,6 +1,7 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
+import { Card as GraaspCard, Thumbnail, DownloadButton } from '@graasp/ui';
+import { MUTATION_KEYS } from '@graasp/query-client';
 import truncate from 'lodash.truncate';
 import { makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +19,7 @@ import FavoriteButton from '../common/FavoriteButton';
 import PinButton from '../common/PinButton';
 import { CurrentUserContext } from '../context/CurrentUserContext';
 import { buildItemPath } from '../../config/paths';
-import { hooks } from '../../config/queryClient';
+import { hooks, useMutation } from '../../config/queryClient';
 import HideButton from '../common/HideButton';
 
 const NameWrapper =
@@ -65,6 +66,28 @@ const Item = ({ item, memberships }) => {
     memberId: member?.get('id'),
   });
 
+  const {
+    mutate: downloadItem,
+    data,
+    isSuccess,
+    isLoading: isDownloading,
+  } = useMutation(MUTATION_KEYS.EXPORT_ZIP);
+
+  useEffect(() => {
+    if (isSuccess) {
+      const url = window.URL.createObjectURL(new Blob([data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `${item.id}.zip`);
+      document.body.appendChild(link);
+      link.click();
+    }
+  }, [data, isSuccess, item]);
+
+  const handleDownload = () => {
+    downloadItem(item.id);
+  };
+
   const Actions = (
     <>
       {!member.isEmpty() && <FavoriteButton member={member} item={item} />}
@@ -73,6 +96,10 @@ const Item = ({ item, memberships }) => {
           <EditButton item={item} />
           <PinButton item={item} />
           <HideButton item={item} />
+          <DownloadButton
+            handleDownload={handleDownload}
+            isLoading={isDownloading}
+          />
         </>
       )}
     </>

src/components/table/ActionsCellRenderer.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import React, { useEffect, useState } from 'react';
+import { DownloadButton } from '@graasp/ui';
+import { MUTATION_KEYS } from '@graasp/query-client';
 import EditButton from '../common/EditButton';
 import ItemMenu from '../main/ItemMenu';
 import FavoriteButton from '../common/FavoriteButton';
@@ -10,12 +12,31 @@ import {
   isItemUpdateAllowedForUser,
 } from '../../utils/membership';
 import HideButton from '../common/HideButton';
+import { useMutation } from '../../config/queryClient';
 
 // items and memberships match by index
 const ActionsCellRenderer = ({ memberships, items, member }) => {
   const ChildComponent = ({ data: item }) => {
     const [canEdit, setCanEdit] = useState(false);
 
+    const {
+      mutate: downloadItem,
+      content,
+      isSuccess,
+      isLoading: isDownloading,
+    } = useMutation(MUTATION_KEYS.EXPORT_ZIP);
+
+    useEffect(() => {
+      if (isSuccess) {
+        const url = window.URL.createObjectURL(new Blob([content]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', `${item.id}.zip`);
+        document.body.appendChild(link);
+        link.click();
+      }
+    }, [content, isSuccess, item]);
+
     useEffect(() => {
       if (items && memberships && !memberships.isEmpty() && !items.isEmpty()) {
         setCanEdit(
@@ -40,6 +61,10 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
       return <FavoriteButton item={item} />;
     };
 
+    const handleDownload = () => {
+      downloadItem(item.id);
+    };
+
     const renderEditorActions = () => {
       if (!canEdit) {
         return null;
@@ -50,6 +75,10 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
           <EditButton item={item} />
           <PinButton item={item} />
           <HideButton item={item} />
+          <DownloadButton
+            handleDownload={handleDownload}
+            isLoading={isDownloading}
+          />
         </>
       );
     };
@@ -63,7 +92,7 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
     );
   };
   ChildComponent.propTypes = {
-    data: PropTypes.shape({}).isRequired,
+    data: PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired,
   };
   return ChildComponent;
 };

src/config/constants.js

@@ -171,7 +171,7 @@ export const ITEMS_TABLE_CONTAINER_HEIGHT = '60vh';
 
 export const DRAG_ICON_SIZE = 18;
 
-export const ACTION_CELL_WIDTH = 230;
+export const ACTION_CELL_WIDTH = 300;
 export const THUMBNAIL_ASPECT = 1;
 export const THUMBNAIL_EXTENSION = 'image/jpeg';
 export const THUMBNAIL_SETTING_MAX_WIDTH = 300;

src/config/messages.js

@@ -47,3 +47,5 @@ export const IMPORT_ZIP_FAILURE_MESSAGE =
   'An error occurred while importing The ZIP archive.';
 export const IMPORT_ZIP_PROGRESS_MESSAGE =
   'The ZIP is being processed. Please wait a moment.';
+export const EXPORT_ZIP_FAILURE_MESSAGE =
+  'An error occurred while downloading the item as ZIP archive. Please try again later.';