quickblox-react-ui-kit 0.3.0-beta.2 → 0.3.0-beta.4

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.scss

@@ -9,6 +9,16 @@
   position: relative;
 }
 
+.dialogs-with-search-icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--tertiary-elements);
+}
+
+.dialogs-with-search-text-field {
+  width: 100%;
+}
+
 .dialogs-with-search-list {
   display: flex;
   flex-direction: column;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import './DialogsWithSearch.scss';
 import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
-// eslint-disable-next-line import/named
 import { FunctionTypeStringToVoid } from '../../../../../CommonTypes/BaseViewModel';
-import SearchComponent from './SearchComponent/SearchComponent';
 import DialogListItem from './DialogListItem/DialogListItem';
 import ScrollableContainer from '../../../../components/containers/ScrollableContainer/ScrollableContainer';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
 import { PublicDialogEntity } from '../../../../../Domain/entity/PublicDialogEntity';
+import { TextField } from '../../../../ui-components';
+import { SearchSvg } from '../../../../icons';
 
 type DialogsWithSearchProps = {
   dialogs: DialogEntity[];
@@ -46,9 +46,6 @@ const DialogsWithSearch: React.FC<DialogsWithSearchProps> = ({
     return [...dialogs.filter((u) => u.id !== currentDialog.id)];
   }
 
-  useEffect(() => {
-    setFilteredDialogs(filterDialogsByName(stringForFilter, currentDialog.id));
-  }, [stringForFilter]);
   const renderItem = (item: DialogEntity) => {
     return (
       <div className="dialogs-with-search-list-item" key={item.id}>
@@ -73,16 +70,19 @@ const DialogsWithSearch: React.FC<DialogsWithSearchProps> = ({
     );
   };
 
-  /* eslint-disable-next-line react/jsx-no-bind */
+  useEffect(() => {
+    setFilteredDialogs(filterDialogsByName(stringForFilter, currentDialog.id));
+  }, [stringForFilter]);
+
   return (
     <div className="dialogs-with-search-body">
-      <SearchComponent
-        onChange={(str) => {
-          setStringForFilter(str);
-        }}
+      <TextField
+        icon={<SearchSvg className="dialogs-with-search-icon" />}
+        value={stringForFilter}
+        onChange={(value) => setStringForFilter(value)}
+        placeholder="Search"
+        className="dialogs-with-search-text-field"
       />
-
-      {/* <div className="dialogs-with-search-list"> */}
       <ScrollableContainer
         className="dialogs-with-search-list"
         data={filteredDialogs}
@@ -90,7 +90,6 @@ const DialogsWithSearch: React.FC<DialogsWithSearchProps> = ({
         onEndReachedThreshold={0.8}
         refreshing={false}
       />
-      {/* </div> */}
     </div>
   );
 };

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessageFlow.tsx

@@ -17,6 +17,7 @@ type ForwardMessageFlowProps = {
     messages: MessageEntity[],
     relatedText: string,
   ) => void;
+  disableActions: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
@@ -26,6 +27,7 @@ const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
   currentDialog,
   currentUserName,
   onSendData,
+  disableActions,
 }: ForwardMessageFlowProps) => {
   const [activeChatsTab, setActiveChatsTab] = useState(true);
   const [selectedDialogs, setSelectedDialogs] = useState<string[]>([]);
@@ -33,11 +35,13 @@ const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
 
   const userName = currentUserName;
   const sendMessageHandler = () => {
-    const dialogsForSend: DialogEntity[] = dialogs.filter((item) =>
-      selectedDialogs.includes(item.id),
-    );
+    if (!disableActions) {
+      const dialogsForSend: DialogEntity[] = dialogs.filter((item) =>
+        selectedDialogs.includes(item.id),
+      );
 
-    onSendData(dialogsForSend, messages, inputText);
+      onSendData(dialogsForSend, messages, inputText);
+    }
   };
 
   return (
@@ -108,7 +112,7 @@ const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
           inputText={inputText}
           onChange={(s) => setInputText(s)}
           onSend={sendMessageHandler}
-          disabled={selectedDialogs.length === 0}
+          disabled={selectedDialogs.length === 0 || disableActions}
         />
       </div>
     </div>

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.scss

@@ -47,7 +47,6 @@
 
 .forwarding-message-input-icon-send {
   border-radius: 4px;
-  padding: 4px;
   display: flex;
   flex-direction: row;
   gap: 0px;
@@ -57,6 +56,37 @@
   width: 24px;
   height: 44px;
   position: relative;
+
+  &__icon{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    fill: var(--secondary-elements);
+    &__send {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      fill: var(--main-elements);
+    }
+
+    svg path{
+      width: 24px;
+      height: 24px;
+      fill: var(--main-elements);
+    }
+  }
+  &__icon--disable{
+    fill: var(--disabled-elements);
+    cursor: default;
+    width: 24px;
+    height: 24px;
+    svg path{
+      width: 24px;
+      height: 24px;
+      fill: var(--disabled-elements);
+    }
+  }
+
 }
 .actions-send {
   flex-shrink: 0;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import './InputForForwarding.scss';
+import cn from 'classnames';
 import {
   FunctionTypeStringToVoid,
   FunctionTypeVoidToVoid,
 } from '../../../../../CommonTypes/BaseViewModel';
-import ActiveSvg from '../../../../components/UI/svgs/ActiveSvg/ActiveSvg';
-import SendIcon from '../../../../components/UI/svgs/Icons/Actions/Send';
+import { SendSvg } from '../../../../icons';
+import './InputForForwarding.scss';
 
 type InputForForwardingProps = {
   inputText: string;
@@ -34,10 +33,11 @@ const InputForForwarding: React.FC<InputForForwardingProps> = ({
         />
       </div>
       <div className="forwarding-message-input-icon-send">
-        <ActiveSvg
-          content={<SendIcon width="24" height="24" />}
+        <SendSvg
+          className={cn('forwarding-message-input-icon-send__icon__send', {
+            'forwarding-message-input-icon-send__icon--disable': disabled,
+          })}
           onClick={onSend}
-          disabled={disabled}
         />
       </div>
     </div>

package/src/Presentation/Views/Dialog/MessageContextMenu/MessageContextMenu.tsx

@@ -11,6 +11,7 @@ export type MessageContextMenuProps = {
   enableReplying: boolean;
   onReply: FunctionTypeMessageEntityToVoid;
   onForward: FunctionTypeMessageEntityToVoid;
+  disableActions?: boolean;
 };
 
 export default function MessageContextMenu({
@@ -19,22 +20,32 @@ export default function MessageContextMenu({
   enableForwarding,
   onReply,
   onForward,
+  disableActions = false,
 }: MessageContextMenuProps) {
   function selectHandler(value: string) {
-    if (value === 'Reply' && enableReplying) {
-      onReply(message);
-    }
-    if (value === 'Forward' && enableForwarding) {
-      onForward(message);
+    if (!disableActions) {
+      if (value === 'Reply' && enableReplying) {
+        onReply(message);
+      }
+      if (value === 'Forward' && enableForwarding) {
+        onForward(message);
+      }
     }
   }
 
+  // const [disabled, setDisabled] = useState(disableActions);
+
+  // useEffect(() => {
+  //   setDisabled(disableActions);
+  // }, [disableActions]);
+
   const options: Option[] = [];
 
   if (enableReplying) {
     options.push({
       value: 'Reply',
       label: 'Reply',
+      disabled: disableActions,
     });
   }
 
@@ -50,7 +61,7 @@ export default function MessageContextMenu({
       {enableForwarding || enableReplying ? (
         <Dropdown
           options={options}
-          disabled={false}
+          disabled={disableActions}
           onSelect={(value) => selectHandler(value)}
         >
           <div className="message-context-menu-actions">

package/src/Presentation/Views/Dialog/MessageItem/MessageItem.tsx

@@ -18,7 +18,7 @@ import './MessageItem.scss';
 
 export type MessageItemProps = {
   message: MessageEntity;
-  userId?: number;
+  currentUserId?: number;
   AITranslateWidget?: AIMessageWidget;
   AIAssistWidget?: AIMessageWidget;
   maxTokens: number;
@@ -32,6 +32,7 @@ export type MessageItemProps = {
   listRef?: RefObject<HTMLDivElement>;
   messagesToView: MessageEntity[];
   onError: (messageError: string) => void;
+  disableAction?: boolean;
 };
 
 interface MessageStates {
@@ -65,7 +66,7 @@ function reducer(
 
 export default function MessageItem({
   message,
-  userId,
+  currentUserId,
   enableForwarding,
   enableReplying,
   onReply,
@@ -79,6 +80,7 @@ export default function MessageItem({
   defaultTranslationLanguage,
   languagesForAITranslate,
   onError,
+  disableAction = false,
 }: MessageItemProps) {
   const messageStates: Record<string, MessageStates> = {};
 
@@ -103,8 +105,8 @@ export default function MessageItem({
       return TypeSystemMessage;
     }
     if (
-      (m.sender && m.sender.id.toString() !== userId?.toString()) ||
-      m.sender_id.toString() !== userId?.toString()
+      (m.sender && m.sender.id.toString() !== currentUserId?.toString()) ||
+      m.sender_id.toString() !== currentUserId?.toString()
     ) {
       return TypeIncomingMessage;
     }
@@ -121,8 +123,16 @@ export default function MessageItem({
   }
 
   function getStatusMessage(messageEntity: MessageEntity) {
-    if (messageEntity.delivered_ids && messageEntity.delivered_ids.length > 0) {
-      if (messageEntity.read_ids && messageEntity.read_ids.length > 0) {
+    if (
+      messageEntity.delivered_ids &&
+      messageEntity.delivered_ids.length > 0 &&
+      messageEntity.delivered_ids.some((id) => id !== currentUserId)
+    ) {
+      if (
+        messageEntity.read_ids &&
+        messageEntity.read_ids.length > 0 &&
+        messageEntity.read_ids.some((id) => id !== currentUserId)
+      ) {
         return 'viewed';
       }
 
@@ -144,6 +154,7 @@ export default function MessageItem({
           onForward={onForward}
           enableReplying={enableReplying}
           enableForwarding={enableForwarding}
+          disableActions={disableAction}
         />
         {currentMessageType === 'incoming' && state[item.id]?.loading && (
           <Loader size="sm" className="message-item-additional-part__loader" />
@@ -152,6 +163,7 @@ export default function MessageItem({
           !(item.attachments && item.attachments.length > 0) &&
           AIAssistWidget && (
             <AIAssist
+              disableAction={disableAction}
               AIAssistWidget={AIAssistWidget}
               loading={
                 state[item.id] && state[item.id].loading
@@ -164,7 +176,7 @@ export default function MessageItem({
               onError={onError}
               messageToAssist={item}
               messageHistory={messagesToView}
-              currentUserId={userId}
+              currentUserId={currentUserId}
               maxTokens={maxTokens}
             />
           )}
@@ -196,6 +208,7 @@ export default function MessageItem({
                     nestedMessage.attachments.length > 0
                   ) && AITranslateWidget ? (
                     <AITranslate
+                      disableAction={disableAction}
                       AITranslateWidget={AITranslateWidget}
                       defaultLanguage={defaultTranslationLanguage}
                       languages={languagesForAITranslate}
@@ -217,7 +230,7 @@ export default function MessageItem({
                       onError={onError}
                       messageToTranslate={nestedMessage}
                       messageHistory={messagesToView}
-                      currentUserId={userId}
+                      currentUserId={currentUserId}
                       maxTokens={maxTokens}
                       onTranslated={(id, textTranslated) =>
                         translatedHandler(id, textTranslated)
@@ -298,6 +311,7 @@ export default function MessageItem({
               !(message.attachments && message.attachments.length > 0) &&
               AITranslateWidget ? (
                 <AITranslate
+                  disableAction={disableAction}
                   AITranslateWidget={AITranslateWidget}
                   defaultLanguage={defaultTranslationLanguage}
                   languages={languagesForAITranslate}
@@ -317,7 +331,7 @@ export default function MessageItem({
                   onError={onError}
                   messageToTranslate={message}
                   messageHistory={messagesToView}
-                  currentUserId={userId}
+                  currentUserId={currentUserId}
                   maxTokens={maxTokens}
                   onTranslated={(id, textTranslated) =>
                     translatedHandler(id, textTranslated)

package/src/Presentation/Views/Dialog/useDialogViewModel.ts

@@ -42,9 +42,9 @@ export default function useDialogViewModel(
 ): DialogViewModel {
   console.log('useDialogViewModel');
   const [loading, setLoading] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [error, setError] = useState('');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const startPagination: Pagination = new Pagination(0, 0);
+  const [pagination, setPagination] = useState<Pagination>(startPagination);
   const [messages, setMessages] = useState<MessageEntity[]>([]);
   // const [users, setUsers] = useState<Record<number, UserEntity>>();
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
@@ -64,14 +64,9 @@ export default function useDialogViewModel(
 
   const [typingText, setTypingText] = useState<string>('');
 
-  async function getMessages(pagination?: Pagination) {
-    console.log(
-      'call getMessages in MessagesViewModelWithMockUseCase for dialog: ',
-      JSON.stringify(dialog),
-    );
+  async function getMessages(currentPagination?: Pagination) {
     setLoading(true);
-    //
-    //
+
     let participants: Array<number> = [];
     let userDictionary: Record<number, UserEntity> = {};
 
@@ -93,12 +88,6 @@ export default function useDialogViewModel(
       .execute()
       // eslint-disable-next-line promise/always-return
       .then((data) => {
-        console.log(
-          `use Message have dialog: ${JSON.stringify(
-            dialogEntity,
-          )} getUsers:${JSON.stringify(data)}`,
-        );
-        console.log('have users ids :', JSON.stringify(participants));
         userDictionary = data.reduce((acc, item) => {
           const obj = acc;
 
@@ -109,10 +98,6 @@ export default function useDialogViewModel(
           return obj;
         }, {});
 
-        console.log(
-          'have dictionary of users:',
-          JSON.stringify(userDictionary),
-        );
         setLoading(false);
         setError('');
       })
@@ -122,13 +107,12 @@ export default function useDialogViewModel(
         setError((e as unknown as Error).message);
       });
 
-    //
     //
     const getDialogMessages: GetAllMessagesForDialogMock =
       new GetAllMessagesForDialogMock(
         new MessagesRepository(LOCAL_DATA_SOURCE, REMOTE_DATA_SOURCE),
         dialog.id,
-        pagination || new Pagination(),
+        currentPagination || startPagination || new Pagination(),
       );
 
     //
@@ -138,11 +122,11 @@ export default function useDialogViewModel(
       .then((data) => {
         console.log(
           `DIALOG: ${JSON.stringify(dialogEntity)} WITH ${
-            data.length
+            data.ResultData.length
           } messages:${JSON.stringify(data)}`,
         );
 
-        const ResultMessages = data.map((message) => {
+        const ResultMessages = data.ResultData.map((message) => {
           const obj = { ...message };
 
           console.log('have sender id:', message.sender_id);
@@ -163,8 +147,18 @@ export default function useDialogViewModel(
         });
 
         console.log(`result messages:${JSON.stringify(ResultMessages)}`);
-        setMessages(ResultMessages);
+        // setMessages(ResultMessages);
+        setMessages((prevState) => {
+          const newItems: MessageEntity[] =
+            currentPagination === undefined ||
+            currentPagination?.getCurrentPage() === 0
+              ? [...ResultMessages]
+              : [...prevState, ...ResultMessages];
+
+          return newItems;
+        });
         setLoading(false);
+        setPagination(data.CurrentPagination);
         setError('');
       })
       .catch((e) => {
@@ -207,7 +201,10 @@ export default function useDialogViewModel(
 
     if (dialogInfo.eventMessageType === EventMessageType.LocalMessage) {
       if (dialogInfo.messageStatus) {
-        if (dialogInfo.messageStatus.isTyping) {
+        if (
+          dialogInfo.messageStatus.isTyping &&
+          dialogInfo.messageStatus.dialogId === dialog?.id
+        ) {
           // eslint-disable-next-line promise/catch-or-return
           getSender(dialogInfo.messageStatus.userId).then((senderUser) => {
             const typingMessage = `User ${
@@ -224,6 +221,41 @@ export default function useDialogViewModel(
         } else {
           setTypingText('');
         }
+        if (
+          (dialogInfo.messageStatus.deliveryStatus === 'read' ||
+            dialogInfo.messageStatus.deliveryStatus === 'delivered') &&
+          dialogInfo.messageStatus.messageId?.length > 0 &&
+          dialogInfo.messageStatus.dialogId === dialog?.id
+        ) {
+          setTypingText('');
+          setMessages((prevState) => {
+            let newState = [...prevState];
+
+            if (
+              newState.find(
+                (it) => it.id === dialogInfo.messageStatus!.messageId,
+              )
+            ) {
+              newState = newState.map((elem) => {
+                const v: MessageEntity = {
+                  ...elem,
+                  read_ids: [
+                    ...elem.read_ids,
+                    dialogInfo.messageStatus!.userId,
+                  ],
+                  delivered_ids: [
+                    ...elem.delivered_ids,
+                    dialogInfo.messageStatus!.userId,
+                  ],
+                };
+
+                return v;
+              });
+            }
+
+            return newState; // delivered message
+          });
+        }
       }
     }
     if (dialogInfo.eventMessageType === EventMessageType.RegularMessage) {
@@ -231,7 +263,7 @@ export default function useDialogViewModel(
         dialogInfo.messageInfo &&
         dialogInfo.messageInfo.message &&
         dialogInfo.messageInfo.id &&
-        dialogInfo.messageInfo.dialogId === dialog.id
+        dialogInfo.messageInfo.dialogId === dialog?.id
       ) {
         const messageId = dialogInfo.messageInfo.id;
         const messageText = dialogInfo.messageInfo.message;
@@ -256,7 +288,11 @@ export default function useDialogViewModel(
                 newState = newState.map((elem) => {
                   const v: MessageEntity = {
                     ...elem,
-                    delivered_ids: ResultMessage.delivered_ids,
+                    read_ids: [...elem.read_ids, ...ResultMessage.read_ids],
+                    delivered_ids: [
+                      ...elem.delivered_ids,
+                      ...ResultMessage.delivered_ids,
+                    ],
                   };
 
                   return v;
@@ -265,14 +301,10 @@ export default function useDialogViewModel(
                 newState.push(ResultMessage);
               }
 
-              return newState;
+              return newState; // regular message
             });
           });
       }
-      // else {
-      //   // загрузить все сообщения заново
-      //   getMessages().catch();
-      // }
     }
     if (dialogInfo.eventMessageType === EventMessageType.SystemMessage) {
       if (dialogInfo.notificationTypes === NotificationTypes.UPDATE_DIALOG) {
@@ -823,6 +855,7 @@ export default function useDialogViewModel(
       setMessages([]);
     },
     messages,
+    pagination,
     loading,
     error,
     // eslint-disable-next-line @typescript-eslint/no-misused-promises

package/src/Presentation/Views/DialogInfo/DialogInfo.scss

@@ -31,17 +31,9 @@ $dialog-information-container-dialog-information-height: 64px;
   position: relative;
 }
 .header-dialog-info-icon {
-  border-radius: 4px;
-  padding: 4px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  position: relative;
+  width: 24px;
+  height: 24px;
+  fill: var(--secondary-elements);
 }
 
 .dialog-information-profile,
@@ -120,6 +112,11 @@ $dialog-information-container-dialog-information-height: 64px;
   text-align: left;
   font: var(--button-default);
   position: relative;
+
+  &--disable {
+    color: var(--disabled-elements);
+    cursor: default;
+  }
 }
 
 .dialog-info-action-wrapper-settings,
@@ -210,8 +207,13 @@ $dialog-information-container-dialog-information-height: 64px;
 
 .dialog-info-leave {
   fill: var(--error);
-
   border-bottom: 1px solid var(--divider);
+  cursor: pointer;
+
+   &--disable {
+     fill: var(--disabled-elements);
+     cursor: default;
+   }
 }
 
 .dialog-info-members {