Performance improvements

src/pages/OldCommon/hooks/useCommonMembers.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { CommonService, Logger, UserService } from "@/services";
 import { store } from "@/shared/appConfig";
@@ -9,6 +9,7 @@ import {
   selectCommonMembersStateByCommonId,
   selectUserStates,
 } from "@/store/states";
+import { useDeepCompareEffect } from "react-use";
 
 interface Options {
   commonId?: string;
@@ -93,7 +94,7 @@ export const useCommonMembers = ({ commonId }: Options): Return => {
     [dispatch, commonId],
   );
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const commonMembers = commonMembersState.data;
 
     if (!commonMembers) {

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -50,59 +50,6 @@
   align-items: flex-end;
 }
 
-.messageInput {
-  width: 100%;
-  min-height: 2.625rem;
-  line-height: 1.5rem;
-  border-radius: 1.25rem;
-  background-color: var(--secondary-background);
-  border: 0.0625rem solid var(--gentle-stroke);
-  outline: none;
-  resize: none;
-  font-size: 0.875rem;
-  color: var(--primary-text);
-  box-sizing: border-box;
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  word-break: break-word;
-  padding: 0.125rem 2.5rem 0.125rem 0.75rem;
-  margin: 0.3rem 0;
-  overflow-x: hidden;
-  min-height: 2.625rem !important;
-}
-
-.messageInputRtl {
-  padding: 0.125rem 2.5rem 0.125rem 0.75rem;
-}
-
-.messageInputEmpty {
-  padding-left: 0.75rem;
-  overflow-x: hidden;
-}
-
-.addFilesIcon {
-  margin-bottom: 0.8rem;
-  margin-right: 0.5rem;
-  height: 1.5rem;
-  color: var(--primary-text);
-}
-
-.sendIcon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.8rem;
-  border: none;
-  outline: none;
-  background: transparent;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
 $phone-breakpoint: 415px;
 
 .container {

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -23,15 +23,14 @@ import {
   LastSeenEntity,
   QueryParamKey,
 } from "@/shared/constants";
-import { FILES_ACCEPTED_EXTENSIONS } from "@/shared/constants";
 import { HotKeys } from "@/shared/constants/keyboardKeys";
 import { ChatMessageToUserDiscussionMessageConverter } from "@/shared/converters";
 import {
   useZoomDisabling,
   useImageSizeCheck,
   useQueryParams,
 } from "@/shared/hooks";
-import { ArrowInCircleIcon, PlusIcon, SendIcon } from "@/shared/icons";
+import { ArrowInCircleIcon } from "@/shared/icons";
 import { LinkPreviewData } from "@/shared/interfaces";
 import { CreateDiscussionMessageDto } from "@/shared/interfaces/api/discussionMessages";
 import {
@@ -47,24 +46,16 @@ import {
   UserDiscussionMessage,
 } from "@/shared/models";
 import {
-  BaseTextEditor,
   TextEditorValue,
   getMentionTags,
   parseStringToTextEditorValue,
-  ButtonIcon,
   checkIsTextEditorValueEmpty,
-  TextEditorSize,
   removeTextEditorEmptyEndLinesValues,
   countTextEditorEmojiElements,
 } from "@/shared/ui-kit";
 import { checkUncheckedItemsInTextEditorValue } from "@/shared/ui-kit/TextEditor/utils";
 import { InternalLinkData, notEmpty } from "@/shared/utils";
-import {
-  emptyFunction,
-  getUserName,
-  hasPermission,
-  isMobile,
-} from "@/shared/utils";
+import { getUserName, hasPermission, isMobile } from "@/shared/utils";
 import {
   cacheActions,
   chatActions,
@@ -80,6 +71,7 @@ import {
   MessageReply,
   ChatFilePreview,
   MessageInfoWithDateList,
+  ChatInput,
 } from "./components";
 import { checkIsLastSeenInPreviousDay } from "./components/ChatContent/utils";
 import { useChatChannelChatAdapter, useDiscussionChatAdapter } from "./hooks";
@@ -336,8 +328,6 @@ export default function ChatComponent({
     return messagesWithInfo;
   }, [messages]);
 
-  // const dateListWith
-
   const [newMessages, setMessages] = useState<
     CreateDiscussionMessageDtoWithFilesPreview[]
   >([]);
@@ -761,73 +751,6 @@ export default function ChatComponent({
     };
   }, []);
 
-  const renderChatInput = (): ReactNode => {
-    if (shouldHideChatInput) {
-      return null;
-    }
-    if (!isChatChannel) {
-      const chatInputEl = renderChatInputOuter?.();
-
-      if (chatInputEl || chatInputEl === null) {
-        return chatInputEl;
-      }
-    }
-    if (!isAuthorized) {
-      return null;
-    }
-
-    return (
-      <>
-        <ButtonIcon
-          className={styles.addFilesIcon}
-          onClick={() => {
-            document.getElementById("file")?.click();
-          }}
-        >
-          <PlusIcon />
-        </ButtonIcon>
-        <input
-          id="file"
-          type="file"
-          onChange={uploadFiles}
-          style={{ display: "none" }}
-          multiple
-          accept={FILES_ACCEPTED_EXTENSIONS}
-        />
-        <BaseTextEditor
-          inputContainerRef={inputContainerRef}
-          size={TextEditorSize.Auto}
-          editorRef={editorRef}
-          className={classNames(styles.messageInput, {
-            [styles.messageInputEmpty]: checkIsTextEditorValueEmpty(message),
-          })}
-          classNameRtl={styles.messageInputRtl}
-          elementStyles={{
-            emoji: classNames({
-              [styles.singleEmojiText]: emojiCount.isSingleEmoji,
-              [styles.multipleEmojiText]: emojiCount.isMultipleEmoji,
-            }),
-          }}
-          value={message}
-          onChange={setMessage}
-          placeholder="Message"
-          onKeyDown={onEnterKeyDown}
-          users={users}
-          shouldReinitializeEditor={shouldReinitializeEditor}
-          onClearFinished={onClearFinished}
-          scrollSelectionIntoView={emptyFunction}
-        />
-        <button
-          className={styles.sendIcon}
-          onClick={sendChatMessage}
-          disabled={!canSendMessage}
-        >
-          <SendIcon />
-        </button>
-      </>
-    );
-  };
-
   const { y } = useScroll(chatContainerRef);
   const isScrolledToTop = Boolean(chatContainerRef.current && Math.abs(y) > 20);
 
@@ -924,7 +847,26 @@ export default function ChatComponent({
           [styles.chatInputWrapperMultiLine]: isMultiLineInput,
         })}
       >
-        {renderChatInput()}
+        <ChatInput
+          onClearFinished={onClearFinished}
+          shouldReinitializeEditor={shouldReinitializeEditor}
+          users={users}
+          onEnterKeyDown={onEnterKeyDown}
+          emojiCount={emojiCount}
+          setMessage={setMessage}
+          message={message}
+          uploadFiles={uploadFiles}
+          isAuthorized={isAuthorized}
+          renderChatInputOuter={
+            renderChatInputOuter as () => React.ReactElement
+          }
+          isChatChannel={isChatChannel}
+          shouldHideChatInput={shouldHideChatInput}
+          sendChatMessage={sendChatMessage}
+          canSendMessage={Boolean(canSendMessage)}
+          inputContainerRef={inputContainerRef}
+          editorRef={editorRef}
+        />
       </div>
     </div>
   );

src/pages/common/components/ChatComponent/components/ChatInput/ChatInput.module.scss

@@ -0,0 +1,75 @@
+@import "../../../../../../constants.scss";
+@import "../../../../../../styles/sizes";
+
+.messageInput {
+  width: 100%;
+  min-height: 2.625rem;
+  line-height: 1.5rem;
+  border-radius: 1.25rem;
+  background-color: var(--secondary-background);
+  border: 0.0625rem solid var(--gentle-stroke);
+  outline: none;
+  resize: none;
+  font-size: 0.875rem;
+  color: var(--primary-text);
+  box-sizing: border-box;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  word-break: break-word;
+  padding: 0.125rem 2.5rem 0.125rem 0.75rem;
+  margin: 0.3rem 0;
+  overflow-x: hidden;
+  min-height: 2.625rem !important;
+}
+
+.messageInputRtl {
+  padding: 0.125rem 2.5rem 0.125rem 0.75rem;
+}
+
+.messageInputEmpty {
+  padding-left: 0.75rem;
+  overflow-x: hidden;
+}
+
+.addFilesIcon {
+  margin-bottom: 0.8rem;
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  color: var(--primary-text);
+}
+
+.sendIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.8rem;
+  border: none;
+  outline: none;
+  background: transparent;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+$phone-breakpoint: 415px;
+
+.singleEmojiText {
+  font-size: $xlarge;
+  line-height: 2.8125rem;
+}
+
+.multipleEmojiText {
+  font-size: $large;
+  line-height: 2.125rem;
+}
+
+.singleEmojiText {
+  font-size: $xlarge;
+}
+
+.multipleEmojiText {
+  font-size: $large;
+}