feat: artifact download implementation

Author: hentrymartin

package-lock.json

@@ -114,7 +114,7 @@
     "terser": "^3.16.1",
     "terser-webpack-plugin": "1.1.0",
     "topcoder-healthcheck-dropin": "^1.0.3",
-    "topcoder-react-lib": "^1.2.10",
+    "topcoder-react-lib": "^1.2.16",
     "url-loader": "1.1.1",
     "webpack": "^4.43.0",
     "webpack-dev-server": "^3.11.0",

package.json

@@ -4,7 +4,7 @@ import Modal from '../../Modal'
 import styles from './ArtifactsListModal.module.scss'
 import PropTypes from 'prop-types'
 import ReactSVG from 'react-svg'
-import { getTopcoderReactLib } from '../../../util/topcoder-react-lib'
+import { getTopcoderReactLib, isValidDownloadFile } from '../../../util/topcoder-react-lib'
 import Loader from '../../Loader'
 const assets = require.context('../../../assets/images', false, /svg/)
 
@@ -21,6 +21,17 @@ export const ArtifactsListModal = ({ onClose, submissionId, token, theme }) => {
     setLoading(false)
   }
 
+  const getExtensionFromMime = (mimeType) => {
+    const mimeMap = {
+      'application/zip': 'zip',
+      'application/pdf': 'pdf',
+      'image/jpeg': 'jpg',
+      'image/png': 'png',
+      'text/plain': 'txt'
+    }
+    return mimeMap[mimeType] || 'zip'
+  }
+
   useEffect(() => {
     setLoading(true)
     getArtifacts()
@@ -39,7 +50,36 @@ export const ArtifactsListModal = ({ onClose, submissionId, token, theme }) => {
               return (
                 <div className={styles['list-item']}>
                   <div className={styles['artifact-name']}>{item}</div>
-                  <ReactSVG className={styles['icon-download']} path={assets('./IconSquareDownload.svg')} />
+                  <ReactSVG
+                    className={styles['icon-download']}
+                    path={assets('./IconSquareDownload.svg')}
+                    onClick={() => {
+                      // download submission
+                      const reactLib = getTopcoderReactLib()
+                      const { getService } = reactLib.services.submissions
+                      const submissionsService = getService(token)
+                      submissionsService.downloadSubmissionArtifact(submissionId, item)
+                        .then((blob) => {
+                          isValidDownloadFile(blob).then((isValidFile) => {
+                            if (isValidFile.success) {
+                              // eslint-disable-next-line no-undef
+                              const blobFile = new Blob([blob])
+                              const url = window.URL.createObjectURL(blobFile)
+                              const link = document.createElement('a')
+                              link.href = url
+                              const extension = getExtensionFromMime(blob.type)
+                              const fileName = `${submissionId}.${extension}`
+                              link.setAttribute('download', `${fileName}`)
+                              document.body.appendChild(link)
+                              link.click()
+                              link.parentNode.removeChild(link)
+                            } else {
+                              console.log(isValidFile, 'failed')
+                            }
+                          })
+                        })
+                    }}
+                  />
                 </div>
               )
             })