From 83d2b69bbcece37580d7902a5dd10ef8faf60110 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 16:46:10 -0700
Subject: [PATCH 01/20] fix(ui): use console.error instead of toast for 2
 passive errors

---
 ui/src/components/AgentProfileDetail.vue | 2 +-
 ui/src/components/ButtonFollow.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/AgentProfileDetail.vue b/ui/src/components/AgentProfileDetail.vue
index 620a84d6..a92558cb 100644
--- a/ui/src/components/AgentProfileDetail.vue
+++ b/ui/src/components/AgentProfileDetail.vue
@@ -60,7 +60,7 @@ const {
   queryFn: fetchProfileWithContext,
   refetchOnMount: true,
 });
-watch(errorProfile, showError);
+watch(errorProfile, console.error);
 watch(props, () => {
   refetch();
 });
diff --git a/ui/src/components/ButtonFollow.vue b/ui/src/components/ButtonFollow.vue
index 7f7f86aa..56ddae78 100644
--- a/ui/src/components/ButtonFollow.vue
+++ b/ui/src/components/ButtonFollow.vue
@@ -77,7 +77,7 @@ const {
   ],
   queryFn: fetchMyFollowing,
 });
-watch(errorMyFollowing, showError);
+watch(errorMyFollowing, console.error);
 watch(props, () => {
   refetchMyFollowing();
 });

From c4cc6727a4cfe3089ff5f88b15ce1b8d05255edc Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 16:47:17 -0700
Subject: [PATCH 02/20] fix(ui): follow users without profile data

---
 ui/src/components/BaseAgentProfile.vue |  1 -
 ui/src/components/ButtonFollow.vue     | 54 +++++++++++++++-----------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/BaseAgentProfile.vue b/ui/src/components/BaseAgentProfile.vue
index 81b90a2e..82bcade3 100644
--- a/ui/src/components/BaseAgentProfile.vue
+++ b/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
diff --git a/ui/src/components/ButtonFollow.vue b/ui/src/components/ButtonFollow.vue
index 56ddae78..3f7329a8 100644
--- a/ui/src/components/ButtonFollow.vue
+++ b/ui/src/components/ButtonFollow.vue
@@ -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>

From 400efb945305b4a14718cbc53ee957566d76c30f Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 16:49:04 -0700
Subject: [PATCH 03/20] chore(ui): remove unused callZomes from profile

---
 ui/src/pages/AgentProfile.vue | 88 ++---------------------------------
 1 file changed, 4 insertions(+), 84 deletions(-)

diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index 782a333f..83f3fdb3 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -13,13 +13,14 @@
         @click-edit-profile="showEditProfileDialog = true"
         @click-followers="
           () => {
-            if (followers && followers.length > 0)
+            if (followersCount && followersCount > 0)
               showFollowersListDialog = true;
           }
         "
         @click-creators="
           () => {
-            if (creators && creators.length > 0) showCreatorsListDialog = true;
+            if (creatorsCount && creatorsCount > 0)
+              showCreatorsListDialog = true;
           }
         "
         @toggle-follow="refetchFollowersCount"
@@ -132,12 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import { AgentProfile } from "@/types/types";
-import {
-  AgentPubKey,
-  decodeHashFromBase64,
-  encodeHashToBase64,
-} from "@holochain/client";
+import { decodeHashFromBase64, encodeHashToBase64 } from "@holochain/client";
 import { ProfilesStore } from "@holochain-open-dev/profiles";
 import { ComputedRef, computed, inject, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -250,82 +246,6 @@ const {
 });
 watch(errorProfile, console.error);
 
-const fetchFollowers = async () => {
-  const agents: AgentPubKey[] = await client.callZome({
-    role_name: "mewsfeed",
-    zome_name: "follows",
-    fn_name: "get_followers_for_creator",
-    payload: {
-      creator: decodeHashFromBase64(route.params.agentPubKey as string),
-      page: {
-        limit: pageLimit,
-      },
-    },
-  });
-
-  const agentProfiles = await Promise.all(
-    agents.map(async (agentPubKey) => {
-      const profile = await profilesStore.client.getAgentProfile(agentPubKey);
-      if (!profile) return null;
-
-      return {
-        agentPubKey,
-        profile: profile,
-      };
-    })
-  );
-
-  return agentProfiles.filter(Boolean) as AgentProfile[];
-};
-
-const { data: followers, error: errorFollowers } = useQuery({
-  queryKey: [
-    "follows",
-    "get_followers_for_creator",
-    route.params.agentPubKey as string,
-  ],
-  queryFn: fetchFollowers,
-});
-watch(errorFollowers, console.error);
-
-const fetchCreators = async () => {
-  const agents: AgentPubKey[] = await client.callZome({
-    role_name: "mewsfeed",
-    zome_name: "follows",
-    fn_name: "get_creators_for_follower",
-    payload: {
-      follower: decodeHashFromBase64(route.params.agentPubKey as string),
-      page: {
-        limit: pageLimit,
-      },
-    },
-  });
-
-  const agentProfiles = await Promise.all(
-    agents.map(async (agentPubKey) => {
-      const profile = await profilesStore.client.getAgentProfile(agentPubKey);
-      if (!profile) return null;
-
-      return {
-        agentPubKey,
-        profile: profile,
-      };
-    })
-  );
-
-  return agentProfiles.filter(Boolean) as AgentProfile[];
-};
-
-const { data: creators, error: errorCreators } = useQuery({
-  queryKey: [
-    "follows",
-    "get_creators_for_follower",
-    route.params.agentPubKey as string,
-  ],
-  queryFn: fetchCreators,
-});
-watch(errorCreators, console.error);
-
 const fetchCreatorsCount = async (): Promise<number> =>
   client.callZome({
     role_name: "mewsfeed",

From c84c41f0bfba3ccb8790e0b72e65ceaacc0c1673 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 16:52:20 -0700
Subject: [PATCH 04/20] fix(ui): creators and followers lists still display
 agents with missing profiles

---
 ui/src/components/BaseAgentProfileList.vue     |  3 ++-
 ui/src/components/BaseAgentProfileListItem.vue | 13 ++++++++-----
 ui/src/components/CreatorsListDialog.vue       | 10 +++++++---
 ui/src/components/FollowersListDialog.vue      | 10 +++++++---
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/BaseAgentProfileList.vue b/ui/src/components/BaseAgentProfileList.vue
index ef417bcd..2532257a 100644
--- a/ui/src/components/BaseAgentProfileList.vue
+++ b/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="
diff --git a/ui/src/components/BaseAgentProfileListItem.vue b/ui/src/components/BaseAgentProfileListItem.vue
index f9634545..2a417ade 100644
--- a/ui/src/components/BaseAgentProfileListItem.vue
+++ b/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>
diff --git a/ui/src/components/CreatorsListDialog.vue b/ui/src/components/CreatorsListDialog.vue
index 8324735e..96640c44 100644
--- a/ui/src/components/CreatorsListDialog.vue
+++ b/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,
       };
     })
   );
diff --git a/ui/src/components/FollowersListDialog.vue b/ui/src/components/FollowersListDialog.vue
index e42e38ea..228b89d6 100644
--- a/ui/src/components/FollowersListDialog.vue
+++ b/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,
       };
     })
   );

From 23f05c13e6492e6e4c20823680c64393197f2406 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 16:53:12 -0700
Subject: [PATCH 05/20] fix(ui): split agent profile & joined timestamp
 fetching in AgentProfileDetail and still render if either missing

---
 ui/src/components/AgentProfileDetail.vue     | 61 +++++++++++++-------
 ui/src/components/BaseAgentProfileDetail.vue | 51 +++++++++++-----
 2 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/ui/src/components/AgentProfileDetail.vue b/ui/src/components/AgentProfileDetail.vue
index a92558cb..3a7fbbb8 100644
--- a/ui/src/components/AgentProfileDetail.vue
+++ b/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", props.agentPubKey],
-  queryFn: fetchProfileWithContext,
+  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",
+    encodeHashToBase64(props.agentPubKey),
+  ],
+  queryFn: fetchJoinedTimestamp,
+  refetchOnMount: true,
+});
+watch(errorJoinedTimestamp, console.error);
+
 watch(props, () => {
-  refetch();
+  refetchProfile();
+  refetchJoinedTimestamp();
 });
 </script>
diff --git a/ui/src/components/BaseAgentProfileDetail.vue b/ui/src/components/BaseAgentProfileDetail.vue
index 7f9d1d5c..8a39cec0 100644
--- a/ui/src/components/BaseAgentProfileDetail.vue
+++ b/ui/src/components/BaseAgentProfileDetail.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="profile"
     class="h-full w-full text-base-content font-content font-normal"
     v-bind="$attrs"
   >
@@ -8,7 +7,7 @@
       <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',
@@ -109,11 +108,21 @@
           </div>
         </div>
 
-        <div
-          v-if="profile.fields[PROFILE_FIELDS.BIO]"
-          class="flex justify-start space-x-2 text-md mb-5"
-        >
-          {{ profile.fields[PROFILE_FIELDS.BIO] }}
+        <template v-if="profile">
+          <div
+            v-if="profile.fields[PROFILE_FIELDS.BIO]"
+            class="flex justify-start space-x-2 text-md mb-5"
+          >
+            {{ profile.fields[PROFILE_FIELDS.BIO] }}
+          </div>
+        </template>
+        <div v-else>
+          <div class="flex flex-col w-full space-y-2 my-4">
+            <div class="h-1.5 bg-base-200 rounded-full w-5/6"></div>
+            <div class="h-1.5 bg-base-200 rounded-full w-3/4"></div>
+            <div class="h-1.5 bg-base-200 rounded-full w-5/6"></div>
+            <div class="h-1.5 bg-base-200 rounded-full w-3/4"></div>
+          </div>
         </div>
 
         <div>
@@ -156,12 +165,20 @@
           <div
             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]"
-              class="flex justify-start items-center space-x-2 text-xs font-mono px-2"
-            >
+            <template v-if="profile">
+              <div
+                v-if="profile.fields[PROFILE_FIELDS.LOCATION]"
+                class="flex justify-start items-center space-x-2 text-xs font-mono px-2"
+              >
+                <IconNavigateCircleOutline />
+                <div>{{ profile.fields[PROFILE_FIELDS.LOCATION] }}</div>
+              </div>
+            </template>
+            <div v-else>
               <IconNavigateCircleOutline />
-              <div>{{ profile.fields[PROFILE_FIELDS.LOCATION] }}</div>
+              <div
+                class="h-1.5 bg-base-200 rounded-full w-1/3 animate-pulse"
+              ></div>
             </div>
 
             <div
@@ -171,12 +188,17 @@
               <IconCalendarOutline />
               <div>Joined <BaseTimestamp :timestamp="joinedTimestamp" /></div>
             </div>
+            <div v-else>
+              <IconCalendarOutline />
+              <div
+                class="h-1.5 bg-base-200 rounded-full w-1/3 animate-pulse"
+              ></div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <BaseAgentProfileDetailSkeleton v-else />
 </template>
 
 <script setup lang="ts">
@@ -195,7 +217,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(

From fa75ef7206c63a6b0b3b92275a8d53277d5fa906 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 19:37:42 -0700
Subject: [PATCH 06/20] fix(ui): split agent profile & joined timestamp
 fetching in AgentProfileDetail and still render if either missing

---
 ui/src/components/AgentProfileDetail.vue |  2 +-
 ui/src/pages/AgentProfile.vue            | 43 ++++++++++++++----------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/AgentProfileDetail.vue b/ui/src/components/AgentProfileDetail.vue
index 3a7fbbb8..6bf6db2a 100644
--- a/ui/src/components/AgentProfileDetail.vue
+++ b/ui/src/components/AgentProfileDetail.vue
@@ -69,7 +69,7 @@ const {
 } = useQuery({
   queryKey: [
     "profiles",
-    "getAgentProfile",
+    "get_joining_timestamp_for_agent",
     encodeHashToBase64(props.agentPubKey),
   ],
   queryFn: fetchJoinedTimestamp,
diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index 83f3fdb3..61c9c8a6 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -2,8 +2,8 @@
   <div class="mt-4">
     <div v-if="!isInitialLoadingProfile && agentPubKey">
       <BaseAgentProfileDetail
-        :profile="profileWithContext?.profile"
-        :joined-timestamp="profileWithContext?.joinedTimestamp"
+        :profile="profile"
+        :joined-timestamp="joinedTimestamp"
         :agentPubKey="agentPubKey"
         :creators-count="creatorsCount || 0"
         :followers-count="followersCount || 0"
@@ -26,9 +26,9 @@
         @toggle-follow="refetchFollowersCount"
       />
       <EditAgentProfileDialog
-        v-if="profileWithContext"
+        v-if="profile"
         v-model="showEditProfileDialog"
-        :profile="profileWithContext.profile"
+        :profile="profile"
         @profile-updated="(profile: any) => {
           refetchProfile();
           queryClient.setQueryData([
@@ -212,27 +212,18 @@ const {
 });
 watch(errorPinnedMews, console.error);
 
-const fetchProfileWithContext = async () => {
+const fetchProfile = async () => {
   const profile = await profilesStore.client.getAgentProfile(agentPubKey.value);
-  const joinedTimestamp = await client.callZome({
-    role_name: "mewsfeed",
-    zome_name: "profiles",
-    fn_name: "get_joining_timestamp_for_agent",
-    payload: agentPubKey.value,
-  });
 
   if (profile) {
-    return {
-      profile,
-      joinedTimestamp,
-    };
+    return profile;
   } else {
     throw new Error("No profile found");
   }
 };
 
 const {
-  data: profileWithContext,
+  data: profile,
   isInitialLoading: isInitialLoadingProfile,
   error: errorProfile,
   refetch: refetchProfile,
@@ -242,10 +233,28 @@ const {
     "getAgentProfile",
     encodeHashToBase64(agentPubKey.value),
   ],
-  queryFn: fetchProfileWithContext,
+  queryFn: fetchProfile,
 });
 watch(errorProfile, console.error);
 
+const fetchJoinedTimestamp = () =>
+  client.callZome({
+    role_name: "mewsfeed",
+    zome_name: "profiles",
+    fn_name: "get_joining_timestamp_for_agent",
+    payload: agentPubKey.value,
+  });
+
+const { data: joinedTimestamp, error: errorJoinedTimestamp } = useQuery({
+  queryKey: [
+    "profiles",
+    "get_joining_timestamp_for_agent",
+    encodeHashToBase64(agentPubKey.value),
+  ],
+  queryFn: fetchJoinedTimestamp,
+});
+watch(errorJoinedTimestamp, console.error);
+
 const fetchCreatorsCount = async (): Promise<number> =>
   client.callZome({
     role_name: "mewsfeed",

From 841efbd31ddb40c50362c31612c9becc5179dd87 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Fri, 8 Sep 2023 19:44:31 -0700
Subject: [PATCH 07/20] revert(ui): remove profile placeholders

---
 ui/src/components/BaseAgentProfileDetail.vue | 44 +++++---------------
 1 file changed, 10 insertions(+), 34 deletions(-)

diff --git a/ui/src/components/BaseAgentProfileDetail.vue b/ui/src/components/BaseAgentProfileDetail.vue
index 8a39cec0..3ebbd694 100644
--- a/ui/src/components/BaseAgentProfileDetail.vue
+++ b/ui/src/components/BaseAgentProfileDetail.vue
@@ -108,21 +108,11 @@
           </div>
         </div>
 
-        <template v-if="profile">
-          <div
-            v-if="profile.fields[PROFILE_FIELDS.BIO]"
-            class="flex justify-start space-x-2 text-md mb-5"
-          >
-            {{ profile.fields[PROFILE_FIELDS.BIO] }}
-          </div>
-        </template>
-        <div v-else>
-          <div class="flex flex-col w-full space-y-2 my-4">
-            <div class="h-1.5 bg-base-200 rounded-full w-5/6"></div>
-            <div class="h-1.5 bg-base-200 rounded-full w-3/4"></div>
-            <div class="h-1.5 bg-base-200 rounded-full w-5/6"></div>
-            <div class="h-1.5 bg-base-200 rounded-full w-3/4"></div>
-          </div>
+        <div
+          v-if="profile?.fields[PROFILE_FIELDS.BIO]"
+          class="flex justify-start space-x-2 text-md mb-5"
+        >
+          {{ profile.fields[PROFILE_FIELDS.BIO] }}
         </div>
 
         <div>
@@ -165,20 +155,12 @@
           <div
             class="flex justify-start items-center space-x-2 sm:space-x-16 text-xs mt-3"
           >
-            <template v-if="profile">
-              <div
-                v-if="profile.fields[PROFILE_FIELDS.LOCATION]"
-                class="flex justify-start items-center space-x-2 text-xs font-mono px-2"
-              >
-                <IconNavigateCircleOutline />
-                <div>{{ profile.fields[PROFILE_FIELDS.LOCATION] }}</div>
-              </div>
-            </template>
-            <div v-else>
+            <div
+              v-if="profile?.fields[PROFILE_FIELDS.LOCATION]"
+              class="flex justify-start items-center space-x-2 text-xs font-mono px-2"
+            >
               <IconNavigateCircleOutline />
-              <div
-                class="h-1.5 bg-base-200 rounded-full w-1/3 animate-pulse"
-              ></div>
+              <div>{{ profile.fields[PROFILE_FIELDS.LOCATION] }}</div>
             </div>
 
             <div
@@ -188,12 +170,6 @@
               <IconCalendarOutline />
               <div>Joined <BaseTimestamp :timestamp="joinedTimestamp" /></div>
             </div>
-            <div v-else>
-              <IconCalendarOutline />
-              <div
-                class="h-1.5 bg-base-200 rounded-full w-1/3 animate-pulse"
-              ></div>
-            </div>
           </div>
         </div>
       </div>

From c884d1aae70aa28a6c339dfa055581713d10f6f9 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 11:34:17 -0700
Subject: [PATCH 08/20] build(ui): bump tanstack deps

---
 package-lock.json | 45 +++++++++++++++++++++++++++------------------
 ui/package.json   |  6 +++---
 ui/src/main.ts    |  5 +++--
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ead7184..4b20531e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1228,20 +1228,20 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.33.0.tgz",
-      "integrity": "sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.0.tgz",
+      "integrity": "sha512-4GMcKQuLZQi6RFBiBZNsLhl+hQGYScRZ5ZoVq8QAzfqz9M7vcGin/2YdSESwl7WaV+Qzsb5CZOAbMBes4lNTnA==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/query-persist-client-core": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.33.0.tgz",
-      "integrity": "sha512-3P16+2JjcUU5CHi10jJuwd0ZQYvQtSuzLvCUCjVuAnj3GZjfSso1v8t6WAObAr9RPuIC6vDXeOQ3mr07EF/NxQ==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.35.0.tgz",
+      "integrity": "sha512-un1zoD6D80lrJ1x1jtPzhm1xrdPbhG9unf4y0Tl58/eCZz1VIjw+rR4hG+kn/hfzxX/kY4AMvtwMPxtt3HiAdg==",
       "dependencies": {
-        "@tanstack/query-core": "4.33.0"
+        "@tanstack/query-core": "4.35.0"
       },
       "funding": {
         "type": "github",
@@ -1249,11 +1249,11 @@
       }
     },
     "node_modules/@tanstack/query-sync-storage-persister": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.33.0.tgz",
-      "integrity": "sha512-V6igMcdEOXPRpvmNFQ6I/iJaw9NhxWy7x8PWamm2cgSsLi8bHaDvUVuWkZm+ikI47QjoCUk7qll/82JYLaH+pw==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.35.0.tgz",
+      "integrity": "sha512-idNCZ7GF401X/NUHS0G0VQNhB36h1VTPobWBJYAEGkz6uvS8CpVuruGyvmVPuR61SE2k94g/Qc4jWQMcDeFM+g==",
       "dependencies": {
-        "@tanstack/query-persist-client-core": "4.33.0"
+        "@tanstack/query-persist-client-core": "4.35.0"
       },
       "funding": {
         "type": "github",
@@ -1261,12 +1261,12 @@
       }
     },
     "node_modules/@tanstack/vue-query": {
-      "version": "4.34.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-4.34.0.tgz",
-      "integrity": "sha512-jXqvP5z+9mAuUVELH4A9j+KYhu84IpBFDGo60Z+9GV/td+CeDBLRoijBEixBg87SEilCCpJugc0yx2MOCwlwew==",
+      "version": "4.35.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-4.35.2.tgz",
+      "integrity": "sha512-zaEbtALVuYd+8phh7toDaXMCjS5AH13uPoU46CdiszX5QVRQYOhWMnAkW4jxLGbmLSNvdvYXvZsQG5TrwCM7zg==",
       "dependencies": {
         "@tanstack/match-sorter-utils": "^8.1.1",
-        "@tanstack/query-core": "4.33.0",
+        "@tanstack/query-core": "4.35.2",
         "@vue/devtools-api": "^6.4.2",
         "vue-demi": "^0.13.11"
       },
@@ -1284,6 +1284,15 @@
         }
       }
     },
+    "node_modules/@tanstack/vue-query/node_modules/@tanstack/query-core": {
+      "version": "4.35.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.2.tgz",
+      "integrity": "sha512-IJYT+VVx0SGe3QWqL6XUgzEY1re3szCdGMSGD1VRdEej6Uq3O+qELR2Ypw1/a4bUYKXiDUpK4BAcBynWb6nbkQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -7418,9 +7427,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",
diff --git a/ui/package.json b/ui/package.json
index c47179b2..93bd04a8 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 74fd8050..dca92fbe 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -15,7 +15,6 @@ import App from "./App.vue";
 import { router } from "./router";
 import piniaPluginPersistedState from "pinia-plugin-persistedstate";
 import {
-  QueryClient,
   VueQueryPlugin,
   type VueQueryPluginOptions,
 } from "@tanstack/vue-query";
@@ -52,8 +51,10 @@ const vueQueryOptions: VueQueryPluginOptions = {
       },
     },
   },
-  clientPersister: (queryClient: QueryClient) => {
+  clientPersister: (queryClient) => {
     return persistQueryClient({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       queryClient,
       persister: createSyncStoragePersister({
         storage: localStorage,

From 17c427032a9d56e5b29d0d2d5f70edf1709d54c7 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 12:24:02 -0700
Subject: [PATCH 09/20] fix(ui): ensure tanstack query key is reactively
 updated when agentPubKey prop or client.myPubKey changes

---
 ui/components.d.ts                        |  2 +-
 ui/src/components/AgentProfileDetail.vue  |  6 ++++--
 ui/src/components/ButtonFollow.vue        |  3 ++-
 ui/src/components/CreatorsListDialog.vue  |  9 +++-----
 ui/src/components/FollowersListDialog.vue |  9 +++-----
 ui/src/layouts/MainLayout.vue             |  9 ++++----
 ui/src/pages/AgentProfile.vue             | 26 ++++++-----------------
 ui/src/pages/MewYarn.vue                  |  4 ++--
 ui/src/pages/MewsFeed.vue                 | 15 ++++---------
 ui/src/pages/MyNotifications.vue          |  9 ++++----
 10 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/ui/components.d.ts b/ui/components.d.ts
index 2cd89fc1..d9dd84ca 100644
--- a/ui/components.d.ts
+++ b/ui/components.d.ts
@@ -47,7 +47,7 @@ declare module 'vue' {
     CreatorsListDialog: typeof import('./src/components/CreatorsListDialog.vue')['default']
     EditAgentProfileDialog: typeof import('./src/components/EditAgentProfileDialog.vue')['default']
     FollowersListDialog: typeof import('./src/components/FollowersListDialog.vue')['default']
-    HoloLogin: typeof import('./src/components/HoloLogin.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']
diff --git a/ui/src/components/AgentProfileDetail.vue b/ui/src/components/AgentProfileDetail.vue
index 620a84d6..11f92f98 100644
--- a/ui/src/components/AgentProfileDetail.vue
+++ b/ui/src/components/AgentProfileDetail.vue
@@ -12,10 +12,11 @@
 <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<{
@@ -31,6 +32,7 @@ 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 profile = await profilesStore.client.getAgentProfile(props.agentPubKey);
@@ -56,7 +58,7 @@ const {
   error: errorProfile,
   refetch,
 } = useQuery({
-  queryKey: ["profiles", "getAgentProfile", props.agentPubKey],
+  queryKey: ["profiles", "getAgentProfile", agentPubKeyB64],
   queryFn: fetchProfileWithContext,
   refetchOnMount: true,
 });
diff --git a/ui/src/components/ButtonFollow.vue b/ui/src/components/ButtonFollow.vue
index 7f7f86aa..18e33d38 100644
--- a/ui/src/components/ButtonFollow.vue
+++ b/ui/src/components/ButtonFollow.vue
@@ -45,6 +45,7 @@ const myProfile = inject("myProfile") as ComputedRef<Profile>;
 const { showMessage, showError } = useToasts();
 
 const showCreateProfileDialog = ref(false);
+const agentPubKeyB64 = computed(() => encodeHashToBase64(client.myPubKey));
 
 const fetchMyFollowing = async (): Promise<AgentPubKey[]> =>
   client.callZome({
@@ -72,7 +73,7 @@ const {
   queryKey: [
     "follows",
     "get_creators_for_follower",
-    encodeHashToBase64(client.myPubKey),
+    agentPubKeyB64,
     "isFollowing",
   ],
   queryFn: fetchMyFollowing,
diff --git a/ui/src/components/CreatorsListDialog.vue b/ui/src/components/CreatorsListDialog.vue
index 8324735e..a1cc19ca 100644
--- a/ui/src/components/CreatorsListDialog.vue
+++ b/ui/src/components/CreatorsListDialog.vue
@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient } from "@holochain/client";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, computed, inject } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseAgentProfileListItemSkeleton from "@/components/BaseAgentProfileListItemSkeleton.vue";
@@ -60,6 +60,7 @@ const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const queryClient = useQueryClient();
+const agentPubKeyB64 = computed(() => encodeHashToBase64(props.agentPubKey));
 
 const pageLimit = 10;
 
@@ -94,11 +95,7 @@ const fetchCreators = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading } =
   useInfiniteQuery({
-    queryKey: [
-      "mews",
-      "get_creators_for_follower",
-      encodeHashToBase64(props.agentPubKey),
-    ],
+    queryKey: ["mews", "get_creators_for_follower", agentPubKeyB64],
     queryFn: fetchCreators,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
diff --git a/ui/src/components/FollowersListDialog.vue b/ui/src/components/FollowersListDialog.vue
index e42e38ea..c7719d09 100644
--- a/ui/src/components/FollowersListDialog.vue
+++ b/ui/src/components/FollowersListDialog.vue
@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient } from "@holochain/client";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, computed, inject } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseAgentProfileListItemSkeleton from "@/components/BaseAgentProfileListItemSkeleton.vue";
@@ -60,6 +60,7 @@ const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const queryClient = useQueryClient();
+const agentPubKeyB64 = computed(() => encodeHashToBase64(props.agentPubKey));
 
 const pageLimit = 10;
 
@@ -94,11 +95,7 @@ const fetchCreators = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading } =
   useInfiniteQuery({
-    queryKey: [
-      "mews",
-      "get_followers_for_creator",
-      encodeHashToBase64(props.agentPubKey),
-    ],
+    queryKey: ["mews", "get_followers_for_creator", agentPubKeyB64],
     queryFn: fetchCreators,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
diff --git a/ui/src/layouts/MainLayout.vue b/ui/src/layouts/MainLayout.vue
index af63792b..519b4497 100644
--- a/ui/src/layouts/MainLayout.vue
+++ b/ui/src/layouts/MainLayout.vue
@@ -73,9 +73,9 @@ import CreateMewInput from "@/components/CreateMewInput.vue";
 import BaseSiteMenu from "@/components/BaseSiteMenu.vue";
 import SearchEverythingDialog from "@/components/SearchEverythingDialog.vue";
 import { ROUTES } from "@/router";
-import { FeedMew, MewTypeName, PaginationDirectionName } from "@/types/types";
+import { FeedMew, MewTypeName } from "@/types/types";
 import { AppAgentClient, encodeHashToBase64 } from "@holochain/client";
-import { ComputedRef, inject, ref, watch } from "vue";
+import { ComputedRef, computed, inject, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { makeUseNotificationsReadStore } from "@/stores/notificationsRead";
 import { setHomeRedirect } from "@/utils/homeRedirect";
@@ -93,6 +93,7 @@ const { setNotificationsCount } = useNotificationsReadStore();
 const showSearchDialog = ref(false);
 const showCreateMewDialog = ref(false);
 const forceReloadRouterViewKey = ref(0);
+const myPubKeyB64 = computed(() => encodeHashToBase64(client.myPubKey));
 
 const onCreateMew = () => {
   showCreateMewDialog.value = false;
@@ -126,7 +127,7 @@ const { data: mostRecentMew } = useQuery({
   queryKey: [
     "mews",
     "get_followed_creators_mews_with_context",
-    encodeHashToBase64(client.myPubKey),
+    myPubKeyB64,
     { page: { limit: 1 } },
   ],
   queryFn: fetchMostRecentMew,
@@ -150,7 +151,7 @@ const fetchNotifications = async () => {
 };
 
 useInfiniteQuery({
-  queryKey: ["mews", "count_notifications_for_agent", client.myPubKey],
+  queryKey: ["mews", "count_notifications_for_agent", myPubKeyB64],
   queryFn: fetchNotifications,
   refetchInterval: 1000 * 30, // 30 seconds
   refetchIntervalInBackground: true,
diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index 782a333f..bf576856 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -187,7 +187,7 @@ const {
   queryKey: [
     "profiles",
     "get_agent_mews_with_context",
-    encodeHashToBase64(agentPubKey.value),
+    route.params.agentPubKey,
   ],
   queryFn: fetchAuthoredMews,
 });
@@ -210,7 +210,7 @@ const {
   queryKey: [
     "profiles",
     "get_mews_for_pinner_with_context",
-    encodeHashToBase64(agentPubKey.value),
+    route.params.agentPubKey,
   ],
   queryFn: fetchPinnedMews,
 });
@@ -241,11 +241,7 @@ const {
   error: errorProfile,
   refetch: refetchProfile,
 } = useQuery({
-  queryKey: [
-    "profiles",
-    "getAgentProfile",
-    encodeHashToBase64(agentPubKey.value),
-  ],
+  queryKey: ["profiles", "getAgentProfile", route.params.agentPubKey],
   queryFn: fetchProfileWithContext,
 });
 watch(errorProfile, console.error);
@@ -279,11 +275,7 @@ const fetchFollowers = async () => {
 };
 
 const { data: followers, error: errorFollowers } = useQuery({
-  queryKey: [
-    "follows",
-    "get_followers_for_creator",
-    route.params.agentPubKey as string,
-  ],
+  queryKey: ["follows", "get_followers_for_creator", route.params.agentPubKey],
   queryFn: fetchFollowers,
 });
 watch(errorFollowers, console.error);
@@ -317,11 +309,7 @@ const fetchCreators = async () => {
 };
 
 const { data: creators, error: errorCreators } = useQuery({
-  queryKey: [
-    "follows",
-    "get_creators_for_follower",
-    route.params.agentPubKey as string,
-  ],
+  queryKey: ["follows", "get_creators_for_follower", route.params.agentPubKey],
   queryFn: fetchCreators,
 });
 watch(errorCreators, console.error);
@@ -338,7 +326,7 @@ const { data: creatorsCount, error: errorCreatorsCount } = useQuery({
   queryKey: [
     "follows",
     "count_creators_for_follower",
-    route.params.agentPubKey as string,
+    route.params.agentPubKey,
   ],
   queryFn: fetchCreatorsCount,
 });
@@ -360,7 +348,7 @@ const {
   queryKey: [
     "follows",
     "count_followers_for_creator",
-    route.params.agentPubKey as string,
+    route.params.agentPubKey,
   ],
   queryFn: fetchFollowersCount,
 });
diff --git a/ui/src/pages/MewYarn.vue b/ui/src/pages/MewYarn.vue
index dc14faea..d407de0f 100644
--- a/ui/src/pages/MewYarn.vue
+++ b/ui/src/pages/MewYarn.vue
@@ -96,7 +96,7 @@ const {
   isInitialLoading: isInitialLoadingMew,
   refetch: refetchMew,
 } = useQuery({
-  queryKey: ["mews", "get_mew_with_context", route.params.actionHash as string],
+  queryKey: ["mews", "get_mew_with_context", route.params.actionHash],
   queryFn: fetchMew,
   enabled: hasActionHash,
   refetchInterval: 1000 * 60 * 2, // 2 minutes
@@ -131,7 +131,7 @@ const {
   queryKey: [
     "mews",
     "get_responses_for_mew_with_context",
-    route.params.actionHash as string,
+    route.params.actionHash,
   ],
   queryFn: fetchReplies,
   enabled: hasMew,
diff --git a/ui/src/pages/MewsFeed.vue b/ui/src/pages/MewsFeed.vue
index 2a7de210..c04a93d3 100644
--- a/ui/src/pages/MewsFeed.vue
+++ b/ui/src/pages/MewsFeed.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient, encodeHashToBase64 } from "@holochain/client";
-import { ComputedRef, inject, watch } from "vue";
+import { ComputedRef, computed, inject, watch } from "vue";
 import { FeedMew, PaginationDirectionName } from "@/types/types";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseMewListItem from "@/components/BaseMewListItem.vue";
@@ -67,6 +67,7 @@ import { onBeforeRouteLeave } from "vue-router";
 
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const queryClient = useQueryClient();
+const myPubKeyB64 = computed(() => encodeHashToBase64(client.myPubKey));
 const pageLimit = 10;
 
 const fetchMewsFeed = (params: any): Promise<FeedMew[]> =>
@@ -86,11 +87,7 @@ const fetchMewsFeed = (params: any): Promise<FeedMew[]> =>
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery<FeedMew[]>({
-    queryKey: [
-      "mews",
-      "get_followed_creators_mews_with_context",
-      encodeHashToBase64(client.myPubKey),
-    ],
+    queryKey: ["mews", "get_followed_creators_mews_with_context", myPubKeyB64],
     queryFn: fetchMewsFeed,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -113,11 +110,7 @@ const fetchNextPageInfiniteScroll = async (
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      [
-        "mews",
-        "get_followed_creators_mews_with_context",
-        encodeHashToBase64(client.myPubKey),
-      ],
+      ["mews", "get_followed_creators_mews_with_context", myPubKeyB64],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],
diff --git a/ui/src/pages/MyNotifications.vue b/ui/src/pages/MyNotifications.vue
index 30e82f9a..5bbfab90 100644
--- a/ui/src/pages/MyNotifications.vue
+++ b/ui/src/pages/MyNotifications.vue
@@ -51,8 +51,8 @@
 </template>
 
 <script setup lang="ts">
-import { AppAgentClient } from "@holochain/client";
-import { inject, ComputedRef, watch, toRaw } from "vue";
+import { AppAgentClient, encodeHashToBase64 } from "@holochain/client";
+import { inject, ComputedRef, watch, toRaw, computed } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 import { pageHeightCorrection } from "@/utils/page-layout";
 import BaseNotification from "@/components/BaseNotification.vue";
@@ -68,6 +68,7 @@ const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const useNotificationsReadStore = makeUseNotificationsReadStore(client);
 const { markRead, addNotificationStatus } = useNotificationsReadStore();
 const queryClient = useQueryClient();
+const myPubKeyB64 = computed(() => encodeHashToBase64(client.myPubKey));
 
 const pageLimit = 10;
 
@@ -91,7 +92,7 @@ const fetchNotifications = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, refetch, isInitialLoading } =
   useInfiniteQuery({
-    queryKey: ["mews", "get_notifications_for_agent", client.myPubKey],
+    queryKey: ["mews", "get_notifications_for_agent", myPubKeyB64],
     queryFn: fetchNotifications,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -114,7 +115,7 @@ const fetchNextPageInfiniteScroll = async (
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      ["mews", "get_notifications_for_agent", client.myPubKey],
+      ["mews", "get_notifications_for_agent", myPubKeyB64],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],

From 94f9a87aa6fea7e566cf4607780da619a9128913 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 13:16:31 -0700
Subject: [PATCH 10/20] fix(ui): extract list of random mews by tag into
 seperate component, ensure queryKey updates reactively when prop changes

---
 ui/src/components/RandomMewWithTagList.vue | 110 ++++++++
 ui/src/pages/DiscoverCreators.vue          | 278 +--------------------
 2 files changed, 121 insertions(+), 267 deletions(-)
 create mode 100644 ui/src/components/RandomMewWithTagList.vue

diff --git a/ui/src/components/RandomMewWithTagList.vue b/ui/src/components/RandomMewWithTagList.vue
new file mode 100644
index 00000000..7b80d776
--- /dev/null
+++ b/ui/src/components/RandomMewWithTagList.vue
@@ -0,0 +1,110 @@
+<template>
+  <BaseList
+    class="mb-8"
+    :title="`mews about ${tag}`"
+    :items="randomMewsWithTag"
+    :is-loading="isLoadingRandomMewHashesWithTag || isFetchingRandomMewsWithTag"
+  >
+    <template #default="{ item }">
+      <BaseMewListItem
+        :feed-mew="item"
+        @mew-deleted="refetchRandomMewsWithTag()"
+        @mew-licked="refetchRandomMewsWithTag()"
+        @mew-unlicked="refetchRandomMewsWithTag()"
+        @mew-pinned="refetchRandomMewsWithTag()"
+        @mew-unpinned="refetchRandomMewsWithTag()"
+        @mewmew-created="refetchRandomMewsWithTag()"
+        @reply-created="refetchRandomMewsWithTag()"
+        @quote-created="refetchRandomMewsWithTag()"
+      />
+    </template>
+    <template #loading>
+      <BaseListSkeleton :count="4">
+        <BaseMewListItemSkeleton />
+      </BaseListSkeleton>
+    </template>
+  </BaseList>
+</template>
+
+<script setup lang="ts">
+import { AppAgentClient, ActionHash } from "@holochain/client";
+import { ComputedRef, Ref, computed, inject, watch } from "vue";
+import { useQuery } from "@tanstack/vue-query";
+import { FeedMew } from "@/types/types";
+
+const client = (inject("client") as ComputedRef<AppAgentClient>).value;
+
+const props = defineProps<{
+  tag: string;
+}>();
+
+const tagRef = computed(() => props.tag);
+
+const fetchRandomMewHashesWithTag = (): Promise<ActionHash[]> => {
+  console.log("fetchRandomMewHashesWithTag", props.tag);
+  return client.callZome({
+    role_name: "mewsfeed",
+    zome_name: "mews",
+    fn_name: "get_random_mew_hashes_for_tag",
+    payload: {
+      tag: props.tag,
+      count: 3,
+    },
+  });
+};
+
+const {
+  data: randomMewHashesWithTag,
+  error: errorRandomMewHashesWithTag,
+  isLoading: isLoadingRandomMewHashesWithTag,
+  refetch: refetchRandomMewHashesWithTag,
+} = useQuery({
+  queryKey: ["mews", "get_random_mew_hashes_for_tag", tagRef],
+  queryFn: fetchRandomMewHashesWithTag,
+  refetchOnWindowFocus: false,
+  refetchOnMount: false,
+  refetchOnReconnect: false,
+});
+watch(errorRandomMewHashesWithTag, console.error);
+const hasRandomMewHashesWithTag = computed(() =>
+  randomMewHashesWithTag.value
+    ? (randomMewHashesWithTag as Ref<ActionHash[]>).value.length > 0
+    : false
+);
+
+const fetchMewsWithContext = async (): Promise<FeedMew[]> =>
+  client.callZome({
+    role_name: "mewsfeed",
+    zome_name: "mews",
+    fn_name: "get_batch_mews_with_context",
+    payload: randomMewHashesWithTag.value,
+  });
+
+const {
+  data: randomMewsWithTag,
+  error: errorRandomMewsWithTag,
+  isFetching: isFetchingRandomMewsWithTag,
+  refetch: refetchRandomMewsWithTag,
+} = useQuery({
+  queryKey: [
+    "mews",
+    "get_random_mew_hashes_for_tag",
+    tagRef,
+    "get_batch_mews_with_context",
+  ],
+  queryFn: fetchMewsWithContext,
+  enabled: hasRandomMewHashesWithTag,
+  refetchOnWindowFocus: false,
+  refetchOnMount: false,
+  refetchOnReconnect: false,
+});
+watch(errorRandomMewsWithTag, console.error);
+
+watch(props, () => {
+  refetchRandomMewHashesWithTag();
+});
+
+watch(randomMewHashesWithTag, () => {
+  refetchRandomMewsWithTag();
+});
+</script>
diff --git a/ui/src/pages/DiscoverCreators.vue b/ui/src/pages/DiscoverCreators.vue
index 0b22572f..2605366f 100644
--- a/ui/src/pages/DiscoverCreators.vue
+++ b/ui/src/pages/DiscoverCreators.vue
@@ -38,93 +38,9 @@
       </template>
     </BaseList>
 
-    <BaseList
-      v-if="tag1Enabled"
-      class="mb-8"
-      :title="`mews about ${randomTags[0]}`"
-      :items="randomMewsWithTag1"
-      :is-loading="
-        isLoadingRandomMewHashesWithTag1 || isFetchingRandomMewsWithTag1
-      "
-    >
-      <template #default="{ item }">
-        <BaseMewListItem
-          :feed-mew="item"
-          @mew-deleted="refetchRandomMewsWithTag1()"
-          @mew-licked="refetchRandomMewsWithTag1()"
-          @mew-unlicked="refetchRandomMewsWithTag1()"
-          @mew-pinned="refetchRandomMewsWithTag1()"
-          @mew-unpinned="refetchRandomMewsWithTag1()"
-          @mewmew-created="refetchRandomMewsWithTag1()"
-          @reply-created="refetchRandomMewsWithTag1()"
-          @quote-created="refetchRandomMewsWithTag1()"
-        />
-      </template>
-      <template #loading>
-        <BaseListSkeleton :count="4">
-          <BaseMewListItemSkeleton />
-        </BaseListSkeleton>
-      </template>
-    </BaseList>
-
-    <BaseList
-      v-if="tag2Enabled"
-      class="mb-8"
-      :title="`mews about ${randomTags[1]}`"
-      :items="randomMewsWithTag2"
-      :is-loading="
-        isLoadingRandomMewHashesWithTag2 || isFetchingRandomMewsWithTag2
-      "
-    >
-      <template #default="{ item }">
-        <BaseMewListItem
-          :feed-mew="item"
-          @mew-deleted="refetchRandomMewsWithTag2()"
-          @mew-licked="refetchRandomMewsWithTag2()"
-          @mew-unlicked="refetchRandomMewsWithTag2()"
-          @mew-pinned="refetchRandomMewsWithTag2()"
-          @mew-unpinned="refetchRandomMewsWithTag2()"
-          @mewmew-created="refetchRandomMewsWithTag2()"
-          @reply-created="refetchRandomMewsWithTag2()"
-          @quote-created="refetchRandomMewsWithTag2()"
-        />
-      </template>
-      <template #loading>
-        <BaseListSkeleton :count="4">
-          <BaseMewListItemSkeleton />
-        </BaseListSkeleton>
-      </template>
-    </BaseList>
-
-    <BaseList
-      v-if="tag3Enabled"
-      class="mb-8"
-      :title="`mews about ${randomTags[2]}`"
-      :items="randomMewsWithTag3"
-      :is-loading="
-        isLoadingRandomMewHashesWithTag3 || isFetchingRandomMewsWithTag3
-      "
-    >
-      <template #default="{ item }">
-        <BaseMewListItem
-          :feed-mew="item"
-          @mew-deleted="refetchRandomMewsWithTag3()"
-          @mew-licked="refetchRandomMewsWithTag3()"
-          @mew-unlicked="refetchRandomMewsWithTag3()"
-          @mew-pinned="refetchRandomMewsWithTag3()"
-          @mew-unpinned="refetchRandomMewsWithTag3()"
-          @mewmew-created="refetchRandomMewsWithTag3()"
-          @reply-created="refetchRandomMewsWithTag3()"
-          @quote-created="refetchRandomMewsWithTag3()"
-        />
-      </template>
-
-      <template #loading>
-        <BaseListSkeleton :count="4">
-          <BaseMewListItemSkeleton />
-        </BaseListSkeleton>
-      </template>
-    </BaseList>
+    <RandomMewWithTagList v-if="tag1 !== undefined" :tag="tag1" />
+    <RandomMewWithTagList v-if="tag2 !== undefined" :tag="tag2" />
+    <RandomMewWithTagList v-if="tag3 !== undefined" :tag="tag3" />
   </div>
 </template>
 
@@ -219,199 +135,27 @@ onMounted(async () => {
     await refetchMews();
   }
   if (randomTags.value === undefined || randomTags.value.length === 0) {
-    refetchTags();
+    refetchRandomTags();
   }
 });
 
-const fetchRandomMewHashesWithTag = (tag: string): Promise<ActionHash[]> =>
-  client.callZome({
-    role_name: "mewsfeed",
-    zome_name: "mews",
-    fn_name: "get_random_mew_hashes_for_tag",
-    payload: {
-      tag: tag,
-      count: 3,
-    },
-  });
-
-const tag1Enabled = computed<boolean>(
-  () =>
-    randomTags.value !== undefined &&
-    randomTags.value.length > 0 &&
-    randomTags.value[0] !== undefined
-);
-const tag2Enabled = computed<boolean>(
-  () =>
-    randomTags.value !== undefined &&
-    randomTags.value.length > 1 &&
-    randomTags.value[1] !== undefined
-);
-const tag3Enabled = computed<boolean>(
-  () =>
-    randomTags.value !== undefined &&
-    randomTags.value.length > 2 &&
-    randomTags.value[2] !== undefined
-);
-
-// Random Mews with Tag 1
-
-const {
-  data: randomMewHashesWithTag1,
-  error: errorRandomMewHashesWithTag1,
-  isLoading: isLoadingRandomMewHashesWithTag1,
-  refetch: refetchRandomMewHashesWithTag1,
-} = useQuery({
-  queryKey: ["mews", "get_random_mew_hashes_for_tag", randomTags.value[0]],
-  enabled: tag1Enabled,
-  queryFn: () => fetchRandomMewHashesWithTag(randomTags.value[0]),
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-});
-watch(errorRandomMewHashesWithTag1, console.error);
-const hasRandomMewHashesWithTag1 = computed(
-  () =>
-    tag1Enabled.value &&
-    randomMewHashesWithTag1.value &&
-    randomMewHashesWithTag1.value.length > 0
+const tag1 = computed(() =>
+  randomTags.value ? randomTags.value[0] : undefined
 );
-
-const {
-  data: randomMewsWithTag1,
-  error: errorRandomMewsWithTag1,
-  isFetching: isFetchingRandomMewsWithTag1,
-  refetch: refetchRandomMewsWithTag1,
-} = useQuery({
-  queryKey: [
-    "mews",
-    "get_random_mew_hashes_for_tag",
-    randomTags.value[0],
-    "get_batch_mews_with_context",
-  ],
-
-  queryFn: () =>
-    fetchMewsWithContext(toRaw(randomMewHashesWithTag1.value as ActionHash[])),
-  enabled: hasRandomMewHashesWithTag1,
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-});
-watch(errorRandomMewsWithTag1, console.error);
-
-// Random Mews with Tag 2
-
-const {
-  data: randomMewHashesWithTag2,
-  error: errorRandomMewHashesWithTag2,
-  isLoading: isLoadingRandomMewHashesWithTag2,
-  refetch: refetchRandomMewHashesWithTag2,
-} = useQuery({
-  queryKey: ["mews", "get_random_mew_hashes_for_tag", randomTags.value[1]],
-  enabled: tag2Enabled,
-  queryFn: () => fetchRandomMewHashesWithTag(randomTags.value[1]),
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-});
-watch(errorRandomMewHashesWithTag2, console.error);
-const hasRandomMewHashesWithTag2 = computed(
-  () =>
-    tag2Enabled.value &&
-    randomMewHashesWithTag2.value &&
-    randomMewHashesWithTag2.value.length > 0
+const tag2 = computed(() =>
+  randomTags.value ? randomTags.value[1] : undefined
 );
-
-const {
-  data: randomMewsWithTag2,
-  error: errorRandomMewsWithTag2,
-  isFetching: isFetchingRandomMewsWithTag2,
-  refetch: refetchRandomMewsWithTag2,
-} = useQuery({
-  queryKey: [
-    "mews",
-    "get_random_mew_hashes_for_tag",
-    randomTags.value[1],
-    "get_batch_mews_with_context",
-  ],
-
-  queryFn: () =>
-    fetchMewsWithContext(toRaw(randomMewHashesWithTag2.value as ActionHash[])),
-  enabled: hasRandomMewHashesWithTag2,
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-});
-watch(errorRandomMewsWithTag2, console.error);
-
-// Random Mews with Tag 3
-
-const {
-  data: randomMewHashesWithTag3,
-  error: errorRandomMewHashesWithTag3,
-  isLoading: isLoadingRandomMewHashesWithTag3,
-  refetch: refetchRandomMewHashesWithTag3,
-} = useQuery({
-  queryKey: ["mews", "get_random_mew_hashes_for_tag", randomTags.value[2]],
-  enabled: tag1Enabled,
-  queryFn: () => fetchRandomMewHashesWithTag(randomTags.value[2]),
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-});
-watch(errorRandomMewHashesWithTag3, console.error);
-const hasRandomMewHashesWithTag3 = computed(
-  () =>
-    tag3Enabled.value &&
-    randomMewHashesWithTag3.value &&
-    randomMewHashesWithTag3.value.length > 0
+const tag3 = computed(() =>
+  randomTags.value ? randomTags.value[2] : undefined
 );
 
-const {
-  data: randomMewsWithTag3,
-  error: errorRandomMewsWithTag3,
-  isFetching: isFetchingRandomMewsWithTag3,
-  refetch: refetchRandomMewsWithTag3,
-} = useQuery({
-  queryKey: [
-    "mews",
-    "get_random_mew_hashes_for_tag",
-    randomTags.value[2],
-    "get_batch_mews_with_context",
-  ],
-
-  queryFn: () =>
-    fetchMewsWithContext(toRaw(randomMewHashesWithTag3.value as ActionHash[])),
-  enabled: hasRandomMewHashesWithTag3,
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-});
-watch(errorRandomMewsWithTag3, console.error);
-
 const shuffle = async () => {
   await refetchMews();
-  await refetchTags();
+  await refetchRandomTags();
 };
 
 const refetchMews = async () => {
   await refetchRandomMewHashes();
   refetchRandomMews();
 };
-
-const refetchTags = async () => {
-  await refetchRandomTags();
-
-  if (tag1Enabled.value) {
-    await refetchRandomMewHashesWithTag1();
-    refetchRandomMewsWithTag1();
-  }
-  if (tag2Enabled.value) {
-    await refetchRandomMewHashesWithTag2();
-    refetchRandomMewsWithTag2();
-  }
-  if (tag3Enabled.value) {
-    await refetchRandomMewHashesWithTag3();
-    refetchRandomMewsWithTag3();
-  }
-};
 </script>

From f8f384c796b42c9c13a50f7cd70343fdaf14e3e2 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 13:24:40 -0700
Subject: [PATCH 11/20] fix(ui): wrap props in computed before using in
 tanstack queryKey to ensure reactive updating

---
 ui/src/components/RandomMewWithTagList.vue |  6 +--
 ui/src/pages/AgentProfile.vue              | 50 ++++++++--------------
 ui/src/pages/MewYarn.vue                   |  9 ++--
 ui/src/pages/MewsListAuthor.vue            |  7 +--
 ui/src/pages/MewsListCashtag.vue           | 18 +++-----
 ui/src/pages/MewsListHashtag.vue           | 17 +++-----
 ui/src/pages/MewsListMention.vue           | 15 ++-----
 7 files changed, 41 insertions(+), 81 deletions(-)

diff --git a/ui/src/components/RandomMewWithTagList.vue b/ui/src/components/RandomMewWithTagList.vue
index 7b80d776..e239d74e 100644
--- a/ui/src/components/RandomMewWithTagList.vue
+++ b/ui/src/components/RandomMewWithTagList.vue
@@ -40,9 +40,8 @@ const props = defineProps<{
 
 const tagRef = computed(() => props.tag);
 
-const fetchRandomMewHashesWithTag = (): Promise<ActionHash[]> => {
-  console.log("fetchRandomMewHashesWithTag", props.tag);
-  return client.callZome({
+const fetchRandomMewHashesWithTag = (): Promise<ActionHash[]> =>
+  client.callZome({
     role_name: "mewsfeed",
     zome_name: "mews",
     fn_name: "get_random_mew_hashes_for_tag",
@@ -51,7 +50,6 @@ const fetchRandomMewHashesWithTag = (): Promise<ActionHash[]> => {
       count: 3,
     },
   });
-};
 
 const {
   data: randomMewHashesWithTag,
diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index bf576856..69e96bf2 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -123,11 +123,11 @@
   </div>
   <FollowersListDialog
     v-model="showFollowersListDialog"
-    :agent-pub-key="decodeHashFromBase64(route.params.agentPubKey as string)"
+    :agent-pub-key="agentPubKey"
   />
   <CreatorsListDialog
     v-model="showCreatorsListDialog"
-    :agent-pub-key="decodeHashFromBase64(route.params.agentPubKey as string)"
+    :agent-pub-key="agentPubKey"
   />
 </template>
 
@@ -162,7 +162,7 @@ const agentPubKey = computed(() =>
 const showEditProfileDialog = ref(false);
 const showFollowersListDialog = ref(false);
 const showCreatorsListDialog = ref(false);
-
+const agentPubKeyRef = computed(() => route.params.agentPubKey);
 const pageLimit = 5;
 
 const fetchAuthoredMews = () =>
@@ -184,11 +184,7 @@ const {
   error: errorAuthoredMews,
   refetch: refetchAuthoredMews,
 } = useQuery({
-  queryKey: [
-    "profiles",
-    "get_agent_mews_with_context",
-    route.params.agentPubKey,
-  ],
+  queryKey: ["profiles", "get_agent_mews_with_context", agentPubKeyRef],
   queryFn: fetchAuthoredMews,
 });
 watch(errorAuthoredMews, console.error);
@@ -207,11 +203,7 @@ const {
   error: errorPinnedMews,
   refetch: refetchPinnedMews,
 } = useQuery({
-  queryKey: [
-    "profiles",
-    "get_mews_for_pinner_with_context",
-    route.params.agentPubKey,
-  ],
+  queryKey: ["profiles", "get_mews_for_pinner_with_context", agentPubKeyRef],
   queryFn: fetchPinnedMews,
 });
 watch(errorPinnedMews, console.error);
@@ -241,7 +233,7 @@ const {
   error: errorProfile,
   refetch: refetchProfile,
 } = useQuery({
-  queryKey: ["profiles", "getAgentProfile", route.params.agentPubKey],
+  queryKey: ["profiles", "getAgentProfile", agentPubKeyRef],
   queryFn: fetchProfileWithContext,
 });
 watch(errorProfile, console.error);
@@ -252,7 +244,7 @@ const fetchFollowers = async () => {
     zome_name: "follows",
     fn_name: "get_followers_for_creator",
     payload: {
-      creator: decodeHashFromBase64(route.params.agentPubKey as string),
+      creator: agentPubKey.value,
       page: {
         limit: pageLimit,
       },
@@ -260,12 +252,12 @@ const fetchFollowers = async () => {
   });
 
   const agentProfiles = await Promise.all(
-    agents.map(async (agentPubKey) => {
-      const profile = await profilesStore.client.getAgentProfile(agentPubKey);
+    agents.map(async (key) => {
+      const profile = await profilesStore.client.getAgentProfile(key);
       if (!profile) return null;
 
       return {
-        agentPubKey,
+        agentPubKey: key,
         profile: profile,
       };
     })
@@ -275,7 +267,7 @@ const fetchFollowers = async () => {
 };
 
 const { data: followers, error: errorFollowers } = useQuery({
-  queryKey: ["follows", "get_followers_for_creator", route.params.agentPubKey],
+  queryKey: ["follows", "get_followers_for_creator", agentPubKeyRef],
   queryFn: fetchFollowers,
 });
 watch(errorFollowers, console.error);
@@ -286,7 +278,7 @@ const fetchCreators = async () => {
     zome_name: "follows",
     fn_name: "get_creators_for_follower",
     payload: {
-      follower: decodeHashFromBase64(route.params.agentPubKey as string),
+      follower: agentPubKey.value,
       page: {
         limit: pageLimit,
       },
@@ -309,7 +301,7 @@ const fetchCreators = async () => {
 };
 
 const { data: creators, error: errorCreators } = useQuery({
-  queryKey: ["follows", "get_creators_for_follower", route.params.agentPubKey],
+  queryKey: ["follows", "get_creators_for_follower", agentPubKeyRef],
   queryFn: fetchCreators,
 });
 watch(errorCreators, console.error);
@@ -319,15 +311,11 @@ const fetchCreatorsCount = async (): Promise<number> =>
     role_name: "mewsfeed",
     zome_name: "follows",
     fn_name: "count_creators_for_follower",
-    payload: decodeHashFromBase64(route.params.agentPubKey as string),
+    payload: agentPubKey.value,
   });
 
 const { data: creatorsCount, error: errorCreatorsCount } = useQuery({
-  queryKey: [
-    "follows",
-    "count_creators_for_follower",
-    route.params.agentPubKey,
-  ],
+  queryKey: ["follows", "count_creators_for_follower", agentPubKeyRef],
   queryFn: fetchCreatorsCount,
 });
 watch(errorCreatorsCount, console.error);
@@ -337,7 +325,7 @@ const fetchFollowersCount = async (): Promise<number> =>
     role_name: "mewsfeed",
     zome_name: "follows",
     fn_name: "count_followers_for_creator",
-    payload: decodeHashFromBase64(route.params.agentPubKey as string),
+    payload: agentPubKey.value,
   });
 
 const {
@@ -345,11 +333,7 @@ const {
   error: errorFollowersCount,
   refetch: refetchFollowersCount,
 } = useQuery({
-  queryKey: [
-    "follows",
-    "count_followers_for_creator",
-    route.params.agentPubKey,
-  ],
+  queryKey: ["follows", "count_followers_for_creator", agentPubKeyRef],
   queryFn: fetchFollowersCount,
 });
 watch(errorFollowersCount, console.error);
diff --git a/ui/src/pages/MewYarn.vue b/ui/src/pages/MewYarn.vue
index d407de0f..3847c959 100644
--- a/ui/src/pages/MewYarn.vue
+++ b/ui/src/pages/MewYarn.vue
@@ -80,6 +80,7 @@ const pageLimit = 10;
 const actionHash = computed(() =>
   decodeHashFromBase64(route.params.actionHash as string)
 );
+const actionHashB64 = computed(() => route.params.actionHash);
 const hasActionHash = computed(() => actionHash.value !== undefined);
 
 const fetchMew = () =>
@@ -96,7 +97,7 @@ const {
   isInitialLoading: isInitialLoadingMew,
   refetch: refetchMew,
 } = useQuery({
-  queryKey: ["mews", "get_mew_with_context", route.params.actionHash],
+  queryKey: ["mews", "get_mew_with_context", actionHashB64],
   queryFn: fetchMew,
   enabled: hasActionHash,
   refetchInterval: 1000 * 60 * 2, // 2 minutes
@@ -128,11 +129,7 @@ const {
   isInitialLoading: isInitialLoadingReplies,
   refetch: refetchReplies,
 } = useInfiniteQuery({
-  queryKey: [
-    "mews",
-    "get_responses_for_mew_with_context",
-    route.params.actionHash,
-  ],
+  queryKey: ["mews", "get_responses_for_mew_with_context", actionHashB64],
   queryFn: fetchReplies,
   enabled: hasMew,
   getNextPageParam: (lastPage) => {
diff --git a/ui/src/pages/MewsListAuthor.vue b/ui/src/pages/MewsListAuthor.vue
index 9cc11872..7964fee4 100644
--- a/ui/src/pages/MewsListAuthor.vue
+++ b/ui/src/pages/MewsListAuthor.vue
@@ -62,7 +62,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient } from "@holochain/client";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, computed, inject } from "vue";
 import { useRoute, onBeforeRouteLeave } from "vue-router";
 import {
   useInfiniteQuery,
@@ -85,6 +85,7 @@ const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const queryClient = useQueryClient();
+const agentPubKey = computed(() => route.params.agentPubKey);
 
 const pageLimit = 10;
 
@@ -106,7 +107,7 @@ const fetchAuthoredMews = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
-    queryKey: ["mews", "get_agent_mews_with_context", route.params.agentPubKey],
+    queryKey: ["mews", "get_agent_mews_with_context", agentPubKey],
     queryFn: fetchAuthoredMews,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -131,7 +132,7 @@ const fetchProfile = async () => {
 };
 
 const { data: profile, error: errorProfile } = useQuery({
-  queryKey: ["profiles", "getAgentProfile", route.params.agentPubKey],
+  queryKey: ["profiles", "getAgentProfile", agentPubKey],
   queryFn: fetchProfile,
 });
 
diff --git a/ui/src/pages/MewsListCashtag.vue b/ui/src/pages/MewsListCashtag.vue
index b965cc64..940cd203 100644
--- a/ui/src/pages/MewsListCashtag.vue
+++ b/ui/src/pages/MewsListCashtag.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient } from "@holochain/client";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, computed, inject } from "vue";
 import { useRoute, onBeforeRouteLeave } from "vue-router";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseEmptyList from "@/components/BaseEmptyList.vue";
@@ -69,6 +69,8 @@ import BaseMewListItemSkeleton from "@/components/BaseMewListItemSkeleton.vue";
 const route = useRoute();
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const queryClient = useQueryClient();
+const tag = computed(() => `${route.meta.tag}${route.params.tag}`);
+
 const pageLimit = 5;
 
 const fetchCashtagMews = async (params: any) =>
@@ -77,7 +79,7 @@ const fetchCashtagMews = async (params: any) =>
     zome_name: "mews",
     fn_name: "get_mews_for_cashtag_with_context",
     payload: {
-      cashtag: `${route.meta.tag}${route.params.tag}`,
+      cashtag: tag.value,
       page: {
         limit: pageLimit,
         ...params.pageParam,
@@ -87,11 +89,7 @@ const fetchCashtagMews = async (params: any) =>
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
-    queryKey: [
-      "mews",
-      "get_mews_for_cashtag_with_context",
-      `${route.meta.tag}${route.params.tag}`,
-    ],
+    queryKey: ["mews", "get_mews_for_cashtag_with_context", tag],
     queryFn: fetchCashtagMews,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -114,11 +112,7 @@ const fetchNextPageInfiniteScroll = async (
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      [
-        "mews",
-        "get_mews_for_cashtag_with_context",
-        `${route.meta.tag}${route.params.tag}`,
-      ],
+      ["mews", "get_mews_for_cashtag_with_context", tag.value],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],
diff --git a/ui/src/pages/MewsListHashtag.vue b/ui/src/pages/MewsListHashtag.vue
index a2d8df23..35eef174 100644
--- a/ui/src/pages/MewsListHashtag.vue
+++ b/ui/src/pages/MewsListHashtag.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient } from "@holochain/client";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, computed, inject } from "vue";
 import { useRoute, onBeforeRouteLeave } from "vue-router";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseEmptyList from "@/components/BaseEmptyList.vue";
@@ -69,6 +69,7 @@ import BaseInfiniteScroll from "@/components/BaseInfiniteScroll.vue";
 const route = useRoute();
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const queryClient = useQueryClient();
+const tag = computed(() => `${route.meta.tag}${route.params.tag}`);
 
 const pageLimit = 10;
 
@@ -78,7 +79,7 @@ const fetchHashtagMews = async (params: any) => {
     zome_name: "mews",
     fn_name: "get_mews_for_hashtag_with_context",
     payload: {
-      hashtag: `${route.meta.tag}${route.params.tag}`,
+      hashtag: tag.value,
       page: {
         limit: pageLimit,
         ...params.pageParam,
@@ -90,11 +91,7 @@ const fetchHashtagMews = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
-    queryKey: [
-      "mews",
-      "get_mews_for_hashtag_with_context",
-      `${route.meta.tag}${route.params.tag}`,
-    ],
+    queryKey: ["mews", "get_mews_for_hashtag_with_context", tag],
     queryFn: fetchHashtagMews,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -117,11 +114,7 @@ const fetchNextPageInfiniteScroll = async (
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      [
-        "mews",
-        "get_mews_for_hashtag_with_context",
-        `${route.meta.tag}${route.params.tag}`,
-      ],
+      ["mews", "get_mews_for_hashtag_with_context", tag.value],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],
diff --git a/ui/src/pages/MewsListMention.vue b/ui/src/pages/MewsListMention.vue
index cbf4a488..4c8e5c31 100644
--- a/ui/src/pages/MewsListMention.vue
+++ b/ui/src/pages/MewsListMention.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import { AppAgentClient, decodeHashFromBase64 } from "@holochain/client";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, computed, inject } from "vue";
 import { useRoute, onBeforeRouteLeave } from "vue-router";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseEmptyList from "@/components/BaseEmptyList.vue";
@@ -69,6 +69,7 @@ import BaseInfiniteScroll from "@/components/BaseInfiniteScroll.vue";
 const route = useRoute();
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const queryClient = useQueryClient();
+const tag = computed(() => `${route.meta.tag}${route.params.tag}`);
 
 const pageLimit = 10;
 
@@ -90,11 +91,7 @@ const fetchMentionMews = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
-    queryKey: [
-      "mews",
-      "get_mews_for_mention_with_context",
-      `${route.meta.tag}${route.params.tag}`,
-    ],
+    queryKey: ["mews", "get_mews_for_mention_with_context", tag],
     queryFn: fetchMentionMews,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -117,11 +114,7 @@ const fetchNextPageInfiniteScroll = async (
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      [
-        "mews",
-        "get_mews_for_mention_with_context",
-        `${route.meta.tag}${route.params.tag}`,
-      ],
+      ["mews", "get_mews_for_mention_with_context", tag.value],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],

From 604dc9397a26bb4cd2149f1ae453eb644b9fd0b0 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 13:29:46 -0700
Subject: [PATCH 12/20] fix(ui): avoid console error

---
 ui/src/pages/AgentProfile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index 69e96bf2..0ca20b21 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -82,7 +82,7 @@
         title="mews"
         :items="authoredMews"
         :is-loading="isLoadingAuthoredMews"
-        :enable-more-button="authoredMews.length >= pageLimit"
+        :enable-more-button="authoredMews && authoredMews.length >= pageLimit"
         @click-more="
           router.push({
             name: 'authoredMews',

From 3bd701abd14695b81fd42a73812e1102c6d5612e Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 14:10:05 -0700
Subject: [PATCH 13/20] fix(ui): more computeds

---
 ui/src/main.ts                   |  2 +-
 ui/src/pages/AgentProfile.vue    | 16 ++++++++--------
 ui/src/pages/MewsListAuthor.vue  | 17 +++++++++--------
 ui/src/pages/MewsListMention.vue | 19 +++++++++++++------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/ui/src/main.ts b/ui/src/main.ts
index dca92fbe..b04ed135 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -43,7 +43,7 @@ const vueQueryOptions: VueQueryPluginOptions = {
     defaultOptions: {
       queries: {
         cacheTime: 1000 * 60 * 15, // 15 minutes
-        staleTime: 0,
+        staleTime: 100,
         refetchOnMount: "always",
         refetchOnWindowFocus: "always",
         refetchOnReconnect: "always",
diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index 0ca20b21..c9581092 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -162,7 +162,7 @@ const agentPubKey = computed(() =>
 const showEditProfileDialog = ref(false);
 const showFollowersListDialog = ref(false);
 const showCreatorsListDialog = ref(false);
-const agentPubKeyRef = computed(() => route.params.agentPubKey);
+const agentPubKeyB64 = computed(() => route.params.agentPubKey);
 const pageLimit = 5;
 
 const fetchAuthoredMews = () =>
@@ -184,7 +184,7 @@ const {
   error: errorAuthoredMews,
   refetch: refetchAuthoredMews,
 } = useQuery({
-  queryKey: ["profiles", "get_agent_mews_with_context", agentPubKeyRef],
+  queryKey: ["profiles", "get_agent_mews_with_context", agentPubKeyB64],
   queryFn: fetchAuthoredMews,
 });
 watch(errorAuthoredMews, console.error);
@@ -203,7 +203,7 @@ const {
   error: errorPinnedMews,
   refetch: refetchPinnedMews,
 } = useQuery({
-  queryKey: ["profiles", "get_mews_for_pinner_with_context", agentPubKeyRef],
+  queryKey: ["profiles", "get_mews_for_pinner_with_context", agentPubKeyB64],
   queryFn: fetchPinnedMews,
 });
 watch(errorPinnedMews, console.error);
@@ -233,7 +233,7 @@ const {
   error: errorProfile,
   refetch: refetchProfile,
 } = useQuery({
-  queryKey: ["profiles", "getAgentProfile", agentPubKeyRef],
+  queryKey: ["profiles", "getAgentProfile", agentPubKeyB64],
   queryFn: fetchProfileWithContext,
 });
 watch(errorProfile, console.error);
@@ -267,7 +267,7 @@ const fetchFollowers = async () => {
 };
 
 const { data: followers, error: errorFollowers } = useQuery({
-  queryKey: ["follows", "get_followers_for_creator", agentPubKeyRef],
+  queryKey: ["follows", "get_followers_for_creator", agentPubKeyB64],
   queryFn: fetchFollowers,
 });
 watch(errorFollowers, console.error);
@@ -301,7 +301,7 @@ const fetchCreators = async () => {
 };
 
 const { data: creators, error: errorCreators } = useQuery({
-  queryKey: ["follows", "get_creators_for_follower", agentPubKeyRef],
+  queryKey: ["follows", "get_creators_for_follower", agentPubKeyB64],
   queryFn: fetchCreators,
 });
 watch(errorCreators, console.error);
@@ -315,7 +315,7 @@ const fetchCreatorsCount = async (): Promise<number> =>
   });
 
 const { data: creatorsCount, error: errorCreatorsCount } = useQuery({
-  queryKey: ["follows", "count_creators_for_follower", agentPubKeyRef],
+  queryKey: ["follows", "count_creators_for_follower", agentPubKeyB64],
   queryFn: fetchCreatorsCount,
 });
 watch(errorCreatorsCount, console.error);
@@ -333,7 +333,7 @@ const {
   error: errorFollowersCount,
   refetch: refetchFollowersCount,
 } = useQuery({
-  queryKey: ["follows", "count_followers_for_creator", agentPubKeyRef],
+  queryKey: ["follows", "count_followers_for_creator", agentPubKeyB64],
   queryFn: fetchFollowersCount,
 });
 watch(errorFollowersCount, console.error);
diff --git a/ui/src/pages/MewsListAuthor.vue b/ui/src/pages/MewsListAuthor.vue
index 7964fee4..e3f99ac6 100644
--- a/ui/src/pages/MewsListAuthor.vue
+++ b/ui/src/pages/MewsListAuthor.vue
@@ -85,7 +85,10 @@ const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const queryClient = useQueryClient();
-const agentPubKey = computed(() => route.params.agentPubKey);
+const agentPubKeyB64 = computed(() => route.params.agentPubKey);
+const agentPubKey = computed(() =>
+  decodeHashFromBase64(route.params.agentPubKey as string)
+);
 
 const pageLimit = 10;
 
@@ -95,7 +98,7 @@ const fetchAuthoredMews = async (params: any) => {
     zome_name: "mews",
     fn_name: "get_agent_mews_with_context",
     payload: {
-      agent: decodeHashFromBase64(route.params.agentPubKey as string),
+      agent: agentPubKey.value,
       page: {
         limit: pageLimit,
         ...params.pageParam,
@@ -107,7 +110,7 @@ const fetchAuthoredMews = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
-    queryKey: ["mews", "get_agent_mews_with_context", agentPubKey],
+    queryKey: ["mews", "get_agent_mews_with_context", agentPubKeyB64],
     queryFn: fetchAuthoredMews,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -120,9 +123,7 @@ const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   });
 
 const fetchProfile = async () => {
-  const profile = await profilesStore.client.getAgentProfile(
-    decodeHashFromBase64(route.params.agentPubKey as string)
-  );
+  const profile = await profilesStore.client.getAgentProfile(agentPubKey.value);
 
   if (profile) {
     return profile;
@@ -132,7 +133,7 @@ const fetchProfile = async () => {
 };
 
 const { data: profile, error: errorProfile } = useQuery({
-  queryKey: ["profiles", "getAgentProfile", agentPubKey],
+  queryKey: ["profiles", "getAgentProfile", agentPubKeyB64],
   queryFn: fetchProfile,
 });
 
@@ -149,7 +150,7 @@ watch(errorProfile, console.error);
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      ["mews", "get_agent_mews_with_context", route.params.agentPubKey],
+      ["mews", "get_agent_mews_with_context", agentPubKeyB64.value],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],
diff --git a/ui/src/pages/MewsListMention.vue b/ui/src/pages/MewsListMention.vue
index 4c8e5c31..019dc515 100644
--- a/ui/src/pages/MewsListMention.vue
+++ b/ui/src/pages/MewsListMention.vue
@@ -55,12 +55,11 @@
 
 <script setup lang="ts">
 import { AppAgentClient, decodeHashFromBase64 } from "@holochain/client";
-import { ComputedRef, computed, inject } from "vue";
+import { ComputedRef, computed, inject, ref, watch, onMounted } from "vue";
 import { useRoute, onBeforeRouteLeave } from "vue-router";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import BaseEmptyList from "@/components/BaseEmptyList.vue";
 import BaseMewListItem from "@/components/BaseMewListItem.vue";
-import { watch } from "vue";
 import BaseButtonBack from "@/components/BaseButtonBack.vue";
 import BaseListSkeleton from "@/components/BaseListSkeleton.vue";
 import BaseMewListItemSkeleton from "@/components/BaseMewListItemSkeleton.vue";
@@ -69,7 +68,14 @@ import BaseInfiniteScroll from "@/components/BaseInfiniteScroll.vue";
 const route = useRoute();
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const queryClient = useQueryClient();
-const tag = computed(() => `${route.meta.tag}${route.params.tag}`);
+const agentPubKeyB64 = computed(() => route.params.agentPubKey);
+const agentPubKey = computed(() =>
+  decodeHashFromBase64(route.params.agentPubKey as string)
+);
+const isMounted = ref(false);
+onMounted(() => {
+  isMounted.value = true;
+});
 
 const pageLimit = 10;
 
@@ -79,7 +85,7 @@ const fetchMentionMews = async (params: any) => {
     zome_name: "mews",
     fn_name: "get_mews_for_mention_with_context",
     payload: {
-      mention: decodeHashFromBase64(route.params.agentPubKey as string),
+      mention: agentPubKey.value,
       page: {
         limit: pageLimit,
         ...params.pageParam,
@@ -91,7 +97,7 @@ const fetchMentionMews = async (params: any) => {
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
-    queryKey: ["mews", "get_mews_for_mention_with_context", tag],
+    queryKey: ["mews", "get_mews_for_mention_with_context", agentPubKeyB64],
     queryFn: fetchMentionMews,
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return;
@@ -101,6 +107,7 @@ const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
     },
     refetchInterval: 1000 * 60 * 2, // 2 minutes
     refetchOnMount: true,
+    enabled: isMounted,
   });
 watch(error, console.error);
 
@@ -114,7 +121,7 @@ const fetchNextPageInfiniteScroll = async (
 onBeforeRouteLeave(() => {
   if (data.value && data.value.pages.length > 1) {
     queryClient.setQueryData(
-      ["mews", "get_mews_for_mention_with_context", tag.value],
+      ["mews", "get_mews_for_mention_with_context", agentPubKeyB64.value],
       (d: any) => ({
         pages: [d.pages[0]],
         pageParams: [d.pageParams[0]],

From 020d64b5d7f83b9e60ffbc93d55c86d619557660 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 14:21:12 -0700
Subject: [PATCH 14/20] chore(ui): rm console log

---
 ui/src/components/CreateProfileIfNotFoundDialog.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/components/CreateProfileIfNotFoundDialog.vue b/ui/src/components/CreateProfileIfNotFoundDialog.vue
index 1230b365..fa5a5e97 100644
--- a/ui/src/components/CreateProfileIfNotFoundDialog.vue
+++ b/ui/src/components/CreateProfileIfNotFoundDialog.vue
@@ -32,7 +32,6 @@ defineProps<{
 }>();
 
 const createProfile = async (profile: Profile) => {
-  console.log("createPRofile", profile);
   await profilesStore.client.createProfile(profile);
   await profilesStore.myProfile.reload();
 

From 3885216ca299f3f08fc4fc595accad8c6ac9db18 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 9 Sep 2023 14:23:38 -0700
Subject: [PATCH 15/20] fix(ui): zome call payload incorrect

---
 ui/src/pages/AgentProfile.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index d613a8ca..d4b7aef3 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -222,6 +222,7 @@ const {
 } = useQuery({
   queryKey: ["profiles", "getAgentProfile", agentPubKeyB64],
   queryFn: fetchProfile,
+  refetchOnMount: true,
 });
 watch(errorProfile, console.error);
 
@@ -230,7 +231,7 @@ const fetchJoinedTimestamp = () =>
     role_name: "mewsfeed",
     zome_name: "profiles",
     fn_name: "get_joining_timestamp_for_agent",
-    payload: agentPubKeyB64,
+    payload: agentPubKey.value,
   });
 
 const { data: joinedTimestamp, error: errorJoinedTimestamp } = useQuery({

From 94280594cf654271cbf1a4cf85f9a58fc42e10f3 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 11 Sep 2023 16:06:51 -0700
Subject: [PATCH 16/20] fix(ui): refetch followers / creators lists upon
 opening dialog

---
 ui/src/components/CreatorsListDialog.vue  | 8 +++++++-
 ui/src/components/FollowersListDialog.vue | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/CreatorsListDialog.vue b/ui/src/components/CreatorsListDialog.vue
index 2da3d5e3..4b4f7249 100644
--- a/ui/src/components/CreatorsListDialog.vue
+++ b/ui/src/components/CreatorsListDialog.vue
@@ -98,7 +98,7 @@ const fetchCreators = async (params: any) => {
   return agentProfiles.filter(Boolean) as AgentProfile[];
 };
 
-const { data, error, fetchNextPage, hasNextPage, isInitialLoading } =
+const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
     queryKey: ["mews", "get_creators_for_follower", agentPubKeyB64],
     queryFn: fetchCreators,
@@ -136,4 +136,10 @@ onBeforeRouteLeave(() => {
     );
   }
 });
+
+watch(props, (newProps) => {
+  if (newProps.modelValue) {
+    refetch();
+  }
+});
 </script>
diff --git a/ui/src/components/FollowersListDialog.vue b/ui/src/components/FollowersListDialog.vue
index a640b11a..70f48cc7 100644
--- a/ui/src/components/FollowersListDialog.vue
+++ b/ui/src/components/FollowersListDialog.vue
@@ -98,7 +98,7 @@ const fetchFollowers = async (params: any) => {
   return agentProfiles.filter(Boolean) as AgentProfile[];
 };
 
-const { data, error, fetchNextPage, hasNextPage, isInitialLoading } =
+const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
   useInfiniteQuery({
     queryKey: ["mews", "get_followers_for_creator", agentPubKeyB64],
     queryFn: fetchFollowers,
@@ -136,4 +136,10 @@ onBeforeRouteLeave(() => {
     );
   }
 });
+
+watch(props, (newProps) => {
+  if (newProps.modelValue) {
+    refetch();
+  }
+});
 </script>

From 1fb4345fa674b2720df0c7f15b23c96fad9bdebf Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 11 Sep 2023 16:10:20 -0700
Subject: [PATCH 17/20] fix(ui): spacing between <name> followed you

---
 ui/src/components/BaseNotification.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/BaseNotification.vue b/ui/src/components/BaseNotification.vue
index c2b29147..8718fdb1 100644
--- a/ui/src/components/BaseNotification.vue
+++ b/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"

From de5b1dbc93915d11763d07fad32330cec5762833 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 11 Sep 2023 16:10:55 -0700
Subject: [PATCH 18/20] fix(ui): do not abbreviate agentpubkey when used as
 primary displayed agent name in lists & detail

---
 ui/src/components/BaseAgentProfileListItem.vue  | 4 ++--
 ui/src/components/BaseAgentProfileNameLarge.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/BaseAgentProfileListItem.vue b/ui/src/components/BaseAgentProfileListItem.vue
index 2a417ade..09225d44 100644
--- a/ui/src/components/BaseAgentProfileListItem.vue
+++ b/ui/src/components/BaseAgentProfileListItem.vue
@@ -5,7 +5,7 @@
       :size="50"
       :enable-popup="enablePopup"
     />
-    <BaseAgentProfileName
+    <BaseAgentProfileNameLarge
       class="text-lg"
       :profile="profile"
       :agentPubKey="agentPubKey"
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 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";
 
diff --git a/ui/src/components/BaseAgentProfileNameLarge.vue b/ui/src/components/BaseAgentProfileNameLarge.vue
index 94e69c1a..1151360f 100644
--- a/ui/src/components/BaseAgentProfileNameLarge.vue
+++ b/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>

From cb534ade858f655b9e220ffae90fb0fb27c9d9c8 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 11 Sep 2023 16:13:38 -0700
Subject: [PATCH 19/20] chore(ui): remove unnecessary filters

---
 ui/src/components/CreatorsListDialog.vue  | 2 +-
 ui/src/components/FollowersListDialog.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/CreatorsListDialog.vue b/ui/src/components/CreatorsListDialog.vue
index 4b4f7249..d0c62db1 100644
--- a/ui/src/components/CreatorsListDialog.vue
+++ b/ui/src/components/CreatorsListDialog.vue
@@ -95,7 +95,7 @@ const fetchCreators = async (params: any) => {
     })
   );
 
-  return agentProfiles.filter(Boolean) as AgentProfile[];
+  return agentProfiles;
 };
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =
diff --git a/ui/src/components/FollowersListDialog.vue b/ui/src/components/FollowersListDialog.vue
index 70f48cc7..94fc2134 100644
--- a/ui/src/components/FollowersListDialog.vue
+++ b/ui/src/components/FollowersListDialog.vue
@@ -95,7 +95,7 @@ const fetchFollowers = async (params: any) => {
     })
   );
 
-  return agentProfiles.filter(Boolean) as AgentProfile[];
+  return agentProfiles;
 };
 
 const { data, error, fetchNextPage, hasNextPage, isInitialLoading, refetch } =

From fb5a49aadde8a5bf601c9b7f84bee93cd35978a7 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 11 Sep 2023 16:14:34 -0700
Subject: [PATCH 20/20] chore(ui): fix ts lint

---
 ui/src/components/CreatorsListDialog.vue  | 2 +-
 ui/src/components/FollowersListDialog.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/CreatorsListDialog.vue b/ui/src/components/CreatorsListDialog.vue
index d0c62db1..cf97f390 100644
--- a/ui/src/components/CreatorsListDialog.vue
+++ b/ui/src/components/CreatorsListDialog.vue
@@ -91,7 +91,7 @@ const fetchCreators = async (params: any) => {
       return {
         agentPubKey,
         profile,
-      };
+      } as AgentProfile;
     })
   );
 
diff --git a/ui/src/components/FollowersListDialog.vue b/ui/src/components/FollowersListDialog.vue
index 94fc2134..294d136c 100644
--- a/ui/src/components/FollowersListDialog.vue
+++ b/ui/src/components/FollowersListDialog.vue
@@ -91,7 +91,7 @@ const fetchFollowers = async (params: any) => {
       return {
         agentPubKey,
         profile,
-      };
+      } as AgentProfile;
     })
   );