Merge pull request #233 from pneumaticapp/frontend/websockets/47328__Some_events_are_processed_incorrectly_in_websockets

47328 frontend [ websockets ] Some events are processed incorrectly in websockets.

Author: pneumatic-ilyacedrik

frontend/src/public/components/TaskCard/TaskCard.tsx

@@ -606,14 +606,14 @@ export function TaskCard({
         className={classnames(styles['container'], viewMode === ETaskCardViewMode.Guest && styles['container_guest'])}
       >
         {renderHeader()}
-        <p className={styles['description']}>
+        <div className={styles['description']}>
           <RichText
             text={task.description}
             interactiveChecklists
             renderExtensions={[...createChecklistExtension(task), ...createProgressbarExtension(task)]}
             hideIcon
           />
-        </p>
+        </div>
         <div className={styles['info']}>
           <div className={styles['performers']}>
             {renderPerformersControllers()}

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
 import classnames from 'classnames';
 import { InView } from 'react-intersection-observer';
@@ -13,6 +14,8 @@ import { getUserFullName } from '../../../../../utils/users';
 import { RichText } from '../../../../RichText';
 import { Attachments } from '../../../../Attachments';
 import { UserData } from '../../../../UserData';
+import { getUserById } from '../../../../UserData/utils/getUserById';
+import { getUsers } from '../../../../../redux/selectors/user';
 import {
   AddEmojiIcon,
   CommentDeleteIcon,
@@ -23,7 +26,7 @@ import {
 } from '../../../../icons';
 import { RichEditor } from '../../../../RichEditor';
 import { type TMentionData } from '../../../../RichEditor/types';
-import { IAccount, TUserListItem } from '../../../../../types/user';
+import { TUserListItem } from '../../../../../types/user';
 import { useStatePromise } from '../../../../../hooks/useStatePromise';
 import { TUploadedFile } from '../../../../../utils/uploadFiles';
 import { IEditComment } from '../../../../../api/workflows/editComment';
@@ -59,6 +62,7 @@ export function WorkflowLogTaskComment({
   mentions,
 }: TWorkflowLogTaskCommentProps) {
   const { formatMessage } = useIntl();
+  const users = useSelector(getUsers);
 
   const clickRef = useRef<HTMLButtonElement>(null);
   const [isShowTooltipEmoji, setIsShowTooltipEmoji] = useState(false);
@@ -86,7 +90,7 @@ export function WorkflowLogTaskComment({
   const handleReactionComment = (value: string) => {
     if (workflowStatus === EWorkflowStatus.Finished) return;
 
-    if (value in reactions && reactions[value].indexOf(currentUserId as Pick<IAccount, 'id'>) !== -1) {
+    if (value in reactions && reactions[value].includes(currentUserId)) {
       deleteReactionComment({ id, value });
     } else {
       createReactionComment({ id, value });
@@ -259,30 +263,26 @@ export function WorkflowLogTaskComment({
     return typeMap[type];
   };
 
-  const renderListUsers = (list: Pick<IAccount, 'id'>[]) => {
+  const renderListUsers = (userIds: number[]) => {
     return (
       <ul className={styles['comment__watch-list']}>
-        {list.map((userWatch) => {
+        {userIds.map((listedUserId) => {
+          const user = getUserById(users, listedUserId);
+
           return (
-            <UserData userId={userWatch as number}>
-              {(user) => {
-                if (!user) return null;
-                const userName = getUserFullName(user);
-
-                return <li>{userName}</li>;
-              }}
-            </UserData>
+            <li key={listedUserId}>{user ? getUserFullName(user) : null}</li>
           );
         })}
       </ul>
     );
   };
 
   const renderReaction = () => {
-    return Object.entries(reactions).map(([value, users]) => {
+    return Object.entries(reactions).map(([value, reactedUserIds]) => {
       return (
         <Tooltip
-          content={renderListUsers(users)}
+          key={value}
+          content={renderListUsers(reactedUserIds)}
           containerClassName={classnames(styles['comment__footer-item'], workflowModal && styles['is-modal'])}
         >
           <button
@@ -292,7 +292,7 @@ export function WorkflowLogTaskComment({
             className={styles['comment__footer-item']}
           >
             <div className={styles['comment__footer-item-emoji']}>{value}</div>
-            <span>{users.length}</span>
+            <span>{reactedUserIds.length}</span>
           </button>
         </Tooltip>
       );

frontend/src/public/redux/accounts/slice.ts

@@ -192,6 +192,26 @@ const accountsSlice = createSlice({
     closeCreateUserModal: (state) => {
       state.isCreateUserModalOpen = false;
     },
+
+    upsertUserFromWs: (state, action: PayloadAction<TUserListItem>) => {
+      const user = action.payload;
+      const upsertList = (list: TUserListItem[]) => {
+        const hasUser = list.some((item) => item.id === user.id);
+        if (!hasUser) {
+          return [...list, user];
+        }
+        return list.map((item) => (item.id === user.id ? { ...item, ...user } : item));
+      };
+
+      state.users = upsertList(state.users);
+      state.team.list = upsertList(state.team.list);
+    },
+
+    removeUserFromWs: (state, action: PayloadAction<number>) => {
+      const removeFromList = (list: TUserListItem[]) => list.filter((item) => item.id !== action.payload);
+      state.users = removeFromList(state.users);
+      state.team.list = removeFromList(state.team.list);
+    },
   },
 });
 
@@ -242,6 +262,8 @@ export const {
   closeCreateUserModal,
   changeUserManager,
   changeUserReports,
+  upsertUserFromWs,
+  removeUserFromWs,
 } = accountsSlice.actions;
 
 export default accountsSlice.reducer;

frontend/src/public/redux/actions.ts

@@ -9,7 +9,7 @@ export * from './integrations/actions';
 export * from './notifications/actions';
 export * from './selectTemplateModal/actions';
 export * from './runWorkflowModal/actions';
-export * from './groups/actions';
+export * from './groups/slice';
 export * from './dashboard/actions';
 export * from './highlights/actions';
 export * from './webhooks/actions';

frontend/src/public/redux/groups/actions.ts

@@ -1,3 +1,2 @@
-export * from './reducer';
-
-export { reducer as groups } from './reducer';
+export { default as groups } from './slice';
+export * from './slice';