Merge pull request #71 from AbdeltwabMF/development

Development
AbdeltwabMF · Jul 8, 2022 · eb8e235 · eb8e235 · vercel · Jul 8, 2022
2 parents eaecba2 + 0017ded
commit eb8e235
Show file tree

Hide file tree

Showing 15 changed files with 368 additions and 104 deletions.
diff --git a/artifacts/contracts/storage.sol/Storage.dbg.json b/artifacts/contracts/storage.sol/Storage.dbg.json
@@ -1,4 +1,4 @@
 {
   "_format": "hh-sol-dbg-1",
-  "buildInfo": "../../build-info/36b742c7a7077c488496f38b514e2955.json"
+  "buildInfo": "../../build-info/4f2e9956d5882eb50506b37c8947e10a.json"
 }
diff --git a/artifacts/contracts/storage.sol/Storage.json b/artifacts/contracts/storage.sol/Storage.json
diff --git a/components/FilesList/FilesList.js b/components/FilesList/FilesList.js
@@ -9,23 +9,33 @@ import formatBytes from '../../utils/convertByteToHumanReadable'
 
 import WarnModal from '../Modals/WarnModal'
 import AskPassphrase from '../Modals/AskPassphrase'
-
-import { PagingContext } from '../../pages/vault'
+import TakeAddress from '../Modals/TakeAddress'
+import InfoModal from '../Modals/InfoModal'
+import { ProcessContext } from '../../pages/vault'
 
 import styles from './FilesList.module.css'
 
 export default function FilesList (props) {
   const { files, downloadFiles, shareFile, removeFile } = props
+  const {
+    setIsRemoved,
+    setIsShared,
+    isRemoved,
+    isShared,
+    isTransactionSucceed,
+    setIsTransactionSucceed
+  } = useContext(ProcessContext)
 
-  const { setIsRemoving } = useContext(PagingContext)
   const [askingPassphrase, setAskingPassphrase] = useState(UNSET)
   const [selectedFileIndex, setSelectedFileIndex] = useState(UNSET)
   const [selectedFileName, setSelectedFileName] = useState(UNSET)
   const [selectedFileHash, setSelectedFileHash] = useState(UNSET)
   const [selectedFileType, setSelectedFileType] = useState(UNSET)
   const [selectedFileSize, setSelectedFileSize] = useState(UNSET)
-  const [areYouSureRemovingFile, setAreYouSureRemovingFile] = useState(UNSET)
   const [isReadyForDownloading, setIsReadyForDownloading] = useState(UNSET)
+  const [isReadyToShare, setIsReadyToShare] = useState(UNSET)
+  const [isReadyForRemoving, setIsReadyForRemoving] = useState(UNSET)
+  const [toAddress, setToAddress] = useState(UNSET)
 
   useEffect(() => {
     if (askingPassphrase === FALSE && isReadyForDownloading === TRUE) {
@@ -35,16 +45,27 @@ export default function FilesList (props) {
     }
   }, [askingPassphrase, isReadyForDownloading, selectedFileName, selectedFileHash, selectedFileSize, downloadFiles, selectedFileType])
 
-  const getPassphrase = () => {
-    setAskingPassphrase(prevState => TRUE)
+  const removeFileHandler = () => {
+    try {
+      console.log('selected file index:', selectedFileIndex)
+      removeFile(selectedFileIndex)
+    } catch (err) {
+      console.log('Can not delete the file', err)
+    } finally {
+      setIsReadyForRemoving(prevState => UNSET)
+    }
   }
 
-  const removeFileHandler = () => {
-    setIsRemoving(prevState => UNSET)
-    console.log(selectedFileIndex)
-    removeFile(selectedFileIndex)
-    setIsRemoving(prevState => TRUE)
-    setAreYouSureRemovingFile(prevState => UNSET)
+  const shareFileHandler = (e) => {
+    e.preventDefault()
+    try {
+      console.log('selected file index:', selectedFileIndex)
+      shareFile(toAddress, selectedFileIndex)
+    } catch (err) {
+      console.log('Can not share file', err.message)
+    } finally {
+      setIsReadyToShare(prevState => UNSET)
+    }
   }
 
   return (
@@ -55,17 +76,60 @@ export default function FilesList (props) {
         setIsReadyForDownloading={setIsReadyForDownloading}
         header='Decrypt file'
         message='Enter your passphrase to decrypt the file'
+        onClose={() => setAskingPassphrase(prevState => UNSET)}
                                     />}
-      {areYouSureRemovingFile === TRUE && <WarnModal
+
+      {isReadyForRemoving === TRUE && <WarnModal
         header='Remove file permanently'
         message='Are you sure you want to remove this file?'
         buttonText='Remove'
         buttonAction={removeFileHandler}
         onClose={() => {
-          setIsRemoving(prevState => FALSE)
-          setAreYouSureRemovingFile(prevState => FALSE)
+          setIsRemoved(prevState => UNSET)
+          setIsReadyForRemoving(prevState => UNSET)
+        }}
+                                      />}
+
+      {isReadyToShare === TRUE && <TakeAddress
+        header='Share file'
+        message='Enter the address you want to share the file with'
+        buttonText='Share'
+        buttonAction={shareFileHandler}
+        setToAddress={setToAddress}
+        toAddress={toAddress}
+        onClose={() => {
+          setIsShared(prevState => UNSET)
+          setIsReadyToShare(prevState => UNSET)
+        }}
+                                  />}
+
+      {isRemoved === TRUE && isTransactionSucceed === TRUE && <InfoModal
+        header='File removed'
+        message={`File ${selectedFileName} has been removed`}
+        buttonText='OK'
+        buttonAction={() => {
+          setIsRemoved(prevState => UNSET)
+          setIsTransactionSucceed(prevState => UNSET)
+        }}
+        onClose={() => {
+          setIsRemoved(prevState => UNSET)
+          setIsTransactionSucceed(prevState => UNSET)
+        }}
+                                                              />}
+
+      {isShared === TRUE && isTransactionSucceed === TRUE && <InfoModal
+        header='File shared'
+        message={`File ${selectedFileName} has been shared to address ${toAddress}`}
+        buttonText='OK'
+        buttonAction={() => {
+          setIsShared(prevState => UNSET)
+          setIsTransactionSucceed(prevState => UNSET)
+        }}
+        onClose={() => {
+          setIsShared(prevState => UNSET)
+          setIsTransactionSucceed(prevState => UNSET)
         }}
-                                          />}
+                                                             />}
 
       <table className={'table table-borderless ' + `${styles.table}`}>
         <thead className={styles.tableHead} key='fs'>
@@ -102,7 +166,7 @@ export default function FilesList (props) {
               <td className={styles.tdDownload}>
                 <button
                   onClick={() => {
-                    getPassphrase()
+                    setAskingPassphrase(prevState => TRUE)
                     setSelectedFileName(prevState => file.name)
                     setSelectedFileHash(prevState => file.hash)
                     setSelectedFileType(prevState => file.mimeType)
@@ -131,7 +195,11 @@ export default function FilesList (props) {
                     <li>
                       <button
                         className={styles.actionDropdownItem + ' dropdown-item'}
-                        onClick={() => shareFile('', file.hash)}
+                        onClick={() => {
+                          setIsReadyToShare(prevState => TRUE)
+                          setSelectedFileName(prevState => file.name)
+                          setSelectedFileIndex(prevState => file.index)
+                        }}
                       >
                         <FontAwesomeIcon
                           icon={faShareNodes}
@@ -147,10 +215,9 @@ export default function FilesList (props) {
                       <button
                         className={styles.actionDropdownItem + ' dropdown-item'}
                         onClick={() => {
-                          console.log(file.index)
-                          console.log(files.length)
+                          setIsReadyForRemoving(prevState => TRUE)
+                          setSelectedFileName(prevState => file.name)
                           setSelectedFileIndex(prevState => file.index)
-                          setAreYouSureRemovingFile(prevState => TRUE)
                         }}
                       >
                         <FontAwesomeIcon

diff --git a/components/Modals/AskPassphrase.js b/components/Modals/AskPassphrase.js
@@ -7,13 +7,14 @@ import { UNSET, TRUE, FALSE } from '../../utils/states'
 import { FileContext } from '../../pages/vault'
 import styles from './AskPassphrase.module.css'
 
-export default function AskPassphrase ({ header, message, isEncryption, setAskingPassphrase, setIsReadyForDownloading, setIsReadyForUploading, onClose }) {
+export default function AskPassphrase (props) {
   const [passphrase1, setPassphrase1] = useState(UNSET)
   const [passphrase2, setPassphrase2] = useState(UNSET)
   const [show, setShow] = useState(TRUE)
   const { setPassphrase } = useContext(FileContext)
+  const { header, message, isEncryption, setAskingPassphrase, setIsReadyForDownloading, setIsReadyForUploading, onClose } = props
 
-  const handleSubmit = (e) => {
+  const submitHandler = (e) => {
     e.preventDefault()
 
     if (passphrase1 !== passphrase2) {
@@ -32,20 +33,20 @@ export default function AskPassphrase ({ header, message, isEncryption, setAskin
     }
   }
 
-  const handlePassphrase1 = (e) => {
+  const passphrase1Handler = (e) => {
     console.log('Passphrase', e.target.value)
     setPassphrase1(prevStat => e.target.value)
     if (!isEncryption) {
       setPassphrase2(prevStat => e.target.value)
     }
   }
 
-  const handlePassphrase2 = (e) => {
+  const passphrase2Handler = (e) => {
     console.log('Retype passphrase', e.target.value)
     setPassphrase2(prevStat => e.target.value)
   }
 
-  const handleCancel = () => {
+  const cancelHandle = () => {
     setPassphrase1(prevStat => UNSET)
     setPassphrase2(prevStat => UNSET)
     setShow(prevStat => FALSE)
@@ -91,7 +92,7 @@ export default function AskPassphrase ({ header, message, isEncryption, setAskin
                     className={styles.input + ' form-control'}
                     required
                     id='inputPassword1'
-                    onChange={handlePassphrase1}
+                    onChange={passphrase1Handler}
                   />
                 </div>
                 {isEncryption
@@ -107,22 +108,22 @@ export default function AskPassphrase ({ header, message, isEncryption, setAskin
                         className={styles.input + ' form-control'}
                         required
                         id='inputPassword2'
-                        onChange={handlePassphrase2}
+                        onChange={passphrase2Handler}
                       />
                     </div>)
                   : <></>}
                 <div className={styles.footer + ' modal-footer justify-content-center'}>
                   <button
                     type='submit'
                     className={styles.upload + ' btn btn-primary'}
-                    onClick={handleSubmit}
+                    onClick={submitHandler}
                   >{isEncryption ? 'Upload' : 'Download'}
                   </button>
                   <button
                     type='button'
                     className={styles.close + ' btn btn-danger'}
                     data-bs-dismiss='modal'
-                    onClick={handleCancel}
+                    onClick={cancelHandle}
                   >Cancel
                   </button>
                 </div>

diff --git a/components/Modals/ErrorModal.js b/components/Modals/ErrorModal.js
@@ -7,10 +7,11 @@ import { TRUE, FALSE } from '../../utils/states'
 
 import styles from './ErrorModal.module.css'
 
-export default function ErrorModal ({ header, message, buttonText, buttonAction, onClose }) {
+export default function ErrorModal (props) {
   const [show, setShow] = useState(TRUE)
+  const { header, message, buttonText, buttonAction, onClose } = props
 
-  const handleCancel = () => {
+  const cancelHandler = () => {
     setShow(prevStat => FALSE)
     onClose()
   }
@@ -45,7 +46,7 @@ export default function ErrorModal ({ header, message, buttonText, buttonAction,
                 type='button'
                 className={styles.close + ' btn btn-danger'}
                 data-bs-dismiss='modal'
-                onClick={handleCancel}
+                onClick={cancelHandler}
               >Close
               </button>
             </div>

diff --git a/components/Modals/InfoModal.js b/components/Modals/InfoModal.js
@@ -7,10 +7,11 @@ import { TRUE, FALSE } from '../../utils/states'
 
 import styles from './InfoModal.module.css'
 
-export default function InfoModal ({ header, message, buttonText, buttonAction, onClose }) {
+export default function InfoModal (props) {
   const [show, setShow] = useState(TRUE)
+  const { header, message, buttonText, buttonAction, onClose } = props
 
-  const handleCancel = () => {
+  const cancelHandle = () => {
     setShow(prevStat => FALSE)
     onClose()
   }
@@ -45,7 +46,7 @@ export default function InfoModal ({ header, message, buttonText, buttonAction,
                 type='button'
                 className={styles.close + ' btn btn-danger'}
                 data-bs-dismiss='modal'
-                onClick={handleCancel}
+                onClick={cancelHandle}
               >Close
               </button>
             </div>

diff --git a/components/Modals/InfoModal.module.css b/components/Modals/InfoModal.module.css
@@ -39,7 +39,7 @@
 }
 
 .message {
-  color: var(--color-info-600, #00b300);
+  color: var(--color-info-500, #00b300);
   letter-spacing: 1px;
   margin: 0.5rem;
   display: block;

diff --git a/components/Modals/SpinnerModal.js b/components/Modals/SpinnerModal.js
@@ -7,10 +7,11 @@ import { TRUE, FALSE } from '../../utils/states'
 
 import styles from './SpinnerModal.module.css'
 
-export default function SpinnerModal ({ header, message, buttonText, buttonAction, onClose }) {
+export default function SpinnerModal (props) {
   const [show, setShow] = useState(TRUE)
+  const { header, message, buttonText, buttonAction, onClose } = props
 
-  const handleCancel = () => {
+  const cancelHandler = () => {
     setShow(prevStat => FALSE)
     onClose()
   }
@@ -46,7 +47,7 @@ export default function SpinnerModal ({ header, message, buttonText, buttonActio
                 type='button'
                 className={styles.close + ' btn btn-danger'}
                 data-bs-dismiss='modal'
-                onClick={handleCancel}
+                onClick={cancelHandler}
               >Cancel
               </button>
             </div>

diff --git a/components/Modals/SuccessModal.js b/components/Modals/SuccessModal.js
@@ -7,10 +7,11 @@ import { TRUE, FALSE } from '../../utils/states'
 
 import styles from './SuccessModal.module.css'
 
-export default function SuccessModal ({ header, message, buttonText, buttonAction, onClose }) {
+export default function SuccessModal (props) {
   const [show, setShow] = useState(TRUE)
+  const { header, message, buttonText, buttonAction, onClose } = props
 
-  const handleCancel = () => {
+  const cancelHandler = () => {
     setShow(prevStat => FALSE)
     onClose()
   }
@@ -45,7 +46,7 @@ export default function SuccessModal ({ header, message, buttonText, buttonActio
                 type='button'
                 className={styles.close + ' btn btn-danger'}
                 data-bs-dismiss='modal'
-                onClick={handleCancel}
+                onClick={cancelHandler}
               >Close
               </button>
             </div>