Fix/profile not found errors

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 { 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,56 @@ const props = withDefaults(
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
-const { showError } = useToasts();
 
-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",
+    encodeHashToBase64(props.agentPubKey),
+  ],
+  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",
+    encodeHashToBase64(props.agentPubKey),
+  ],
+  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'],
@@ -59,7 +58,7 @@
         </div>
 
         <div
-          v-if="profile.fields.avatar"
+          v-if="profile?.fields.avatar"
           v-tooltip.bottom="{
             content: encodeHashToBase64(agentPubKey),
             popperClass: 'text-xs',
@@ -110,7 +109,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] }}
@@ -157,7 +156,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 />
@@ -176,7 +175,6 @@
       </div>
     </div>
   </div>
-  <BaseAgentProfileDetailSkeleton v-else />
 </template>
 
 <script setup lang="ts">
@@ -195,7 +193,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";
 
 const props = withDefaults(

ui/src/components/BaseAgentProfileList.vue

@@ -19,7 +19,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
       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 { 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/ButtonFollow.vue

@@ -77,7 +77,7 @@ const {
   ],
   queryFn: fetchMyFollowing,
 });
-watch(errorMyFollowing, showError);
+watch(errorMyFollowing, console.error);
 watch(props, () => {
   refetchMyFollowing();
 });
@@ -90,37 +90,45 @@ const toggleFollow = async () => {
   showCreateProfileDialog.value = false;
 
   try {
-    const [profile] = await Promise.all([
-      profilesStore.client.getAgentProfile(props.agentPubKey),
-      isFollowing.value
-        ? await client.callZome({
-            role_name: "mewsfeed",
-            zome_name: "follows",
-            fn_name: "unfollow",
-            payload: props.agentPubKey,
-          })
-        : await client.callZome({
-            role_name: "mewsfeed",
-            zome_name: "follows",
-            fn_name: "follow",
-            payload: props.agentPubKey,
-          }),
-    ]);
+    isFollowing.value
+      ? await client.callZome({
+          role_name: "mewsfeed",
+          zome_name: "follows",
+          fn_name: "unfollow",
+          payload: props.agentPubKey,
+        })
+      : await client.callZome({
+          role_name: "mewsfeed",
+          zome_name: "follows",
+          fn_name: "follow",
+          payload: props.agentPubKey,
+        });
     await refetchMyFollowing();
     if (isFollowing.value) {
       setHomeRedirect(false);
     }
+    emit("toggle-follow", isFollowing.value);
+    showSuccessMessage();
+  } catch (error) {
+    showError(error);
+  }
+};
 
-    const name = `${profile?.fields[PROFILE_FIELDS.DISPLAY_NAME]} (@${
+const showSuccessMessage = async () => {
+  let name;
+  try {
+    const profile = await profilesStore.client.getAgentProfile(
+      props.agentPubKey
+    );
+    name = `${profile?.fields[PROFILE_FIELDS.DISPLAY_NAME]} (@${
       profile?.nickname
     })`;
-    const message = isFollowing.value
-      ? `Followed ${name}`
-      : `Unfollowed ${name}`;
-    showMessage(message);
-    emit("toggle-follow", isFollowing.value);
   } catch (error) {
-    showError(error);
+    console.error(error);
+    name = encodeHashToBase64(props.agentPubKey);
   }
+
+  const message = isFollowing.value ? `Followed ${name}` : `Unfollowed ${name}`;
+  showMessage(message);
 };
 </script>

ui/src/components/CreatorsListDialog.vue

@@ -79,12 +79,16 @@ const fetchCreators = async (params: any) => {
 
   const agentProfiles = await Promise.all(
     agents.map(async (agentPubKey) => {
-      const profile = await profilesStore.client.getAgentProfile(agentPubKey);
-      if (!profile) return null;
+      let profile;
+      try {
+        profile = await profilesStore.client.getAgentProfile(agentPubKey);
+      } catch (error) {
+        console.error(error);
+      }
 
       return {
         agentPubKey,
-        profile: profile,
+        profile,
       };
     })
   );

ui/src/components/FollowersListDialog.vue

@@ -79,12 +79,16 @@ const fetchCreators = async (params: any) => {
 
   const agentProfiles = await Promise.all(
     agents.map(async (agentPubKey) => {
-      const profile = await profilesStore.client.getAgentProfile(agentPubKey);
-      if (!profile) return null;
+      let profile;
+      try {
+        profile = await profilesStore.client.getAgentProfile(agentPubKey);
+      } catch (error) {
+        console.error(error);
+      }
 
       return {
         agentPubKey,
-        profile: profile,
+        profile,
       };
     })
   );