refactor(feed): move code to component

Author: VChet

src/components/feed-item.vue

@@ -0,0 +1,98 @@
+<template>
+  <li class="feed-item">
+    <time class="feed-item__timestamp">{{ data.date }}:</time>
+    <component :is="iconComponent" :style="{ stroke: iconColor }" class="feed-item__icon" />
+    <span v-if="data.username.includes('github-actions')" class="feed-item__accent">
+      {{ data.username }}
+    </span>
+    <a
+      v-else
+      :href="`https://github.com/${data.username}`"
+      target="_blank"
+      rel="noopener noreferrer"
+      :title="`Go to ${data.username} profile`"
+    >
+      {{ data.username }}
+    </a>
+    {{ data.action }}
+    <span v-if="data.eventUrl" v-dompurify-html="data.eventUrl" />
+    <a
+      :href="`https://github.com/${data.repo}`"
+      target="_blank"
+      rel="noopener noreferrer"
+      :title="`Go to ${data.repo} repository`"
+    >
+      {{ data.repo }}
+    </a>
+  </li>
+</template>
+<script setup lang="ts">
+import {
+  IconCalendarEvent,
+  IconCircleDot,
+  IconEye,
+  IconGitFork,
+  IconGitPullRequest,
+  IconStar,
+  IconTag,
+  IconUser,
+  type Icon
+} from "@tabler/icons-vue";
+import type { FeedEvent } from "@/store/events";
+
+interface Props {
+  data: FeedEvent
+}
+const props = defineProps<Props>();
+
+const iconComponent: Icon = (() => {
+  switch (props.data.type) {
+    case "ForkEvent": return IconGitFork;
+    case "IssuesEvent": return IconCircleDot;
+    case "MemberEvent": return IconUser;
+    case "PublicEvent": return IconEye;
+    case "PullRequestEvent": return IconGitPullRequest;
+    case "ReleaseEvent": return IconTag;
+    case "WatchEvent": return IconStar;
+    default: return IconCalendarEvent;
+  }
+})();
+const iconColor: string | undefined = (() => {
+  switch (props.data.action) {
+    case "opened issue":
+    case "opened pull request":
+    case "published release":
+      return "#3fb950"; // green
+    case "merged pull request":
+      return "#ab7df8"; // purple
+    case "closed issue":
+    case "closed pull request":
+      return "#f85149"; // red
+    case "made public":
+    case "starred":
+      return "#e3b341"; // yellow
+    case "forked":
+    case "joined":
+      return "#9198a1"; // gray
+    default:
+      return undefined;
+  }
+})();
+</script>
+<style lang="scss">
+.feed-item {
+  &__timestamp {
+    font-size: 0.875rem;
+    color: var(--accent);
+  }
+  &__icon {
+    width: 1rem;
+    height: 1rem;
+    margin-inline: .25rem;
+    vertical-align: bottom;
+  }
+  a, &__accent {
+    font-weight: bold;
+  }
+}
+</style>

src/pages/feed.vue

@@ -4,85 +4,15 @@
       No recent events
     </span>
     <ul v-else>
-      <li v-for="{ date, type, username, action, repo, id, eventUrl } in events" :key="id">
-        <time>{{ date }}:</time>
-        <component :is="getIconComponent(type)" :style="composeIconStyle(action)" class="user-feed__icon" />
-        <a
-          :href="`https://github.com/${username}`"
-          target="_blank"
-          rel="noopener noreferrer"
-          :title="`Go to ${username} profile`"
-        >
-          {{ username }}
-        </a>
-        {{ action }}
-        <span v-if="eventUrl" v-dompurify-html="eventUrl" />
-        <a
-          :href="`https://github.com/${repo}`"
-          target="_blank"
-          rel="noopener noreferrer"
-          :title="`Go to ${repo} repository`"
-        >
-          {{ repo }}
-        </a>
-      </li>
+      <feed-item v-for="event in events" :key="event.id" :data="event" />
     </ul>
   </section>
 </template>
 <script setup lang="ts">
-import type { CSSProperties } from "vue";
-import {
-  IconCalendarEvent,
-  IconCircleDot,
-  IconEye,
-  IconGitFork,
-  IconGitPullRequest,
-  IconStar,
-  IconTag,
-  IconUser,
-  type Icon
-} from "@tabler/icons-vue";
-import { useEventsStore, type FeedEvent } from "@/store/events";
+import { useEventsStore } from "@/store/events";
+import FeedItem from "@/components/feed-item.vue";
 
 const { events, amount } = useEventsStore();
-
-function getIconComponent(type: FeedEvent["type"]): Icon {
-  switch (type) {
-    case "ForkEvent": return IconGitFork;
-    case "IssuesEvent": return IconCircleDot;
-    case "MemberEvent": return IconUser;
-    case "PublicEvent": return IconEye;
-    case "PullRequestEvent": return IconGitPullRequest;
-    case "ReleaseEvent": return IconTag;
-    case "WatchEvent": return IconStar;
-    default: return IconCalendarEvent;
-  }
-}
-function getIconColor(action: FeedEvent["action"]): string | null {
-  switch (action) {
-    case "opened issue":
-    case "opened pull request":
-    case "published release":
-      return "#3fb950"; // green
-    case "merged pull request":
-      return "#ab7df8"; // purple
-    case "closed issue":
-    case "closed pull request":
-      return "#f85149"; // red
-    case "made public":
-    case "starred":
-      return "#e3b341"; // yellow
-    case "forked":
-    case "joined":
-      return "#9198a1"; // gray
-    default:
-      return null;
-  }
-}
-function composeIconStyle(action: FeedEvent["action"]): CSSProperties | null {
-  const color = getIconColor(action);
-  return color ? { stroke: color } : null;
-}
 </script>
 <style lang="scss">
 .user-feed {
@@ -95,21 +25,6 @@ function composeIconStyle(action: FeedEvent["action"]): CSSProperties | null {
       padding-left: 0;
       list-style-type: none;
     }
-    li {
-      a {
-        font-weight: bold;
-      }
-      time {
-        font-size: 0.875rem;
-        color: var(--accent);
-      }
-    }
-  }
-  &__icon {
-    width: 1rem;
-    height: 1rem;
-    margin-inline: .25rem;
-    vertical-align: bottom;
   }
 }
 </style>