feat(web): 聊天记录搜索

TRPGEngine · Apr 11, 2021 · 283d557 · 283d557
1 parent 829cb44
commit 283d557
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 42 deletions.
diff --git a/src/shared/i18n/langs/en-US/translation.json b/src/shared/i18n/langs/en-US/translation.json
@@ -174,6 +174,7 @@
   "k93fb7d2d": "Group Not Found",
   "k950183bc": "New password cannot be empty",
   "k959638c1": "Welcome to TRPG World",
+  "k960aa491": "Search Chat Log",
   "k96608ca7": "Group Sub Name",
   "k97464d0d": "All Actor Card: {{groupActorNum}}",
   "k98dadf2e": "Copy completed! Send to friend and let him entry!",

diff --git a/src/shared/i18n/langs/zh-CN/translation.json b/src/shared/i18n/langs/zh-CN/translation.json
@@ -174,6 +174,7 @@
   "k93fb7d2d": "找不到该团",
   "k950183bc": "新密码不能为空",
   "k959638c1": "欢迎来到TRPG的世界",
+  "k960aa491": "搜索聊天记录",
   "k96608ca7": "团副名",
   "k97464d0d": "共 {{groupActorNum}} 张角色卡",
   "k98dadf2e": "复制成功, 直接发送给好友让他加入吧",

diff --git a/src/shared/redux/hooks/useChatHistory.ts b/src/shared/redux/hooks/useChatHistory.ts
@@ -2,7 +2,12 @@ import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useAsync } from 'react-use';
 import _isNil from 'lodash/isNil';
 import type { MsgPayload } from '@redux/types/chat';
-import { request } from '@shared/utils/request';
+import { request, CommonRequestResult } from '@shared/utils/request';
+
+interface ChatLogListData {
+  logs: MsgPayload[];
+  count: number;
+}
 
 /**
  * 聊天历史记录
@@ -16,20 +21,50 @@ export function useChatHistory(
 ) {
   const [page, setPage] = useState(1);
   const [count, setCount] = useState(0);
+  const [searchKeyword, setSearchKeyword] = useState('');
 
-  const { loading, value } = useAsync(async () => {
-    const { data } = await request.get<{
-      logs: MsgPayload[];
-      count: number;
-    }>(`/group/chatlog/${groupUUID}/${converseUUID}`, {
-      params: {
-        page,
-        size,
-      },
-    });
+  const { loading, value, error } = useAsync(async (): Promise<
+    CommonRequestResult<ChatLogListData>
+  > => {
+    if (typeof searchKeyword === 'string' && searchKeyword.length > 0) {
+      // 搜索
+      const { data } = await request.get(
+        `/chat/log/converse/${converseUUID}/search`,
+        {
+          params: {
+            keyword: searchKeyword,
+            page,
+            size,
+          },
+        }
+      );
 
-    return data;
-  }, [page, size]);
+      if (data.result === true) {
+        return {
+          result: true,
+          logs: data.logs,
+          count: Math.max(data.logs.length, size), // 不允许翻页
+        };
+      } else {
+        return {
+          result: false,
+          msg: data.msg,
+        };
+      }
+    } else {
+      const { data } = await request.get<CommonRequestResult<ChatLogListData>>(
+        `/group/chatlog/${groupUUID}/${converseUUID}`,
+        {
+          params: {
+            page,
+            size,
+          },
+        }
+      );
+
+      return data;
+    }
+  }, [groupUUID, converseUUID, page, size, searchKeyword]);
 
   useEffect(() => {
     if (_isNil(value?.count)) {
@@ -48,12 +83,35 @@ export function useChatHistory(
     [totalPage]
   );
 
-  return {
-    loading,
-    error: value?.result ? value.msg : null,
-    logs: value?.logs ?? [],
-    count,
-    page: totalPage - (page - 1),
-    changePage,
-  };
+  if (!_isNil(error)) {
+    return {
+      loading,
+      error,
+      logs: [],
+      count: 0,
+      page: 0,
+      changePage,
+      setSearchKeyword,
+    };
+  } else if (value?.result === false) {
+    return {
+      loading,
+      error: value.msg,
+      logs: [],
+      count: 0,
+      page: 0,
+      changePage,
+      setSearchKeyword,
+    };
+  } else {
+    return {
+      loading,
+      error: null,
+      logs: value?.logs ?? [],
+      count,
+      page: totalPage - (page - 1),
+      changePage,
+      setSearchKeyword,
+    };
+  }
 }
diff --git a/src/shared/utils/request.ts b/src/shared/utils/request.ts
@@ -43,6 +43,15 @@ export default async function requestOld<T = any>(
 
 // ====================以下为新版请求接口
 
+export type CommonRequestResult<T> =
+  | ({
+      result: false;
+      msg: string;
+    } & Partial<T>) // 并上一个T是为了方便取值, 但需要判定
+  | ({
+      result: true;
+    } & T);
+
 /**
  * 创建请求实例
  */

diff --git a/src/web/components/ChatHistory.tsx b/src/web/components/ChatHistory.tsx
@@ -1,13 +1,15 @@
 import React, { useMemo } from 'react';
 import { TMemo } from '@shared/components/TMemo';
 import { useChatHistory } from '@redux/hooks/useChatHistory';
-import { Pagination } from 'antd';
+import { Input, Pagination } from 'antd';
 import LoadingSpinner from './LoadingSpinner';
 import styled from 'styled-components';
 import { MessageItem } from '@shared/components/message/MessageItem';
 import { MessageItemConfigContextProvider } from '@shared/components/message/MessageItemConfigContext';
 import _get from 'lodash/get';
+import _isNil from 'lodash/isNil';
 import { shouleEmphasizeTime } from '@shared/utils/date-helper';
+import { useTranslation } from '@shared/i18n';
 
 const Container = styled.div`
   padding: 10px;
@@ -30,11 +32,16 @@ const SIZE = 25;
  */
 export const ChatHistory: React.FC<Props> = TMemo((props) => {
   const { groupUUID, converseUUID } = props;
-  const { loading, error, logs, page, changePage, count } = useChatHistory(
-    groupUUID,
-    converseUUID,
-    SIZE
-  );
+  const {
+    loading,
+    error,
+    logs,
+    page,
+    changePage,
+    count,
+    setSearchKeyword,
+  } = useChatHistory(groupUUID, converseUUID, SIZE);
+  const { t } = useTranslation();
 
   const paginationEl = useMemo(() => {
     return (
@@ -51,9 +58,14 @@ export const ChatHistory: React.FC<Props> = TMemo((props) => {
     );
   }, [page, count, changePage]);
 
-  if (error) {
-    return <div>{error}</div>;
-  }
+  const searchEl = (
+    <div>
+      <Input.Search
+        placeholder={t('搜索聊天记录')}
+        onSearch={(keyword) => setSearchKeyword(keyword)}
+      />
+    </div>
+  );
 
   return (
     <MessageItemConfigContextProvider
@@ -65,21 +77,26 @@ export const ChatHistory: React.FC<Props> = TMemo((props) => {
       }}
     >
       <Container>
+        {searchEl}
         {paginationEl}
         {loading && <LoadingSpinner />}
-        {logs.map((log, index, arr) => {
-          const prevDate =
-            index < arr.length - 1 ? _get(arr, [index - 1, 'date']) : 0;
-          const emphasizeTime = shouleEmphasizeTime(prevDate, log.date);
+        {_isNil(error) ? (
+          logs.map((log, index, arr) => {
+            const prevDate =
+              index < arr.length - 1 ? _get(arr, [index - 1, 'date']) : 0;
+            const emphasizeTime = shouleEmphasizeTime(prevDate, log.date);
 
-          return (
-            <MessageItem
-              key={log.uuid}
-              emphasizeTime={emphasizeTime}
-              data={log}
-            />
-          );
-        })}
+            return (
+              <MessageItem
+                key={log.uuid}
+                emphasizeTime={emphasizeTime}
+                data={log}
+              />
+            );
+          })
+        ) : (
+          <div>{error}</div>
+        )}
         {paginationEl}
       </Container>
     </MessageItemConfigContextProvider>