refactor(review): handle loading state, browser warnings

src/pages/create/index.tsx

@@ -730,10 +730,7 @@ export const CreatePage = () => {
       setIsLoading(true)
       setLoadingSpinnerDesc('Generating file hashes')
       const fileHashes = await generateFileHashes()
-      if (!fileHashes) {
-        setIsLoading(false)
-        return
-      }
+      if (!fileHashes) return
 
       setLoadingSpinnerDesc('Generating encryption key')
       const encryptionKey = await generateEncryptionKey()
@@ -741,10 +738,7 @@ export const CreatePage = () => {
       if (await isOnline()) {
         setLoadingSpinnerDesc('generating files.zip')
         const arrayBuffer = await generateFilesZip()
-        if (!arrayBuffer) {
-          setIsLoading(false)
-          return
-        }
+        if (!arrayBuffer) return
 
         setLoadingSpinnerDesc('Encrypting files.zip')
         const encryptedArrayBuffer = await encryptZipFile(
@@ -756,10 +750,7 @@ export const CreatePage = () => {
 
         setLoadingSpinnerDesc('Uploading files.zip to file storage')
         const fileUrl = await uploadFile(encryptedArrayBuffer)
-        if (!fileUrl) {
-          setIsLoading(false)
-          return
-        }
+        if (!fileUrl) return
 
         setLoadingSpinnerDesc('Generating create signature')
         const createSignature = await generateCreateSignature(
@@ -767,10 +758,7 @@ export const CreatePage = () => {
           fileHashes,
           fileUrl
         )
-        if (!createSignature) {
-          setIsLoading(false)
-          return
-        }
+        if (!createSignature) return
 
         setLoadingSpinnerDesc('Generating keys for decryption')
 
@@ -782,11 +770,8 @@ export const CreatePage = () => {
         }
 
         const keys = await generateKeys(pubkeys, encryptionKey)
+        if (!keys) return
 
-        if (!keys) {
-          setIsLoading(false)
-          return
-        }
         const meta: Meta = {
           createSignature,
           keys,
@@ -796,10 +781,7 @@ export const CreatePage = () => {
 
         setLoadingSpinnerDesc('Updating user app data')
         const event = await updateUsersAppData(meta)
-        if (!event) {
-          setIsLoading(false)
-          return
-        }
+        if (!event) return
 
         setLoadingSpinnerDesc('Sending notifications to counterparties')
         const promises = sendNotifications(meta)
@@ -828,10 +810,7 @@ export const CreatePage = () => {
           fileHashes,
           ''
         )
-        if (!createSignature) {
-          setIsLoading(false)
-          return
-        }
+        if (!createSignature) return
 
         const meta: Meta = {
           createSignature,
@@ -850,10 +829,7 @@ export const CreatePage = () => {
         }
 
         const arrayBuffer = await generateZipFile(zip)
-        if (!arrayBuffer) {
-          setIsLoading(false)
-          return
-        }
+        if (!arrayBuffer) return
 
         setLoadingSpinnerDesc('Encrypting zip file')
         const encryptedArrayBuffer = await encryptZipFile(
@@ -917,7 +893,7 @@ export const CreatePage = () => {
               <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
                 {selectedFiles.length > 0 &&
                   selectedFiles.map((file, index) => (
-                    <div
+                    <li
                       key={index}
                       className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
                       onClick={() => {
@@ -925,32 +901,32 @@ export const CreatePage = () => {
                         setCurrentFile(file)
                       }}
                     >
-                      <>
-                        <span className={styles.fileName}>{file.name}</span>
-                        <Button
-                          variant="text"
-                          onClick={(event) => handleRemoveFile(event, file)}
-                          sx={{
-                            minWidth: '44px'
-                          }}
-                        >
-                          <FontAwesomeIcon icon={faTrash} />
-                        </Button>
-                      </>
-                    </div>
+                      <span className={styles.fileName}>{file.name}</span>
+                      <Button
+                        aria-label={`delete ${file.name}`}
+                        variant="text"
+                        onClick={(event) => handleRemoveFile(event, file)}
+                        sx={{
+                          minWidth: '44px'
+                        }}
+                      >
+                        <FontAwesomeIcon icon={faTrash} />
+                      </Button>
+                    </li>
                   ))}
               </ol>
               <Button variant="contained" onClick={handleUploadButtonClick}>
                 <FontAwesomeIcon icon={faUpload} />
                 <span className={styles.uploadFileText}>Upload new files</span>
-                <input
-                  ref={fileInputRef}
-                  hidden={true}
-                  multiple={true}
-                  type="file"
-                  onChange={handleSelectFiles}
-                />
               </Button>
+              <input
+                ref={fileInputRef}
+                hidden={true}
+                multiple={true}
+                type="file"
+                aria-label="file-upload"
+                onChange={handleSelectFiles}
+              />
             </div>
           }
           right={