🔨 Refactored, 🧠 Overmind, Hacktober | Refactor StorageManagementModal to use overmind

packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import filesize from 'filesize';
+import { useOvermind } from 'app/overmind';
+import {
+  Container,
+  Title,
+  JustifiedArea,
+  SubTitle,
+  Description,
+  SubDescription,
+  Rule,
+  LoadingAnimationContainer,
+} from './elements';
+import FilesList from './FilesList';
+
+const StorageManagementModal = () => {
+  const {
+    state: { uploadedFiles, usedStorage, maxStorage },
+    actions: {
+      files: { deletedUploadedFile, addedFileToSandbox },
+    },
+  } = useOvermind();
+
+  const isLoading = uploadedFiles === null;
+  const isEmpty = !isLoading && uploadedFiles.length === 0;
+
+  return (
+    <Container>
+      <JustifiedArea>
+        <Title>Storage Management</Title>
+        <SubTitle>
+          Used {filesize(usedStorage)}
+          {' / '}
+          Total {filesize(maxStorage)}
+        </SubTitle>
+      </JustifiedArea>
+      <Description>
+        This is where you can manage your uploaded files.
+      </Description>
+      <Rule />
+      {!isEmpty && !isLoading && (
+        <FilesList
+          files={uploadedFiles}
+          deleteFile={deletedUploadedFile}
+          deleteFiles={files => files.map(id => deletedUploadedFile({ id }))}
+          addFilesToSandbox={files => files.map(addedFileToSandbox)}
+          addFileToSandbox={addedFileToSandbox}
+        />
+      )}
+      {isEmpty && <SubDescription>You have no uploaded files.</SubDescription>}
+      {isLoading && <LoadingAnimationContainer />}
+    </Container>
+  );
+};
+
+export default StorageManagementModal;