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