Move accounts query to a web worker.

.gitignore

@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/tests
 # Only exists if Bazel was run
 /bazel-out
 

angular.json

@@ -37,7 +37,8 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/bootstrap/dist/js/bootstrap.js"
-            ]
+            ],
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "production": {
@@ -126,7 +127,8 @@
             "tsConfig": [
               "tsconfig.app.json",
               "tsconfig.spec.json",
-              "e2e/tsconfig.json"
+              "e2e/tsconfig.json",
+              "tsconfig.worker.json"
             ],
             "exclude": [
               "**/node_modules/**"

src/app/_services/auth.service.ts

@@ -48,7 +48,7 @@ export class AuthService {
   }
 
   getWithToken(): Promise<boolean> {
-    const sessionToken = this.getSessionToken()
+    const sessionToken = this.getSessionToken();
     const headers = {
       Authorization: 'Bearer ' + sessionToken,
       'Content-Type': 'application/json;charset=utf-8',
@@ -104,8 +104,7 @@ export class AuthService {
       this.mutableKeyStore
     );
 
-    const tokenResponse = await this.sendSignedChallenge(r)
-      .then((response) => {
+    const tokenResponse = await this.sendSignedChallenge(r).then((response) => {
       const token = response.headers.get('Token');
       if (token) {
         return token;

src/app/_services/user.service.ts

@@ -204,18 +204,27 @@ export class UserService {
 
   async loadAccounts(limit: number = 100, offset: number = 0): Promise<void> {
     this.resetAccountsList();
-    // const accountIndexAddress: string = await this.registry.getContractAddressByName(
-    //  'AccountRegistry'
-    // );
-    // const accountIndexQuery = new AccountIndex(accountIndexAddress);
-    // const accountAddresses: Array<string> = await accountIndexQuery.last(limit);
     try {
       const accountRegistry = await RegistryService.getAccountRegistry();
-      const accountAddresses: Array<string> = await accountRegistry.last(limit);
+      const accountAddresses: Array<string> = await accountRegistry.last(offset + limit);
       this.loggingService.sendInfoLevelMessage(accountAddresses);
+      if (typeof Worker !== 'undefined') {
+        const worker = new Worker('@app/_workers/fetch-accounts.worker', { type: 'module' });
+        worker.onmessage = ({ data }) => {
+          this.addAccount(data, limit);
+        };
+        worker.postMessage({
+          addresses: accountAddresses.slice(offset, offset + limit),
+          url: environment.cicMetaUrl,
+        });
+      } else {
+        this.loggingService.sendInfoLevelMessage(
+          'Web workers are not supported in this environment'
+        );
         for (const accountAddress of accountAddresses.slice(offset, offset + limit)) {
           await this.getAccountByAddress(accountAddress, limit);
         }
+      }
     } catch (error) {
       this.loggingService.sendErrorLevelMessage('Unable to load accounts.', 'user.service', error);
       throw error;

src/app/_workers/fetch-accounts.worker.ts

@@ -0,0 +1,44 @@
+/// <reference lib="webworker" />
+
+import { Envelope, Syncable, User } from 'cic-client-meta';
+import { add0x } from '@src/assets/js/ethtx/dist/hex';
+import { personValidation, vcardValidation } from '@app/_helpers/schema-validation';
+// const vCard = require('vcard-parser');
+import * as vCard from 'vcard-parser';
+
+const headers = {
+  'x-cic-automerge': 'client',
+};
+const options = {
+  headers,
+};
+
+addEventListener('message', async ({ data }) => {
+  if (data.addresses instanceof Array) {
+    for (const accountAddress of data.addresses) {
+      const account = await getAccountByAddress(accountAddress, data.url);
+      postMessage(account);
+    }
+  }
+});
+
+async function getAccountByAddress(accountAddress: string, metaUrl: string): Promise<any> {
+  const userKey = await User.toKey(add0x(accountAddress));
+  return new Promise((resolve, reject) => {
+    fetch(`${metaUrl}/${userKey}`, options).then(async (response) => {
+      if (!response.ok) {
+        return reject({
+          status: response.status,
+          statusText: response.statusText,
+        });
+      } else {
+        const account: Syncable = Envelope.fromJSON(JSON.stringify(response.text())).unwrap();
+        const accountInfo = account.m.data;
+        await personValidation(accountInfo);
+        accountInfo.vcard = vCard.parse(atob(accountInfo.vcard));
+        await vcardValidation(accountInfo.vcard);
+        return resolve(accountInfo);
+      }
+    });
+  });
+}

src/app/auth/auth.component.ts

@@ -58,7 +58,7 @@ export class AuthComponent implements OnInit {
       }
     } catch (HttpError) {
       this.errorDialogService.openDialog({
-        message: "Failed to login please try again.",
+        message: 'Failed to login please try again.',
       });
     }
   }

tsconfig.worker.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/worker",
+    "lib": [
+      "es2018",
+      "webworker"
+    ],
+    "types": []
+  },
+  "include": [
+    "src/**/*.worker.ts"
+  ]
+}