Fix/profile not found errors

ui/components.d.ts

@@ -48,6 +48,7 @@ declare module 'vue' {
     Dialogs: typeof import('./src/components/Dialogs.vue')['default']
     EditAgentProfileDialog: typeof import('./src/components/EditAgentProfileDialog.vue')['default']
     FollowersListDialog: typeof import('./src/components/FollowersListDialog.vue')['default']
+    RandomMewWithTagList: typeof import('./src/components/RandomMewWithTagList.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchEverythingDialog: typeof import('./src/components/SearchEverythingDialog.vue')['default']

ui/package.json

@@ -20,9 +20,9 @@
     "@holochain-open-dev/profiles": "^0.16.1",
     "@holochain/client": "^0.15.0",
     "@shoelace-style/shoelace": "^2.4.0",
-    "@tanstack/query-persist-client-core": "^4.33.0",
-    "@tanstack/query-sync-storage-persister": "^4.33.0",
-    "@tanstack/vue-query": "^4.34.0",
+    "@tanstack/query-persist-client-core": "^4.35.0",
+    "@tanstack/query-sync-storage-persister": "^4.35.0",
+    "@tanstack/vue-query": "^4.35.2",
     "@tauri-apps/api": "^1.4.0",
     "async-retry": "^1.3.3",
     "dayjs": "^1.11.7",

ui/src/components/AgentProfileDetail.vue

@@ -1,21 +1,20 @@
 <template>
   <BaseAgentProfileDetail
-    v-if="profileWithContext"
-    :profile="profileWithContext.profile"
+    :profile="profile"
     :agentPubKey="props.agentPubKey"
-    :joined-timestamp="profileWithContext.joinedTimestamp"
+    :joined-timestamp="joinedTimestamp"
     :hide-edit-button="hideEditButton"
     v-bind="$attrs"
   />
 </template>
 
 <script setup lang="ts">
-import { useToasts } from "@/stores/toasts";
 import { AgentPubKey, AppAgentClient } from "@holochain/client";
-import { ComputedRef, inject, watch } from "vue";
+import { ComputedRef, computed, inject, watch } from "vue";
 import { ProfilesStore } from "@holochain-open-dev/profiles";
 import BaseAgentProfileDetail from "@/components/BaseAgentProfileDetail.vue";
 import { useQuery } from "@tanstack/vue-query";
+import { encodeHashToBase64 } from "@holochain/client";
 
 const props = withDefaults(
   defineProps<{
@@ -30,38 +29,49 @@ const props = withDefaults(
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
-const { showError } = useToasts();
+const agentPubKeyB64 = computed(() => encodeHashToBase64(props.agentPubKey));
 
-const fetchProfileWithContext = async () => {
+const fetchProfile = async () => {
   const profile = await profilesStore.client.getAgentProfile(props.agentPubKey);
-  const joinedTimestamp = await client.callZome({
-    role_name: "mewsfeed",
-    zome_name: "profiles",
-    fn_name: "get_joining_timestamp_for_agent",
-    payload: props.agentPubKey,
-  });
-
   if (profile) {
-    return {
-      profile,
-      joinedTimestamp,
-    };
+    return profile;
   } else {
     throw new Error("No profile found");
   }
 };
 
 const {
-  data: profileWithContext,
+  data: profile,
   error: errorProfile,
-  refetch,
+  refetch: refetchProfile,
+} = useQuery({
+  queryKey: ["profiles", "getAgentProfile", agentPubKeyB64],
+  queryFn: fetchProfile,
+  refetchOnMount: true,
+});
+watch(errorProfile, console.error);
+
+const fetchJoinedTimestamp = async () =>
+  client.callZome({
+    role_name: "mewsfeed",
+    zome_name: "profiles",
+    fn_name: "get_joining_timestamp_for_agent",
+    payload: props.agentPubKey,
+  });
+
+const {
+  data: joinedTimestamp,
+  error: errorJoinedTimestamp,
+  refetch: refetchJoinedTimestamp,
 } = useQuery({
-  queryKey: ["profiles", "getAgentProfile", props.agentPubKey],
-  queryFn: fetchProfileWithContext,
+  queryKey: ["profiles", "get_joining_timestamp_for_agent", agentPubKeyB64],
+  queryFn: fetchJoinedTimestamp,
   refetchOnMount: true,
 });
-watch(errorProfile, showError);
+watch(errorJoinedTimestamp, console.error);
+
 watch(props, () => {
-  refetch();
+  refetchProfile();
+  refetchJoinedTimestamp();
 });
 </script>

ui/src/components/BaseAgentProfile.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="flex justify-start items-center space-x-2">
     <agent-avatar
-      v-if="profile"
       :agentPubKey="agentPubKey"
       size="20"
       disable-tooltip

ui/src/components/BaseAgentProfileDetail.vue

@@ -1,14 +1,13 @@
 <template>
   <div
-    v-if="profile"
     class="h-full w-full text-base-content font-content font-normal"
     v-bind="$attrs"
   >
     <div class="flex space-x-6 h-full p-4">
       <div class="flex flex-col justify-between">
         <div
           v-tooltip.bottom="{
-            disabled: !!profile.fields.avatar,
+            disabled: profile && !!profile.fields.avatar,
             content: encodeHashToBase64(agentPubKey),
             popperClass: 'text-xs',
             triggers: ['hover'],
@@ -70,7 +69,7 @@
         </div>
 
         <div
-          v-if="profile.fields.avatar"
+          v-if="profile?.fields.avatar"
           v-tooltip.bottom="{
             content: encodeHashToBase64(agentPubKey),
             popperClass: 'text-xs',
@@ -121,7 +120,7 @@
         </div>
 
         <div
-          v-if="profile.fields[PROFILE_FIELDS.BIO]"
+          v-if="profile?.fields[PROFILE_FIELDS.BIO]"
           class="flex justify-start space-x-2 text-md mb-5"
         >
           {{ profile.fields[PROFILE_FIELDS.BIO] }}
@@ -168,7 +167,7 @@
             class="flex justify-start items-center space-x-2 sm:space-x-16 text-xs mt-3"
           >
             <div
-              v-if="profile.fields[PROFILE_FIELDS.LOCATION]"
+              v-if="profile?.fields[PROFILE_FIELDS.LOCATION]"
               class="flex justify-start items-center space-x-2 text-xs font-mono px-2"
             >
               <IconNavigateCircleOutline />
@@ -187,7 +186,6 @@
       </div>
     </div>
   </div>
-  <BaseAgentProfileDetailSkeleton v-else />
 </template>
 
 <script setup lang="ts">
@@ -206,7 +204,6 @@ import IconNavigateCircleOutline from "~icons/ion/navigate-circle-outline";
 import IconCalendarOutline from "~icons/ion/calendar-outline";
 import IconPencilSharp from "~icons/ion/pencil-sharp";
 import { Timestamp } from "@holochain/client";
-import BaseAgentProfileDetailSkeleton from "@/components/BaseAgentProfileDetailSkeleton.vue";
 import BaseCopyOnClick from "@/components/BaseCopyOnClick.vue";
 import { useLightboxStore } from "@/stores/lightbox";
 

ui/src/components/BaseAgentProfileList.vue

@@ -18,7 +18,8 @@
     :is-loading="loading"
   >
     <BaseAgentProfileListItem
-      :agent-profile="item"
+      :agent-pub-key="item.agentPubKey"
+      :profile="item.profile"
       :enable-popup="enablePopups"
       class="cursor-pointer py-3"
       @click="

ui/src/components/BaseAgentProfileListItem.vue

@@ -1,30 +1,33 @@
 <template>
   <div class="flex justify-start items-center space-x-4">
     <BaseAgentProfileLinkAvatar
-      :agentPubKey="agentProfile.agentPubKey"
+      :agentPubKey="agentPubKey"
       :size="50"
       :enable-popup="enablePopup"
     />
-    <BaseAgentProfileName
+    <BaseAgentProfileNameLarge
       class="text-lg"
-      :profile="agentProfile.profile"
-      :agentPubKey="agentProfile.agentPubKey"
+      :profile="profile"
+      :agentPubKey="agentPubKey"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { AgentProfile } from "@/types/types";
 import BaseAgentProfileLinkAvatar from "@/components/BaseAgentProfileLinkAvatar.vue";
-import BaseAgentProfileName from "@/components/BaseAgentProfileName.vue";
+import BaseAgentProfileNameLarge from "@/components/BaseAgentProfileNameLarge.vue";
+import { AgentPubKey } from "@holochain/client";
+import { Profile } from "@holochain-open-dev/profiles";
 
 withDefaults(
   defineProps<{
-    agentProfile: AgentProfile;
+    agentPubKey: AgentPubKey;
+    profile?: Profile;
     enablePopup?: boolean;
   }>(),
   {
     enablePopup: true,
+    profile: undefined,
   }
 );
 </script>

ui/src/components/BaseAgentProfileNameLarge.vue

@@ -10,7 +10,7 @@
       <div class="font-mono text-sm">@{{ profile.nickname }}</div>
     </div>
     <div v-else class="font-mono">
-      {{ encodeHashToBase64(agentPubKey).slice(0, 8) }}
+      {{ encodeHashToBase64(agentPubKey) }}
     </div>
   </div>
 </template>

ui/src/components/BaseNotification.vue

@@ -24,7 +24,7 @@
       "
       class="flex justify-between items-center py-2 w-full space-x-2"
     >
-      <div class="flex justify-start items-start">
+      <div class="flex justify-start items-start space-x-2">
         <BaseAgentProfileLinkName
           :agentPubKey="notification.agent"
           :profile="notification.agent_profile"