Storage and icon update.

package.json

@@ -9,12 +9,14 @@
     "start": "next start"
   },
   "dependencies": {
+    "@types/localforage": "^0.0.34",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "comlink": "^4.3.0",
     "formik": "^2.1.5",
     "http-proxy-middleware": "^1.0.5",
     "libsodium-wrappers": "^0.7.8",
+    "localforage": "^1.9.0",
     "next": "9.5.3",
     "node-forge": "^0.10.0",
     "react": "16.13.1",

src/pages/_app.tsx

@@ -12,6 +12,14 @@ import PowerSettings from 'components/power_settings';
 import Head from 'next/head';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-photoswipe/lib/photoswipe.css';
+import localForage from 'localforage';
+
+localForage.config({
+    driver: localForage.INDEXEDDB,
+    name: 'ente-files',
+    version: 1.0,
+    storeName: 'files',
+});
 
 const GlobalStyles = createGlobalStyle`
     html, body {
@@ -83,6 +91,7 @@ export default function App({ Component, pageProps }) {
     const logout = () => {
         clearKeys();
         clearData();
+        localForage.clear();
         router.push("/");
     }
 

src/pages/gallery/components/PreviewCard.tsx

@@ -12,8 +12,8 @@ const Cont = styled.div`
     background: #555 url(/image.svg) no-repeat center;
     margin: 0 4px;
     display: inline-block;
-    width: 200px;
-    height: 200px;
+    width: 192px;
+    height: 192px;
     overflow: hidden;
 
     & > img {

src/services/fileService.ts

@@ -2,15 +2,23 @@ import { getEndpoint } from "utils/common/apiUtil";
 import HTTPService from "./HTTPService";
 import * as Comlink from "comlink";
 import { getData, LS_KEYS } from "utils/storage/localStorage";
-import { decrypt } from "utils/crypto/libsodium";
+import localForage from "localforage";
 
 const CryptoWorker: any = typeof window !== 'undefined'
     && Comlink.wrap(new Worker("worker/crypto.worker.js", { type: 'module' }));
 const ENDPOINT = getEndpoint();
 
+localForage.config({
+    driver: localForage.INDEXEDDB,
+    name: 'ente-files',
+    version: 1.0,
+    storeName: 'files',
+});
+
 export interface fileAttribute {
     encryptedData: string;
     decryptionHeader: string;
+    creationTime: number;
 };
 
 export interface user {
@@ -20,7 +28,7 @@ export interface user {
 }
 
 export interface collection {
-    id: number;
+    id: string;
     owner: user;
     key: string;
     name: string;
@@ -71,7 +79,7 @@ const getCollectionKey = async (collection: collection, key: Uint8Array) => {
 }
 
 const getCollections = async (token: string, sinceTime: string, key: Uint8Array): Promise<collection[]> => {
-    const resp = await HTTPService.get(`${ENDPOINT}/collections`, {
+    const resp = await HTTPService.get(`${ENDPOINT}/collections/`, {
         'token': token,
         'sinceTime': sinceTime,
     });
@@ -85,25 +93,33 @@ export const getFiles = async (sinceTime: string, token: string, limit: string,
     const worker = await new CryptoWorker();
 
     const collections = await getCollections(token, "0", await worker.fromB64(key));
-    var files: Array<file> = [];
+    var files: Array<file> = await localForage.getItem<file[]>('files') || [];
     for (const index in collections) {
         const collection = collections[index];
-        const resp = await HTTPService.get(`${ENDPOINT}/collections/diff`, {
-            'collectionID': collection.id.toString(), sinceTime, token, limit,
-        });
-
-        const promises: Promise<file>[] = resp.data.diff.map(
-            async (file: file) => {
-                file.key = await worker.decrypt(
-                    await worker.fromB64(file.encryptedKey),
-                    await worker.fromB64(file.keyDecryptionNonce),
-                    collection.key)
-                file.metadata = await worker.decryptMetadata(file);
-                return file;
+        let time = await localForage.getItem<string>(`${collection.id}-time`) || sinceTime;
+        let resp;
+        do {
+            resp = await HTTPService.get(`${ENDPOINT}/collections/diff`, {
+                'collectionID': collection.id, sinceTime: time, token, limit,
             });
-        files.push(...await Promise.all(promises));
-        console.log(files);
+            const promises: Promise<file>[] = resp.data.diff.map(
+                async (file: file) => {
+                    file.key = await worker.decrypt(
+                        await worker.fromB64(file.encryptedKey),
+                        await worker.fromB64(file.keyDecryptionNonce),
+                        collection.key);
+                    file.metadata = await worker.decryptMetadata(file);
+                    return file;
+                });
+            files.push(...await Promise.all(promises));
+            files = files.sort((a, b) => b.metadata.creationTime - a.metadata.creationTime);
+            if (resp.data.diff.length) {
+                time = (resp.data.diff.slice(-1)[0].updationTime).toString();
+            }
+        } while (resp.data.diff.length);
+        await localForage.setItem(`${collection.id}-time`, time);
     }
+    await localForage.setItem('files', files);
     return files;
 }
 

yarn.lock

@@ -1132,6 +1132,13 @@
   resolved "https://registry.yarnpkg.com/@types/libsodium-wrappers/-/libsodium-wrappers-0.7.8.tgz#34575d7692fdbb7a7fdb63afcde381db86ec0de2"
   integrity sha512-vkDSj6enD3K0+Ep83wnoGUk+f7sqsO4alsqxxEZ8BcTJhFmcY4UehYH3rTf4M3JGHXNhdpGFDdMbWFMgyvw/fA==
 
+"@types/localforage@^0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@types/localforage/-/localforage-0.0.34.tgz#5e31c32dd8791ec4b9ff3ef47c9cb55b2d0d9438"
+  integrity sha1-XjHDLdh5HsS5/z70fJy1Wy0NlDg=
+  dependencies:
+    localforage "*"
+
 "@types/node@*":
   version "14.10.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.10.1.tgz#cc323bad8e8a533d4822f45ce4e5326f36e42177"
@@ -3391,6 +3398,11 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -3719,6 +3731,13 @@ libsodium@0.7.8:
   resolved "https://registry.yarnpkg.com/libsodium/-/libsodium-0.7.8.tgz#fbd12247b7b1353f88d8de1cbc66bc1a07b2e008"
   integrity sha512-/Qc+APf0jbeWSaeEruH0L1/tbbT+sbf884ZL0/zV/0JXaDPBzYkKbyb/wmxMHgAHzm3t6gqe7bOOXAVwfqVikQ==
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -3751,6 +3770,13 @@ loader-utils@^1.1.0, loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+localforage@*, localforage@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.9.0.tgz#f3e4d32a8300b362b4634cc4e066d9d00d2f09d1"
+  integrity sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"