refactor download files component to ts (#4736)

beyondessential · Jul 16, 2023 · 5f4ec30 · 5f4ec30
1 parent 7e7b5cf
commit 5f4ec30
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 47 deletions.
diff --git a/...wnloadFilesVisual/DownloadFilesVisual.jsx → ...ts/src/components/DownloadFilesVisual.tsx b/...wnloadFilesVisual/DownloadFilesVisual.jsx → ...ts/src/components/DownloadFilesVisual.tsx
@@ -4,7 +4,6 @@
  */
 
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {
   Button,
@@ -15,7 +14,7 @@ import {
   FormGroup,
 } from '@material-ui/core';
 import CheckboxIcon from '@material-ui/icons/CheckBox';
-import { NoData } from '../NoData';
+import { NoData } from './NoData';
 
 const Container = styled.div`
   display: flex;
@@ -34,6 +33,7 @@ const FileName = styled.span`
   font-size: 20px;
   text-align: center;
   display: block;
+  color: ${props => props.theme.palette.primary.contrastText};
 `;
 
 const Error = styled.div`
@@ -42,31 +42,34 @@ const Error = styled.div`
   text-align: center;
 `;
 
+interface DownloadFilesVisualProps {
+  downloadFiles: (uniqueFileNames: string[]) => Promise<void>;
+  config?: object;
+  data?: { uniqueFileName: string; label: string }[];
+  isLoading?: boolean;
+  isEnlarged?: boolean;
+  onClose: () => void;
+  className?: string;
+  error?: string;
+}
+
 export const DownloadFilesVisual = ({
   downloadFiles,
-  viewContent,
+  config = {},
+  data: options = [],
   isLoading,
   isEnlarged,
   onClose,
   className,
   error,
-}) => {
-  const { data = [] } = viewContent;
-
-  // This mapping does nothing, just commenting some typing for future conversion to ts
-  const options = data.map(({ uniqueFileName, label }) => ({
-    uniqueFileName, // string e.g. 5da02ed278d10e8695530688_report.pdf
-    label, // string e.g. 'Instruction Manual' or 'report.pdf'
-  }));
-
-
+}: DownloadFilesVisualProps) => {
   // selectedFiles: Map of uniqueFileName: string => isSelected: bool
   const noneSelected = Object.fromEntries(
     options.map(({ uniqueFileName }) => [uniqueFileName, false]),
   );
   const [selectedFiles, setSelectedFiles] = useState(noneSelected);
 
-  const toggleSelectFile = uniqueFileName =>
+  const toggleSelectFile = (uniqueFileName: string) =>
     setSelectedFiles({ ...selectedFiles, [uniqueFileName]: !selectedFiles[uniqueFileName] });
 
   const [isDownloading, setIsDownloading] = useState(false);
@@ -83,8 +86,8 @@ export const DownloadFilesVisual = ({
   if (!isEnlarged) {
     return (
       <Container className={className}>
-        {options.map(({ label, value }) => (
-          <FileName className="filename" key={value}>
+        {options.map(({ label, uniqueFileName }) => (
+          <FileName className="filename" key={uniqueFileName}>
             {label}
           </FileName>
         ))}
@@ -95,7 +98,7 @@ export const DownloadFilesVisual = ({
   if (!isLoading && options.length === 0) {
     return (
       <Container className={className}>
-        <NoData viewContent={viewContent} />
+        <NoData viewContent={config} />
       </Container>
     );
   }
@@ -112,7 +115,7 @@ export const DownloadFilesVisual = ({
   }
 
   return (
-    <Container className={className} isLoading={isLoading} isEnlarged={isEnlarged}>
+    <Container className={className}>
       <FormContainer>
         <FormControl>
           <FormGroup>
@@ -139,7 +142,6 @@ export const DownloadFilesVisual = ({
           color="primary"
           onClick={downloadSelectedFiles}
           variant="contained"
-          download
           disabled={isDownloading || Object.values(selectedFiles).every(isSelected => !isSelected)}
         >
           Download
@@ -148,22 +150,3 @@ export const DownloadFilesVisual = ({
     </Container>
   );
 };
-
-DownloadFilesVisual.propTypes = {
-  downloadFiles: PropTypes.func.isRequired,
-  viewContent: PropTypes.object,
-  isLoading: PropTypes.bool,
-  isEnlarged: PropTypes.bool,
-  onClose: PropTypes.func,
-  className: PropTypes.string,
-  error: PropTypes.string,
-};
-
-DownloadFilesVisual.defaultProps = {
-  viewContent: null,
-  isLoading: false,
-  isEnlarged: false,
-  onClose: () => {},
-  className: '',
-  error: null,
-};
diff --git a/packages/ui-components/src/components/DownloadFilesVisual/index.js b/packages/ui-components/src/components/DownloadFilesVisual/index.js
diff --git a/packages/ui-components/src/components/index.ts b/packages/ui-components/src/components/index.ts
@@ -46,3 +46,4 @@ export * from './Tooltip';
 export * from './PDFExportComponent';
 export * from './CheckboxList';
 export * from './FavouriteButton';
+export * from './NoData';
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
@@ -7,7 +7,8 @@
     "outDir": "dist",
     "lib": [
       "es6",
-      "dom"
+      "dom",
+      "es2019"
     ],
     "noImplicitAny": true,
     "noImplicitThis": true,

diff --git a/packages/web-frontend/src/components/View/DownloadFilesVisual.js b/packages/web-frontend/src/components/View/DownloadFilesVisual.js
@@ -20,7 +20,7 @@ const StyledDownloadFilesVisual = styled(BaseDownloadFilesVisual)`
   }
 `;
 
-export const DownloadFilesVisual = ({ onClose: originalOnClose, ...restOfProps }) => {
+export const DownloadFilesVisual = ({ onClose: originalOnClose, viewContent, isEnlarged }) => {
   const [error, setError] = useState(null);
 
   const downloadFiles = async uniqueFileNames => {
@@ -58,12 +58,17 @@ export const DownloadFilesVisual = ({ onClose: originalOnClose, ...restOfProps }
     originalOnClose();
   };
 
+  const { data, ...config } = viewContent;
+
   return (
     <StyledDownloadFilesVisual
-      {...restOfProps}
+      data={data}
+      config={config}
+      isEnlarged={isEnlarged}
       onClose={onClose}
       downloadFiles={downloadFiles}
       error={error}
+      isLoading={false}
     />
   );
 };