feat: fix AgentProfileDetail page, display profile details on hover, …

…refactor App to use profile-prompt
mattyg · Feb 18, 2023 · 4d1a62b · 4d1a62b
1 parent 4c89c7f
commit 4d1a62b
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 41 deletions.
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
@@ -18,6 +18,7 @@ module.exports = {
     'vue'
   ],
   rules: {
+    'vue/attribute-hyphenation': 'off'
   },
   root: true
 }
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -16,19 +16,14 @@
     <profiles-context :store="profilesStore">
       <HomeNavbar :profile="profile" />
 
-      <div
-        v-if="!profile"
-        class="min-h-screen  w-full flex justify-center items-center"
-      >
-        <create-profile @profile-created="createProfile" />
-      </div>
-      <div
-        v-else
-        class="min-h-screen w-full"
+      <profile-prompt
+        :class="{'min-h-screen w-full flex justify-center items-center': !profile, 
+                 'min-h-screen w-full': profile}"
+        @profile-created="createProfile"
       >
         <RouterView />
-      </div>
-
+      </profile-prompt>
+      
       <footer class="footer p-10 bg-neutral text-neutral-content">
         <div>
           <div class="text-4xl font-bold">
@@ -114,15 +109,16 @@ export default defineComponent({
   async mounted() {    
     try {
       // Setup conductor websocket
-      this.client = await AppAgentWebsocket.connect('', 'herddit', 12000);
+      const client = await AppAgentWebsocket.connect('', 'herddit', 15000);
 
       // Setup profiles store
-      const profilesClient = new ProfilesClient(this.client, 'directory', 'profiles');
+      const profilesClient = new ProfilesClient(client, 'directory', 'profiles');
       this.profilesStore = new ProfilesStore(profilesClient, {
         avatarMode: "avatar-required",
         additionalFields: ["Bio", "Location", "Website"],
       });
-      
+      this.client = client;
+
       await this.setProfile();
 
       this.profilesStore.myProfile.subscribe((data) => {
@@ -131,9 +127,9 @@ export default defineComponent({
           this.profile = data.value;
         }
       });
-      } catch (e: any) {
-        toast.error("Error setting up conductor websocket")
-      }
+    } catch (e: any) {
+      toast.error("Error setting up conductor websocket", e)
+    }
 
     this.loading = false;
   },

diff --git a/ui/src/components/HomeNavbar.vue b/ui/src/components/HomeNavbar.vue
@@ -10,7 +10,7 @@
     </div>
     <div>
       <div
-        v-if="profile === undefined"
+        v-if="!profile"
         class="mx-4 text-2xl font-bold "
       >
         find your herd
@@ -29,7 +29,8 @@
         <li tabIndex="{0}">
           <div class="flex flex-row justify-center">
             <AgentProfile
-              :agent-pub-key="client.myPubKey"
+              :agentPubKey="client.myPubKey"
+              :hoverForDetails="false"
               size="lg"
             />
             <svg
@@ -41,8 +42,11 @@
             ><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
           </div>
           <ul class="p-2 bg-base-100 z-40 w-full bg-base-200 text-base-content">
-            <!-- TODO waiting on fix to profiles components-->
-            <!-- <li><RouterLink :to="`/agents/${client.myPubKey}`">Edit Profile</RouterLink></li> -->
+            <li>
+              <RouterLink :to="`/agents/${myPubKeyBase64}`">
+                Edit Profile
+              </RouterLink>
+            </li>
 
             <li><label htmlFor="join-herd-modal">Join Secret Herd</label></li>
           </ul>
@@ -53,9 +57,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ComputedRef, inject, PropType } from 'vue';
-import { AppAgentClient } from '@holochain/client';
-import { Profile } from "@holochain-open-dev/profiles";
+import { defineComponent, ComputedRef, inject, PropType, toRaw } from 'vue';
+import { AppAgentClient, encodeHashToBase64 } from '@holochain/client';
+import { Profile, ProfilesStore } from "@holochain-open-dev/profiles";
 import AgentProfile from '../herd/profiles/AgentProfile.vue';
 
 export default defineComponent({
@@ -71,10 +75,19 @@ export default defineComponent({
   },
   setup() {
     const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+    const profilesStore = (inject('profilesStore') as ComputedRef<ProfilesStore>).value;
     return {
       client,
+      profilesStore,
     };
   },
+  computed: {
+    myPubKeyBase64() {
+      if(!this.client?.myPubKey) return;
+      
+      return encodeHashToBase64(this.client.myPubKey);
+    },
+  },
 });
 </script>
 

diff --git a/ui/src/herd/profiles/AgentProfile.vue b/ui/src/herd/profiles/AgentProfile.vue
@@ -1,12 +1,13 @@
 <template>
   <div
     v-if="profile"
-    class="inline-block"
-    :class="{'opacity-60': muted}"
+    class="relative"
+    @mouseenter="() => { detailsVisible = true; }"
+    @mouseleave="() => { detailsVisible = false; }"
   >
     <div 
       class="flex flex-row items-center" 
-      :class="{'space-x-3': size === 'lg', 'space-x-2': size === 'md' || size === 'sm'}"
+      :class="{'space-x-3': size === 'lg', 'space-x-2': size === 'md' || size === 'sm', 'opacity-60': muted}"
     >
       <img 
         class="rounded-full" 
@@ -18,14 +19,29 @@
       >
         {{ profile.nickname }}
       </div>
-      <slot />
+    </div>
+
+    <div
+      v-if="hoverForDetails"
+      v-show="detailsVisible"
+      class="absolute z-30 bg-gray-200 p-4 rounded-md flex flex-col justify-center w-96"
+    >
+      <profile-detail
+        :agentPubKey="agentPubKey"
+      />
+      <RouterLink
+        :to="`/agents/${agentPubKeyString}`"
+        class="btn btn-ghost btn-sm mt-4 f"
+      >
+        More
+      </RouterLink>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Profile, ProfilesStore } from '@holochain-open-dev/profiles';
-import { AppAgentClient } from '@holochain/client';
+import { AppAgentClient, encodeHashToBase64 } from '@holochain/client';
 import { ComputedRef, defineComponent, inject, PropType } from 'vue'
 import { toast } from 'vue3-toastify';
 
@@ -42,6 +58,10 @@ export default defineComponent({
     muted: {
       type: Boolean,
       default: false
+    },
+    hoverForDetails: {
+      type: Boolean,
+      default: true
     }
   },
   setup() {
@@ -52,9 +72,15 @@ export default defineComponent({
       profilesStore
     };
   },
-  data() : { profile?: Profile } {
+  data() : { profile?: Profile; detailsVisible: boolean } {
     return {
       profile: undefined,
+      detailsVisible: false,
+    }
+  },
+  computed: {
+    agentPubKeyString() {
+      return encodeHashToBase64(this.agentPubKey);
     }
   },
   async mounted() {

diff --git a/ui/src/herd/profiles/AgentProfileDetail.vue b/ui/src/herd/profiles/AgentProfileDetail.vue
@@ -1,9 +1,16 @@
 <template>
-  <div>
-    <profile-detail :agent-pub-key="$route.params.agentPubKey" />
-
-    <div v-if="isAgent">
-      <update-profile />
+  <div class="w-full min-h-screen flex justify-center">
+    <div
+      v-if="isMyAgent"
+      class="w-full h-full flex justify-center items-center max-w-screen-md"
+    >
+      <my-profile />
+    </div>
+    <div
+      v-else
+      class="w-full h-full flex justify-center items-center max-w-screen-md"
+    >
+      <profile-detail :agentPubKey="agentPubKey" />
     </div>
   </div>
 </template>
@@ -12,7 +19,7 @@
 import { ComputedRef, defineComponent, inject } from 'vue'
 import { isEqual} from 'lodash';
 import { ProfilesStore } from '@holochain-open-dev/profiles';
-import { AppAgentClient } from '@holochain/client';
+import { AppAgentClient, decodeHashFromBase64 } from '@holochain/client';
 
 export default defineComponent({
   setup() {
@@ -24,13 +31,19 @@ export default defineComponent({
     };
   },
   computed: {
-    isAgent() {
-      return isEqual(this.client.myPubKey, this.$route.params.agentPubKey);
+    isMyAgent() {
+      if(!this.agentPubKey) return;
+
+      return isEqual(this.client.myPubKey, this.agentPubKey);
+    },
+    agentPubKey() {
+      if(!this.$route.params.agentPubKeyString) return;
+
+      return decodeHashFromBase64(this.$route.params.agentPubKeyString as string);
     }
   },
   mounted() {
-    console.log('agent pub key', this.$route.params.agentPubKey);
-
+    console.log('agentPubKeyString', this.$route.params.agentPubKeyString)
   },
 })
 </script>

diff --git a/ui/src/main.ts b/ui/src/main.ts
@@ -43,7 +43,7 @@ const herd_routes = [
 ];
 const routes = [
     { path: '', component: WateringHole },
-    { path: '/agents/:agentPubKey', component: AgentProfileDetail },
+    { path: '/agents/:agentPubKeyString', component: AgentProfileDetail },
     { path: '/herds/create', component: CreateHerd },
     { path: '/herds/private/:password', component: HerdDetail, children: herd_routes },
     { path: '/herds/:listingHashString', component: HerdDetail, children: herd_routes },