refactor: 消息列表

shared/cache/useCache.ts

@@ -4,6 +4,7 @@ import {
   getUserOnlineStatus,
   UserBaseInfo,
 } from '../model/user';
+import { isValidStr } from '../utils/string-helper';
 
 /**
  * 用户缓存
@@ -12,10 +13,20 @@ export function useCachedUserInfo(
   userId: string,
   refetch = false
 ): UserBaseInfo | Record<string, never> {
-  const { data } = useQuery(['user', userId], () => fetchUserInfo(userId), {
+  const { data } = useQuery(
+    ['user', userId],
+    () => {
+      if (!isValidStr(userId)) {
+        return {};
+      }
+
+      return fetchUserInfo(userId);
+    },
+    {
       staleTime: 2 * 60 * 60 * 1000, // 缓存2小时
       refetchOnMount: refetch ? 'always' : true,
-  });
+    }
+  );
 
   return data ?? {};
 }

shared/index.tsx

@@ -51,6 +51,7 @@ export {
   denyFriendRequest,
 } from './model/friend';
 export type { FriendRequest } from './model/friend';
+export type { ChatMessage } from './model/message';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';
 export {
   loginWithEmail,

shared/utils/string-helper.ts

@@ -55,3 +55,11 @@ export function getTextColorHex(text: unknown): string {
   const id = str2int(text);
   return color[id % color.length];
 }
+
+/**
+ * 是一个可用的字符串
+ * 定义为有长度的字符串
+ */
+export function isValidStr(str: unknown): str is string {
+  return typeof str == 'string' && str !== '';
+}

web/src/components/ChatBox/ChatMessageList/Item.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ChatMessage, useCachedUserInfo } from 'pawchat-shared';
+
+interface ChatMessageItemProps {
+  showAvatar: boolean;
+  payload: ChatMessage;
+}
+export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
+  (props) => {
+    const { showAvatar, payload } = props;
+    const userInfo = useCachedUserInfo(payload.author ?? '');
+
+    return (
+      <div>
+        {userInfo.nickname}: {payload.content}
+      </div>
+    );
+  }
+);
+ChatMessageItem.displayName = 'ChatMessageItem';

web/src/components/ChatBox/ChatMessageList/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ChatMessage } from 'pawchat-shared';
+import { ChatMessageItem } from './Item';
+
+interface ChatMessageListProps {
+  messages: ChatMessage[];
+}
+export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
+  (props) => {
+    return (
+      <div>
+        {props.messages.map((message) => (
+          <ChatMessageItem
+            key={message._id}
+            showAvatar={true}
+            payload={message}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+ChatMessageList.displayName = 'ChatMessageList';

web/src/components/ChatBox/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useConverseMessage } from 'pawchat-shared';
 import { AlertErrorView } from '../AlertErrorView';
 import { ChatInputBox } from './ChatInputBox';
+import { ChatMessageList } from './ChatMessageList';
 
 const ChatBoxPlaceholder: React.FC = React.memo(() => {
   return (
@@ -39,7 +40,8 @@ export const ChatBox: React.FC<{
 
   return (
     <div>
-      <div>消息数据: {JSON.stringify(messages)}</div>
+      <ChatMessageList messages={messages} />
+
       <ChatInputBox
         onSendMsg={(msg) =>
           handleSendMessage({