2021-01-08 07:46:10 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-01-06 07:17:56 +00:00
|
|
|
import { Button, Card, Modal } from 'react-bootstrap';
|
2021-01-11 08:14:22 +00:00
|
|
|
import { getActualKey } from 'utils/common/key';
|
2021-01-08 07:46:10 +00:00
|
|
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
2021-01-06 07:17:56 +00:00
|
|
|
import CollectionDropZone from './CollectionDropZone';
|
2021-01-07 10:45:18 +00:00
|
|
|
import PreviewCard from './PreviewCard';
|
2021-01-05 05:25:08 +00:00
|
|
|
|
2021-01-05 11:14:19 +00:00
|
|
|
function CollectionSelector({
|
2021-01-11 08:14:22 +00:00
|
|
|
uploadModalView,
|
|
|
|
closeUploadModal,
|
2021-01-08 07:46:10 +00:00
|
|
|
collectionLatestFile,
|
|
|
|
showProgress,
|
2021-01-11 09:15:41 +00:00
|
|
|
setData,
|
|
|
|
setPercentComplete,
|
2021-01-05 11:14:19 +00:00
|
|
|
}) {
|
2021-01-08 07:46:10 +00:00
|
|
|
|
|
|
|
const [token, setToken] = useState(null);
|
2021-01-11 08:14:22 +00:00
|
|
|
const [encryptionKey, setEncryptionKey] = useState(null);
|
2021-01-08 07:46:10 +00:00
|
|
|
useEffect(() => {
|
2021-01-11 08:14:22 +00:00
|
|
|
(async () => {
|
|
|
|
setToken(getData(LS_KEYS.USER).token);
|
|
|
|
setEncryptionKey(await getActualKey());
|
|
|
|
})();
|
2021-01-08 07:46:10 +00:00
|
|
|
});
|
|
|
|
const CollectionIcons = collectionLatestFile?.map((item) => (
|
|
|
|
<CollectionDropZone key={item.collectionID}
|
2021-01-11 08:14:22 +00:00
|
|
|
closeModal={closeUploadModal}
|
2021-01-08 07:46:10 +00:00
|
|
|
collectionLatestFile={item}
|
|
|
|
noDragEventsBubbling
|
|
|
|
showProgress={showProgress}
|
|
|
|
token={token}
|
2021-01-11 08:14:22 +00:00
|
|
|
encryptionKey={encryptionKey}
|
|
|
|
setData={setData}
|
2021-01-11 09:15:41 +00:00
|
|
|
setPercentComplete={setPercentComplete}
|
2021-01-08 07:46:10 +00:00
|
|
|
>
|
|
|
|
<Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
|
|
|
|
<PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} />
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Text>{item.collection.name}</Card.Text>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</CollectionDropZone>
|
|
|
|
));
|
|
|
|
return (
|
|
|
|
<Modal
|
2021-01-11 08:14:22 +00:00
|
|
|
show={uploadModalView}
|
2021-01-08 07:46:10 +00:00
|
|
|
aria-labelledby='contained-modal-title-vcenter'
|
|
|
|
centered
|
2021-01-11 08:14:22 +00:00
|
|
|
onHide={closeUploadModal}
|
2021-01-08 07:46:10 +00:00
|
|
|
>
|
|
|
|
<Modal.Header closeButton>
|
|
|
|
<Modal.Title id='contained-modal-title-vcenter'>
|
|
|
|
Select/Click on Collection to upload
|
2021-01-05 07:17:17 +00:00
|
|
|
</Modal.Title>
|
2021-01-08 07:46:10 +00:00
|
|
|
</Modal.Header>
|
|
|
|
<Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
|
|
|
|
{CollectionIcons}
|
|
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
2021-01-11 08:14:22 +00:00
|
|
|
<Button onClick={closeUploadModal}>Close</Button>
|
2021-01-08 07:46:10 +00:00
|
|
|
</Modal.Footer>
|
|
|
|
</Modal>
|
|
|
|
);
|
2021-01-05 05:25:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default CollectionSelector;
|