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

updated the function calls

Browse source
This commit is contained in:
Abhinav-grd 2021-02-08 21:45:21 +05:30
parent 8ba126c56e
commit 95d50cc3c3
1 changed files with 98 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import {
file, file,
getFile, getFile,
getPreview, getPreview,
fetchData, syncData,
localFiles, localFiles,
} from 'services/fileService'; } from 'services/fileService';
import { getData, LS_KEYS } from 'utils/storage/localStorage'; import { getData, LS_KEYS } from 'utils/storage/localStorage';
@ -17,16 +17,16 @@ import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
import { Options } from 'photoswipe'; import { Options } from 'photoswipe';
import AutoSizer from 'react-virtualized-auto-sizer'; import AutoSizer from 'react-virtualized-auto-sizer';
import { VariableSizeList as List } from 'react-window'; import { VariableSizeList as List } from 'react-window';
import LoadingBar from 'react-top-loading-bar' import LoadingBar from 'react-top-loading-bar';
import Collections from './components/Collections'; import Collections from './components/Collections';
import Upload from './components/Upload'; import Upload from './components/Upload';
import { import {
collection, collection,
getLatestCollections, syncCollections,
collectionLatestFile, collectionLatestFile,
getCollectionLatestFile, getCollectionLatestFile,
getFavItemIds, getFavItemIds,
getLocalCollections getLocalCollections,
} from 'services/collectionService'; } from 'services/collectionService';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
@ -37,7 +37,7 @@ enum ITEM_TYPE {
export enum FILE_TYPE { export enum FILE_TYPE {
IMAGE, IMAGE,
VIDEO, VIDEO,
OTHERS OTHERS,
} }
interface TimeStampListItem { interface TimeStampListItem {
@ -75,9 +75,9 @@ const DeadCenter = styled.div`
flex-direction: column; flex-direction: column;
`; `;
const ListContainer = styled.div<{columns: number}>` const ListContainer = styled.div<{ columns: number }>`
display: grid; display: grid;
grid-template-columns: repeat(${props => props.columns}, 1fr); grid-template-columns: repeat(${(props) => props.columns}, 1fr);
grid-column-gap: 8px; grid-column-gap: 8px;
padding: 0 8px; padding: 0 8px;
max-width: 100%; max-width: 100%;
@ -117,7 +117,7 @@ export default function Gallery(props) {
const fetching: { [k: number]: boolean } = {}; const fetching: { [k: number]: boolean } = {};
const [sinceTime, setSinceTime] = useState(0); const [sinceTime, setSinceTime] = useState(0);
const [progress, setProgress] = useState(0) const [progress, setProgress] = useState(0);
useEffect(() => { useEffect(() => {
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY); const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
@ -142,19 +142,22 @@ export default function Gallery(props) {
const syncWithRemote = async () => { const syncWithRemote = async () => {
const token = getToken(); const token = getToken();
const encryptionKey = await getActualKey(); const encryptionKey = await getActualKey();
const {isUpdated, collections} = await getLatestCollections(token, encryptionKey); const collections = await syncCollections(token, encryptionKey);
const data = await fetchData(token, collections); const { data, isUpdated } = await syncData(token, collections);
const collectionLatestFile = await getCollectionLatestFile(collections, data); const collectionLatestFile = await getCollectionLatestFile(
collections,
data
);
const favItemIds = await getFavItemIds(data); const favItemIds = await getFavItemIds(data);
setCollections(collections);
if (isUpdated) { if (isUpdated) {
setCollections(collections);
setData(data); setData(data);
} }
setCollectionLatestFile(collectionLatestFile); setCollectionLatestFile(collectionLatestFile);
setFavItemIds(favItemIds); setFavItemIds(favItemIds);
setSinceTime((new Date()).getTime()); setSinceTime(new Date().getTime());
props.setUploadButtonView(true); props.setUploadButtonView(true);
} };
const updateUrl = (index: number) => (url: string) => { const updateUrl = (index: number) => (url: string) => {
data[index] = { data[index] = {
@ -163,7 +166,10 @@ export default function Gallery(props) {
w: window.innerWidth, w: window.innerWidth,
h: window.innerHeight, h: window.innerHeight,
}; };
if (data[index].metadata.fileType === FILE_TYPE.VIDEO && !data[index].html) { if (
data[index].metadata.fileType === FILE_TYPE.VIDEO &&
!data[index].html
) {
data[index].html = ` data[index].html = `
<div class="video-loading"> <div class="video-loading">
<img src="${url}" /> <img src="${url}" />
@ -174,7 +180,10 @@ export default function Gallery(props) {
`; `;
delete data[index].src; delete data[index].src;
} }
if (data[index].metadata.fileType === FILE_TYPE.IMAGE && !data[index].src) { if (
data[index].metadata.fileType === FILE_TYPE.IMAGE &&
!data[index].src
) {
data[index].src = url; data[index].src = url;
} }
setData(data); setData(data);
@ -241,7 +250,10 @@ export default function Gallery(props) {
// ignore // ignore
} }
} }
if ((!item.src || item.src === item.msrc) && !fetching[item.dataIndex]) { if (
(!item.src || item.src === item.msrc) &&
!fetching[item.dataIndex]
) {
fetching[item.dataIndex] = true; fetching[item.dataIndex] = true;
const url = await getFile(token, item); const url = await getFile(token, item);
updateSrcUrl(item.dataIndex, url); updateSrcUrl(item.dataIndex, url);
@ -269,8 +281,8 @@ export default function Gallery(props) {
if (!data || loading) { if (!data || loading) {
return ( return (
<div className='text-center'> <div className="text-center">
<Spinner animation='border' variant='primary' /> <Spinner animation="border" variant="primary" />
</div> </div>
); );
} }
@ -311,7 +323,7 @@ export default function Gallery(props) {
return ( return (
<> <>
<LoadingBar <LoadingBar
color='#007bff' color="#007bff"
progress={progress} progress={progress}
onLoaderFinished={() => setProgress(0)} onLoaderFinished={() => setProgress(0)}
/> />
@ -326,7 +338,6 @@ export default function Gallery(props) {
showUploadModal={props.showUploadModal} showUploadModal={props.showUploadModal}
collectionLatestFile={collectionLatestFile} collectionLatestFile={collectionLatestFile}
refetchData={syncWithRemote} refetchData={syncWithRemote}
/> />
{filteredData.length ? ( {filteredData.length ? (
<Container> <Container>
@ -349,20 +360,28 @@ export default function Gallery(props) {
filteredData.forEach((item, index) => { filteredData.forEach((item, index) => {
if ( if (
!isSameDay( !isSameDay(
new Date(item.metadata.creationTime / 1000), new Date(
item.metadata.creationTime / 1000
),
new Date(currentDate) new Date(currentDate)
) )
) { ) {
currentDate = item.metadata.creationTime / 1000; currentDate =
const dateTimeFormat = new Intl.DateTimeFormat('en-IN', { item.metadata.creationTime / 1000;
weekday: 'short', const dateTimeFormat = new Intl.DateTimeFormat(
year: 'numeric', 'en-IN',
month: 'long', {
day: 'numeric', weekday: 'short',
}); year: 'numeric',
month: 'long',
day: 'numeric',
}
);
timeStampList.push({ timeStampList.push({
itemType: ITEM_TYPE.TIME, itemType: ITEM_TYPE.TIME,
date: dateTimeFormat.format(currentDate), date: dateTimeFormat.format(
currentDate
),
}); });
timeStampList.push({ timeStampList.push({
itemType: ITEM_TYPE.TILE, itemType: ITEM_TYPE.TILE,
@ -372,7 +391,9 @@ export default function Gallery(props) {
listItemIndex = 1; listItemIndex = 1;
} else { } else {
if (listItemIndex < columns) { if (listItemIndex < columns) {
timeStampList[timeStampList.length - 1].items.push(item); timeStampList[
timeStampList.length - 1
].items.push(item);
listItemIndex++; listItemIndex++;
} else { } else {
listItemIndex = 1; listItemIndex = 1;
@ -388,7 +409,8 @@ export default function Gallery(props) {
return ( return (
<List <List
itemSize={(index) => itemSize={(index) =>
timeStampList[index].itemType === ITEM_TYPE.TIME timeStampList[index].itemType ===
ITEM_TYPE.TIME
? 45 ? 45
: 200 : 200
} }
@ -398,18 +420,46 @@ export default function Gallery(props) {
key={`${router.query.collection}-${columns}-${sinceTime}`} key={`${router.query.collection}-${columns}-${sinceTime}`}
> >
{({ index, style }) => { {({ index, style }) => {
return (<ListItem style={style}> return (
<ListContainer columns={timeStampList[index].itemType === ITEM_TYPE.TIME <ListItem style={style}>
? 1 : columns}> <ListContainer
{ columns={
timeStampList[index].itemType === ITEM_TYPE.TIME timeStampList[index]
? <DateContainer>{timeStampList[index].date}</DateContainer> .itemType ===
: timeStampList[index].items.map((item, idx) =>{ ITEM_TYPE.TIME
return getThumbnail(filteredData, timeStampList[index].itemStartIndex + idx); ? 1
}) : columns
} }
</ListContainer> >
</ListItem>); {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> </List>
); );
@ -426,10 +476,10 @@ export default function Gallery(props) {
/> />
</Container> </Container>
) : ( ) : (
<DeadCenter> <DeadCenter>
<div>{constants.NOTHING_HERE}</div> <div>{constants.NOTHING_HERE}</div>
</DeadCenter> </DeadCenter>
)} )}
</> </>
); );
} }