Merge pull request #19 from artbrock/extract-and-unify-feed-component

Extract and unify feed component

ui/src/components/AvatarWithPopup.vue

@@ -2,7 +2,14 @@
   <agent-avatar
     :agent-pub-key="authorPubKey(feedMew.header.author)"
     size="50"
-    class="self-start cursor-pointer"
+    :class="[
+      'self-start',
+      {
+        'cursor-pointer': !isCurrentProfile(
+          authorPubKey(feedMew.header.author)
+        ),
+      },
+    ]"
     @click="onAgentClick(authorPubKey(feedMew.header.author))"
     @mouseenter="showProfile(index)"
     @mouseleave="hideProfile(index)"
@@ -44,8 +51,14 @@ const profileHideTimeouts = ref<number[]>([]);
 const profileShowTimeouts = ref<number[]>([]);
 const router = useRouter();
 
+const isCurrentProfile = (agentPubKey: HoloHashB64) => {
+  return router.currentRoute.value.params.agent === agentPubKey;
+};
+
 const onAgentClick = (agentPubKey: HoloHashB64) => {
-  router.push(`/profiles/${agentPubKey}`);
+  if (!isCurrentProfile(agentPubKey)) {
+    router.push(`/profiles/${agentPubKey}`);
+  }
 };
 
 const showProfile = (index: number) => {

ui/src/components/MewList.vue

@@ -0,0 +1,33 @@
+<template>
+  <MewListSkeleton v-if="loading" />
+
+  <q-list v-else bordered separator>
+    <q-item v-for="(mew, index) of mews" :key="index" class="items-start">
+      <MewListItem
+        :feed-mew="mew"
+        :index="index"
+        @refresh-feed="emit('refresh')"
+      />
+    </q-item>
+  </q-list>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue";
+import { FeedMew } from "@/types/types";
+import MewListItem from "./MewListItem.vue";
+import MewListSkeleton from "@/components/MewListSkeleton.vue";
+
+defineProps({
+  mews: {
+    required: true,
+    type: Object as PropType<FeedMew[]>,
+  },
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits<{ (e: "refresh"): void }>();
+</script>

ui/src/components/FeedItem.vue → ui/src/components/MewListItem.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { lickMew, unlickMew } from "../services/clutter-dna";
+import { createMew, lickMew, unlickMew } from "../services/clutter-dna";
 import { computed, onMounted, ref } from "vue";
 import { FeedMew, CreateMewInput } from "../types/types";
 import { serializeHash } from "@holochain-open-dev/core-types";
@@ -80,10 +80,7 @@ const displayName = computed(() => agentProfile.value?.fields["Display name"]);
 const nickname = computed(() => agentProfile.value?.nickname);
 const myAgentPubKey = store.myAgentPubKey;
 
-const emit = defineEmits<{
-  (e: "publish-mew", mew: CreateMewInput): void;
-  (e: "refresh-feed"): void;
-}>();
+const emit = defineEmits<{ (e: "refresh-feed"): void }>();
 
 onMounted(async () => {
   agentProfile.value = await store.fetchAgentProfile(
@@ -108,15 +105,17 @@ const toggleLickMew = async () => {
 const replyToMew = () => (isReplying.value = true);
 
 const mewMew = async () => {
-  const createMewInput: CreateMewInput = {
+  const mew: CreateMewInput = {
     mewType: { mewMew: props.feedMew.mewEntryHash },
-    mew: props.feedMew.mew.content?.text || null,
+    text: props.feedMew.mew.content?.text || null,
   };
-  emit("publish-mew", createMewInput);
+  await createMew(mew);
+  emit("refresh-feed");
 };
 
-const publishReply = (newMew: CreateMewInput) => {
+const publishReply = async (mew: CreateMewInput) => {
+  await createMew(mew);
   isReplying.value = false;
-  emit("publish-mew", newMew);
+  emit("refresh-feed");
 };
 </script>

ui/src/components/ProfilePopup.vue

@@ -5,7 +5,7 @@
         <agent-avatar
           :agent-pub-key="agentPubKey"
           size="50"
-          class="q-mr-lg cursor-pointer"
+          :class="['q-mr-lg', { 'cursor-pointer': !isCurrentProfile }]"
           @click="onAgentClick(agentPubKey)"
         />
       </context-provider>
@@ -50,6 +50,9 @@ const props = defineProps({
 const isMyProfile = computed(
   () => props.agentPubKey === profileStore.myAgentPubKey
 );
+const isCurrentProfile = computed(
+  () => router.currentRoute.value.params.agent === props.agentPubKey
+);
 
 const nickname = ref("");
 const displayName = ref("");
@@ -75,6 +78,8 @@ onMounted(async () => {
 });
 
 const onAgentClick = (agentPubKey: HoloHashB64) => {
-  router.push(`/profiles/${agentPubKey}`);
+  if (!isCurrentProfile.value) {
+    router.push(`/profiles/${agentPubKey}`);
+  }
 };
 </script>

ui/src/pages/AgentProfile.vue

@@ -1,51 +1,40 @@
 <template>
   <q-page padding>
-    <q-spinner-pie v-if="loading" size="10%" color="primary" />
+    <q-spinner-pie v-if="loadingProfile" size="10%" color="primary" />
 
-    <template v-else>
-      <q-card v-bind="$attrs" flat class="q-mb-md text-body1">
-        <q-card-section class="flex justify-between">
-          <div class="flex items-center">
-            <agent-avatar
-              :agent-pub-key="agentPubKey"
-              size="50"
-              class="q-mr-lg"
-            />
-            <div class="q-mr-lg text-primary text-weight-medium">
-              {{ displayName }}
-            </div>
-            <div class="text-primary">@{{ nickname }}</div>
+    <q-card v-else v-bind="$attrs" flat class="q-mb-md text-body1">
+      <q-card-section class="flex justify-between">
+        <div class="flex items-center">
+          <agent-avatar
+            :agent-pub-key="agentPubKey"
+            size="50"
+            class="q-mr-lg"
+          />
+          <div class="q-mr-lg text-primary text-weight-medium">
+            {{ displayName }}
           </div>
-          <ButtonFollow :agent-pub-key="agentPubKey" />
-        </q-card-section>
+          <div class="text-primary">@{{ nickname }}</div>
+        </div>
+        <ButtonFollow :agent-pub-key="agentPubKey" />
+      </q-card-section>
 
-        <q-card-section class="flex">
-          <div class="q-mr-md">
-            <div>
-              <label class="text-weight-medium">Bio:</label>
-            </div>
-            <div>
-              <label class="text-weight-medium">Location:</label>
-            </div>
+      <q-card-section class="flex">
+        <div class="q-mr-md">
+          <div>
+            <label class="text-weight-medium">Bio:</label>
           </div>
-          <div class="col-grow">
-            <div>{{ bio }}</div>
-            <div>{{ location }}</div>
+          <div>
+            <label class="text-weight-medium">Location:</label>
           </div>
-        </q-card-section>
-      </q-card>
+        </div>
+        <div class="col-grow">
+          <div>{{ bio }}</div>
+          <div>{{ location }}</div>
+        </div>
+      </q-card-section>
+    </q-card>
 
-      <q-list v-if="mewsFeed.length > 0" bordered separator>
-        <q-item v-for="(feedMew, index) in mewsFeed" :key="index">
-          <q-item-section avatar>
-            <agent-avatar :agent-pub-key="agentPubKey" size="50" />
-          </q-item-section>
-          <q-item-section>
-            <MewContent :feed-mew="feedMew" />
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </template>
+    <MewList :loading="loadingMews" :mews="mews" @refresh="loadMews" />
   </q-page>
 </template>
 
@@ -57,28 +46,39 @@ import { computed, onMounted, ref, watch } from "vue";
 import { mewsBy, myFollowing } from "@/services/clutter-dna";
 import { FeedMew } from "@/types/types";
 import ButtonFollow from "@/components/ButtonFollow.vue";
-import MewContent from "@/components/MewContent.vue";
+import MewList from "../components/MewList.vue";
 
 const profileStore = useProfileStore();
 const route = useRoute();
 const agentPubKey = computed(() =>
   Array.isArray(route.params.agent) ? route.params.agent[0] : route.params.agent
 );
-const loading = ref(false);
+const loadingMews = ref(false);
+const loadingProfile = ref(false);
 const nickname = ref("");
 const displayName = ref("");
 const bio = ref("");
 const location = ref("");
 const following = ref(false);
-const mewsFeed = ref<FeedMew[]>([]);
+const mews = ref<FeedMew[]>([]);
+
+const loadMews = async () => {
+  try {
+    loadingMews.value = true;
+    mews.value = await mewsBy(agentPubKey.value);
+  } catch (error) {
+    showError(error);
+  } finally {
+    loadingMews.value = false;
+  }
+};
 
 const loadProfile = async () => {
   try {
-    loading.value = true;
-    const [profile, currentMyFollowing, mews] = await Promise.all([
+    loadingProfile.value = true;
+    const [profile, currentMyFollowing] = await Promise.all([
       profileStore.fetchAgentProfile(agentPubKey.value),
       myFollowing(),
-      mewsBy(agentPubKey.value),
     ]);
     if (profile) {
       nickname.value = profile.nickname;
@@ -87,16 +87,20 @@ const loadProfile = async () => {
       location.value = profile.fields.Location;
     }
     following.value = currentMyFollowing.includes(agentPubKey.value);
-    mewsFeed.value = mews;
   } catch (error) {
-    console.error("erererere", error);
     showError(error);
   } finally {
-    loading.value = false;
+    loadingProfile.value = false;
   }
 };
 
-onMounted(loadProfile);
+const load = () => {
+  loadProfile();
+  loadMews();
+};
+
+onMounted(load);
+
 watch(
   () => route.params.agent,
   () => {

ui/src/pages/MewsFeed.vue

@@ -8,25 +8,19 @@
 
     <h6 class="q-mb-md">Your Mews Feed</h6>
 
-    <FeedItemSkeleton v-if="loading" />
-
-    <q-banner v-else-if="mews.length === 0" class="bg-grey-3" dense rounded>
+    <q-banner
+      v-if="!loading && mews.length === 0"
+      class="bg-grey-3"
+      dense
+      rounded
+    >
       <template #avatar>
         <q-icon name="pets" color="accent" />
       </template>
       <div class="text-subtitle1">Meeoow, nothing here yet!</div>
     </q-banner>
 
-    <q-list v-else bordered separator>
-      <q-item v-for="(mew, index) of mews" :key="index" class="items-start">
-        <FeedItem
-          :feed-mew="mew"
-          :index="index"
-          @publish-mew="publishMew"
-          @refresh-feed="loadMewsFeed"
-        />
-      </q-item>
-    </q-list>
+    <MewList v-else :loading="loading" :mews="mews" @refresh="loadMewsFeed" />
   </q-page>
 </template>
 
@@ -36,8 +30,7 @@ import { onMounted, ref } from "vue";
 import { FeedMew, CreateMewInput } from "../types/types";
 import { showError } from "../utils/notification";
 import AddMew from "../components/AddMew.vue";
-import FeedItem from "../components/FeedItem.vue";
-import FeedItemSkeleton from "../components/FeedItemSkeleton.vue";
+import MewList from "../components/MewList.vue";
 
 const loading = ref(false);
 const mews = ref<FeedMew[]>([]);

ui/src/pages/TagMewsFeed.vue

@@ -1,34 +1,22 @@
 <template>
   <q-page padding>
     <h6 class="q-mt-none q-mb-md">Mews with {{ tagSymbol }}{{ tag }}</h6>
-    <FeedItemSkeleton v-if="loading" />
 
-    <q-list v-else bordered separator>
-      <q-item v-for="(mew, index) in mews" :key="index" class="items-start">
-        <FeedItem
-          :feed-mew="mew"
-          :index="index"
-          @publish-mew="publishMew"
-          @refresh-feed="loadMewsFeed"
-        />
-      </q-item>
-    </q-list>
+    <MewList :loading="loading" :mews="mews" @refresh="loadMewsFeed" />
   </q-page>
 </template>
 
 <script setup lang="ts">
 import {
-  createMew,
   getMewsWithCashtag,
   getMewsWithHashtag,
   getMewsWithMention,
 } from "@/services/clutter-dna";
 import { onMounted, computed, ref, watch } from "vue";
-import { FeedMew, CreateMewInput, TAG_SYMBOLS } from "@/types/types";
+import { FeedMew, TAG_SYMBOLS } from "@/types/types";
 import { showError } from "@/utils/notification";
 import { useRouter } from "vue-router";
-import FeedItem from "@/components/FeedItem.vue";
-import FeedItemSkeleton from "@/components/FeedItemSkeleton.vue";
+import MewList from "../components/MewList.vue";
 
 const router = useRouter();
 const currentRoute = computed(() => router.currentRoute.value);
@@ -61,9 +49,4 @@ const loadMewsFeed = async () => {
 
 onMounted(loadMewsFeed);
 watch(router.currentRoute, loadMewsFeed);
-
-const publishMew = async (newMew: CreateMewInput) => {
-  await createMew(newMew);
-  loadMewsFeed();
-};
 </script>