From 9deb8ceb78e5fe9a88e63bba2d8c7fb188684d26 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Fri, 14 Oct 2022 14:10:45 +0800
Subject: [PATCH] fix: fix problems caused by uncontrolled components

---
 ui/src/common/interface.ts                    |  2 +-
 .../Comment/components/Form/index.tsx         |  6 +++--
 .../Comment/components/Reply/index.tsx        |  7 +++++-
 ui/src/components/Mentions/index.tsx          | 23 ++++++++-----------
 ui/src/hooks/usePageUsers/index.tsx           |  8 +++----
 ui/src/pages/Questions/Detail/index.tsx       | 11 ++++++++-
 6 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/ui/src/common/interface.ts b/ui/src/common/interface.ts
index 08d206f2..73eac5d4 100644
--- a/ui/src/common/interface.ts
+++ b/ui/src/common/interface.ts
@@ -195,7 +195,7 @@ export interface PostAnswerReq {
 }
 
 export interface PageUser {
-  id;
+  id?;
   displayName;
   userName?;
   avatar_url?;
diff --git a/ui/src/components/Comment/components/Form/index.tsx b/ui/src/components/Comment/components/Form/index.tsx
index a67f8aca..4971c4ef 100644
--- a/ui/src/components/Comment/components/Form/index.tsx
+++ b/ui/src/components/Comment/components/Form/index.tsx
@@ -29,7 +29,9 @@ const Form = ({
   const handleChange = (e) => {
     setValue(e.target.value);
   };
-
+  const handleSelected = (val) => {
+    setValue(val);
+  };
   return (
     <div
       className={classNames(
@@ -37,7 +39,7 @@ const Form = ({
         className,
       )}>
       <div>
-        <Mentions pageUsers={pageUsers.getUsers()}>
+        <Mentions pageUsers={pageUsers.getUsers()} onSelected={handleSelected}>
           <TextArea size="sm" value={value} onChange={handleChange} />
         </Mentions>
         <div className="form-text">{t(`tip_${mode}`)}</div>
diff --git a/ui/src/components/Comment/components/Reply/index.tsx b/ui/src/components/Comment/components/Reply/index.tsx
index 4b659196..dcbf53bb 100644
--- a/ui/src/components/Comment/components/Reply/index.tsx
+++ b/ui/src/components/Comment/components/Reply/index.tsx
@@ -13,13 +13,18 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
   const handleChange = (e) => {
     setValue(e.target.value);
   };
+  const handleSelected = (val) => {
+    setValue(val);
+  };
 
   return (
     <div className="mb-2">
       <div className="fs-14 mb-2">Reply to {userName}</div>
       <div className="d-flex mb-1 align-items-start flex-column flex-md-row">
         <div>
-          <Mentions pageUsers={pageUsers.getUsers()}>
+          <Mentions
+            pageUsers={pageUsers.getUsers()}
+            onSelected={handleSelected}>
             <TextArea size="sm" value={value} onChange={handleChange} />
           </Mentions>
           <div className="form-text">{t(`tip_${mode}`)}</div>
diff --git a/ui/src/components/Mentions/index.tsx b/ui/src/components/Mentions/index.tsx
index 4987f2b2..cc63e85a 100644
--- a/ui/src/components/Mentions/index.tsx
+++ b/ui/src/components/Mentions/index.tsx
@@ -6,11 +6,12 @@ import * as Types from '@answer/common/interface';
 interface IProps {
   children: React.ReactNode;
   pageUsers;
+  onSelected: (val: string) => void;
 }
 
 const MAX_RECODE = 5;
 
-const Mentions: FC<IProps> = ({ children, pageUsers }) => {
+const Mentions: FC<IProps> = ({ children, pageUsers, onSelected }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [val, setValue] = useState('');
@@ -71,23 +72,17 @@ const Mentions: FC<IProps> = ({ children, pageUsers }) => {
     if (!selectionStart) {
       return;
     }
-    const str = value.substring(
-      value.substring(0, selectionStart).lastIndexOf('@'),
-      selectionStart,
-    );
+
     const text = `@${item?.displayName}[${item?.userName}] `;
-    element.value = `${value.substring(
-      0,
-      value.substring(0, selectionStart).lastIndexOf('@'),
-    )}${text}${value.substring(selectionStart)}`;
+    onSelected(
+      `${value.substring(
+        0,
+        value.substring(0, selectionStart).lastIndexOf('@'),
+      )}${text}${value.substring(selectionStart)}`,
+    );
     setUsers([]);
     setValue('');
-    const newSelectionStart = selectionStart + text.length - str.length;
-
-    element.setSelectionRange(newSelectionStart, newSelectionStart);
-    element.focus();
   };
-
   const filterData = val
     ? users.filter(
         (item) =>
diff --git a/ui/src/hooks/usePageUsers/index.tsx b/ui/src/hooks/usePageUsers/index.tsx
index 681a988f..72203619 100644
--- a/ui/src/hooks/usePageUsers/index.tsx
+++ b/ui/src/hooks/usePageUsers/index.tsx
@@ -14,11 +14,11 @@ const usePageUsers = () => {
     getUsers,
     setUsers: (data: Types.PageUser | Types.PageUser[]) => {
       if (data instanceof Array) {
-        setUsers(uniqBy([...users, ...data], 'name'));
-        globalUsers = uniqBy([...globalUsers, ...data], 'name');
+        setUsers(uniqBy([...users, ...data], 'userName'));
+        globalUsers = uniqBy([...globalUsers, ...data], 'userName');
       } else {
-        setUsers(uniqBy([...users, data], 'name'));
-        globalUsers = uniqBy([...globalUsers, data], 'name');
+        setUsers(uniqBy([...users, data], 'userName'));
+        globalUsers = uniqBy([...globalUsers, data], 'userName');
       }
     },
   };
diff --git a/ui/src/pages/Questions/Detail/index.tsx b/ui/src/pages/Questions/Detail/index.tsx
index cc3dd470..7c2c2d6e 100644
--- a/ui/src/pages/Questions/Detail/index.tsx
+++ b/ui/src/pages/Questions/Detail/index.tsx
@@ -55,7 +55,16 @@ const Index = () => {
       }
 
       res.list.forEach((item) => {
-        setUsers([item.user_info, item?.update_user_info]);
+        setUsers([
+          {
+            displayName: item.user_info.display_name,
+            userName: item.user_info.username,
+          },
+          {
+            displayName: item?.update_user_info?.display_name,
+            userName: item?.update_user_info?.username,
+          },
+        ]);
       });
     }
   };