random optimizations
This commit is contained in:
parent
b786f85ef7
commit
8679b5f62b
|
@ -15,7 +15,7 @@ import DownloadManger from 'services/downloadManager';
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
items: any[];
|
items: any[];
|
||||||
options?: Object;
|
currentIndex?: number;
|
||||||
onClose?: () => void;
|
onClose?: () => void;
|
||||||
gettingData?: (instance: any, index: number, item: file) => void;
|
gettingData?: (instance: any, index: number, item: file) => void;
|
||||||
id?: string;
|
id?: string;
|
||||||
|
@ -58,7 +58,12 @@ function PhotoSwipe(props: Iprops) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const openPhotoSwipe = () => {
|
const openPhotoSwipe = () => {
|
||||||
const { items, options } = props;
|
const { items, currentIndex } = props;
|
||||||
|
const options = {
|
||||||
|
history: false,
|
||||||
|
maxSpreadZoom: 5,
|
||||||
|
index: currentIndex,
|
||||||
|
};
|
||||||
let photoSwipe = new Photoswipe(
|
let photoSwipe = new Photoswipe(
|
||||||
pswpElement,
|
pswpElement,
|
||||||
PhotoswipeUIDefault,
|
PhotoswipeUIDefault,
|
||||||
|
|
|
@ -4,7 +4,7 @@ import styled from 'styled-components';
|
||||||
|
|
||||||
interface CollectionProps {
|
interface CollectionProps {
|
||||||
collections: collection[];
|
collections: collection[];
|
||||||
selected?: string;
|
selected?: number;
|
||||||
selectCollection: (id?: number) => void;
|
selectCollection: (id?: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,7 +64,7 @@ export default function Collections(props: CollectionProps) {
|
||||||
{collections?.map((item) => (
|
{collections?.map((item) => (
|
||||||
<Chip
|
<Chip
|
||||||
key={item.id}
|
key={item.id}
|
||||||
active={selected === item.id.toString()}
|
active={selected === item.id}
|
||||||
onClick={clickHandler(item.id)}
|
onClick={clickHandler(item.id)}
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
|
import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
|
||||||
import { file, syncData, localFiles } from 'services/fileService';
|
import { file, syncData, localFiles } from 'services/fileService';
|
||||||
|
@ -110,17 +110,13 @@ export default function Gallery(props) {
|
||||||
const [data, setData] = useState<file[]>();
|
const [data, setData] = useState<file[]>();
|
||||||
const [favItemIds, setFavItemIds] = useState<Set<number>>();
|
const [favItemIds, setFavItemIds] = useState<Set<number>>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [options, setOptions] = useState<Options>({
|
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||||
history: false,
|
|
||||||
maxSpreadZoom: 5,
|
|
||||||
});
|
|
||||||
const fetching: { [k: number]: boolean } = {};
|
const fetching: { [k: number]: boolean } = {};
|
||||||
const [errorCode, setErrorCode] = useState<number>(null);
|
const [errorCode, setErrorCode] = useState<number>(null);
|
||||||
|
|
||||||
const [sinceTime, setSinceTime] = useState(0);
|
const [sinceTime, setSinceTime] = useState(0);
|
||||||
|
|
||||||
const [progress, setProgress] = useState(0);
|
const loadingBar = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
||||||
if (!key) {
|
if (!key) {
|
||||||
|
@ -139,9 +135,9 @@ export default function Gallery(props) {
|
||||||
const favItemIds = await getFavItemIds(data);
|
const favItemIds = await getFavItemIds(data);
|
||||||
setFavItemIds(favItemIds);
|
setFavItemIds(favItemIds);
|
||||||
|
|
||||||
data.length == 0 ? setProgress(20) : setProgress(80);
|
loadingBar.current.continuousStart();
|
||||||
await syncWithRemote();
|
await syncWithRemote();
|
||||||
setProgress(100);
|
loadingBar.current.complete();
|
||||||
};
|
};
|
||||||
main();
|
main();
|
||||||
props.setUploadButtonView(true);
|
props.setUploadButtonView(true);
|
||||||
|
@ -222,10 +218,7 @@ export default function Gallery(props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const onThumbnailClick = (index: number) => () => {
|
const onThumbnailClick = (index: number) => () => {
|
||||||
setOptions({
|
setCurrentIndex(index);
|
||||||
...options,
|
|
||||||
index,
|
|
||||||
});
|
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -286,20 +279,6 @@ export default function Gallery(props) {
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return <div />;
|
return <div />;
|
||||||
}
|
}
|
||||||
if (data.length == 0 && progress != 0) {
|
|
||||||
return (
|
|
||||||
<div className="text-center">
|
|
||||||
<LoadingBar
|
|
||||||
color="#2dc262"
|
|
||||||
progress={progress}
|
|
||||||
onLoaderFinished={() => setProgress(0)}
|
|
||||||
/>
|
|
||||||
<Alert variant="primary">
|
|
||||||
{constants.INITIAL_LOAD_DELAY_WARNING}
|
|
||||||
</Alert>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectCollection = (id?: number) => {
|
const selectCollection = (id?: number) => {
|
||||||
const href = `/gallery?collection=${id || ''}`;
|
const href = `/gallery?collection=${id || ''}`;
|
||||||
|
@ -336,12 +315,16 @@ export default function Gallery(props) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{data.length == 0 && loadingBar.current.progress != 0 && (
|
||||||
|
<div className="text-center">
|
||||||
|
<Alert variant="primary">
|
||||||
|
{constants.INITIAL_LOAD_DELAY_WARNING}
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<ErrorAlert errorCode={errorCode} />
|
<ErrorAlert errorCode={errorCode} />
|
||||||
<LoadingBar
|
<LoadingBar color="#2dc262" ref={loadingBar} />
|
||||||
color="#2dc262"
|
|
||||||
progress={progress}
|
|
||||||
onLoaderFinished={() => setProgress(0)}
|
|
||||||
/>
|
|
||||||
<Collections
|
<Collections
|
||||||
collections={collections}
|
collections={collections}
|
||||||
selected={Number(router.query.collection)}
|
selected={Number(router.query.collection)}
|
||||||
|
@ -487,7 +470,7 @@ export default function Gallery(props) {
|
||||||
<PhotoSwipe
|
<PhotoSwipe
|
||||||
isOpen={open}
|
isOpen={open}
|
||||||
items={filteredData}
|
items={filteredData}
|
||||||
options={options}
|
currentIndex={currentIndex}
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
gettingData={getSlideData}
|
gettingData={getSlideData}
|
||||||
favItemIds={favItemIds}
|
favItemIds={favItemIds}
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import axios, { AxiosRequestConfig } from 'axios';
|
import axios, { AxiosRequestConfig } from 'axios';
|
||||||
|
|
||||||
interface IHTTPHeaders {
|
interface IHTTPHeaders {
|
||||||
[headerKey: string]: string;
|
[headerKey: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IQueryPrams {
|
interface IQueryPrams {
|
||||||
[paramName: string]: string;
|
[paramName: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -123,9 +123,9 @@ export const getFiles = async (
|
||||||
resp = await HTTPService.get(
|
resp = await HTTPService.get(
|
||||||
`${ENDPOINT}/collections/diff`,
|
`${ENDPOINT}/collections/diff`,
|
||||||
{
|
{
|
||||||
collectionID: collection.id.toString(),
|
collectionID: collection.id,
|
||||||
sinceTime: time.toString(),
|
sinceTime: time,
|
||||||
limit: limit.toString(),
|
limit: limit,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'X-Auth-Token': token,
|
'X-Auth-Token': token,
|
||||||
|
@ -146,7 +146,7 @@ export const getFiles = async (
|
||||||
);
|
);
|
||||||
|
|
||||||
if (resp.data.diff.length) {
|
if (resp.data.diff.length) {
|
||||||
time = resp.data.diff.slice(-1)[0].updationTime.toString();
|
time = resp.data.diff.slice(-1)[0].updationTime;
|
||||||
}
|
}
|
||||||
} while (resp.data.diff.length === limit);
|
} while (resp.data.diff.length === limit);
|
||||||
return await Promise.all(promises);
|
return await Promise.all(promises);
|
||||||
|
|
|
@ -498,7 +498,7 @@ class UploadService {
|
||||||
count: Math.min(
|
count: Math.min(
|
||||||
50,
|
50,
|
||||||
(this.totalFileCount - this.filesCompleted) * 2
|
(this.totalFileCount - this.filesCompleted) * 2
|
||||||
).toString(),
|
),
|
||||||
},
|
},
|
||||||
{ 'X-Auth-Token': token }
|
{ 'X-Auth-Token': token }
|
||||||
);
|
);
|
||||||
|
@ -519,7 +519,7 @@ class UploadService {
|
||||||
file: Uint8Array | string
|
file: Uint8Array | string
|
||||||
): Promise<string> {
|
): Promise<string> {
|
||||||
try {
|
try {
|
||||||
const fileSize = file.length.toString();
|
const fileSize = file.length;
|
||||||
await HTTPService.put(fileUploadURL.url, file, null, {
|
await HTTPService.put(fileUploadURL.url, file, null, {
|
||||||
contentLengthHeader: fileSize,
|
contentLengthHeader: fileSize,
|
||||||
});
|
});
|
||||||
|
@ -571,23 +571,15 @@ class UploadService {
|
||||||
|
|
||||||
let latDegree: number, latMinute: number, latSecond: number;
|
let latDegree: number, latMinute: number, latSecond: number;
|
||||||
let lonDegree: number, lonMinute: number, lonSecond: number;
|
let lonDegree: number, lonMinute: number, lonSecond: number;
|
||||||
if (exifData.GPSLatitude[0].numerator) {
|
|
||||||
latDegree = exifData.GPSLatitude[0].numerator;
|
|
||||||
latMinute = exifData.GPSLatitude[1].numerator;
|
|
||||||
latSecond = exifData.GPSLatitude[2].numerator;
|
|
||||||
|
|
||||||
lonDegree = exifData.GPSLongitude[0].numerator;
|
latDegree = exifData.GPSLatitude[0];
|
||||||
lonMinute = exifData.GPSLongitude[1].numerator;
|
latMinute = exifData.GPSLatitude[1];
|
||||||
lonSecond = exifData.GPSLongitude[2].numerator;
|
latSecond = exifData.GPSLatitude[2];
|
||||||
} else {
|
|
||||||
latDegree = exifData.GPSLatitude[0];
|
lonDegree = exifData.GPSLongitude[0];
|
||||||
latMinute = exifData.GPSLatitude[1];
|
lonMinute = exifData.GPSLongitude[1];
|
||||||
latSecond = exifData.GPSLatitude[2];
|
lonSecond = exifData.GPSLongitude[2];
|
||||||
|
|
||||||
lonDegree = exifData.GPSLongitude[0];
|
|
||||||
lonMinute = exifData.GPSLongitude[1];
|
|
||||||
lonSecond = exifData.GPSLongitude[2];
|
|
||||||
}
|
|
||||||
var latDirection = exifData.GPSLatitudeRef;
|
var latDirection = exifData.GPSLatitudeRef;
|
||||||
var lonDirection = exifData.GPSLongitudeRef;
|
var lonDirection = exifData.GPSLongitudeRef;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue