From 17f87c191a9b1fcbcb39e73e1830ccb29b6e634c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 30 Jun 2024 20:09:08 +0800
Subject: [PATCH] refactor: improve feed event item display

---
 src/client/components/feed/FeedEventItem.tsx |  8 ++++++--
 src/client/components/feed/FeedIcon.tsx      | 15 +++++++++++++++
 src/server/trpc/routers/feed/integration.ts  |  6 +++---
 3 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/client/components/feed/FeedIcon.tsx

diff --git a/src/client/components/feed/FeedEventItem.tsx b/src/client/components/feed/FeedEventItem.tsx
index def4595..5e98cdf 100644
--- a/src/client/components/feed/FeedEventItem.tsx
+++ b/src/client/components/feed/FeedEventItem.tsx
@@ -4,6 +4,7 @@ import { Badge } from '../ui/badge';
 import dayjs from 'dayjs';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { MarkdownViewer } from '../MarkdownEditor';
+import { FeedIcon } from './FeedIcon';
 
 type FeedEventItemType = AppRouterOutput['feed']['events'][number];
 
@@ -12,7 +13,10 @@ export const FeedEventItem: React.FC<{ event: FeedEventItemType }> = React.memo(
     return (
       <div className="border-muted flex items-center rounded-lg border px-4 py-2">
         <div className="flex-1 gap-2">
-          <div className="mb-2 flex gap-2">
+          <div className="mb-2 flex items-center gap-2 text-sm">
+            <div className="border-muted rounded-lg border p-2">
+              <FeedIcon source={event.source} size={24} />
+            </div>
             <div>
               <MarkdownViewer value={event.eventContent} />
             </div>
@@ -30,7 +34,7 @@ export const FeedEventItem: React.FC<{ event: FeedEventItemType }> = React.memo(
         </div>
 
         <Tooltip>
-          <TooltipTrigger className="cursor-default">
+          <TooltipTrigger className="cursor-default self-end text-xs opacity-60">
             <div>{dayjs(event.createdAt).fromNow()}</div>
           </TooltipTrigger>
           <TooltipContent>
diff --git a/src/client/components/feed/FeedIcon.tsx b/src/client/components/feed/FeedIcon.tsx
new file mode 100644
index 0000000..3adaed1
--- /dev/null
+++ b/src/client/components/feed/FeedIcon.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { LuGithub, LuPlug } from 'react-icons/lu';
+
+interface FeedIconProps {
+  source: string;
+  size: number;
+}
+export const FeedIcon: React.FC<FeedIconProps> = React.memo((props) => {
+  if (props.source === 'github') {
+    return <LuGithub size={props.size} />;
+  }
+
+  return <LuPlug size={props.size} />;
+});
+FeedIcon.displayName = 'FeedIcon';
diff --git a/src/server/trpc/routers/feed/integration.ts b/src/server/trpc/routers/feed/integration.ts
index a11320e..85ff015 100644
--- a/src/server/trpc/routers/feed/integration.ts
+++ b/src/server/trpc/routers/feed/integration.ts
@@ -45,7 +45,9 @@ export const feedIntegrationRouter = router({
       if (eventType === 'push') {
         const pusherName = _.get(data, 'pusher.name');
         const pusherEmail = _.get(data, 'pusher.email');
-        const commits = _.map(_.get(data, 'commits') as any[], 'id').join(', ');
+        const commits = _.map(_.get(data, 'commits') as any[], (val) =>
+          String(val.id).substring(0, 9)
+        ).join(', ');
         const fullName = _.get(data, 'repository.full_name');
         const repoUrl = _.get(data, 'repository.html_url');
         const ref = String(_.get(data, 'ref'));
@@ -71,8 +73,6 @@ export const feedIntegrationRouter = router({
           serializeJSON(event)
         );
 
-        console.log('serializeJSON(event)', serializeJSON(event));
-
         return 'ok';
       } else if (eventType === 'star') {
         const starCount = _.get(data, 'repository.stargazers_count');