From acf6a53f7730d0cf5bd97889867de0d08894c862 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 25 Mar 2023 14:38:34 -0700
Subject: [PATCH 1/5] refactor(ui); use composition api + SWR pattern for
 CommentDetail, CommentVotes, CommentsForPost

---
 ui/src/herd/posts/CommentDetail.vue   | 235 +++++++++++---------------
 ui/src/herd/posts/CommentVotes.vue    | 155 ++++++++---------
 ui/src/herd/posts/CommentsForPost.vue |   6 +-
 3 files changed, 172 insertions(+), 224 deletions(-)

diff --git a/ui/src/herd/posts/CommentDetail.vue b/ui/src/herd/posts/CommentDetail.vue
index 22a562a..fee7f88 100644
--- a/ui/src/herd/posts/CommentDetail.vue
+++ b/ui/src/herd/posts/CommentDetail.vue
@@ -1,27 +1,27 @@
 <template>
-  <div v-if="!loading && !isDeleted">
-    <div v-if="editing && record">
+  <div v-if="!isDeleted">
+    <div v-if="editing">
       <EditComment
         :dna-hash="dnaHash"
         :original-action-hash="originalActionHash"
-        :current-record="record"
+        :current-record="comment_metadata.record"
         class="flex flex-1"
-        @updated="editing = false; fetchComment();"
+        @updated="editing = false; runFetchComment();"
         @cancelled="editing = false"
       />
     </div>
-    <div v-else-if="record">
+    <div v-else-if="comment_metadata">
       <div
-        v-if="upvotes - downvotes >= 0 || showIfVoteNegative"
+        v-if="comment_metadata.upvotes - comment_metadata.downvotes >= 0 || showIfVoteNegative"
         class="flex flex-row items-start"
       >
         <CommentVotes 
           class="mr-2"
-          :votes="upvotes - downvotes" 
+          :votes="comment_metadata.upvotes - comment_metadata.downvotes" 
           :dna-hash="dnaHash" 
           :original-action-hash="originalActionHash"
-          @upvote="fetchComment"
-          @downvote="fetchComment"
+          @upvote="runFetchComment"
+          @downvote="runFetchComment"
         />
         <div class="px-4 flex-1">
           <div class="flex flex-row justify-between items-start mb-2 min-h-12">
@@ -74,12 +74,15 @@
       </BaseContentHidden>
     </div>
   </div>
+  <BaseContentHidden v-else-if="isDeleted">
+    Response deleted by author
+  </BaseContentHidden>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, PropType } from 'vue';
+<script lang="ts" setup>
+import { inject, ComputedRef, ref, computed, watch} from 'vue';
 import { decode } from '@msgpack/msgpack';
-import { AppAgentClient, Record } from '@holochain/client';
+import { AppAgentClient } from '@holochain/client';
 import { Comment } from './types';
 import EditComment from './EditComment.vue';
 import AgentProfile from '../profiles/AgentProfile.vue';
@@ -91,127 +94,91 @@ import { marked } from 'marked';
 import BaseEditDeleteButtons from '../../components/BaseEditDeleteButtons.vue';
 import BaseContentHidden from '../../components/BaseContentHidden.vue';
 import DOMPurify from 'dompurify';
+import { useRequest } from 'vue-request';
 
-export default defineComponent({
-  components: {
-    EditComment,
-    AgentProfile,
-    CommentVotes,
-    BaseEditDeleteButtons,
-    BaseContentHidden,
-  },
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    originalActionHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    postAuthorHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    }
-  },
-  emits: ['deleted'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client
-    };
-  },
-  data(): { record?: Record; upvotes: number; downvotes: number; loading: boolean; editing: boolean; showIfVoteNegative: boolean;} {
-    return {
-      record: undefined,
-      upvotes: 0,
-      downvotes: 0,
-      loading: true,
-      editing: false,
-      showIfVoteNegative: false
-    }
-  },
-  computed: {
-    isUpdated() {
-      if (!this.record) return undefined;
-
-      return this.record.signed_action.hashed.content.type === 'Update';
-    },
-    isDeleted() {
-      if (!this.record) return undefined;
-
-      return this.record.signed_action.hashed.content.type === 'Delete';
-    },
-    comment() {
-      if (!this.record?.entry) return undefined;
-      return decode((this.record.entry as any).Present.entry) as Comment;
-    },
-    commentContent() {
-      if(!this.comment?.content) return undefined;
-
-      return DOMPurify.sanitize(marked(this.comment?.content));
-    },
-    authorPubKey() {
-      if (!this.record) return undefined;
-
-      return this.record.signed_action.hashed.content.author;
-    },
-    dateRelative() {
-      if(!this.record?.signed_action.hashed.content.timestamp) return;
-
-      return dayjs(this.record.signed_action.hashed.content.timestamp/1000).fromNow();
-    },
-    isPostAuthor() {
-      if (!this.record) return undefined;
-
-      return isEqual(this.authorPubKey, this.postAuthorHash);
-    },
-    isMyComment() {
-      return isEqual(this.authorPubKey, this.client.myPubKey);
-    }
-  },
-  watch: {
-    originalActionHash() {
-      this.fetchComment();
-    }
-  },
-  async mounted() {
-    await this.fetchComment();
-  },
-  methods: {
-    async fetchComment() {
-      try {
-        const comment_metadata = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'get_comment_metadata',
-          payload: this.originalActionHash,
-        });
-
-        this.record = comment_metadata.record;
-        this.upvotes = comment_metadata.upvotes;
-        this.downvotes = comment_metadata.downvotes;
-      } catch(e: any) {
-        toast.error(`Error fetching the comment: ${e.data.data}`);
-      }
-
-      this.loading = false;
-    },
-    async deleteComment() {
-      try {
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'delete_comment',
-          payload: this.originalActionHash,
-        });
-        this.$emit('deleted', this.originalActionHash);
-        this.record = undefined;
-      } catch (e: any) {
-        toast.error(`Error deleting the comment: ${e.data.data}`);
-
-      }
-    }
-  },
-})
+const props = defineProps<{
+  dnaHash: Uint8Array,
+  originalActionHash: Uint8Array,
+  postAuthorHash: Uint8Array
+}>();
+
+const emit = defineEmits(['deleted']);
+
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+
+const editing = ref(false);
+const showIfVoteNegative = ref(false);
+
+const isUpdated = computed(() => {
+  if (!comment_metadata.value?.record) return undefined;
+
+  return comment_metadata.value.record.signed_action.hashed.content.type === 'Update';
+});
+const isDeleted = computed(() => {
+  if (!comment_metadata.value?.record) return false;
+
+  return comment_metadata.value.record.signed_action.hashed.content.type === 'Delete';
+});
+const comment = computed(() => {
+  if (!comment_metadata.value?.record.entry) return undefined;
+
+  return decode((comment_metadata.value.record.entry as any).Present.entry) as Comment;
+});
+const commentContent = computed(() => {
+  if(!comment.value?.content) return undefined;
+
+  return DOMPurify.sanitize(marked(comment.value?.content));
+});
+const authorPubKey = computed(() => {
+  if (!comment_metadata.value?.record) return undefined;
+
+  return comment_metadata.value.record.signed_action.hashed.content.author;
+});
+const dateRelative = computed(() => {
+  if(!comment_metadata.value?.record.signed_action.hashed.content.timestamp) return;
+
+  return dayjs(comment_metadata.value.record.signed_action.hashed.content.timestamp/1000).fromNow();
+});
+const isPostAuthor = computed(() => {
+  return isEqual(authorPubKey.value, props.postAuthorHash);
+});
+const isMyComment = computed(() => {
+  return isEqual(authorPubKey.value, client.myPubKey);
+});
+
+const fetchComment = async () => {
+  const res = await client.callZome({
+    cell_id: [props.dnaHash, client.myPubKey],
+    zome_name: 'posts',
+    fn_name: 'get_comment_metadata',
+    payload: props.originalActionHash,
+  });
+
+  return res;
+};
+
+const deleteComment = async () => {
+  try {
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'delete_comment',
+      payload: props.originalActionHash
+    });
+
+    emit('deleted', props.originalActionHash);
+  } catch (e: any) {
+    toast.error(`Error deleting the comment: ${e.data.data}`);
+  }
+};
+
+const { data: comment_metadata, run: runFetchComment } = useRequest(fetchComment, {
+  onError: (e: any) => {
+    toast.error(`Error fetching the comment: ${e.data.data}`);
+  }
+});
+
+watch(props, () => {
+  runFetchComment();
+});
 </script>
diff --git a/ui/src/herd/posts/CommentVotes.vue b/ui/src/herd/posts/CommentVotes.vue
index 4b357e9..1214067 100644
--- a/ui/src/herd/posts/CommentVotes.vue
+++ b/ui/src/herd/posts/CommentVotes.vue
@@ -7,98 +7,79 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { AppAgentClient } from '@holochain/client';
-import { ComputedRef, defineComponent, inject, PropType } from 'vue'
+import { ComputedRef, inject, watch } from 'vue'
+import { useRequest } from 'vue-request';
 import { toast } from 'vue3-toastify';
 import BaseVoteInput from '../../components/BaseVoteInput.vue';
 
-export default defineComponent({
-  components: {
-    BaseVoteInput
-  },
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    originalActionHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    votes: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['upvote', 'downvote'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client
-    };
-  },
-  data(): { myVote?: number; } {
-    return {
-      myVote: undefined,
-    }
-  },
-  mounted() {
-    this.getMyVote();
-  },
-  methods: {
-    async getMyVote() {
-      try {
-        const vote_tag = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'get_my_vote_on_comment',
-          payload: this.originalActionHash,
-        });
-        
-        if(vote_tag) {
-          this.myVote = vote_tag.value;
-        }
-      } catch (e: any) {
-        toast.error(`Failed to fetch post votes count: ${e.data.data}`);
-      }
-    },
-    async upvote() {
-      if(this.myVote === 1) return;
+const props = defineProps<{
+  dnaHash: Uint8Array,
+  originalActionHash: Uint8Array,
+  votes?: number
+}>();
 
-      try {
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'upvote_comment',
-          payload: this.originalActionHash,
-        });
-        this.$emit('upvote');
-        this.getMyVote();
-      } catch (e: any) {
-        toast.error(`Failed to vote on post: ${e.data.data}`);
-      }
-    },
-    async downvote() {
-      if(this.myVote === -1) return;
+const emit = defineEmits(['upvote', 'downvote']);
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+ 
 
-      try {
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'downvote_comment',
-          payload: this.originalActionHash,
-        });
-        this.$emit('downvote');
-        this.getMyVote();
-      } catch (e: any) {
-        toast.error("Failed to vote on post: ", e.data.data);
-      }
-    },
-  },
-})
-</script>
+const fetchMyVote = async () => {
+  try {
+    const res = await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'get_my_vote_on_comment',
+      payload: props.originalActionHash,
+    });
+
+    return res ? res.value : 0;
+  } catch (e: any) {
+    toast.error(`Failed to fetch post votes count: ${e.data.data}`);
+  }
+};
+
+const upvote = async () => {
+  if(myVote.value === 1) return;
+
+  try {
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'upvote_comment',
+      payload: props.originalActionHash,
+    });
+    emit('upvote');
+    runFetchMyVote();
+  } catch (e: any) {
+    toast.error(`Failed to vote on post: ${e.data.data}`);
+  }
+};
 
-<style scoped>
+const downvote = async () => {
+  if(myVote.value === -1) return;
 
-</style>
\ No newline at end of file
+  try {
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'downvote_comment',
+      payload: props.originalActionHash,
+    });
+    emit('downvote');
+    runFetchMyVote();
+  } catch (e: any) {
+    toast.error("Failed to vote on post: ", e.data.data);
+  }
+};
+
+const {data: myVote, run: runFetchMyVote } = useRequest(fetchMyVote, {
+  onError: (e: any) => {
+    toast.error(`Failed to fetch post votes count: ${e.data.data}`);
+  }
+});
+
+watch(props, () => {
+  runFetchMyVote();
+});
+</script>
diff --git a/ui/src/herd/posts/CommentsForPost.vue b/ui/src/herd/posts/CommentsForPost.vue
index 75a549f..4e73e94 100644
--- a/ui/src/herd/posts/CommentsForPost.vue
+++ b/ui/src/herd/posts/CommentsForPost.vue
@@ -12,8 +12,8 @@
       class="w-full"
     >
       <CommentDetail 
-        v-for="hash in hashes" 
-        :key="encodeHashToBase64(hash)"
+        v-for="(hash, i) in hashes" 
+        :key="i"
         :dna-hash="dnaHash"
         :original-action-hash="hash" 
         :post-author-hash="postAuthorHash"
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import { inject, ComputedRef } from 'vue';
-import { AppAgentClient, encodeHashToBase64 } from '@holochain/client';
+import { AppAgentClient } from '@holochain/client';
 import CommentDetail from './CommentDetail.vue';
 import CreateComment from './CreateComment.vue';
 import { toast } from 'vue3-toastify';

From 4602d7e46ec0640669b0d6e0971e38f24bd56839 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sat, 25 Mar 2023 14:49:46 -0700
Subject: [PATCH 2/5] refactor(ui): convert components to composition api, add
 prop allowPeeking to BaseContentHidden

---
 ui/src/components/BaseContentHidden.vue | 13 ++++++++-----
 ui/src/herd/posts/CommentDetail.vue     |  9 +++++++--
 ui/src/herd/posts/PostListItem.vue      |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/BaseContentHidden.vue b/ui/src/components/BaseContentHidden.vue
index 1c2c952..3e707bb 100644
--- a/ui/src/components/BaseContentHidden.vue
+++ b/ui/src/components/BaseContentHidden.vue
@@ -8,6 +8,7 @@
       </slot>
     </div>
     <button
+      v-if="allowPeeking"
       class="btn btn-ghost btn-xs"
       @click="$emit('show')"
     >
@@ -26,10 +27,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineEmits } from 'vue'
 
-export default defineComponent({
-  emits: ['show']
-})
+defineEmits(['show']);
+
+defineProps<{
+  allowPeeking?: boolean
+}>();
 </script>
\ No newline at end of file
diff --git a/ui/src/herd/posts/CommentDetail.vue b/ui/src/herd/posts/CommentDetail.vue
index fee7f88..e08d2a8 100644
--- a/ui/src/herd/posts/CommentDetail.vue
+++ b/ui/src/herd/posts/CommentDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!isDeleted">
+  <div v-if="!isDeleted || showIfDeleted">
     <div v-if="editing">
       <EditComment
         :dna-hash="dnaHash"
@@ -68,13 +68,17 @@
 
       <BaseContentHidden
         v-else
+        :allowPeeking="true"
         @show="showIfVoteNegative = true"
       >
         Response trampled by the herd
       </BaseContentHidden>
     </div>
   </div>
-  <BaseContentHidden v-else-if="isDeleted">
+  <BaseContentHidden
+    v-else-if="isDeleted"
+    @show="showIfDeleted = true"
+  >
     Response deleted by author
   </BaseContentHidden>
 </template>
@@ -108,6 +112,7 @@ const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
 const editing = ref(false);
 const showIfVoteNegative = ref(false);
+const showIfDeleted = ref(false);
 
 const isUpdated = computed(() => {
   if (!comment_metadata.value?.record) return undefined;
diff --git a/ui/src/herd/posts/PostListItem.vue b/ui/src/herd/posts/PostListItem.vue
index b3e24ba..2cc84af 100644
--- a/ui/src/herd/posts/PostListItem.vue
+++ b/ui/src/herd/posts/PostListItem.vue
@@ -43,6 +43,7 @@
     </div>
     <BaseContentHidden
       v-else
+      :allowPeeking="true"
       @show="showIfVoteNegative = true"
     >
       Call trampled by the herd

From acb7566dcfa6ee1fff5af9197b99fa08b2f9ee81 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sun, 26 Mar 2023 09:25:12 -0700
Subject: [PATCH 3/5] refactor(ui): WateringHOle to composition api

---
 ui/src/herd/herds/WateringHole.vue | 58 +++++++++++-------------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/ui/src/herd/herds/WateringHole.vue b/ui/src/herd/herds/WateringHole.vue
index adfc487..fdfeddf 100644
--- a/ui/src/herd/herds/WateringHole.vue
+++ b/ui/src/herd/herds/WateringHole.vue
@@ -40,7 +40,7 @@
   </div>
   <input
     id="join-herd-modal"
-    v-model="joinHerdModalVisible"
+    v-model="showJoinHerdModal"
     type="checkbox"
     className="modal-toggle"
   >
@@ -69,45 +69,29 @@
   </label>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { AppAgentClient } from '@holochain/client';
-import { ComputedRef, defineComponent, inject } from 'vue'
+import { ComputedRef, ref, inject, onMounted } from 'vue'
 import AllListings from '../directory/AllListings.vue';
 import BaseSpinner from '../../components/BaseSpinner.vue';
+import { useRouter } from 'vue-router';
 
-export default defineComponent({
-    components: {
-        AllListings,
-        BaseSpinner,
-    },
-    setup() {
-        const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-        return {
-          client,
-        };
-    },
-    data() {
-        return {
-            loading: true,
-            showPrivate: true,
-            herd_password: "",
-            joinHerdModalVisible: false,
-        };
-    },
-    async mounted() {
-        await this.client.appInfo();
-        this.loading = false;
-    },
-    methods: {
-      joinPrivateHerd() {
-        this.$router.push(`/herds/private/${this.herd_password}`);
-        this.herd_password = "";
-        this.joinHerdModalVisible = false;
-      },
-    }
-})
-</script>
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+const router = useRouter();
+
+const loading = ref(true);
+const showPrivate = ref(true);
+const herd_password = ref("");
+const showJoinHerdModal = ref(false);
 
-<style scoped>
+onMounted(async () => {
+    await client.appInfo();
+    loading.value = false;
+});
 
-</style>
\ No newline at end of file
+const joinPrivateHerd = () => {
+  router.push(`/herds/private/${herd_password.value}`);
+  herd_password.value = "";
+  showJoinHerdModal.value = false;
+};
+</script>

From 14b24a0766d82808c547fface1b802d0265cda0f Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sun, 26 Mar 2023 11:32:51 -0700
Subject: [PATCH 4/5] fix(ui): retry get_listings on error

---
 flake.lock                            | 6 +++---
 ui/src/herd/directory/ListingLink.vue | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/flake.lock b/flake.lock
index cf266ad..039c2f3 100644
--- a/flake.lock
+++ b/flake.lock
@@ -400,11 +400,11 @@
       },
       "locked": {
         "dir": "versions/0_1",
-        "lastModified": 1679768216,
-        "narHash": "sha256-FmBAlHKlL8NBxBTL8wVmsShM9jsckbs3ggnsOd/hPSk=",
+        "lastModified": 1679811419,
+        "narHash": "sha256-Dpz28/2wNsacIw8B4YpV1pKvyy0DT6fSkCRfAbPfKUo=",
         "owner": "holochain",
         "repo": "holochain",
-        "rev": "c83ba02658a5577f99c0960e8dbf925a57466192",
+        "rev": "c7957817622b1714b6e592c4b38a52216cd21280",
         "type": "github"
       },
       "original": {
diff --git a/ui/src/herd/directory/ListingLink.vue b/ui/src/herd/directory/ListingLink.vue
index e74325f..d2a6a04 100644
--- a/ui/src/herd/directory/ListingLink.vue
+++ b/ui/src/herd/directory/ListingLink.vue
@@ -72,6 +72,8 @@ const fetchListing = async (): Promise<Record> => {
 };
 
 const { data: record } = useRequest(fetchListing, {
+  errorRetryInterval: 1000,
+  errorRetryCount: 5,
   onError: (e: any) => {
     toast.error(`Failed to fetch listing ${e.data.data}`)
   }

From e605a3309d7815f2b96fdf7e8da54da72f6e5d48 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Sun, 26 Mar 2023 13:03:15 -0700
Subject: [PATCH 5/5] refactor(ui): use Composition api for all components

---
 ui/src/components/BaseEditDeleteButtons.vue |   8 +-
 ui/src/components/BaseThemeSelect.vue       |  18 +-
 ui/src/components/BaseVoteInput.vue         |  26 +--
 ui/src/herd/herds/CreateHerd.vue            | 233 +++++++++-----------
 ui/src/herd/herds/HerdPasswordModal.vue     |  22 +-
 ui/src/herd/posts/CreateComment.vue         | 109 ++++-----
 ui/src/herd/posts/CreatePost.vue            | 112 ++++------
 ui/src/herd/posts/EditComment.vue           |  97 +++-----
 ui/src/herd/posts/EditPost.vue              | 110 ++++-----
 ui/src/herd/posts/PostDetail.vue            |  25 +--
 ui/src/herd/posts/PostListItem.vue          | 143 +++++-------
 ui/src/herd/posts/PostVotes.vue             | 161 ++++++--------
 ui/src/herd/profiles/AgentProfile.vue       |  91 +++-----
 ui/src/herd/profiles/AgentProfileDetail.vue |  40 ++--
 14 files changed, 474 insertions(+), 721 deletions(-)

diff --git a/ui/src/components/BaseEditDeleteButtons.vue b/ui/src/components/BaseEditDeleteButtons.vue
index c36a1b3..0b09156 100644
--- a/ui/src/components/BaseEditDeleteButtons.vue
+++ b/ui/src/components/BaseEditDeleteButtons.vue
@@ -32,10 +32,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineEmits } from 'vue'
 
-export default defineComponent({
-  emits: ['edit', 'delete']
-})
+defineEmits(['edit', 'delete']);
 </script>
diff --git a/ui/src/components/BaseThemeSelect.vue b/ui/src/components/BaseThemeSelect.vue
index 99a80a0..35a43ab 100644
--- a/ui/src/components/BaseThemeSelect.vue
+++ b/ui/src/components/BaseThemeSelect.vue
@@ -35,20 +35,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { useThemeStore } from '../stores/theme'
 
-
-export default defineComponent({
-  setup () {
-    const store = useThemeStore();
-
-    return { store };
-  }
-})
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+const store = useThemeStore();
+</script>
\ No newline at end of file
diff --git a/ui/src/components/BaseVoteInput.vue b/ui/src/components/BaseVoteInput.vue
index b1276c7..542ca73 100644
--- a/ui/src/components/BaseVoteInput.vue
+++ b/ui/src/components/BaseVoteInput.vue
@@ -42,20 +42,16 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineEmits } from 'vue'
 
-export default defineComponent({
-  props: {
-    votes: {
-      type: Number,
-      default: 0
-    },
-    myVote: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['upvote', 'downvote']
-})
+defineEmits(['upvote', 'downvote']);
+
+withDefaults(defineProps<{
+  votes?: number,
+  myVote?: number
+}>(), {
+  votes: 0,
+  myVote: 0,
+});
 </script>
diff --git a/ui/src/herd/herds/CreateHerd.vue b/ui/src/herd/herds/CreateHerd.vue
index 6d8c416..49188dd 100644
--- a/ui/src/herd/herds/CreateHerd.vue
+++ b/ui/src/herd/herds/CreateHerd.vue
@@ -21,7 +21,7 @@
       <div class="form-control my-4 flex flex-row justify-start items-center space-x-4">
         <label class="label cursor-pointer">
           <input
-            v-model="publish"
+            v-model="isPublicHerd"
             type="checkbox"
             class="checkbox checkbox-lg"
           >
@@ -45,142 +45,119 @@
     :text="password"
   />
 </template>
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, ref } from 'vue';
+<script lang="ts" setup>
+import { defineEmits, inject, computed, ref, ComputedRef, watch } from 'vue';
 import { AppAgentClient, ActionHash, encodeHashToBase64, ClonedCell, randomByteArray } from '@holochain/client';
 import { toast } from 'vue3-toastify';
 import HerdPasswordModal from './HerdPasswordModal.vue';
 import { Listing } from '../directory/types';
+import { useRouter } from 'vue-router';
 
-export default defineComponent({
-  components: {
-    HerdPasswordModal
-  },
-  emits: ['listing-created'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    const checkboxModal = ref(null);
-
-    return {
-      checkboxModal,
-      client,
+defineEmits(['listing-created']);
+const router = useRouter();
+
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+
+const title = ref('');
+const description = ref('');
+const isPublicHerd = ref(true);
+const creatingHerd = ref(false);
+const password = ref();
+const showPasswordModal = ref(false);
+
+const isHerdValid = computed(() => title.value.length > 0);
+
+watch(title, (newTitle) => {
+  console.log('watch called');
+  title.value = newTitle.replace(/\W/g, "");
+});
+
+const createHerd = async () => {
+  creatingHerd.value = true;
+  try {
+    // Generate random network seed
+    const entropy = await randomByteArray(128)
+    const network_seed = encodeHashToBase64(entropy);
+
+    // Prepare herd cloned cell
+
+    // Clone herd cell
+    const cloneCell: ClonedCell = await client.createCloneCell({
+      role_name: 'herd',
+      modifiers: {
+        network_seed: network_seed,
+        properties: {
+          title: title.value
+        },
+      },
+    });
+
+    // Publish Listing about cell
+    const listing: Listing = { 
+        title: title.value,
+        description: description.value,
+        network_seed,
+        dna: cloneCell.cell_id[0]
     };
-  },
-  data(): {
-    title: string;
-    description: string;
-    publish: boolean;
-    creatingHerd: boolean;
-    password: string | undefined;
-    showPasswordModal: boolean;
-  } {
-    return { 
-      title: '',
-      description: '',
-      publish: true,
-      creatingHerd: false,
-      password: undefined,
-      showPasswordModal: false,
-    }
-  },
-  computed: {
-    isHerdValid() {
-      return this.title.length > 0
-    },
-  },
-  watch: {
-    title(val) {
-      this.title = val.replace(/\W/g, "");
-    },
-  },
-  methods: {
-    async createHerd() {
-      this.creatingHerd = true;
-      try {
-        // Generate random network seed
-        const entropy = await randomByteArray(128)
-        const network_seed = encodeHashToBase64(entropy);
-
-        // Prepare herd cloned cell
-
-        // Clone herd cell
-        const cloneCell: ClonedCell = await this.client.createCloneCell({
-          role_name: 'herd',
-          modifiers: {
-            network_seed: network_seed,
-            properties: {
-              title: this.title
-            },
-          },
-        });
-
-        // Publish Listing about cell
-        const listing: Listing = { 
-            title: this.title,
-            description: this.description,
-            network_seed,
-            dna: cloneCell.cell_id[0]
-        };
-
-        if(this.publish) {   
-          await this.createListing(listing);
-        } else {
-          await this.createPrivateListing(listing);
-        }
-
-        toast.success(`Cloned cell for herd "${this.title}"`);
-      } catch (e: any) {
-        toast.error(`Error creating the herd: ${e.data.data}`);
-      }
-
-      this.creatingHerd = false;
-    },
-
-  async createListing(listing: Listing) {
-    // Publish listing to public directory 
-    try {
-      const listing_ah: ActionHash = await this.client.callZome({
-          role_name: 'directory',
-          zome_name: 'directory',
-          fn_name: 'create_listing',
-          payload: listing,
-        });
-
-      this.$router.push(`/herds/${encodeHashToBase64(listing_ah)}`);
-    } catch (e: any) {
-      console.log('error', e);
-      toast.error('Error creating listing', e.data.data);
-    }
-  },
-  async createPrivateListing(listing: Listing) {
-    // Publish listing to private entry
-    try {
-      await this.client.callZome({
-        role_name: 'directory',
-        zome_name: 'directory',
-        fn_name: 'create_private_listing_idempotent',
-        payload: listing,
-      });
-    } catch (e: any) {
-      console.log('error', e);
-      toast.error('Error creating private listing', e.data.data);
+
+    if(isPublicHerd.value) {   
+      await createListing(listing);
+    } else {
+      await createPrivateListing(listing);
     }
-    // Encode listing into string to use a secret herd password
-    try {
-      const listing_babble = await this.client.callZome({
+
+    toast.success(`Cloned cell for herd "${title.value}"`);
+  } catch (e: any) {
+    toast.error(`Error creating the herd: ${e.data.data}`);
+  }
+
+  creatingHerd.value = false;
+};
+
+const createListing = async (listing: Listing) => {
+  // Publish listing to public directory 
+  try {
+    const listing_ah: ActionHash = await client.callZome({
         role_name: 'directory',
         zome_name: 'directory',
-        fn_name: 'listing_to_bubble_babble',
+        fn_name: 'create_listing',
         payload: listing,
       });
-      
-      this.password = listing_babble;
-      this.showPasswordModal = true;
-    } catch (e: any) {
-      console.log('error', e);
-      toast.error('Error converting data to mnemonic', e);
-    }
-  },
-  },
-})
+
+    router.push(`/herds/${encodeHashToBase64(listing_ah)}`);
+  } catch (e: any) {
+    console.log('error', e);
+    toast.error('Error creating listing', e.data.data);
+  }
+};
+
+const createPrivateListing = async (listing: Listing) => {
+  // Publish listing to private entry
+  try {
+    await client.callZome({
+      role_name: 'directory',
+      zome_name: 'directory',
+      fn_name: 'create_private_listing_idempotent',
+      payload: listing,
+    });
+  } catch (e: any) {
+    console.log('error', e);
+    toast.error('Error creating private listing', e.data.data);
+  }
+  // Encode listing into string to use a secret herd password
+  try {
+    const listing_babble = await client.callZome({
+      role_name: 'directory',
+      zome_name: 'directory',
+      fn_name: 'listing_to_bubble_babble',
+      payload: listing,
+    });
+    
+    password.value = listing_babble;
+    showPasswordModal.value = true;
+  } catch (e: any) {
+    console.log('error', e);
+    toast.error('Error converting data to mnemonic', e);
+  }
+};
 </script>
diff --git a/ui/src/herd/herds/HerdPasswordModal.vue b/ui/src/herd/herds/HerdPasswordModal.vue
index 9136860..1705cb3 100644
--- a/ui/src/herd/herds/HerdPasswordModal.vue
+++ b/ui/src/herd/herds/HerdPasswordModal.vue
@@ -46,20 +46,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String,
-      default: "",
-      required: true,
-    }
-  }
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  visible: boolean,
+  text: string
+}>(), {
+  visible: false,
+  text: ''
 });
 </script>
diff --git a/ui/src/herd/posts/CreateComment.vue b/ui/src/herd/posts/CreateComment.vue
index 6495997..55a1bc6 100644
--- a/ui/src/herd/posts/CreateComment.vue
+++ b/ui/src/herd/posts/CreateComment.vue
@@ -24,77 +24,56 @@
     </button>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, PropType } from 'vue';
+<script lang="ts" setup>
+import { ref, computed, defineEmits, inject, ComputedRef, PropType } from 'vue';
 import { AppAgentClient, Record } from '@holochain/client';
 import { Comment } from './types';
 import { toast } from 'vue3-toastify';
 
-export default defineComponent({
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    postHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-  },
-  emits: ['created'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client,
-    };
-  },
-  data(): {
-    content: string;
-    submitting: boolean;
-  } {
-    return { 
-      content: "",
-      submitting: false,
-    }
-  },
-  computed: {
-    isCommentValid() {
-      return true && this.content.length > 0;
-    },
-  },
-  methods: {
-    async createComment() {
-      this.submitting = true;
-      
-      const comment: Comment = { 
-        content: this.content,
-        post_ah: this.postHash,
-      };
+const props = defineProps<{
+  dnaHash: Uint8Array,
+  postHash: Uint8Array,
+}>();
+const emit = defineEmits(['created']);
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
-      try {
-        const record: Record = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'create_comment',
-          payload: comment,
-        });
+const content = ref("");
+const submitting = ref(false);
 
-        // Upvote my comment
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'upvote_comment',
-          payload: record.signed_action.hashed.hash,
-        });
+const isCommentValid = computed(() => {
+  return true && content.value.length > 0;
+});
 
-        this.$emit('created', record.signed_action.hashed.hash);
-        this.content = "";
-      } catch (e: any) {
-        toast.error(`Error creating the comment: ${e.data.data}`);
-      }
+const createComment = async () => {
+  submitting.value = true;
+  
+  const comment: Comment = { 
+    content: content.value,
+    post_ah: props.postHash,
+  };
+
+  try {
+    const record: Record = await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'create_comment',
+      payload: comment,
+    });
+
+    // Upvote my comment
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'upvote_comment',
+      payload: record.signed_action.hashed.hash,
+    });
+
+    emit('created', record.signed_action.hashed.hash);
+    content.value = "";
+  } catch (e: any) {
+    toast.error(`Error creating the comment: ${e.data.data}`);
+  }
 
-      this.submitting = false;
-    },
-  },
-})
+  submitting.value = false;
+};
 </script>
diff --git a/ui/src/herd/posts/CreatePost.vue b/ui/src/herd/posts/CreatePost.vue
index 8b24107..e29d0bf 100644
--- a/ui/src/herd/posts/CreatePost.vue
+++ b/ui/src/herd/posts/CreatePost.vue
@@ -37,76 +37,56 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, PropType } from 'vue';
+<script lang="ts" setup>
+import { inject, computed, ComputedRef, ref } from 'vue';
 import { AppAgentClient, Record, encodeHashToBase64 } from '@holochain/client';
 import { Post } from './types';
 import { toast } from 'vue3-toastify';
-export default defineComponent({
-  
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-  },
-  emits: ['post-created'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client,
-    };
-  },
-  data(): {
-    title: string;
-    content: string;
-    record: Record | undefined;
-    loading: boolean;
-  } {
-    return { 
-      title: "",
-      content: "",
-      record: undefined,
-      loading: false,
-    }
-  },
-  computed: {
-    isPostValid() {
-      return this.title && this.content;
-    },
-  },
-  methods: {
-    async createPost() {
-      if(!this.isPostValid) return;
-      
-      const post: Post = { 
-        title: this.title,
-        content: this.content,
-      };
+import { useRoute, useRouter} from 'vue-router';
+
+const props = defineProps<{
+  dnaHash: Uint8Array
+}>();
+const emit = defineEmits(['post-created']);
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+const router = useRouter();
+const route = useRoute();
+
+const title = ref("");
+const content = ref("");
 
-      try {
-        const record: Record = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'create_post',
-          payload: post,
-        });
-      
-        // Upvote my post
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'upvote_post',
-          payload: record.signed_action.hashed.hash,
-        });
+const isPostValid = computed(() => {
+  return title.value && content.value;
+});
 
-        this.$emit('post-created', record.signed_action.hashed.hash);
-        this.$router.push(`/herds/${this.$route.params.listingHashString}/posts/${encodeHashToBase64(record.signed_action.hashed.hash)}`);
-      } catch (e: any) {
-        toast.error(`Error creating the Post: ${e.data.data}`);
+const createPost = async () => {
+  if(!isPostValid.value) return;
+  
+  const post: Post = { 
+    title: title.value,
+    content: content.value,
+  };
+
+  try {
+    const record: Record = await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'create_post',
+      payload: post,
+    });
+  
+    // Upvote my post
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'upvote_post',
+      payload: record.signed_action.hashed.hash,
+    });
 
-      }
-    },
-  },
-})
+    emit('post-created', record.signed_action.hashed.hash);
+    router.push(`/herds/${route.params.listingHashString}/posts/${encodeHashToBase64(record.signed_action.hashed.hash)}`);
+  } catch (e: any) {
+    toast.error(`Error creating the Post: ${e.data.data}`);
+  }
+};
 </script>
diff --git a/ui/src/herd/posts/EditComment.vue b/ui/src/herd/posts/EditComment.vue
index d29eb3c..06b5771 100644
--- a/ui/src/herd/posts/EditComment.vue
+++ b/ui/src/herd/posts/EditComment.vue
@@ -27,74 +27,47 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, PropType } from 'vue';
+<script lang="ts" setup>
+import { inject, computed, ComputedRef, ref } from 'vue';
 import { AppAgentClient, Record } from '@holochain/client';
 import { Comment } from './types';
 import { decode } from '@msgpack/msgpack';
 import { toast } from 'vue3-toastify';
 
-export default defineComponent({
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true,
-    },
-    originalActionHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true,
-    },
-    currentRecord: {
-      type: Object,
-      required: true
-    }
-  },
-  emits: ['updated', 'cancelled'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client,
-    };
-  },
-  data(): {
-    content: string;
-  } {
-    const currentComment = decode((this.currentRecord.entry as any).Present.entry) as Comment;
-    return { 
-      content: currentComment.content,
-    }
-  },
-  computed: {
-    currentComment() {
-      return decode((this.currentRecord.entry as any).Present.entry) as Comment;
-    },
-    isCommentValid() {
-      return this.content;
-    },
-  },
-  methods: {
-    async updateComment() {
+const props = defineProps<{
+  dnaHash: Uint8Array,
+  originalActionHash: Uint8Array,
+  currentRecord: Record
+}>();
+const emit = defineEmits(['updated', 'cancelled']);
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
-      const comment: Comment = { 
-        content: this.content,
-        post_ah: this.currentComment.post_ah,
-      };
+const comment = computed(() => {
+  return decode((props.currentRecord.entry as any).Present.entry) as Comment;
+});
+const isCommentValid = computed(() => content.value);
+const content = ref<string>(comment.value.content);
 
-      try {
-        const updateRecord: Record = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'update_comment',
-          payload: {
-            original_comment_hash: this.originalActionHash,
-            updated_comment: comment
-          }
-        });
-        this.$emit('updated', updateRecord.signed_action.hashed.hash);
-      } catch (e: any) {
-        toast.error(`Error updating the comment: ${e.data.data}`);
+const updateComment = async () => {
+
+  const newComment: Comment = { 
+    content: content.value,
+    post_ah: comment.value.post_ah,
+  };
+
+  try {
+    const updateRecord: Record = await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'update_comment',
+      payload: {
+        original_comment_hash: props.originalActionHash,
+        updated_comment: newComment
       }
-    },
-  },
-})
+    });
+    emit('updated', updateRecord.signed_action.hashed.hash);
+  } catch (e: any) {
+    toast.error(`Error updating the comment: ${e.data.data}`);
+  }
+};
 </script>
diff --git a/ui/src/herd/posts/EditPost.vue b/ui/src/herd/posts/EditPost.vue
index 7dc0482..e103825 100644
--- a/ui/src/herd/posts/EditPost.vue
+++ b/ui/src/herd/posts/EditPost.vue
@@ -45,84 +45,52 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, PropType } from 'vue';
-import { AppAgentClient, Record, encodeHashToBase64 } from '@holochain/client';
+<script lang="ts" setup>
+import { ref, inject, ComputedRef, computed } from 'vue';
+import { AppAgentClient, Record } from '@holochain/client';
 import { Post } from './types';
 import { decode } from '@msgpack/msgpack';
 import '@vaadin/date-time-picker/theme/material/vaadin-date-time-picker.js';
 import { toast } from 'vue3-toastify';
 
-export default defineComponent({
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true,
-    },
-    postHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true,
-    },
-    currentRecord: {
-      type: Object,
-      required: true
-    }
-  },
-  emits: ['updated', 'cancelled'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client,
-    };
-  },
-  data(): {
-    title: string;
-    content: string;
-  } {
-    const currentPost = decode((this.currentRecord.entry as any).Present.entry) as Post;
-    return { 
-      title: currentPost.title,
-      content: currentPost.content
-    };
-  },
-  computed: {
-    currentPost() {
-      return decode((this.currentRecord.entry as any).Present.entry) as Post;
-    },
-    isPostValid() {
-      return this.title && this.content;
-    },
-    postHashString() {
-      if(!this.postHash) return undefined;
+const props = defineProps<{
+  dnaHash: Uint8Array,
+  postHash: Uint8Array,
+  currentRecord: Record
+}>();
+const emit = defineEmits(['updated', 'cancelled']);
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
-      return encodeHashToBase64(this.postHash);
-    }
-  },
-  methods: {
-    async updatePost() {
-      if(!this.isPostValid) return;
+const post = computed(() => decode((props.currentRecord.entry as any).Present.entry) as Post);
+const title = ref(post.value.title);
+const content = ref(post.value.content);
 
-      const post: Post = { 
-        title: this.title,
-        content: this.content,
-      };
+const isPostValid =  computed(() => {
+  return title.value && content.value;
+});
 
-      try {
-        const updateRecord: Record = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          zome_name: 'posts',
-          fn_name: 'update_post',
-          payload: {
-            original_post_hash: this.postHash,
-            previous_post_hash: this.currentRecord.signed_action.hashed.hash,
-            updated_post: post
-          }
-        });
-        this.$emit('updated', updateRecord.signed_action.hashed.hash);
-      } catch (e: any) {
-        toast.error(`Error updating the post: ${e.data.data}`);
+const updatePost = async () => {
+  if(!isPostValid.value) return;
+
+  const newPost: Post = { 
+    title: title.value,
+    content: content.value,
+  };
+
+  try {
+    const updateRecord: Record = await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      zome_name: 'posts',
+      fn_name: 'update_post',
+      payload: {
+        original_post_hash: props.postHash,
+        previous_post_hash: props.currentRecord.signed_action.hashed.hash,
+        updated_post: newPost
       }
-    },
-  },
-})
+    });
+    emit('updated', updateRecord.signed_action.hashed.hash);
+  } catch (e: any) {
+    toast.error(`Error updating the post: ${e.data.data}`);
+  }
+};
 </script>
diff --git a/ui/src/herd/posts/PostDetail.vue b/ui/src/herd/posts/PostDetail.vue
index 06ad899..6f50c87 100644
--- a/ui/src/herd/posts/PostDetail.vue
+++ b/ui/src/herd/posts/PostDetail.vue
@@ -84,12 +84,14 @@ import AgentProfile from '../profiles/AgentProfile.vue';
 import EditPost from './EditPost.vue';
 import {marked} from 'marked';
 import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { isEqual } from 'lodash';
 import { toast } from 'vue3-toastify';
 import BaseEditDeleteButtons from '../../components/BaseEditDeleteButtons.vue';
 import DOMPurify from 'dompurify';
 import { useRoute, useRouter } from 'vue-router';
 import { useRequest } from 'vue-request';
+dayjs.extend(relativeTime);
 
 const route = useRoute();
 const router = useRouter();
@@ -116,20 +118,18 @@ const postContent = computed(() => {
 });
 
 const myPost = computed(() => {
-  if(!post_metadata.value?.record || !appInfo.value) return false;
+  if(!post_metadata.value?.record) return false;
   return isEqual(post_metadata.value.record.signed_action.hashed.content.author, client.myPubKey);
 });
 
 const authorHash = computed(() => {
   if (!post_metadata.value?.record) return undefined;
-
-  return post_metadata.value?.record.signed_action.hashed.content.author;
+  return post_metadata.value.record.signed_action.hashed.content.author;
 });
 
-const dateRelative = computed(() => {
-  if(!post_metadata.value?.record?.signed_action.hashed.content.timestamp) return;
-
-  return dayjs(post_metadata.value?.record.signed_action.hashed.content.timestamp/1000).fromNow();
+const dateRelative = computed((): undefined | string => {
+  if(!post_metadata.value?.record) return undefined;
+  return dayjs(post_metadata.value.record.signed_action.hashed.content.timestamp/1000).fromNow();
 });
 
 const fetchPost = async (): Promise<{ upvotes: number, downvotes: number, record: Record }> => {
@@ -143,11 +143,6 @@ const fetchPost = async (): Promise<{ upvotes: number, downvotes: number, record
   return post_metadata;
 };
 
-const fetchAppInfo = async () => {
-  const res = await client.appInfo();
-  return res;
-}
- 
 const deletePost = async() => {
   try {
     await client.callZome({
@@ -170,10 +165,4 @@ const { data: post_metadata, run: runFetchPost } = useRequest(fetchPost, {
     toast.error(`Error fetching the post: ${e.data.data}`);
   }
 });
-
-const { data: appInfo } = useRequest(fetchAppInfo, {
-  onError: (e: any) => {
-    toast.error(`Failed to fetch appInfo ${e.data.data}`)
-  }
-});
 </script>
diff --git a/ui/src/herd/posts/PostListItem.vue b/ui/src/herd/posts/PostListItem.vue
index 2cc84af..7494b9a 100644
--- a/ui/src/herd/posts/PostListItem.vue
+++ b/ui/src/herd/posts/PostListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="record">
+  <div v-if="post_metadata?.record">
     <div
       v-if="isDeleted"
       class="w-full bg-base-200 px-8 py-4 space-x-8 text-gray-400 font-bold"
@@ -51,8 +51,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, PropType } from 'vue';
+<script lang="ts" setup>
+import { ref, inject, ComputedRef, computed, watch} from 'vue';
 import { decode } from '@msgpack/msgpack';
 import { AppAgentClient, Record, encodeHashToBase64 } from '@holochain/client';
 import { Post } from './types';
@@ -61,92 +61,67 @@ import AgentProfile from '../profiles/AgentProfile.vue';
 import BaseContentHidden from '../../components/BaseContentHidden.vue';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useRequest } from 'vue-request';
+import { toast } from 'vue3-toastify';
 dayjs.extend(relativeTime);
 
-export default defineComponent({
-  components: {
-    PostVotes,
-    AgentProfile,
-    BaseContentHidden,
-  },
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    postHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    }
-  },
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client
-    };
-  },
-  data(): { record: Record | undefined; loading: boolean; editing: boolean; votesCount: number; showIfVoteNegative: boolean; } {
-    return {
-      record: undefined,
-      loading: true,
-      editing: false,
-      votesCount: 0,
-      showIfVoteNegative: false,
-    }
-  },
-  computed: {
-    post() {
-      if (!this.record) return undefined;
-      return decode((this.record.entry as any).Present.entry) as Post;
-    },
-    isDeleted() {
-      if (!this.record) return undefined;
+const props = defineProps<{
+  dnaHash: Uint8Array,
+  postHash: Uint8Array
+}>();
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
-      return this.record.signed_action.hashed.content.type === 'Delete';
-    },
-    authorHash() {
-      if (!this.record) return undefined;
+const showIfVoteNegative = ref(false);
 
-      return this.record.signed_action.hashed.content.author;
-    },
-    dateRelative() {
-      if(!this.record?.signed_action.hashed.content.timestamp) return;
+const votesCount = computed(() => {
+  if (!post_metadata.value) return 0;
 
-      return dayjs(this.record.signed_action.hashed.content.timestamp/1000).fromNow();
-    },
-    postHashString() {      
-      return encodeHashToBase64(this.postHash);
-    },
-    dnaHashString() {
-      return encodeHashToBase64(this.dnaHash);
-    }
-  },
-  watch: {
-    dnaHash() {
-      this.fetchPost();
-    },
-    postHash() {
-      this.fetchPost();
-    }
-  },
-  async mounted() {
-    await this.fetchPost();
-  },
-  methods: {
-    async fetchPost() {
-      const post_metadata = await this.client.callZome({
-        cell_id: [this.dnaHash, this.client.myPubKey],
-        cap_secret: null,
-        zome_name: 'posts',
-        fn_name: 'get_post_metadata',
-        payload: this.postHash,
-      });
+  return post_metadata.value.upvotes - post_metadata.value.downvotes
+});
 
-      this.record = post_metadata.record;
-      this.votesCount = post_metadata.upvotes - post_metadata.downvotes;
+const post = computed(() => {
+  if (!post_metadata.value?.record) return undefined;
+  return decode((post_metadata.value.record.entry as any).Present.entry) as Post;
+});
 
-      this.loading = false;
-    },
-  },
-})
+const isDeleted = computed(() => {
+  if (!post_metadata.value?.record) return undefined;
+  return post_metadata.value.record.signed_action.hashed.content.type === 'Delete';
+});
+
+const authorHash = computed(() => {
+  if (!post_metadata.value?.record) return undefined;
+  return post_metadata.value.record.signed_action.hashed.content.author;
+});
+
+const dateRelative = computed(() => {
+  if(!post_metadata.value?.record.signed_action.hashed.content.timestamp) return;
+  return dayjs(post_metadata.value.record.signed_action.hashed.content.timestamp/1000).fromNow();
+});
+
+const postHashString = computed(() => {      
+  return encodeHashToBase64(props.postHash);
+});
+
+const fetchPost = async (): Promise<{ original_action_hash: Uint8Array, record: Record, upvotes: number, downvotes: number }> => {
+  const res = await client.callZome({
+    cell_id: [props.dnaHash, client.myPubKey],
+    cap_secret: null,
+    zome_name: 'posts',
+    fn_name: 'get_post_metadata',
+    payload: props.postHash,
+  });
+
+  return res;
+};
+
+const {data: post_metadata, run: runFetchPost } = useRequest(fetchPost, {
+  onError: (e: any) => {
+    toast.error(`Failed to fetch post ${e.data.data}`)
+  }
+});
+
+watch(props, () => {
+  runFetchPost();
+});
 </script>
diff --git a/ui/src/herd/posts/PostVotes.vue b/ui/src/herd/posts/PostVotes.vue
index 488f3e1..812f8f0 100644
--- a/ui/src/herd/posts/PostVotes.vue
+++ b/ui/src/herd/posts/PostVotes.vue
@@ -9,107 +9,78 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { AppAgentClient } from '@holochain/client';
-import { ComputedRef, defineComponent, inject, PropType } from 'vue'
+import { ComputedRef, inject } from 'vue'
+import { useRequest } from 'vue-request';
 import { toast } from 'vue3-toastify';
 import BaseVoteInput from '../../components/BaseVoteInput.vue';
 
-export default defineComponent({
-  components: {
-    BaseVoteInput
-  },
-  props: {
-    dnaHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    postHash: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    votes: {
-      type: Number,
-      default: 0
-    },
-    size: {
-      type: String,
-      default: "lg"
-    }
-  },
-  emits: ['upvote', 'downvote'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    return {
-      client
-    };
-  },
-  data(): { myVote?: number; } {
-    return {
-      myVote: undefined,
-    }
-  },
-  mounted() {
-    this.getMyVote();
-  },
-  methods: {
-    async getMyVote() {
-      try {
-        const vote_tag = await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          cap_secret: null,
-          zome_name: 'posts',
-          fn_name: 'get_my_vote_on_post',
-          payload: this.postHash,
-        });
-        
-        if(vote_tag) {
-          this.myVote = vote_tag.value;
-        }
-      } catch (e: any) {
-        toast.error("Failed to get my vote", e.data.data);
-      }
-    },
-    async upvote() {
-      if(this.myVote === 1) return;
+const props = withDefaults(defineProps<{
+  dnaHash: Uint8Array,
+  postHash: Uint8Array,
+  votes?: number,
+  size?: string
+}>(), {
+  votes: 0,
+  size: 'lg'
+});
 
-      try {
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          cap_secret: null,
-          zome_name: 'posts',
-          fn_name: 'upvote_post',
-          payload: this.postHash,
-        });
-        this.$emit('upvote');
-        this.getMyVote();
-      } catch (e: any) {
-        console.log(e);
-        toast.error(`Failed to upvote post: ${e.data.data}`);
-      }
-    },
-    async downvote() {
-      if(this.myVote === -1) return;
+const emit = defineEmits(['upvote', 'downvote']);
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
-      try {
-        await this.client.callZome({
-          cell_id: [this.dnaHash, this.client.myPubKey],
-          cap_secret: null,
-          zome_name: 'posts',
-          fn_name: 'downvote_post',
-          payload: this.postHash,
-        });
-        this.$emit('downvote');
-        this.getMyVote();
-      } catch (e: any) {
-        console.log(e);
-        toast.error(`Failed to downvote post: ${e.data.data}`);
-      }
-    },
+const getMyVote = async () => {
+  try {
+    const vote_tag = await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      cap_secret: null,
+      zome_name: 'posts',
+      fn_name: 'get_my_vote_on_post',
+      payload: props.postHash,
+    });
+    
+
+    return vote_tag.value;
+  } catch (e: any) {
+    toast.error("Failed to get my vote", e.data.data);
   }
-})
-</script>
+};
+
+const upvote = async() => {
+  if(myVote.value === 1) return;
+
+  try {
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      cap_secret: null,
+      zome_name: 'posts',
+      fn_name: 'upvote_post',
+      payload: props.postHash,
+    });
+    emit('upvote');
+    runGetMyVote();
+  } catch (e: any) {
+    toast.error(`Failed to upvote post: ${e.data.data}`);
+  }
+};
+
+const downvote = async () => {
+  if(myVote.value === -1) return;
 
-<style scoped>
+  try {
+    await client.callZome({
+      cell_id: [props.dnaHash, client.myPubKey],
+      cap_secret: null,
+      zome_name: 'posts',
+      fn_name: 'downvote_post',
+      payload: props.postHash,
+    });
+    emit('downvote');
+    runGetMyVote();
+  } catch (e: any) {
+    toast.error(`Failed to downvote post: ${e.data.data}`);
+  }
+};
 
-</style>
\ No newline at end of file
+const { data: myVote, run: runGetMyVote } = useRequest(getMyVote);
+</script>
diff --git a/ui/src/herd/profiles/AgentProfile.vue b/ui/src/herd/profiles/AgentProfile.vue
index ea0dc30..0b0a764 100644
--- a/ui/src/herd/profiles/AgentProfile.vue
+++ b/ui/src/herd/profiles/AgentProfile.vue
@@ -2,8 +2,8 @@
   <div
     v-if="profile"
     class="relative"
-    @mouseenter="() => { detailsVisible = true; }"
-    @mouseleave="() => { detailsVisible = false; }"
+    @mouseenter="() => { showDetails = true; }"
+    @mouseleave="() => { showDetails = false; }"
   >
     <div 
       class="flex flex-row items-center" 
@@ -23,7 +23,7 @@
 
     <div
       v-if="hoverForDetails"
-      v-show="detailsVisible"
+      v-show="showDetails"
       class="absolute z-30 bg-neutral text-neutral-content p-4 rounded-md flex flex-col justify-center min-w-64 max-w-92 break-words"
     >
       <profile-detail
@@ -40,60 +40,41 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { Profile, ProfilesStore } from '@holochain-open-dev/profiles';
-import { AppAgentClient, encodeHashToBase64 } from '@holochain/client';
-import { ComputedRef, defineComponent, inject, PropType } from 'vue'
+import { encodeHashToBase64 } from '@holochain/client';
+import { ref, ComputedRef, inject, computed, watch } from 'vue'
+import { useRequest } from 'vue-request';
 import { toast } from 'vue3-toastify';
 
-export default defineComponent({
-  props: {
-    agentPubKey: {
-      type: Object as PropType<Uint8Array>,
-      required: true
-    },
-    size: {
-      type: String,
-      default: 'lg',
-    },
-    muted: {
-      type: Boolean,
-      default: false
-    },
-    hoverForDetails: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    const profilesStore = (inject('profilesStore') as ComputedRef<ProfilesStore>).value;
-    return {
-      client,
-      profilesStore
-    };
-  },
-  data() : { profile?: Profile; detailsVisible: boolean } {
-    return {
-      profile: undefined,
-      detailsVisible: false,
-    }
-  },
-  computed: {
-    agentPubKeyString() {
-      return encodeHashToBase64(this.agentPubKey);
-    }
-  },
-  async mounted() {
-    try {
-      this.profile = await this.profilesStore.client.getAgentProfile(this.agentPubKey);
-    } catch(e: any) {
-      toast.error('Error getting agent profile', e);
-    }
-  },
-})
-</script>
+const props = withDefaults(defineProps<{
+  agentPubKey: Uint8Array,
+  size?: string,
+  muted?: boolean,
+  hoverForDetails?: boolean
+}>(),{
+  size: 'lg',
+  muted: false,
+  hoverForDetails: true
+});
 
-<style scoped>
+const profilesStore = (inject('profilesStore') as ComputedRef<ProfilesStore>).value;
+const showDetails = ref(false);
 
-</style>
\ No newline at end of file
+const agentPubKeyString = computed(() => {
+  return encodeHashToBase64(props.agentPubKey);
+});
+
+const getAgentProfile = async (): Promise<undefined | Profile> => {
+  const res = await profilesStore.client.getAgentProfile(props.agentPubKey);
+  return res;
+};
+
+const { data: profile, run: runGetAgentProfile } = useRequest(getAgentProfile, {
+  onError: (e: any) => {
+    toast.error(`Error getting agent profile ${e.data.data}`);
+  }
+});
+
+watch(props, runGetAgentProfile);
+</script>
\ No newline at end of file
diff --git a/ui/src/herd/profiles/AgentProfileDetail.vue b/ui/src/herd/profiles/AgentProfileDetail.vue
index f88bf1a..f0b3061 100644
--- a/ui/src/herd/profiles/AgentProfileDetail.vue
+++ b/ui/src/herd/profiles/AgentProfileDetail.vue
@@ -25,36 +25,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ComputedRef, defineComponent, inject } from 'vue'
+<script lang="ts" setup>
+import { ComputedRef, inject, computed } from 'vue'
+import { useRoute } from 'vue-router';
 import { isEqual} from 'lodash';
-import { ProfilesStore } from '@holochain-open-dev/profiles';
 import { AppAgentClient, decodeHashFromBase64 } from '@holochain/client';
 
-export default defineComponent({
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    const profilesStore = (inject('profilesStore') as ComputedRef<ProfilesStore>).value;
-    return {
-      client,
-      profilesStore
-    };
-  },
-  computed: {
-    isMyAgent() {
-      if(!this.agentPubKey) return;
+const route = useRoute();
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
 
-      return isEqual(this.client.myPubKey, this.agentPubKey);
-    },
-    agentPubKey() {
-      if(!this.$route.params.agentPubKeyString) return;
+const agentPubKey = computed(() => {
+  if(!route.params.agentPubKeyString) return;
+  return decodeHashFromBase64(route.params.agentPubKeyString as string);
+});
 
-      return decodeHashFromBase64(this.$route.params.agentPubKeyString as string);
-    }
-  }
-})
+const isMyAgent = computed(() => {
+  if(!agentPubKey.value) return;
+  return isEqual(client.myPubKey, agentPubKey.value);
+});
 </script>
-
-<style scoped>
-
-</style>