Merge pull request #33 from mattyg/fix/edit-agent-profile-not-reactive

AgentProfile component fixes
mattyg · Mar 26, 2023 · 9fa37f1 · 9fa37f1
2 parents ebcb876 + 014a8ce
commit 9fa37f1
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 38 deletions.
diff --git a/ui/src/components/HomeNavbar.vue b/ui/src/components/HomeNavbar.vue
@@ -54,7 +54,7 @@
             class="dropdown-content menu z-40 bg-base-200 text-base-content shadow-md"
           >
             <li>
-              <RouterLink :to="`/agents/${myPubKeyBase64}`">
+              <RouterLink :to="`/my-agent`">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"

diff --git a/ui/src/herd/profiles/AgentProfile.vue b/ui/src/herd/profiles/AgentProfile.vue
@@ -24,13 +24,22 @@
     <div
       v-if="hoverForDetails"
       v-show="showDetails"
-      class="absolute z-30 bg-neutral text-neutral-content p-4 rounded-md flex flex-col justify-center min-w-64 max-w-92 break-words"
+      class="absolute z-30 bg-neutral text-neutral-content p-4 rounded-md flex flex-col justify-center break-words max-w-md"
     >
       <profile-detail
+        class="min-w-[15rem]"
         style="color: hsl(var(--nc)); --sl-input-help-text-color: hsl(var(--nc)); --sl-input-label-color: hsl(var(--nc));"
         :agentPubKey="agentPubKey"
       />
       <RouterLink
+        v-if="isMyAgent"
+        to="/my-agent"
+        class="btn btn-ghost btn-sm mt-4 f"
+      >
+        More
+      </RouterLink>
+      <RouterLink
+        v-else
         :to="`/agents/${agentPubKeyString}`"
         class="btn btn-ghost btn-sm mt-4 f"
       >
@@ -42,10 +51,9 @@
 
 <script lang="ts" setup>
 import { Profile, ProfilesStore } from '@holochain-open-dev/profiles';
-import { encodeHashToBase64 } from '@holochain/client';
-import { ref, ComputedRef, inject, computed, watch } from 'vue'
-import { useRequest } from 'vue-request';
-import { toast } from 'vue3-toastify';
+import { AppAgentWebsocket, encodeHashToBase64 } from '@holochain/client';
+import { isEqual } from 'lodash';
+import { ref, ComputedRef, inject, computed, onUnmounted } from 'vue'
 
 const props = withDefaults(defineProps<{
   agentPubKey: Uint8Array,
@@ -57,24 +65,24 @@ const props = withDefaults(defineProps<{
   muted: false,
   hoverForDetails: true
 });
-
+const client = (inject('client') as ComputedRef<AppAgentWebsocket>).value;
 const profilesStore = (inject('profilesStore') as ComputedRef<ProfilesStore>).value;
+
 const showDetails = ref(false);
+const profile = ref<Profile>();
 
 const agentPubKeyString = computed(() => {
   return encodeHashToBase64(props.agentPubKey);
 });
 
-const getAgentProfile = async (): Promise<undefined | Profile> => {
-  const res = await profilesStore.client.getAgentProfile(props.agentPubKey);
-  return res;
-};
+const isMyAgent = computed(() => {
+  return isEqual(props.agentPubKey, client.myPubKey);
+});
 
-const { data: profile, run: runGetAgentProfile } = useRequest(getAgentProfile, {
-  onError: (e: any) => {
-    toast.error(`Error getting agent profile ${e.data.data}`);
+const unsubscribe = profilesStore.profiles.get(props.agentPubKey).subscribe((res) => {
+  if(res.status === 'complete') {
+    profile.value = res.value;
   }
 });
-
-watch(props, runGetAgentProfile);
+onUnmounted(unsubscribe);
 </script>
diff --git a/ui/src/herd/profiles/AgentProfileDetail.vue b/ui/src/herd/profiles/AgentProfileDetail.vue
@@ -4,43 +4,25 @@
     style="color: hsl(var(--bc)); --sl-input-help-text-color: hsl(var(--bc)); --sl-input-label-color: hsl(var(--bc));"
   >
     <div
-      v-if="isMyAgent"
-      class="w-full h-full flex justify-center items-center max-w-screen-md"
-    >
-      <my-profile
-        class="p-8 bg-base-200 text-base-content "
-        style="color: hsl(var(--bc)) !important; --sl-input-help-text-color: hsl(var(--bc)); --sl-input-label-color: hsl(var(--bc));"
-      />
-    </div>
-    <div
-      v-else
-      class="w-full h-full flex justify-center items-center max-w-screen-md"
+      class="w-full h-full flex justify-center items-center max-w-md"
     >
       <profile-detail
         :agentPubKey="agentPubKey"
-        class="p-8 bg-neutral text-neutral-content "
+        class="p-8 bg-base-200 text-base-content min-w-[15rem]"
         style="color: hsl(var(--bc)) !important; --sl-input-help-text-color: hsl(var(--bc)); --sl-input-label-color: hsl(var(--bc));"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, inject, computed } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router';
-import { isEqual} from 'lodash';
-import { AppAgentClient, decodeHashFromBase64 } from '@holochain/client';
+import { decodeHashFromBase64 } from '@holochain/client';
 
 const route = useRoute();
-const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
 const agentPubKey = computed(() => {
-  if(!route.params.agentPubKeyString) return;
   return decodeHashFromBase64(route.params.agentPubKeyString as string);
 });
-
-const isMyAgent = computed(() => {
-  if(!agentPubKey.value) return;
-  return isEqual(client.myPubKey, agentPubKey.value);
-});
 </script>
diff --git a/ui/src/herd/profiles/MyAgentProfileDetail.vue b/ui/src/herd/profiles/MyAgentProfileDetail.vue
@@ -0,0 +1,18 @@
+<template>      
+  <div
+    class="w-full min-h-screen flex justify-center bg-base-100"
+    style="color: hsl(var(--bc)); --sl-input-help-text-color: hsl(var(--bc)); --sl-input-label-color: hsl(var(--bc));"
+  >
+    <div
+      class="w-full h-full flex justify-center items-center max-w-md"
+    >
+      <my-profile
+        class="p-8 bg-base-200 text-base-content w-fit min-w-[15rem]"
+        style="color: hsl(var(--bc)) !important; --sl-input-help-text-color: hsl(var(--bc)); --sl-input-label-color: hsl(var(--bc));"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
diff --git a/ui/src/routes.ts b/ui/src/routes.ts
@@ -5,6 +5,7 @@ import CreateHerd from './herd/herds/CreateHerd.vue';
 import WateringHole from './herd/herds/WateringHole.vue';
 import HerdDetail from './herd/herds/HerdDetail.vue';
 import AgentProfileDetail from './herd/profiles/AgentProfileDetail.vue';
+import MyAgentProfileDetail from './herd/profiles/MyAgentProfileDetail.vue';
 
 const herd_routes = [
   { path: '', component: AllPosts },
@@ -15,6 +16,7 @@ const herd_routes = [
 export default [
   { path: '', component: WateringHole },
   { path: '/agents/:agentPubKeyString', component: AgentProfileDetail },
+  { path: '/my-agent', component: MyAgentProfileDetail },
   { path: '/herds/create', component: CreateHerd },
   { path: '/herds/private/:password', component: HerdDetail, children: herd_routes },
   { path: '/herds/:listingHashString', component: HerdDetail, children: herd_routes },