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

Passed collections to CollectionSeclector

Browse source
This commit is contained in:
Abhinav-grd 2021-01-05 12:47:46 +05:30
parent c49084430f
commit 4e8117b6b2
3 changed files with 106 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/pages/gallery/components/DragAndDropUpload.tsx
View file

@ -37,6 +37,7 @@ const FileUpload = ({
modalView,
closeModal,
showModal,
collections,
}) => {
return (
<>
@ -70,6 +71,7 @@ const FileUpload = ({
modalView={modalView}
closeModal={closeModal}
showModal={showModal}
collections={collections}
/>
</DropDiv>
</>

4
src/pages/gallery/components/UploadButton.tsx
View file

@ -1,9 +1,8 @@
import CollectionSelector from 'pages/gallery/components/CollectionSelector';
import React, { useRef } from 'react';
import { Button } from 'react-bootstrap';
import Dropzone from 'react-dropzone';
const UploadButton = ({ modalView, closeModal, showModal }) => {
const UploadButton = ({ modalView, closeModal, showModal, collections }) => {
return (
<>
<Button variant='primary' onClick={showModal}>
@ -13,6 +12,7 @@ const UploadButton = ({ modalView, closeModal, showModal }) => {
modalView={modalView}
closeModal={closeModal}
showModal={showModal}
collections={collections}
/>
</>
);

199
src/pages/gallery/index.tsx
View file

@ -297,118 +297,123 @@ export default function Gallery() {
modalView={modalView}
closeModal={closeModal}
showModal={showModal}
collections={collections}
/>
<FileUpload
noClick
modalView={modalView}
closeModal={closeModal}
showModal={showModal}
collections={collections}
>
{filteredData.length ? (
<Container>
<AutoSizer>
{({ height, width }) => {
let columns;
if (width >= 1000) {
columns = 5;
} else if (width < 1000 && width >= 450) {
columns = 3;
} else if (width < 450 && width >= 300) {
columns = 2;
} else {
columns = 1;
}
const timeStampList: TimeStampListItem[] = [];
let listItemIndex = 0;
let currentDate = -1;
filteredData.forEach((item, index) => {
if (
!isSameDay(
new Date(item.metadata.creationTime / 1000),
new Date(currentDate)
)
) {
currentDate = item.metadata.creationTime / 1000;
const dateTimeFormat = new Intl.DateTimeFormat('en-IN', {
weekday: 'short',
year: 'numeric',
month: 'long',
day: 'numeric',
});
timeStampList.push({
itemType: ITEM_TYPE.TIME,
date: dateTimeFormat.format(currentDate),
});
timeStampList.push({
itemType: ITEM_TYPE.TILE,
items: [item],
itemStartIndex: index,
});
listItemIndex = 1;
{filteredData.length ? (
<Container>
<AutoSizer>
{({ height, width }) => {
let columns;
if (width >= 1000) {
columns = 5;
} else if (width < 1000 && width >= 450) {
columns = 3;
} else if (width < 450 && width >= 300) {
columns = 2;
} else {
if (listItemIndex < columns) {
timeStampList[timeStampList.length - 1].items.push(item);
listItemIndex++;
} else {
listItemIndex = 1;
columns = 1;
}
const timeStampList: TimeStampListItem[] = [];
let listItemIndex = 0;
let currentDate = -1;
filteredData.forEach((item, index) => {
if (
!isSameDay(
new Date(item.metadata.creationTime / 1000),
new Date(currentDate)
)
) {
currentDate = item.metadata.creationTime / 1000;
const dateTimeFormat = new Intl.DateTimeFormat('en-IN', {
weekday: 'short',
year: 'numeric',
month: 'long',
day: 'numeric',
});
timeStampList.push({
itemType: ITEM_TYPE.TIME,
date: dateTimeFormat.format(currentDate),
});
timeStampList.push({
itemType: ITEM_TYPE.TILE,
items: [item],
itemStartIndex: index,
});
listItemIndex = 1;
} else {
if (listItemIndex < columns) {
timeStampList[timeStampList.length - 1].items.push(item);
listItemIndex++;
} else {
listItemIndex = 1;
timeStampList.push({
itemType: ITEM_TYPE.TILE,
items: [item],
itemStartIndex: index,
});
}
}
}
});
});
return (
<List
itemSize={(index) =>
timeStampList[index].itemType === ITEM_TYPE.TIME ? 30 : 200
}
height={height}
width={width}
itemCount={timeStampList.length}
key={`${router.query.collection}-${columns}`}
>
{({ index, style }) => {
return (
<ListItem style={style}>
<ListContainer>
{timeStampList[index].itemType === ITEM_TYPE.TIME ? (
<DateContainer>
{timeStampList[index].date}
</DateContainer>
) : (
timeStampList[index].items.map((item, idx) => {
return getThumbnail(
filteredData,
timeStampList[index].itemStartIndex + idx
);
})
)}
</ListContainer>
</ListItem>
);
}}
</List>
);
}}
</AutoSizer>
<PhotoSwipe
isOpen={open}
items={filteredData}
options={options}
onClose={handleClose}
gettingData={getSlideData}
/>
</Container>
) : (
<DeadCenter>
<SadFace height={100} width={100} />
<div>No content found!</div>
</DeadCenter>
)}
return (
<List
itemSize={(index) =>
timeStampList[index].itemType === ITEM_TYPE.TIME
? 30
: 200
}
height={height}
width={width}
itemCount={timeStampList.length}
key={`${router.query.collection}-${columns}`}
>
{({ index, style }) => {
return (
<ListItem style={style}>
<ListContainer>
{timeStampList[index].itemType ===
ITEM_TYPE.TIME ? (
<DateContainer>
{timeStampList[index].date}
</DateContainer>
) : (
timeStampList[index].items.map((item, idx) => {
return getThumbnail(
filteredData,
timeStampList[index].itemStartIndex + idx
);
})
)}
</ListContainer>
</ListItem>
);
}}
</List>
);
}}
</AutoSizer>
<PhotoSwipe
isOpen={open}
items={filteredData}
options={options}
onClose={handleClose}
gettingData={getSlideData}
/>
</Container>
) : (
<DeadCenter>
<SadFace height={100} width={100} />
<div>No content found!</div>
</DeadCenter>
)}
</FileUpload>
</>
);