From 51ad69536cf574324897592af2245606989f8ad4 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 25 Jul 2021 00:16:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E5=8F=91=E9=80=81=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=97=B6=E9=87=8D=E6=96=B0=E8=81=9A=E7=84=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/redux/hooks/useConverseMessage.ts      |  3 ++-
 web/package.json                              |  2 ++
 .../components/ChatBox/ChatInputBox/index.tsx | 26 +++++++++++++++++--
 web/src/utils/hot-key.ts                      |  3 +++
 yarn.lock                                     | 10 +++++++
 5 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 web/src/utils/hot-key.ts

diff --git a/shared/redux/hooks/useConverseMessage.ts b/shared/redux/hooks/useConverseMessage.ts
index 1b7f6ace..1e8493b3 100644
--- a/shared/redux/hooks/useConverseMessage.ts
+++ b/shared/redux/hooks/useConverseMessage.ts
@@ -23,6 +23,7 @@ export function useConverseMessage(context: ConverseContext) {
   const dispatch = useAppDispatch();
   const messages = converse?.messages ?? [];
 
+  // NOTICE: 该hook只会在第一次执行
   const { loading, error } = useAsync(async () => {
     if (!converse) {
       // 如果是一个新会话(或者当前会话列表中没有)
@@ -53,7 +54,7 @@ export function useConverseMessage(context: ConverseContext) {
         })
       );
     }
-  }, [converse, converseId, isGroup]);
+  }, []);
 
   const handleSendMessage = useCallback(async (payload: SendMessagePayload) => {
     // TODO: 增加临时消息, 对网络环境不佳的状态进行优化
diff --git a/web/package.json b/web/package.json
index 5c281be6..16118b3b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,6 +16,7 @@
     "@loadable/component": "^5.15.0",
     "antd": "^4.16.6",
     "clsx": "^1.1.1",
+    "is-hotkey": "^0.2.0",
     "jwt-decode": "^3.1.2",
     "p-min-delay": "^4.0.0",
     "react": "^17.0.2",
@@ -35,6 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/copy-webpack-plugin": "^8.0.0",
+    "@types/is-hotkey": "^0.1.3",
     "@types/mini-css-extract-plugin": "^1.4.3",
     "@types/node": "^15.12.5",
     "@types/react": "^17.0.11",
diff --git a/web/src/components/ChatBox/ChatInputBox/index.tsx b/web/src/components/ChatBox/ChatInputBox/index.tsx
index 9750c3e1..7346534d 100644
--- a/web/src/components/ChatBox/ChatInputBox/index.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/index.tsx
@@ -1,16 +1,38 @@
+import { isEnterHotkey } from '@/utils/hot-key';
 import { Input } from 'antd';
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string) => void;
 }
 export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
+  const inputRef = useRef<Input>(null);
+  const [message, setMessage] = useState('');
+  const handleSendMsg = useCallback(() => {
+    props.onSendMsg(message);
+    setMessage('');
+    inputRef.current?.focus();
+  }, [message]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (isEnterHotkey(e.nativeEvent)) {
+        e.preventDefault();
+        handleSendMsg();
+      }
+    },
+    [handleSendMsg]
+  );
+
   return (
     <div className="px-4 pb-2">
       <Input
+        ref={inputRef}
         className="outline-none shadow-none border-0 bg-gray-600 py-2.5 px-4 rounded-md"
         placeholder="输入一些什么"
-        onPressEnter={(e) => props.onSendMsg(e.currentTarget.value)}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={handleKeyDown}
       />
     </div>
   );
diff --git a/web/src/utils/hot-key.ts b/web/src/utils/hot-key.ts
new file mode 100644
index 00000000..d658f669
--- /dev/null
+++ b/web/src/utils/hot-key.ts
@@ -0,0 +1,3 @@
+import { isHotkey } from 'is-hotkey';
+
+export const isEnterHotkey = isHotkey('enter');
diff --git a/yarn.lock b/yarn.lock
index b134a5da..4e1d0289 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1045,6 +1045,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/is-hotkey@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@types/is-hotkey/-/is-hotkey-0.1.3.tgz#1e86be048d3af160e8e676d5cd463f6f7061589a"
+  integrity sha512-Hz+eHHpMWLBX1CpDXSuQre9nYXN2e2VGVHvkkldxDzo9eFtRpHm5iOlJlZvnNGvele5584cUSkRnFRQb+Wcu0w==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -4930,6 +4935,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hotkey@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-hotkey/-/is-hotkey-0.2.0.tgz#1835a68171a91e5c9460869d96336947c8340cef"
+  integrity sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==
+
 is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"