beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

integrated Add Collection Icon component

Browse source
This commit is contained in:
Abhinav-grd 2021-01-13 18:19:37 +05:30
parent 588061ee5c
commit 2a547cde4e
1 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/pages/gallery/components/CollectionSelector.tsx
View file

@ -3,63 +3,76 @@ import { Button, Card, Modal } from 'react-bootstrap';
import { getActualKey } from 'utils/common/key';
import { getData, LS_KEYS } from 'utils/storage/localStorage';
import CollectionDropZone from './CollectionDropZone';
import AddCollection from './AddCollection';
import PreviewCard from './PreviewCard';
function CollectionSelector({
uploadModalView,
closeUploadModal,
collectionLatestFile,
setProgressView,
setData,
progressBarProps,
}) {
function CollectionSelector(props) {
const {
uploadModalView,
closeUploadModal,
collectionLatestFile,
...rest
} = props;
const [token, setToken] = useState(null);
const [encryptionKey, setEncryptionKey] = useState(null);
const [userMasterKey, setUserMasterKey] = useState(null);
useEffect(() => {
(async () => {
setToken(getData(LS_KEYS.USER).token);
setEncryptionKey(await getActualKey());
setUserMasterKey(await getActualKey());
})();
});
const CollectionIcons = collectionLatestFile?.map((item) => (
<CollectionDropZone key={item.collectionID}
<CollectionDropZone
{...rest}
closeModal={closeUploadModal}
collectionLatestFile={item}
noDragEventsBubbling
setProgressView={setProgressView}
token={token}
encryptionKey={encryptionKey}
setData={setData}
progressBarProps={progressBarProps}
>
<Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
<PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} />
<Card.Body>
<PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} />
<Card.Text>{item.collection.name}</Card.Text>
</Card.Body>
</Card>
</CollectionDropZone>
));
return (
<Modal
show={uploadModalView}
aria-labelledby='contained-modal-title-vcenter'
centered
onHide={closeUploadModal}
>
<Modal.Header closeButton>
<Modal.Title id='contained-modal-title-vcenter'>
Select/Click on Collection to upload
</Modal.Title>
</Modal.Header>
<Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
{CollectionIcons}
</Modal.Body>
<Modal.Footer>
<Button onClick={closeUploadModal}>Close</Button>
</Modal.Footer>
</Modal>
<>
<Modal
show={uploadModalView}
centered
onHide={closeUploadModal}
>
<Modal.Header closeButton>
<Modal.Title >
Select/Click on Collection to upload
</Modal.Title>
</Modal.Header>
<Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
<AddCollection
{...rest}
closeModal={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>
<Button onClick={closeUploadModal}>Close</Button>
</Modal.Footer>
</Modal>
</>
);
}