Polish UI

.hc

@@ -0,0 +1,2 @@
+/tmp/nix-shell.ayRWOt/FX-qP-RtAib9erAFX4HMu
+/tmp/nix-shell.ayRWOt/t_hrYaC6K-Zm4ZoViJZOY

tests/src/cancellation.test.ts

@@ -1,9 +1,9 @@
 import { assert, test } from 'vitest';
 
 import { runScenario, dhtSync } from '@holochain/tryorama';
-import { ActionHash, Record } from '@holochain/client';
+import { ActionHash, Record, fakeActionHash } from '@holochain/client';
 import { decode } from '@msgpack/msgpack';
-import { EntryRecord, fakeActionHash } from '@holochain-open-dev/utils';
+import { EntryRecord } from '@holochain-open-dev/utils';
 import { cleanNodeDecoding } from '@holochain-open-dev/utils/dist/clean-node-decoding.js';
 import { toPromise } from '@holochain-open-dev/stores';
 
@@ -18,7 +18,7 @@ test('create Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
@@ -34,7 +34,7 @@ test('create and read Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
@@ -57,7 +57,7 @@ test('create and update Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
@@ -106,7 +106,7 @@ test('create and delete Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);

ui/demo/index.html

@@ -69,33 +69,56 @@
         }
 
         async initStores(appAgentClient) {
-          const profilesStore = new ProfilesStore(
+          this.profilesStore = new ProfilesStore(
             new ProfilesClient(appAgentClient, 'cancellations_test')
           );
-          new ContextProvider(this, profilesStoreContext, profilesStore);
+          new ContextProvider(this, profilesStoreContext, this.profilesStore);
 
           this._cancellationsStore = new CancellationsStore(
             new CancellationsClient(appAgentClient, 'cancellations_test')
           );
+
+          await this.loadProfileActionHash();
         }
 
         renderContent() {
+          if (!this.profileHash) return html``;
           return html`
             <cancellations-context .store=${this._cancellationsStore}>
               <create-cancellation-dialog
+                label="Cancel profile"
+                warning="You sure sure about this?"
                 .cancelledHash=${this.profileHash}
               ></create-cancellation-dialog>
               <sl-button
                 @click=${() =>
-                  this.querySelector('create-cancellation-dialog').show()}
-              ></sl-button>
+                  this.shadowRoot
+                    .querySelector('create-cancellation-dialog')
+                    .show()}
+                >Cancel</sl-button
+              >
               <cancellations-for
+                label="Event was cancelled"
                 .cancelledHash=${this.profileHash}
               ></cancellations-for>
             </cancellations-context>
           `;
         }
 
+        async loadProfileActionHash() {
+          const agents = await this.profilesStore.client.callZome(
+            'get_agents_with_profile',
+            undefined
+          );
+          const p = await this.profilesStore.client.callZome(
+            'get_agent_profile',
+            agents[0]
+          );
+
+          this.profileHash = p?.signed_action.hashed.hash;
+          this.requestUpdate();
+        }
+
         render() {
           if (this._loading)
             return html`<div
@@ -109,9 +132,7 @@
             <div class="fill row" style="width: 100vw; height: 100%;">
               <profile-prompt
                 style="flex: 1;"
-                @profile-created=${e => {
-                  this.profileHash = e.detail.profileHash;
-                }}
+                @profile-created=${() => this.loadProfileActionHash()}
               >
                 ${this.renderContent()}
               </profile-prompt>

ui/package.json

@@ -24,11 +24,11 @@
     "./locales/*": "./locales/*"
   },
   "dependencies": {
-    "@holochain/client": "^0.15.0",
-    "@holochain-open-dev/elements": "^0.4.0",
-    "@holochain-open-dev/profiles": "=0.13.1",
-    "@holochain-open-dev/stores": "^0.4.2",
-    "@holochain-open-dev/utils": "^0.13.0",
+    "@holochain/client": "^0.16.0",
+    "@holochain-open-dev/elements": "^0.7.0",
+    "@holochain-open-dev/profiles": "^0.16.1",
+    "@holochain-open-dev/stores": "^0.7.2",
+    "@holochain-open-dev/utils": "^0.15.0",
     "@lit-labs/context": "^0.2.0",
     "@lit/localize": "^0.11.4",
     "@mdi/js": "^7.2.0",

ui/src/cancellations-store.ts

@@ -10,6 +10,11 @@ import {
 
 import { CancellationsClient } from './cancellations-client.js';
 
+export function throwIfUndefined<T>(object: T | undefined): T {
+  if (object === undefined || object === null) throw new Error('Not found');
+  return object;
+}
+
 export class CancellationsStore {
   constructor(public client: CancellationsClient) {}
 
@@ -21,9 +26,9 @@ export class CancellationsStore {
   );
 
   cancellations = new LazyHoloHashMap((cancelledHash: ActionHash) =>
-    lazyLoadAndPoll(
-      async () => this.client.getCancellation(cancelledHash),
-      4000
-    )
+    lazyLoadAndPoll(async () => {
+      const c = await this.client.getCancellation(cancelledHash);
+      return throwIfUndefined(c);
+    }, 4000)
   );
 }