feat(zip-files): add a component to handle downloading files as zip

packages/component-aws-download/src/FileBackend.js

@@ -21,37 +21,41 @@ const FileBackend = app => {
   app.get('/api/fileZip/:fragmentId', authBearer, async (req, res) => {
     const archive = archiver('zip')
     const { fragmentId } = req.params
+    const getObject = util.promisify(s3.getObject.bind(s3))
+    const listObjects = util.promisify(s3.listObjects.bind(s3))
 
-    archive.pipe(res)
-    res.attachment(`${fragmentId}-archive.zip`)
-
-    const params = {
-      Bucket: s3Config.bucket,
-      Prefix: `${fragmentId}`,
-    }
+    try {
+      archive.pipe(res)
+      res.attachment(`${fragmentId}-archive.zip`)
 
-    const listObjects = util.promisify(s3.listObjects.bind(s3))
-    const getObject = util.promisify(s3.getObject.bind(s3))
+      const params = {
+        Bucket: s3Config.bucket,
+        Prefix: `${fragmentId}`,
+      }
 
-    return listObjects(params).then(data => {
-      Promise.all(
-        data.Contents.map(content =>
+      const s3Items = await listObjects(params)
+      const s3Files = await Promise.all(
+        s3Items.Contents.map(content =>
           getObject({
             Bucket: s3Config.bucket,
             Key: content.Key,
           }),
         ),
-      ).then(files => {
-        files.forEach((file, index) => {
-          archive.append(file.Body, {
-            name: `${_.get(file, 'Metadata.filetype') ||
-              'supplementary'}/${_.get(file, 'Metadata.filename') ||
-              file.ETag}`,
-          })
+      )
+
+      s3Files.forEach(f => {
+        archive.append(f.Body, {
+          name: `${_.get(f, 'Metadata.filetype') || 'supplementary'}/${_.get(
+            f,
+            'Metadata.filename',
+          ) || f.ETag}`,
         })
-        archive.finalize()
       })
-    })
+
+      archive.finalize()
+    } catch (err) {
+      res.status(err.statusCode).json({ error: err.message })
+    }
   })
 }
 

packages/components-faraday/src/components/Dashboard/DashboardCard.js

 import React from 'react'
+import { get } from 'lodash'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { get, isEmpty } from 'lodash'
 import { Button, Icon } from '@pubsweet/ui'
 import styled, { css } from 'styled-components'
-import { compose, getContext, withHandlers } from 'recompose'
+import { compose, getContext } from 'recompose'
 
-import { parseVersion, getFilesURL } from './utils'
+import { parseVersion } from './utils'
+
+import ZipFiles from './ZipFiles'
 
 const DashboardCard = ({
   deleteProject,
@@ -15,15 +16,14 @@ const DashboardCard = ({
   version,
   showAbstractModal,
   journal,
-  getItems,
   ...rest
 }) => {
   const { submitted, title, type, version: vers } = parseVersion(version)
-  const files = getFilesURL(get(version, 'files'))
   const status = get(project, 'status') || 'Draft'
-  const hasFiles = !isEmpty(files)
   const abstract = get(version, 'metadata.abstract')
   const metadata = get(version, 'metadata')
+  const files = get(version, 'files')
+  const hasFiles = files ? Object.values(files).some(f => f.length > 0) : false
   const journalIssueType = journal.issueTypes.find(
     t => t.value === get(metadata, 'issue'),
   )
@@ -47,17 +47,11 @@ const DashboardCard = ({
           </ManuscriptInfo>
         </Left>
         <Right>
-          {/* <form onSubmit={getItems}>
-            <Icon>download</Icon>
-            <button type="submit">DOWNLOAD</button>
-          </form> */}
-          <ClickableIcon
-            disabled={!hasFiles}
-            // onClick={() => (hasFiles ? downloadAll(files) : null)}
-            onClick={getItems}
-          >
-            <Icon>download</Icon>
-          </ClickableIcon>
+          <ZipFiles disabled={!hasFiles} fragmentId={version.id}>
+            <ClickableIcon disabled={!hasFiles}>
+              <Icon>download</Icon>
+            </ClickableIcon>
+          </ZipFiles>
           <ClickableIcon onClick={() => deleteProject(project)}>
             <Icon>trash-2</Icon>
           </ClickableIcon>
@@ -122,35 +116,7 @@ const DashboardCard = ({
   ) : null
 }
 
-export default compose(
-  getContext({ journal: PropTypes.object }),
-  connect(state => ({
-    token: state.currentUser.user.token,
-  })),
-  withHandlers({
-    getItems: ({ version, token }) => () => {
-      const xhr = new XMLHttpRequest()
-      xhr.onreadystatechange = function onXhrStateChange() {
-        if (this.readyState === 4 && this.status === 200) {
-          const fileName = `${version.id}-archive.zip`
-          const f = new File([this.response], fileName, {
-            type: 'application/zip',
-          })
-          const url = URL.createObjectURL(f)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = fileName
-          document.body.appendChild(a)
-          a.click()
-        }
-      }
-      xhr.open('GET', `${window.location.origin}/api/fileZip/${version.id}`)
-      xhr.responseType = 'blob'
-      xhr.setRequestHeader('Authorization', `Bearer ${token}`)
-      xhr.send()
-    },
-  }),
-)(DashboardCard)
+export default compose(getContext({ journal: PropTypes.object }))(DashboardCard)
 
 // #region styled-components
 const defaultText = css`

packages/components-faraday/src/components/Dashboard/ZipFiles.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import { compose, withHandlers, withState } from 'recompose'
+
+import { Spinner } from '../UIComponents/index'
+
+const createAnchorElement = (file, filename) => {
+  const url = URL.createObjectURL(file)
+  const a = document.createElement('a')
+
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+
+  return {
+    a,
+    url,
+  }
+}
+
+const removeAnchorElement = (a, url) => {
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+const ZipFiles = ({
+  disabled,
+  fragmentId,
+  fetching,
+  children,
+  downloadFiles,
+}) => (
+  <Root onClick={!disabled ? downloadFiles : null}>
+    {fetching ? <Spinner /> : children}
+  </Root>
+)
+
+const cache = {}
+
+const Zip = compose(
+  connect(state => ({
+    token: state.currentUser.user.token,
+  })),
+  withState('fetching', 'setFetching', false),
+  withHandlers({
+    downloadFiles: ({ fragmentId, token, setFetching, archiveName }) => () => {
+      if (cache[fragmentId]) {
+        const fileName = archiveName || `${fragmentId}-archive.zip`
+
+        const { a, url } = createAnchorElement(cache[fragmentId], fileName)
+        a.click()
+        removeAnchorElement(a, url)
+      } else {
+        setFetching(fetching => true)
+        const xhr = new XMLHttpRequest()
+        xhr.onreadystatechange = function onXhrStateChange() {
+          if (this.readyState === 4) {
+            setFetching(fetching => false)
+            if (this.status >= 200 && this.status < 300) {
+              const fileName = archiveName || `${fragmentId}-archive.zip`
+              const f = new File([this.response], fileName, {
+                type: 'application/zip',
+              })
+              cache[fragmentId] = f
+
+              const { a, url } = createAnchorElement(f, fileName)
+              a.click()
+              removeAnchorElement(a, url)
+            }
+          }
+        }
+        xhr.open('GET', `${window.location.origin}/api/fileZip/${fragmentId}`)
+        xhr.responseType = 'blob'
+        xhr.setRequestHeader('Authorization', `Bearer ${token}`)
+        xhr.send()
+      }
+    },
+  }),
+)(ZipFiles)
+
+Zip.propTypes = {
+  disabled: PropTypes.bool,
+  archiveName: PropTypes.string,
+  fragmentId: PropTypes.string.isRequired,
+}
+
+Zip.defaultProps = {
+  disabled: false,
+}
+
+export default Zip
+
+// #region styled components
+const Root = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  margin: 0 7px;
+  width: 38px;
+`
+// #endregion

packages/xpub-faraday/config/default.js

@@ -34,7 +34,7 @@ module.exports = {
   'pubsweet-client': {
     API_ENDPOINT: '/api',
     'login-redirect': '/',
-    'redux-log': false,
+    'redux-log': true,
     theme: process.env.PUBSWEET_THEME,
   },
   'mail-transport': {