From 862b16a5d2ef655a8d9c9a7a16bc4743961faefc Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Wed, 30 Mar 2022 23:10:14 +0800
Subject: [PATCH] chore: rename type to context

---
 src/common/component/Send/Toolbar.js      |  4 +-
 src/common/component/Send/index.js        | 69 ++++++++++++++---------
 src/common/component/UploadModal/index.js |  6 +-
 src/routes/chat/ChannelChat/index.js      |  4 +-
 src/routes/chat/DMChat/index.js           |  9 ++-
 src/routes/chat/Layout.js                 |  4 +-
 6 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/src/common/component/Send/Toolbar.js b/src/common/component/Send/Toolbar.js
index 7c5a9c59..63b44884 100644
--- a/src/common/component/Send/Toolbar.js
+++ b/src/common/component/Send/Toolbar.js
@@ -34,7 +34,7 @@ const Styled = styled.div`
     }
   }
 `;
-export default function Toolbar({ toggleMode, mode, to, type }) {
+export default function Toolbar({ toggleMode, mode, to, context }) {
   const [files, setFiles] = useState([]);
   const fileInputRef = useRef(null);
   const resetFiles = () => {
@@ -51,7 +51,7 @@ export default function Toolbar({ toggleMode, mode, to, type }) {
     <>
       {files.length !== 0 && (
         <UploadModal
-          type={type}
+          context={context}
           files={files}
           sendTo={to}
           closeModal={resetFiles}
diff --git a/src/common/component/Send/index.js b/src/common/component/Send/index.js
index 8452e3a5..0d54091b 100644
--- a/src/common/component/Send/index.js
+++ b/src/common/component/Send/index.js
@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { useEffect, useState } from "react";
 // import TextareaAutosize from "react-textarea-autosize";
 import { useDispatch, useSelector } from "react-redux";
 // import { useKey } from "rooks";
@@ -14,8 +14,7 @@ import Toolbar from "./Toolbar";
 import EmojiPicker from "./EmojiPicker";
 
 import MarkdownEditor from "../MarkdownEditor";
-// import MarkdownInput from "../MarkdownInput";
-import MixedInput, { TEXT_EDITOR_PREFIX } from "../MixedInput";
+import MixedInput, { TEXT_EDITOR_PREFIX, setEditorFocus } from "../MixedInput";
 const Types = {
   channel: "#",
   user: "@",
@@ -26,11 +25,11 @@ const Modes = {
 };
 function Send({
   name,
-  type = "channel",
+  context = "channel",
   // 发给谁，或者是channel，或者是user
   id = "",
 }) {
-  // const editorRef = usePlateEditorRef(`${TEXT_EDITOR_PREFIX}_${type}_${id}`);
+  const [markdownEditor, setMarkdownEditor] = useState(null);
   const [replyMessage] = useReplyMessageMutation();
   const dispatch = useDispatch();
   // 谁发的
@@ -44,35 +43,52 @@ function Send({
 
   const [sendMsg] = useSendMsgMutation();
   const [sendChannelMsg] = useSendChannelMsgMutation();
-  const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
+  const sendMessage = context == "channel" ? sendChannelMsg : sendMsg;
   // const sendingMessage = userSending || channelSending;
+  useEffect(() => {
+    if (replying_mid) {
+      const editorRef = getPlateEditorRef(
+        `${TEXT_EDITOR_PREFIX}_${context}_${id}`
+      );
+      if (editorRef) {
+        setEditorFocus(editorRef);
+      }
+    }
+  }, [replying_mid]);
+
   const insertEmoji = (emoji) => {
-    console.log("insert emoji", emoji);
-    const editorRef = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${type}_${id}`);
-    if (editorRef) {
-      console.log("wtf", editorRef);
-      editorRef.insertText(emoji);
+    if (mode == Modes.markdown && markdownEditor) {
+      // markdown insert emoji
+      markdownEditor.insertText(emoji);
+    } else {
+      const editorRef = getPlateEditorRef(
+        `${TEXT_EDITOR_PREFIX}_${context}_${id}`
+      );
+      if (editorRef) {
+        // console.log("wtf", editorRef);
+        editorRef.insertText(emoji);
+      }
     }
   };
   const handleSendMessage = async (msgs = []) => {
     if (!msgs || msgs.length == 0 || !id) return;
     for await (const msg of msgs) {
-      const { type, value: content } = msg;
+      const { type: content_type, value: content } = msg;
       if (replying_mid) {
         console.log("replying", replying_mid);
         await replyMessage({
           id,
           reply_mid: replying_mid,
-          type,
+          type: content_type,
           content,
-          context: type,
+          context,
           from_uid,
         });
         dispatch(removeReplyingMessage(id));
       } else {
         await sendMessage({
           id,
-          type,
+          type: content_type,
           content,
           from_uid,
           properties: { local_id: new Date().getTime() },
@@ -92,32 +108,33 @@ function Send({
   const toggleMode = () => {
     dispatch(updateInputMode(mode == Modes.text ? Modes.markdown : Modes.text));
   };
+  const placeholder = `Send to ${Types[context]}${name} `;
   return (
     <StyledSend
-      className={`send ${mode} ${replying_mid ? "reply" : ""} ${type}`}
+      className={`send ${mode} ${replying_mid ? "reply" : ""} ${context}`}
     >
       {replying_mid && <Replying mid={replying_mid} id={id} />}
       <EmojiPicker selectEmoji={insertEmoji} />
       {mode == Modes.text && (
         <MixedInput
-          id={`${type}_${id}`}
-          placeholder={`Send to ${Types[type]}${name} `}
+          id={`${context}_${id}`}
+          placeholder={placeholder}
           sendMessages={handleSendMessage}
         />
       )}
-      {/* <MarkdownInput placeholder={`Send to ${Types[type]}${name} `} /> */}
-      <Toolbar type={type} to={id} mode={mode} toggleMode={toggleMode} />
+      <Toolbar context={context} to={id} mode={mode} toggleMode={toggleMode} />
       {mode == Modes.markdown && (
         <MarkdownEditor
-          placeholder={`Send to ${Types[type]}${name} `}
-          // updateMarkdown={setMarkdown}
+          placeholder={placeholder}
+          setEditorInstance={setMarkdownEditor}
           sendMarkdown={sendMarkdown}
         />
       )}
     </StyledSend>
   );
 }
-export default memo(Send, (prevs, nexts) => {
-  console.log("send name", prevs.name, nexts.name);
-  return prevs.name == nexts.name;
-});
+export default Send;
+// export default memo(Send, (prevs, nexts) => {
+//   console.log("send name", prevs.name, nexts.name);
+//   return prevs.name == nexts.name;
+// });
diff --git a/src/common/component/UploadModal/index.js b/src/common/component/UploadModal/index.js
index aec4550c..cd4bc384 100644
--- a/src/common/component/UploadModal/index.js
+++ b/src/common/component/UploadModal/index.js
@@ -9,7 +9,7 @@ import { isTreatAsImage } from "../../utils";
 import StyledWrapper from "./styled";
 
 export default function UploadModal({
-  type = "user",
+  context = "user",
   sendTo = 0,
   files = [],
   closeModal,
@@ -20,7 +20,7 @@ export default function UploadModal({
     isSending: isSendingImage,
     isSuccess: sendImageSuccess,
   } = useSendImageMessage({
-    context: type,
+    context,
     from: from_uid,
     to: sendTo,
   });
@@ -30,7 +30,7 @@ export default function UploadModal({
     isSending: isSendingFile,
     isSuccess: sendFileSuccess,
   } = useSendFileMessage({
-    context: type,
+    context,
     from: from_uid,
     to: sendTo,
   });
diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js
index 3c28f690..da85eaee 100644
--- a/src/routes/chat/ChannelChat/index.js
+++ b/src/routes/chat/ChannelChat/index.js
@@ -56,7 +56,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
       )}
       <Layout
         to={cid}
-        type="channel"
+        context="channel"
         dropFiles={dropFiles}
         // ref={containerRef}
         header={
@@ -124,7 +124,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   })}
               </div>
             </div>
-            <Send id={cid} type="channel" name={name} />
+            <Send key={cid} id={cid} type="channel" name={name} />
           </div>
         </StyledChannelChat>
         {/* {unreads != 0 && (
diff --git a/src/routes/chat/DMChat/index.js b/src/routes/chat/DMChat/index.js
index 00bd67a1..fbb28e41 100644
--- a/src/routes/chat/DMChat/index.js
+++ b/src/routes/chat/DMChat/index.js
@@ -26,7 +26,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   return (
     <Layout
       to={uid}
-      type="user"
+      context="user"
       dropFiles={dropFiles}
       header={
         <StyledHeader>
@@ -62,7 +62,12 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
               });
             })}
         </div>
-        <Send type="user" name={currUser?.name} id={currUser?.uid} />
+        <Send
+          key={currUser?.uid}
+          type="user"
+          name={currUser?.name}
+          id={currUser?.uid}
+        />
       </StyledDMChat>
     </Layout>
   );
diff --git a/src/routes/chat/Layout.js b/src/routes/chat/Layout.js
index 6f80680c..26f9ce76 100644
--- a/src/routes/chat/Layout.js
+++ b/src/routes/chat/Layout.js
@@ -77,7 +77,7 @@ export default function Layout({
   header,
   contacts = null,
   dropFiles = [],
-  type = "channel",
+  context = "channel",
   to = null,
 }) {
   const messagesContainer = useRef(null);
@@ -161,7 +161,7 @@ export default function Layout({
       </StyledWrapper>
       {files.length !== 0 && (
         <UploadModal
-          type={type}
+          context={context}
           files={files}
           sendTo={to}
           closeModal={resetFiles}