restructed the components related to new collection create

src/pages/gallery/components/AddCollection.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Card } from "react-bootstrap";
 import Dropzone from "react-dropzone";
 import { DropDiv } from "./CollectionDropZone";
 import CreateCollection from "./CreateCollection";
@@ -8,10 +9,9 @@ export default function AddCollection(props) {
     const [acceptedFiles, setAcceptedFiles] = useState<File[]>();
     const [createCollectionView, setCreateCollectionView] = useState(false);
 
-    const { children, closeModal, ...rest } = props;
+    const { children, closeUploadModal, ...rest } = props;
 
     const createCollection = (acceptedFiles) => {
-        closeModal();
         setAcceptedFiles(acceptedFiles);
         setCreateCollectionView(true);
     };
@@ -20,7 +20,7 @@ export default function AddCollection(props) {
         <>
             <Dropzone
                 onDropAccepted={createCollection}
-                onDropRejected={props.closeUploadModal}
+                onDropRejected={closeUploadModal}
                 noDragEventsBubbling
                 accept="image/*, video/*, application/json "
             >
@@ -40,14 +40,19 @@ export default function AddCollection(props) {
                             })}
                         >
                             <input {...getInputProps()} />
-                            {children}
+                            <Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
+                                <Card.Body>
+                                    <Card.Text>Create New Album</Card.Text>
+                                </Card.Body>
+                            </Card>
                         </DropDiv>
                     );
                 }}
             </Dropzone>
             <CreateCollection
                 {...rest}
-                show={createCollectionView}
+                modalView={createCollectionView}
+                closeUploadModal={closeUploadModal}
                 closeModal={() => setCreateCollectionView(false)}
                 acceptedFiles={acceptedFiles}
             />

src/pages/gallery/components/CollectionSelector.tsx

@@ -15,12 +15,10 @@ function CollectionSelector(props) {
     } = props;
 
     const [token, setToken] = useState(null);
-    const [userMasterKey, setUserMasterKey] = useState(null);
 
     useEffect(() => {
         (async () => {
             setToken(getData(LS_KEYS.USER).token);
-            setUserMasterKey(await getActualKey());
         })();
     });
 
@@ -56,16 +54,9 @@ function CollectionSelector(props) {
                 <Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
                     <AddCollection
                         {...rest}
-                        closeModal={closeUploadModal}
+                        closeUploadModal={closeUploadModal}
                         token={token}
-                        userMasterKey={userMasterKey}
-                    >
-                        <Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
-                            <Card.Body>
-                                <Card.Text>Create New Album</Card.Text>
-                            </Card.Body>
-                        </Card>
-                    </AddCollection>
+                    />
                     {CollectionIcons}
                 </Modal.Body>
                 <Modal.Footer>

src/pages/gallery/components/CreateCollection.tsx

@@ -2,32 +2,36 @@ import React, { useState } from 'react';
 import { Modal } from 'react-bootstrap';
 import { createAlbum } from 'services/collectionService';
 import UploadService from 'services/uploadService';
-import { collectionLatestFile, fetchData } from 'services/fileService'
+import { collectionLatestFile } from 'services/fileService'
+import { getActualKey } from 'utils/common/key';
 
 export default function CreateCollection(props) {
 
-    const { masterKey, token, closeModal, acceptedFiles, setData, setProgressView, progressBarProps } = props;
+    const { token, acceptedFiles, setProgressView, progressBarProps, refetchData, modalView, closeModal, closeUploadModal } = props;
     const [albumName, setAlbumName] = useState("");
 
     const handleChange = (event) => { setAlbumName(event.target.value); }
 
     const handleSubmit = async (event) => {
         event.preventDefault();
-        closeModal();
 
+        closeModal();
+        closeUploadModal();
+        const masterKey = await getActualKey();
         const collection = await createAlbum(albumName, masterKey, token);
 
         const collectionLatestFile: collectionLatestFile = { collection, file: null }
+
         progressBarProps.setPercentComplete(0);
         setProgressView(true);
 
         await UploadService.uploadFiles(acceptedFiles, collectionLatestFile, token, progressBarProps);
-        setData(await fetchData(token, [collectionLatestFile.collection]));
+        refetchData();
         setProgressView(false);
     }
     return (
         <Modal
-            {...props}
+            show={modalView}
             size='lg'
             aria-labelledby='contained-modal-title-vcenter'
             centered