random optimizations

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -15,7 +15,7 @@ import DownloadManger from 'services/downloadManager';
 interface Iprops {
     isOpen: boolean;
     items: any[];
-    options?: Object;
+    currentIndex?: number;
     onClose?: () => void;
     gettingData?: (instance: any, index: number, item: file) => void;
     id?: string;
@@ -58,7 +58,12 @@ function PhotoSwipe(props: Iprops) {
     }
 
     const openPhotoSwipe = () => {
-        const { items, options } = props;
+        const { items, currentIndex } = props;
+        const options = {
+            history: false,
+            maxSpreadZoom: 5,
+            index: currentIndex,
+        };
         let photoSwipe = new Photoswipe(
             pswpElement,
             PhotoswipeUIDefault,

src/pages/gallery/components/Collections.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 interface CollectionProps {
     collections: collection[];
-    selected?: string;
+    selected?: number;
     selectCollection: (id?: number) => void;
 }
 
@@ -64,7 +64,7 @@ export default function Collections(props: CollectionProps) {
                 {collections?.map((item) => (
                     <Chip
                         key={item.id}
-                        active={selected === item.id.toString()}
+                        active={selected === item.id}
                         onClick={clickHandler(item.id)}
                     >
                         {item.name}

src/pages/gallery/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { file, syncData, localFiles } from 'services/fileService';
@@ -110,17 +110,13 @@ export default function Gallery(props) {
     const [data, setData] = useState<file[]>();
     const [favItemIds, setFavItemIds] = useState<Set<number>>();
     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 [errorCode, setErrorCode] = useState<number>(null);
 
     const [sinceTime, setSinceTime] = useState(0);
 
-    const [progress, setProgress] = useState(0);
+    const loadingBar = useRef(null);
-
     useEffect(() => {
         const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
         if (!key) {
@@ -139,9 +135,9 @@ export default function Gallery(props) {
             const favItemIds = await getFavItemIds(data);
             setFavItemIds(favItemIds);
 
-            data.length == 0 ? setProgress(20) : setProgress(80);
+            loadingBar.current.continuousStart();
             await syncWithRemote();
-            setProgress(100);
+            loadingBar.current.complete();
         };
         main();
         props.setUploadButtonView(true);
@@ -222,10 +218,7 @@ export default function Gallery(props) {
     };
 
     const onThumbnailClick = (index: number) => () => {
-        setOptions({
+        setCurrentIndex(index);
-            ...options,
-            index,
-        });
         setOpen(true);
     };
 
@@ -286,20 +279,6 @@ export default function Gallery(props) {
     if (!data) {
         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 href = `/gallery?collection=${id || ''}`;
@@ -336,12 +315,16 @@ export default function Gallery(props) {
 
     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} />
-            <LoadingBar
+            <LoadingBar color="#2dc262" ref={loadingBar} />
-                color="#2dc262"
+
-                progress={progress}
-                onLoaderFinished={() => setProgress(0)}
-            />
             <Collections
                 collections={collections}
                 selected={Number(router.query.collection)}
@@ -487,7 +470,7 @@ export default function Gallery(props) {
                     <PhotoSwipe
                         isOpen={open}
                         items={filteredData}
-                        options={options}
+                        currentIndex={currentIndex}
                         onClose={handleClose}
                         gettingData={getSlideData}
                         favItemIds={favItemIds}

src/services/HTTPService.ts

@@ -1,11 +1,11 @@
 import axios, { AxiosRequestConfig } from 'axios';
 
 interface IHTTPHeaders {
-    [headerKey: string]: string;
+    [headerKey: string]: any;
 }
 
 interface IQueryPrams {
-    [paramName: string]: string;
+    [paramName: string]: any;
 }
 
 /**

src/services/fileService.ts

@@ -123,9 +123,9 @@ export const getFiles = async (
             resp = await HTTPService.get(
                 `${ENDPOINT}/collections/diff`,
                 {
-                    collectionID: collection.id.toString(),
+                    collectionID: collection.id,
-                    sinceTime: time.toString(),
+                    sinceTime: time,
-                    limit: limit.toString(),
+                    limit: limit,
                 },
                 {
                     'X-Auth-Token': token,
@@ -146,7 +146,7 @@ export const getFiles = async (
             );
 
             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);
         return await Promise.all(promises);

src/services/uploadService.ts

@@ -498,7 +498,7 @@ class UploadService {
                         count: Math.min(
                             50,
                             (this.totalFileCount - this.filesCompleted) * 2
-                        ).toString(),
+                        ),
                     },
                     { 'X-Auth-Token': token }
                 );
@@ -519,7 +519,7 @@ class UploadService {
         file: Uint8Array | string
     ): Promise<string> {
         try {
-            const fileSize = file.length.toString();
+            const fileSize = file.length;
             await HTTPService.put(fileUploadURL.url, file, null, {
                 contentLengthHeader: fileSize,
             });
@@ -571,23 +571,15 @@ class UploadService {
 
         let latDegree: number, latMinute: number, latSecond: 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 lonDirection = exifData.GPSLongitudeRef;