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

restructed the components related to new collection create

Browse source
This commit is contained in:
Abhinav-grd 2021-01-14 15:00:43 +05:30
parent 87faa7f1f1
commit b829187424
3 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/pages/gallery/components/AddCollection.tsx
View file

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Card } from "react-bootstrap";
import Dropzone from "react-dropzone"; import Dropzone from "react-dropzone";
import { DropDiv } from "./CollectionDropZone"; import { DropDiv } from "./CollectionDropZone";
import CreateCollection from "./CreateCollection"; import CreateCollection from "./CreateCollection";
@ -8,10 +9,9 @@ export default function AddCollection(props) {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>(); const [acceptedFiles, setAcceptedFiles] = useState<File[]>();
const [createCollectionView, setCreateCollectionView] = useState(false); const [createCollectionView, setCreateCollectionView] = useState(false);
const { children, closeModal, ...rest } = props; const { children, closeUploadModal, ...rest } = props;
const createCollection = (acceptedFiles) => { const createCollection = (acceptedFiles) => {
closeModal();
setAcceptedFiles(acceptedFiles); setAcceptedFiles(acceptedFiles);
setCreateCollectionView(true); setCreateCollectionView(true);
}; };
@ -20,7 +20,7 @@ export default function AddCollection(props) {
<> <>
<Dropzone <Dropzone
onDropAccepted={createCollection} onDropAccepted={createCollection}
onDropRejected={props.closeUploadModal} onDropRejected={closeUploadModal}
noDragEventsBubbling noDragEventsBubbling
accept="image/*, video/*, application/json " accept="image/*, video/*, application/json "
> >
@ -40,14 +40,19 @@ export default function AddCollection(props) {
})} })}
> >
<input {...getInputProps()} /> <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> </DropDiv>
); );
}} }}
</Dropzone> </Dropzone>
<CreateCollection <CreateCollection
{...rest} {...rest}
show={createCollectionView} modalView={createCollectionView}
closeUploadModal={closeUploadModal}
closeModal={() => setCreateCollectionView(false)} closeModal={() => setCreateCollectionView(false)}
acceptedFiles={acceptedFiles} acceptedFiles={acceptedFiles}
/> />

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

@ -15,12 +15,10 @@ function CollectionSelector(props) {
} = props; } = props;
const [token, setToken] = useState(null); const [token, setToken] = useState(null);
const [userMasterKey, setUserMasterKey] = useState(null);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
setToken(getData(LS_KEYS.USER).token); 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" }}> <Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
<AddCollection <AddCollection
{...rest} {...rest}
closeModal={closeUploadModal} closeUploadModal={closeUploadModal}
token={token} 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} {CollectionIcons}
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>

14
src/pages/gallery/components/CreateCollection.tsx
View file

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