first chrome implementation

projects/chrome/src/app/components/edit-identity/relays/relays.component.ts

@@ -0,0 +1,131 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import {
+  IconButtonComponent,
+  Identity_DECRYPTED,
+  NavComponent,
+  Relay_DECRYPTED,
+  RelayRwComponent,
+  StorageService,
+  VisualRelayPipe,
+} from '@common';
+
+interface NewRelay {
+  url: string;
+  read: boolean;
+  write: boolean;
+};
+
+@Component({
+  selector: 'app-relays',
+  imports: [
+    IconButtonComponent,
+    FormsModule,
+    RelayRwComponent,
+    NgTemplateOutlet,
+    VisualRelayPipe,
+  ],
+  templateUrl: './relays.component.html',
+  styleUrl: './relays.component.scss',
+})
+export class RelaysComponent extends NavComponent implements OnInit {
+  identity?: Identity_DECRYPTED;
+  relays: Relay_DECRYPTED[] = [];
+  addRelayInputHasFocus = false;
+  newRelay: NewRelay = {
+    url: '',
+    read: true,
+    write: true,
+  };
+  canAdd = false;
+
+  readonly #activatedRoute = inject(ActivatedRoute);
+  readonly #storage = inject(StorageService);
+
+  ngOnInit(): void {
+    const selectedIdentityId =
+      this.#activatedRoute.parent?.snapshot.params['id'];
+    if (!selectedIdentityId) {
+      return;
+    }
+
+    this.#loadData(selectedIdentityId);
+  }
+
+  evaluateCanAdd() {
+    let canAdd = true;
+
+    if (!this.newRelay.url) {
+      canAdd = false;
+    } else if (!this.newRelay.read && !this.newRelay.write) {
+      canAdd = false;
+    }
+
+    this.canAdd = canAdd;
+  }
+
+  async onClickRemoveRelay(relay: Relay_DECRYPTED) {
+    if (!this.identity) {
+      return;
+    }
+
+    try {
+      await this.#storage.deleteRelay(relay.id);
+      this.#loadData(this.identity.id);
+    } catch (error) {
+      console.log(error);
+      // TODO
+    }
+  }
+
+  async onClickAddRelay() {
+    if (!this.identity) {
+      return;
+    }
+
+    try {
+      await this.#storage.addRelay({
+        identityId: this.identity.id,
+        url: 'wss://' + this.newRelay.url.toLowerCase(),
+        read: this.newRelay.read,
+        write: this.newRelay.write,
+      });
+
+      this.newRelay = {
+        url: '',
+        read: true,
+        write: true,
+      };
+      this.evaluateCanAdd();
+      this.#loadData(this.identity.id);
+    } catch (error) {
+      console.log(error);
+      // TODO
+    }
+  }
+
+  async onRelayChanged(relay: Relay_DECRYPTED) {
+    try {
+      await this.#storage.updateRelay(relay);
+    } catch (error) {
+      console.log(error);
+      // TODO
+    }
+  }
+
+  #loadData(identityId: string) {
+    this.identity = this.#storage
+      .getBrowserSessionHandler()
+      .browserSessionData?.identities.find((x) => x.id === identityId);
+
+    const relays: Relay_DECRYPTED[] = [];
+    (this.#storage.getBrowserSessionHandler().browserSessionData?.relays ?? [])
+      .filter((x) => x.identityId === identityId)
+      .forEach((x) => {
+        relays.push(JSON.parse(JSON.stringify(x)));
+      });
+    this.relays = relays;
+  }
+}