schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve feed event item display

Browse Source
This commit is contained in:
moonrailgun 2024-06-30 20:09:08 +08:00
parent 56bbe09005
commit 17f87c191a
3 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/components/feed/FeedEventItem.tsx
View File

@ -4,6 +4,7 @@ import { Badge } from '../ui/badge';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'; import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import { MarkdownViewer } from '../MarkdownEditor'; import { MarkdownViewer } from '../MarkdownEditor';
import { FeedIcon } from './FeedIcon';
type FeedEventItemType = AppRouterOutput['feed']['events'][number]; type FeedEventItemType = AppRouterOutput['feed']['events'][number];
@ -12,7 +13,10 @@ export const FeedEventItem: React.FC<{ event: FeedEventItemType }> = React.memo(
return ( return (
<div className="border-muted flex items-center rounded-lg border px-4 py-2"> <div className="border-muted flex items-center rounded-lg border px-4 py-2">
<div className="flex-1 gap-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> <div>
<MarkdownViewer value={event.eventContent} /> <MarkdownViewer value={event.eventContent} />
</div> </div>
@ -30,7 +34,7 @@ export const FeedEventItem: React.FC<{ event: FeedEventItemType }> = React.memo(
</div> </div>
<Tooltip> <Tooltip>
<TooltipTrigger className="cursor-default"> <TooltipTrigger className="cursor-default self-end text-xs opacity-60">
<div>{dayjs(event.createdAt).fromNow()}</div> <div>{dayjs(event.createdAt).fromNow()}</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>

15
src/client/components/feed/FeedIcon.tsx Normal file
View File

@ -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';

6
src/server/trpc/routers/feed/integration.ts
View File

@ -45,7 +45,9 @@ export const feedIntegrationRouter = router({
if (eventType === 'push') { if (eventType === 'push') {
const pusherName = _.get(data, 'pusher.name'); const pusherName = _.get(data, 'pusher.name');
const pusherEmail = _.get(data, 'pusher.email'); 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 fullName = _.get(data, 'repository.full_name');
const repoUrl = _.get(data, 'repository.html_url'); const repoUrl = _.get(data, 'repository.html_url');
const ref = String(_.get(data, 'ref')); const ref = String(_.get(data, 'ref'));
@ -71,8 +73,6 @@ export const feedIntegrationRouter = router({
serializeJSON(event) serializeJSON(event)
); );
console.log('serializeJSON(event)', serializeJSON(event));
return 'ok'; return 'ok';
} else if (eventType === 'star') { } else if (eventType === 'star') {
const starCount = _.get(data, 'repository.stargazers_count'); const starCount = _.get(data, 'repository.stargazers_count');