Move ciphers paging logic from jslib to web (#436)

* Remove paging logic from ciphers base class

* Fix linting

* Fix spacing

* Remove ngx-infinite-scroll (moved to web)

angular/package-lock.json

@@ -20,7 +20,6 @@
         "@angular/router": "^11.2.11",
         "@bitwarden/jslib-common": "file:../common",
         "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
-        "ngx-infinite-scroll": "10.0.1",
         "rxjs": "6.6.7",
         "tldjs": "^2.3.1",
         "zone.js": "0.11.4"
@@ -180,12 +179,6 @@
       "resolved": "../common",
       "link": true
     },
-    "node_modules/@scarf/scarf": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz",
-      "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==",
-      "hasInstallScript": true
-    },
     "node_modules/@types/duo_web_sdk": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz",
@@ -273,16 +266,6 @@
         "node": "*"
       }
     },
-    "node_modules/ngx-infinite-scroll": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz",
-      "integrity": "sha512-7is0eJZ9kJPsaHohRmMhJ/QFHAW9jp9twO5HcHRvFM/Yl/R8QCiokgjwmH0/CR3MuxUanxfHZMfO3PbYTwlBEg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@scarf/scarf": "^1.1.0",
-        "opencollective-postinstall": "^2.0.2"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -292,14 +275,6 @@
         "wrappy": "1"
       }
     },
-    "node_modules/opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "bin": {
-        "opencollective-postinstall": "index.js"
-      }
-    },
     "node_modules/parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -493,11 +468,6 @@
         "zxcvbn": "^4.4.2"
       }
     },
-    "@scarf/scarf": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz",
-      "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg=="
-    },
     "@types/duo_web_sdk": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz",
@@ -575,15 +545,6 @@
         "brace-expansion": "^1.1.7"
       }
     },
-    "ngx-infinite-scroll": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz",
-      "integrity": "sha512-7is0eJZ9kJPsaHohRmMhJ/QFHAW9jp9twO5HcHRvFM/Yl/R8QCiokgjwmH0/CR3MuxUanxfHZMfO3PbYTwlBEg==",
-      "requires": {
-        "@scarf/scarf": "^1.1.0",
-        "opencollective-postinstall": "^2.0.2"
-      }
-    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -593,11 +554,6 @@
         "wrappy": "1"
       }
     },
-    "opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
-    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",

angular/package.json

@@ -36,7 +36,6 @@
     "@angular/router": "^11.2.11",
     "@bitwarden/jslib-common": "file:../common",
     "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
-    "ngx-infinite-scroll": "10.0.1",
     "rxjs": "6.6.7",
     "tldjs": "^2.3.1",
     "zone.js": "0.11.4"

angular/src/components/ciphers.component.ts

@@ -19,19 +19,14 @@ export class CiphersComponent {
 
     loaded: boolean = false;
     ciphers: CipherView[] = [];
-    pagedCiphers: CipherView[] = [];
     searchText: string;
     searchPlaceholder: string = null;
     filter: (cipher: CipherView) => boolean = null;
     deleted: boolean = false;
 
     protected searchPending = false;
-    protected didScroll = false;
-    protected pageSize = 100;
 
     private searchTimeout: any = null;
-    private pagedCiphersCount = 0;
-    private refreshing = false;
 
     constructor(protected searchService: SearchService) { }
 
@@ -41,37 +36,12 @@ export class CiphersComponent {
         this.loaded = true;
     }
 
-    loadMore() {
-        if (this.ciphers.length <= this.pageSize) {
-            return;
-        }
-        const pagedLength = this.pagedCiphers.length;
-        let pagedSize = this.pageSize;
-        if (this.refreshing && pagedLength === 0 && this.pagedCiphersCount > this.pageSize) {
-            pagedSize = this.pagedCiphersCount;
-        }
-        if (this.ciphers.length > pagedLength) {
-            this.pagedCiphers = this.pagedCiphers.concat(this.ciphers.slice(pagedLength, pagedLength + pagedSize));
-        }
-        this.pagedCiphersCount = this.pagedCiphers.length;
-        this.didScroll = this.pagedCiphers.length > this.pageSize;
-    }
-
     async reload(filter: (cipher: CipherView) => boolean = null, deleted: boolean = false) {
         this.loaded = false;
         this.ciphers = [];
         await this.load(filter, deleted);
     }
 
-    async refresh() {
-        try {
-            this.refreshing = true;
-            await this.reload(this.filter, this.deleted);
-        } finally {
-            this.refreshing = false;
-        }
-    }
-
     async applyFilter(filter: (cipher: CipherView) => boolean = null) {
         this.filter = filter;
         await this.search(null);
@@ -82,16 +52,13 @@ export class CiphersComponent {
         if (this.searchTimeout != null) {
             clearTimeout(this.searchTimeout);
         }
-        const deletedFilter: (cipher: CipherView) => boolean = c => c.isDeleted === this.deleted;
         if (timeout == null) {
-            this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], indexedCiphers);
+            this.doSearch(indexedCiphers);
-            await this.resetPaging();
             return;
         }
         this.searchPending = true;
         this.searchTimeout = setTimeout(async () => {
-            this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], indexedCiphers);
+            this.doSearch(indexedCiphers);
-            await this.resetPaging();
             this.searchPending = false;
         }, timeout);
     }
@@ -116,16 +83,9 @@ export class CiphersComponent {
         return !this.searchPending && this.searchService.isSearchable(this.searchText);
     }
 
-    isPaging() {
+    protected deletedFilter: (cipher: CipherView) => boolean = c => c.isDeleted === this.deleted;
-        const searching = this.isSearching();
-        if (searching && this.didScroll) {
-            this.resetPaging();
-        }
-        return !searching && this.ciphers.length > this.pageSize;
-    }
 
-    async resetPaging() {
+    protected async doSearch(indexedCiphers?: CipherView[]) {
-        this.pagedCiphers = [];
+        this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, this.deletedFilter], indexedCiphers);
-        this.loadMore();
     }
 }