From 73fdb032a5b37693f6f47868edb328fdcfac1e82 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 16 Jul 2021 16:50:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B6=88=E6=81=AF=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/cache/useCache.ts                      | 19 +++++++++++----
 shared/index.tsx                              |  1 +
 shared/utils/string-helper.ts                 |  8 +++++++
 .../ChatBox/ChatMessageList/Item.tsx          | 20 ++++++++++++++++
 .../ChatBox/ChatMessageList/index.tsx         | 23 +++++++++++++++++++
 web/src/components/ChatBox/index.tsx          |  4 +++-
 6 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/ChatBox/ChatMessageList/Item.tsx
 create mode 100644 web/src/components/ChatBox/ChatMessageList/index.tsx

diff --git a/shared/cache/useCache.ts b/shared/cache/useCache.ts
index 0ffcb520..b13abc11 100644
--- a/shared/cache/useCache.ts
+++ b/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), {
-    staleTime: 2 * 60 * 60 * 1000, // 缓存2小时
-    refetchOnMount: refetch ? 'always' : true,
-  });
+  const { data } = useQuery(
+    ['user', userId],
+    () => {
+      if (!isValidStr(userId)) {
+        return {};
+      }
+
+      return fetchUserInfo(userId);
+    },
+    {
+      staleTime: 2 * 60 * 60 * 1000, // 缓存2小时
+      refetchOnMount: refetch ? 'always' : true,
+    }
+  );
 
   return data ?? {};
 }
diff --git a/shared/index.tsx b/shared/index.tsx
index 48ac81fa..f53023f4 100644
--- a/shared/index.tsx
+++ b/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,
diff --git a/shared/utils/string-helper.ts b/shared/utils/string-helper.ts
index bea8d42c..d4eb4d21 100644
--- a/shared/utils/string-helper.ts
+++ b/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 !== '';
+}
diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
new file mode 100644
index 00000000..1a83e555
--- /dev/null
+++ b/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';
diff --git a/web/src/components/ChatBox/ChatMessageList/index.tsx b/web/src/components/ChatBox/ChatMessageList/index.tsx
new file mode 100644
index 00000000..c550765e
--- /dev/null
+++ b/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';
diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx
index 94435c26..eaaac40e 100644
--- a/web/src/components/ChatBox/index.tsx
+++ b/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({