From e095a081b949880a088fd3e2512005d71d024769 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 1 Sep 2024 01:16:51 +0800
Subject: [PATCH] feat: add socket state

---
 src/client/api/socketio.ts                   | 24 ++++++++++++++++++++
 src/client/components/CommonHeader.tsx       |  6 +++--
 src/client/components/feed/FeedEventItem.tsx | 10 ++++----
 src/client/components/layout/UserConfig.tsx  | 22 ++++++++++++++----
 src/server/trpc/routers/feed/index.ts        |  6 ++++-
 5 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/client/api/socketio.ts b/src/client/api/socketio.ts
index 5f187b7..53955a0 100644
--- a/src/client/api/socketio.ts
+++ b/src/client/api/socketio.ts
@@ -7,8 +7,10 @@ import { useIsLogined } from '../store/user';
 
 const useSocketStore = create<{
   socket: Socket | null;
+  connected: boolean;
 }>(() => ({
   socket: null,
+  connected: false,
 }));
 
 export function createSocketIOClient(workspaceId: string) {
@@ -23,6 +25,24 @@ export function createSocketIOClient(workspaceId: string) {
     forceNew: true,
   });
 
+  socket.on('connect', () => {
+    useSocketStore.setState({
+      connected: true,
+    });
+  });
+
+  socket.on('disconnect', () => {
+    useSocketStore.setState({
+      connected: false,
+    });
+  });
+
+  socket.on('connect_error', () => {
+    useSocketStore.setState({
+      connected: false,
+    });
+  });
+
   useSocketStore.setState({
     socket,
   });
@@ -111,6 +131,10 @@ export function useSocketSubscribe<T>(
   return data;
 }
 
+export function useSocketConnected() {
+  return useSocketStore((state) => state.connected);
+}
+
 interface UseSocketSubscribeListOptions<K, T> {
   filter?: (data: T) => boolean;
 }
diff --git a/src/client/components/CommonHeader.tsx b/src/client/components/CommonHeader.tsx
index 3cd1c89..5327512 100644
--- a/src/client/components/CommonHeader.tsx
+++ b/src/client/components/CommonHeader.tsx
@@ -10,8 +10,10 @@ interface CommonHeaderProps {
 export const CommonHeader: React.FC<CommonHeaderProps> = React.memo((props) => {
   return (
     <div className="flex w-full items-center">
-      <div className="flex flex-1 items-center">
-        <h1 className="text-xl font-bold">{props.title}</h1>
+      <div className="flex flex-1 flex-shrink items-center overflow-hidden">
+        <h1 className="overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold">
+          {props.title}
+        </h1>
 
         {props.desc && (
           <span className="text-muted-foreground ml-2 self-end text-sm">
diff --git a/src/client/components/feed/FeedEventItem.tsx b/src/client/components/feed/FeedEventItem.tsx
index da8b4c0..85fd22e 100644
--- a/src/client/components/feed/FeedEventItem.tsx
+++ b/src/client/components/feed/FeedEventItem.tsx
@@ -1,4 +1,4 @@
-import { AppRouterOutput, trpc } from '@/api/trpc';
+import { AppRouterOutput } from '@/api/trpc';
 import React from 'react';
 import { Badge } from '../ui/badge';
 import dayjs from 'dayjs';
@@ -6,8 +6,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { MarkdownViewer } from '../MarkdownEditor';
 import { FeedIcon } from './FeedIcon';
 import { cn } from '@/utils/style';
-import { useCurrentWorkspaceId } from '@/store/user';
-import { useTranslation } from '@i18next-toolkit/react';
 
 type FeedEventItemType =
   AppRouterOutput['feed']['fetchEventsByCursor']['items'][number];
@@ -43,8 +41,10 @@ export const FeedEventItem: React.FC<{
 
             <Badge variant="secondary">{event.eventName}</Badge>
 
-            {event.tags.map((tag) => (
-              <Badge variant="outline">{tag}</Badge>
+            {event.tags.map((tag, i) => (
+              <Badge key={i} variant="outline">
+                {tag}
+              </Badge>
             ))}
           </div>
 
diff --git a/src/client/components/layout/UserConfig.tsx b/src/client/components/layout/UserConfig.tsx
index 7d99c2a..f371135 100644
--- a/src/client/components/layout/UserConfig.tsx
+++ b/src/client/components/layout/UserConfig.tsx
@@ -29,6 +29,8 @@ import { version } from '@/utils/env';
 import React from 'react';
 import { LuMoreVertical } from 'react-icons/lu';
 import { trpc } from '@/api/trpc';
+import { useSocketConnected } from '@/api/socketio';
+import { cn } from '@/utils/style';
 
 interface UserConfigProps {
   isCollapsed: boolean;
@@ -57,6 +59,7 @@ export const UserConfig: React.FC<UserConfigProps> = React.memo((props) => {
       setUserInfo(userInfo);
     },
   });
+  const socketConnected = useSocketConnected();
 
   const handleChangeColorSchema = useEvent((colorScheme) => {
     useSettingsStore.setState({
@@ -67,10 +70,21 @@ export const UserConfig: React.FC<UserConfigProps> = React.memo((props) => {
   const nickname = userInfo?.nickname ?? userInfo?.username ?? '';
 
   const avatar = (
-    <Avatar size={props.isCollapsed ? 'sm' : 'default'}>
-      <AvatarImage src={userInfo?.avatar ?? undefined} />
-      <AvatarFallback>{nickname.substring(0, 2).toUpperCase()}</AvatarFallback>
-    </Avatar>
+    <div className="relative">
+      <Avatar size={props.isCollapsed ? 'sm' : 'default'}>
+        {userInfo?.avatar && <AvatarImage src={userInfo.avatar} />}
+
+        <AvatarFallback>
+          {nickname.substring(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div
+        className={cn(
+          'absolute bottom-0 right-0 h-2 w-2 rounded-full border border-white border-opacity-50',
+          socketConnected ? 'bg-green-400' : 'bg-gray-400'
+        )}
+      />
+    </div>
   );
 
   const name = (
diff --git a/src/server/trpc/routers/feed/index.ts b/src/server/trpc/routers/feed/index.ts
index fda32be..7e5c24c 100644
--- a/src/server/trpc/routers/feed/index.ts
+++ b/src/server/trpc/routers/feed/index.ts
@@ -50,7 +50,11 @@ export const feedRouter = router({
         include: {
           _count: {
             select: {
-              events: true,
+              events: {
+                where: {
+                  archived: false,
+                },
+              },
             },
           },
         },