feat: add file store ui

Chia-Network · Jul 27, 2022 · 24961ba · 24961ba
1 parent d30f5f9
commit 24961ba
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 6 deletions.
diff --git a/src/components/form/UploadFileInput.js b/src/components/form/UploadFileInput.js
@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { UploadIcon, SuccessIcon } from '..';
+
+const StyledDiv = styled('div')`
+  border: 1px dotted #d9d9d9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 120px;
+  & label {
+    cursor: pointer;
+  }
+`;
+
+const StyledInput = styled('input')`
+  visibility: hidden;
+  width: 0px;
+  height: 0px;
+`;
+
+const UploadFileInput = ({ file, onChange }) => {
+  const onFileInputChange = useCallback(e => {
+    if (e.target.value && e.target.value !== '') {
+      const file = e.target.files[0];
+      onChange(file);
+    }
+  }, []);
+
+  return (
+    <StyledDiv>
+      <label htmlFor="file">
+        {!file && <UploadIcon width="20" height="20" />}
+        {file && <SuccessIcon width="20" height="20" />}
+      </label>
+      <StyledInput type="file" id="file" onChange={onFileInputChange} />
+    </StyledDiv>
+  );
+};
+
+export { UploadFileInput };
diff --git a/src/components/form/index.js b/src/components/form/index.js
@@ -9,3 +9,4 @@ export * from './SimpleSelect';
 export * from './FormikError';
 export * from './SelectCreatable';
 export * from './UploadPngInput';
+export * from './UploadFileInput';
diff --git a/src/components/forms/FileUploadModal.js b/src/components/forms/FileUploadModal.js
@@ -0,0 +1,121 @@
+/* eslint-disable */
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+
+import {
+  Modal,
+  Body,
+  InputSizeEnum,
+  StandardInput,
+  InputVariantEnum,
+  modalTypeEnum,
+  InputContainer,
+  StyledFieldContainer,
+  StyledLabelContainer,
+  ModalFormContainerStyle,
+  UploadFileInput,
+} from '..';
+import { isValidFileName } from '../../utils/stringUtils';
+
+const FileUploadModal = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { notification } = useSelector(state => state.app);
+  const [formData, setFormData] = useState({
+    fileName: '',
+    file: null,
+  });
+
+  const fileNameIsValid = isValidFileName(formData.fileName);
+  const fileIsValid = formData?.file != null;
+
+  const onSubmit = async () => {
+    if (fileNameIsValid && fileIsValid) {
+      // TO DO IMPLEMENT STORE ACTION
+      // dispatch(editExistingOrg(formData));
+    }
+  };
+
+  const orgWasSuccessfullyCreated =
+    notification && notification.id === 'file-uploaded';
+  useEffect(() => {
+    if (orgWasSuccessfullyCreated) {
+      onClose();
+    }
+  }, [notification]);
+
+  return (
+    <>
+      <Modal
+        onOk={onSubmit}
+        onClose={onClose}
+        modalType={modalTypeEnum.basic}
+        title={intl.formatMessage({
+          id: 'file-upload',
+        })}
+        label={intl.formatMessage({
+          id: 'upload',
+        })}
+        body={
+          <ModalFormContainerStyle>
+            <StyledFieldContainer>
+              <StyledLabelContainer>
+                <Body>
+                  *<FormattedMessage id="filename" />
+                </Body>
+              </StyledLabelContainer>
+              <InputContainer>
+                <StandardInput
+                  size={InputSizeEnum.large}
+                  variant={InputVariantEnum.default}
+                  value={formData.fileName}
+                  onChange={value =>
+                    setFormData(prevState => ({
+                      ...prevState,
+                      fileName: value,
+                    }))
+                  }
+                />
+              </InputContainer>
+              {!fileNameIsValid && (
+                <Body size="Small" color="red">
+                  {intl.formatMessage({
+                    id: 'add-valid-filename',
+                  })}
+                </Body>
+              )}
+            </StyledFieldContainer>
+            <StyledFieldContainer>
+              <StyledLabelContainer>
+                <Body>
+                  *<FormattedMessage id="file" />
+                </Body>
+              </StyledLabelContainer>
+              <InputContainer>
+                <UploadFileInput
+                  onChange={file =>
+                    setFormData(prevState => ({
+                      ...prevState,
+                      file: file,
+                    }))
+                  }
+                  file={formData.file}
+                />
+              </InputContainer>
+              {!fileNameIsValid && (
+                <Body size="Small" color="red">
+                  {intl.formatMessage({
+                    id: 'add-valid-file',
+                  })}
+                </Body>
+              )}
+            </StyledFieldContainer>
+          </ModalFormContainerStyle>
+        }
+      />
+    </>
+  );
+};
+
+export { FileUploadModal };
diff --git a/src/components/forms/index.js b/src/components/forms/index.js
@@ -22,3 +22,4 @@ export * from './FormikRepeater';
 export * from './UnitEditStagingModal';
 export * from './UnitSplitEditStagingFormModal';
 export * from './OrgEditFormModal';
+export * from './FileUploadModal';
diff --git a/src/pages/Files/index.js b/src/pages/Files/index.js
@@ -12,6 +12,7 @@ import {
   H3,
   DownloadIcon,
   UploadIcon,
+  FileUploadModal,
 } from '../../components';
 import { getFileList } from '../../store/actions/climateWarehouseActions';
 
@@ -97,6 +98,8 @@ const Files = () => {
   const { fileList } = useSelector(store => store.climateWarehouse);
   const [filteredFileList, setFilteredFileList] = useState(fileList ?? []);
   const [sortOrder, setSortOrder] = useState(SortEnum.aToZ);
+  const [shaToDownload, setShaToDownload] = useState(null);
+  const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
 
   useEffect(() => dispatch(getFileList()), []);
   useEffect(() => setFilteredFileList(fileList), [fileList]);
@@ -143,6 +146,19 @@ const Files = () => {
     });
   }, [setSortOrder, filteredFileList]);
 
+  useEffect(() => {
+    if (shaToDownload) {
+      //TO DO IMPLEMENT FILE DOWNLOAD HERE
+      console.log(shaToDownload);
+    }
+    setShaToDownload(null);
+  }, [shaToDownload]);
+
+  const toggleUploadModal = useCallback(
+    () => setIsUploadModalVisible(prev => !prev),
+    [setIsUploadModalVisible],
+  );
+
   if (!fileList) {
     return null;
   }
@@ -174,7 +190,7 @@ const Files = () => {
           )}
         </StyledSortButtonContainer>
 
-        <StyledUploadIcon width="20" height="20" />
+        <StyledUploadIcon width="20" height="20" onClick={toggleUploadModal} />
       </StyledHeaderContainer>
       {filteredFileList?.length === 0 && (
         <StyledBodyNoDataFound>
@@ -204,9 +220,7 @@ const Files = () => {
                 <StyledTr key={file.SHA256}>
                   <StyledTd>
                     <StyledIconContainer
-                      onClick={() => {
-                        console.log('click');
-                      }}
+                      onClick={() => setShaToDownload(file.SHA256)}
                     >
                       <DownloadIcon width={20} height={20} />
                     </StyledIconContainer>
@@ -223,6 +237,7 @@ const Files = () => {
           </StyledTable>
         </StyledBodyContainer>
       )}
+      {isUploadModalVisible && <FileUploadModal onClose={toggleUploadModal} />}
     </StyledSectionContainer>
   );
 };

diff --git a/src/translations/tokens/en-US.json b/src/translations/tokens/en-US.json
@@ -426,10 +426,16 @@
   "filter-by-filename": "Filter by filename",
   "filename": "Filename",
   "upload": "Upload",
-  "browse": "Browser",
+  "browse": "Browse",
   "submit": "Submit",
   "no-files-found": "No files have been found",
   "could-not-retrieve-file-list": "The file list could not be retrieved.",
   "sort-a-to-z": "Sort A to Z",
-  "sort-z-to-a": "Sort Z to A"
+  "sort-z-to-a": "Sort Z to A",
+  "file": "File",
+  "file-upload": "File upload",
+  "file-uploaded": "Your file was uploaded successfully.",
+  "file-not-uploaded": "Your file could not be uploaded.",
+  "add-valid-filename": "Add a valid filename",
+  "add-valid-file": "Add a valid file"
 }
diff --git a/src/utils/stringUtils.js b/src/utils/stringUtils.js
@@ -23,3 +23,8 @@ export const formatValidationError = error => {
 
   return errorStringArray.join(' ');
 };
+
+export const isValidFileName = fileName => {
+  const expression = /^[0-9a-zA-Z_-]+$/;
+  return expression.test(fileName);
+};