State for my keys

ui/package.json

@@ -22,6 +22,7 @@
     "@msgpack/msgpack": "^2.7.2",
     "@vaadin/date-time-picker": "^23.2.8",
     "openpgp": "^5.11.0",
+    "pinia": "^2.1.7",
     "vue": "^3.2.25"
   },
   "devDependencies": {

ui/src/main.ts

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import { createPinia } from 'pinia'
 
-createApp(App).mount('#app')
+const pinia = createPinia()
+const app = createApp(App)
+
+app.use(pinia)
+app.mount('#app')

ui/src/store/my-keys-store.ts

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import { ComputedRef, inject, ref, watch } from "vue";
+import { GpgKeyDist } from "../trusted/trusted/types";
+import { AppAgentClient, Record } from "@holochain/client";
+import { decode } from '@msgpack/msgpack';
+
+export const useMyKeysStore = defineStore('my-keys', () => {
+    const myKeys = ref<GpgKeyDist[]>([]);
+
+    const insertRecord = (record: Record) => {
+        myKeys.value.push(decode((record.entry as any).Present.entry) as GpgKeyDist);
+    }
+
+    const insertKey = (key: GpgKeyDist) => {
+        myKeys.value.push(key);
+    }
+
+    const client = inject('client') as ComputedRef<AppAgentClient>;
+    const loadKeys = async (client: AppAgentClient) => {
+        const r: Record[] = await client.callZome({
+            role_name: 'trusted',
+            zome_name: 'trusted',
+            fn_name: 'get_my_keys',
+            payload: null,
+            cap_secret: null,
+        });
+
+        myKeys.value = [...r.map((record) => {
+            return decode((record.entry as any).Present.entry) as GpgKeyDist
+        }), ...myKeys.value]
+    }
+
+    watch(client, (client) => {
+        loadKeys(client)
+    }, { immediate: true })
+
+    return {
+        myKeys,
+        insertRecord,
+        insertKey,
+    }
+})

ui/src/trusted/trusted/CreateGpgKey.vue

@@ -24,19 +24,22 @@ import '@material/mwc-snackbar';
 import { Snackbar } from '@material/mwc-snackbar';
 import '@material/mwc-textarea';
 import { readKey } from 'openpgp'
+import { useMyKeysStore } from '../../store/my-keys-store';
 
 export default defineComponent({
   data(): {
     fingerprint: string;
     expirationDate: Date | null;
     selectedKey: string;
     creating: boolean;
+    myKeysStore: any;
   } {
     return {
       fingerprint: '',
       expirationDate: null,
       selectedKey: '',
       creating: false,
+      myKeysStore: useMyKeysStore(),
     }
   },
   computed: {
@@ -103,6 +106,8 @@ export default defineComponent({
         });
         this.$emit('gpg-key-dist-created', record.signed_action.hashed.hash);
 
+        this.myKeysStore.insertRecord(record);
+
         this.fingerprint = '';
         this.expirationDate = null;
         this.selectedKey = '';
@@ -113,7 +118,7 @@ export default defineComponent({
         }
       } catch (e: any) {
         const errorSnackbar = this.$refs['create-error'] as Snackbar;
-        errorSnackbar.labelText = `Error creating the gpg key: ${e.data}`;
+        errorSnackbar.labelText = `Error creating the gpg key: ${e}`;
         errorSnackbar.show();
       } finally {
         this.creating = false;

ui/src/trusted/trusted/MyKeys.vue

@@ -1,49 +1,15 @@
 <script setup lang="ts">
-import { AppAgentClient, EntryContent, Record } from '@holochain/client';
-import { decode } from '@msgpack/msgpack';
-import { ComputedRef, inject, ref, watch } from 'vue';
-import { GpgKeyDist } from './types';
-import { Snackbar } from '@material/mwc-snackbar';
+import { useMyKeysStore } from '../../store/my-keys-store';
 
-const client = inject('client') as ComputedRef<AppAgentClient>
-const records = ref<GpgKeyDist[]>([])
-const fetchError = ref<HTMLElement | null>(null)
-
-const fetch = async () => {
-    try {
-        console.log('making fetch');
-        const r: Record[] = await client.value.callZome({
-            role_name: 'trusted',
-            zome_name: 'trusted',
-            fn_name: 'get_my_keys',
-            payload: null,
-            cap_secret: null,
-        });
-
-        records.value = r.map((record) => {
-            return decode((record.entry as any).Present.entry) as GpgKeyDist
-        })
-    } catch (e: any) {
-        const errorSnackbar = fetchError.value as Snackbar;
-        errorSnackbar.labelText = `Error loading my keys: ${e.data}`;
-        errorSnackbar.show();
-    }
-}
-
-watch(client, async (client) => {
-    if (client) {
-        console.log('got client')
-        fetch()
-    }
-}, { immediate: true })
+const myKeysStore = useMyKeysStore()
 
 </script>
 
 <template>
     <mwc-snackbar ref="fetchError"></mwc-snackbar>
     <div>
         <h1>My Keys</h1>
-        <div v-for="record in records" :key="record.fingerprint">
+        <div v-for="record in myKeysStore.myKeys" :key="record.fingerprint">
             <div>{{ record.fingerprint }}</div>
             <div>{{ record.user_id }}</div>
         </div>