45330 refactor(editor): lift mentions computation to WorkflowLog parent component

Author: Maria-Lordwill

frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.tsx

@@ -1,39 +1,30 @@
 import * as React from 'react';
-import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
 
 import { RichEditor, type IRichEditorHandle } from '../../../RichEditor';
-import { getMentionData } from '../../../RichEditor/utils/getMentionData';
+import { type TMentionData } from '../../../RichEditor/types';
 import { Avatar } from '../../../UI/Avatar';
 import { IAuthUser } from '../../../../types/redux';
 import { TUploadedFile } from '../../../../utils/uploadFiles';
 import { ISendWorkflowLogComment } from '../../../../redux/workflows/types';
 import { useStatePromise } from '../../../../hooks/useStatePromise';
 import { isArrayWithItems } from '../../../../utils/helpers';
-import { getUsers } from '../../../../redux/selectors/user';
-import { getNotDeletedUsers } from '../../../../utils/users';
 
 import styles from './PopupCommentField.css';
 
 export interface IPopupCommentFieldProps {
   user: IAuthUser;
+  mentions: TMentionData[];
   sendComment({ text, attachments, taskId }: ISendWorkflowLogComment): void;
   taskId?: number;
 }
 
 export type TPopupCommentFieldProps = IPopupCommentFieldProps;
 
-export function PopupCommentField({ user, sendComment, taskId }: TPopupCommentFieldProps) {
+export function PopupCommentField({ user, mentions, sendComment, taskId }: TPopupCommentFieldProps) {
   const { formatMessage } = useIntl();
   const editorRef = React.useRef<IRichEditorHandle>(null);
 
-  const users = useSelector(getUsers);
-  const mentions = useMemo(
-    () => getMentionData(getNotDeletedUsers(users)),
-    [users],
-  );
-
   const [commentText, setCommentText] = useStatePromise('');
   const [filesToUpload, setFilesToUpload] = useStatePromise<TUploadedFile[]>([]);
 

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLog.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { useIntl } from 'react-intl';
 import Switch from 'rc-switch';
@@ -41,6 +42,9 @@ import { WorkflowLogRemovedPerformerGroup } from './WorkflowLogEvents/WorkflowLo
 
 import styles from './WorkflowLog.css';
 import { IChangeWorkflowLogViewSettingsPayload, ISendWorkflowLogComment } from '../../../redux/workflows/types';
+import { getUsers } from '../../../redux/selectors/user';
+import { getNotDeletedUsers } from '../../../utils/users';
+import { getMentionData } from '../../RichEditor/utils/getMentionData';
 
 export const WorkflowLog = ({
   theme,
@@ -69,6 +73,12 @@ export const WorkflowLog = ({
 }: IWorkflowLogProps) => {
   const { formatMessage } = useIntl();
 
+  const users = useSelector(getUsers);
+  const mentions = useMemo(
+    () => getMentionData(getNotDeletedUsers(users)),
+    [users],
+  );
+
   useEffect(() => {
     return () => {
       if (onUnmount) {
@@ -213,7 +223,7 @@ export const WorkflowLog = ({
 
     return (
       <div className={styles['comment-field']}>
-        <PopupCommentFieldContainer sendComment={sendComment} taskId={taskId} />
+        <PopupCommentFieldContainer sendComment={sendComment} taskId={taskId} mentions={mentions} />
       </div>
     );
   };
@@ -270,6 +280,7 @@ export const WorkflowLog = ({
           <WorkflowLogTaskCommentContainer
             workflowStatus={workflowStatus}
             isOnlyAttachmentsShown={isOnlyAttachmentsShown}
+            mentions={mentions}
             {...event}
           />
         ),

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { InView } from 'react-intersection-observer';
 import data from '@emoji-mart/data';
@@ -10,7 +9,7 @@ import { useClickOutside } from '../../../../../hooks/useClickOutside';
 import { IDeleteComment } from '../../../../../api/workflows/deleteComment';
 import { Avatar } from '../../../../UI/Avatar';
 import { EWorkflowStatus, IWorkflowLogItem } from '../../../../../types/workflow';
-import { getUserFullName , getNotDeletedUsers } from '../../../../../utils/users';
+import { getUserFullName } from '../../../../../utils/users';
 import { RichText } from '../../../../RichText';
 import { Attachments } from '../../../../Attachments';
 import { UserData } from '../../../../UserData';
@@ -23,7 +22,7 @@ import {
   CommentWatchedIcon,
 } from '../../../../icons';
 import { RichEditor } from '../../../../RichEditor';
-import { getMentionData } from '../../../../RichEditor/utils/getMentionData';
+import { type TMentionData } from '../../../../RichEditor/types';
 import { IAccount, TUserListItem } from '../../../../../types/user';
 import { useStatePromise } from '../../../../../hooks/useStatePromise';
 import { TUploadedFile } from '../../../../../utils/uploadFiles';
@@ -32,7 +31,7 @@ import { IWatchedComment } from '../../../../../api/workflows/watchedComment';
 import { Tooltip } from '../../../../UI';
 import { ICreateReaction } from '../../../../../api/workflows/createReactionComment';
 import { IDeleteReaction } from '../../../../../api/workflows/deleteReactionComment';
-import { getUsers } from '../../../../../redux/selectors/user';
+
 
 
 import styles from './WorkflowLogTaskComment.css';
@@ -57,15 +56,10 @@ export function WorkflowLogTaskComment({
   watchedComment,
   createReactionComment,
   deleteReactionComment,
+  mentions,
 }: TWorkflowLogTaskCommentProps) {
   const { formatMessage } = useIntl();
 
-  const allUsers = useSelector(getUsers);
-  const mentions = useMemo(
-    () => getMentionData(getNotDeletedUsers(allUsers)),
-    [allUsers],
-  );
-
   const clickRef = useRef<HTMLButtonElement>(null);
   const [isShowTooltipEmoji, setIsShowTooltipEmoji] = useState(false);
   const [isShowEmoji, setIsShowEmoji] = useState(false);
@@ -397,6 +391,7 @@ export type TWorkflowLogTaskCommentProps = Pick<
   currentUserId: number;
   workflowModal: boolean;
   workflowStatus: EWorkflowStatus;
+  mentions: TMentionData[];
   isOnlyAttachmentsShown?: boolean;
   editComment(payload: IEditComment): void;
   deleteComment(payload: IDeleteComment): void;