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

package/src/Data/source/remote/RemoteDataSource.ts

@@ -21,6 +21,8 @@ import {
   QBChatDisconnect,
   qbChatGetMessagesExtended,
   QBChatMarkMessageRead,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // QBChatMarkMessageRead,
   QBChatSendMessage,
   QBChatSendSystemMessage,
   QBCreateAndUploadContent,
@@ -126,6 +128,8 @@ export class RemoteDataSource implements IRemoteDataSource {
     this._authInformation = value;
   }
 
+  private currentDialog: RemoteDialogDTO | undefined;
+
   //
   getCurrentDialogDTOMapper(): IDTOMapper {
     const currentUserId: number = this._authInformation?.userId || -1;
@@ -152,6 +156,10 @@ export class RemoteDataSource implements IRemoteDataSource {
       new SubscriptionPerformer<RemoteMessageDTO>();
   }
 
+  updateCurrentDialog(dto: RemoteDialogDTO): void {
+    this.currentDialog = dto;
+  }
+
   public async setUpMockStorage(): Promise<void> {
     const dialogsDTOtoEntityMapper: IMapper = new DialogRemoteDTOMapper();
     const dialogsEntities = Stubs.createDialogsForTest();
@@ -351,12 +359,13 @@ export class RemoteDataSource implements IRemoteDataSource {
           message,
         )}`,
       );
-      // нужно получить реализовать так как при обработке onDeliveredStatusListener
-      const dialogId = message.dialog_id || message.extension.dialog_id || '-1';
+      const dialogId: QBChatDialog['_id'] =
+        message.dialog_id || message.extension.dialog_id || '-1';
 
       //
       qbChatGetMessagesExtended(dialogId, {
         _id: message.id,
+        mark_as_read: 0,
       })
         // eslint-disable-next-line promise/always-return
         .then((qbMessages: GetMessagesResult) => {
@@ -369,18 +378,65 @@ export class RemoteDataSource implements IRemoteDataSource {
               >(currentItem);
 
             dtoMessage.dialogId = dialogId;
-
             this.subscriptionOnChatMessages.informSubscribers(
               dtoMessage,
               EventMessageType.RegularMessage,
             );
-
+            //
+            if (this.currentDialog?.id === dialogId) {
+              QBChatMarkMessageRead({
+                messageId: message.id,
+                dialogId,
+                userId: dtoMessage.sender_id,
+              });
+            }
+
+            ///
             return dtoMessage;
           });
+        })
+        .catch();
+      //
+      QBGetDialogById(dialogId)
+        .then(async (result) => {
+          //
+          const dialogs: QBChatDialog[] | undefined = result?.items.filter(
+            (v) => v._id === dialogId,
+          );
+          const current =
+            dialogs && dialogs.length > 0 ? dialogs[0] : undefined;
+          //
+          const dialogDTO: RemoteDialogDTO =
+            await this.getCurrentDialogDTOMapper().toTDO(current);
+          const dialogsDTOtoEntityMapper: IMapper = new DialogRemoteDTOMapper();
 
-          ///
+          const dialogEntity: DialogEntity =
+            await dialogsDTOtoEntityMapper.toEntity(dialogDTO);
+          //
+          //
+          const resultEvent: DialogEventInfo = {
+            eventMessageType: EventMessageType.LocalMessage,
+            dialogInfo: dialogEntity,
+            messageInfo: undefined,
+            messageStatus: {
+              isTyping: false,
+              userId,
+              dialogId,
+              messageId: message.id,
+              deliveryStatus: 'read',
+            },
+            notificationTypes: undefined,
+          };
+
+          this.subscriptionOnMessageStatus.informSubscribers(
+            resultEvent,
+            EventMessageType.LocalMessage,
+          );
+
+          return resultEvent;
         })
         .catch();
+      //
     };
     QB.chat.onDeliveredStatusListener = (messageId, dialogId, userId) => {
       console.log(
@@ -388,19 +444,49 @@ export class RemoteDataSource implements IRemoteDataSource {
       );
 
       QBGetDialogById(dialogId)
-        .then((result) => {
+        .then(async (result) => {
           //
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const currentUserId = this._authInformation?.userId;
           const dialogs: QBChatDialog[] | undefined = result?.items.filter(
             (v) => v._id === dialogId,
           );
           const current =
             dialogs && dialogs.length > 0 ? dialogs[0] : undefined;
+          //
+          const dialogDTO: RemoteDialogDTO =
+            await this.getCurrentDialogDTOMapper().toTDO(current);
+          const dialogsDTOtoEntityMapper: IMapper = new DialogRemoteDTOMapper();
 
+          const dialogEntity: DialogEntity =
+            await dialogsDTOtoEntityMapper.toEntity(dialogDTO);
+          //
+          //
+          const resultMessage: DialogEventInfo = {
+            eventMessageType: EventMessageType.LocalMessage,
+            dialogInfo: dialogEntity,
+            messageInfo: undefined,
+            messageStatus: {
+              isTyping: false,
+              userId,
+              dialogId,
+              messageId,
+              deliveryStatus: 'delivered',
+            },
+            notificationTypes: undefined,
+          };
+
+          this.subscriptionOnMessageStatus.informSubscribers(
+            resultMessage,
+            EventMessageType.LocalMessage,
+          );
+          //
+          //
           // eslint-disable-next-line promise/always-return
           if (current && current.type === DialogType.private) {
-            //
             qbChatGetMessagesExtended(dialogId, {
               _id: messageId,
+              mark_as_read: 0,
             })
               // eslint-disable-next-line promise/always-return
               .then((qbMessages: GetMessagesResult) => {
@@ -413,11 +499,18 @@ export class RemoteDataSource implements IRemoteDataSource {
                     >(currentItem);
 
                   dtoMessage.dialogId = dialogId;
-
                   this.subscriptionOnChatMessages.informSubscribers(
                     dtoMessage,
                     EventMessageType.RegularMessage,
                   );
+                  //
+                  if (this.currentDialog?.id === dialogId) {
+                    QBChatMarkMessageRead({
+                      messageId,
+                      dialogId,
+                      userId: dtoMessage.sender_id,
+                    });
+                  }
 
                   return dtoMessage;
                 });
@@ -441,7 +534,14 @@ export class RemoteDataSource implements IRemoteDataSource {
       const resultMessage: DialogEventInfo = {
         eventMessageType: EventMessageType.LocalMessage,
         messageInfo: undefined,
-        messageStatus: { isTyping, userId, dialogId },
+        dialogInfo: undefined,
+        messageStatus: {
+          isTyping,
+          userId,
+          dialogId,
+          messageId: '',
+          deliveryStatus: 'sending',
+        },
         notificationTypes: undefined,
       };
 
@@ -490,6 +590,24 @@ export class RemoteDataSource implements IRemoteDataSource {
       console.log(
         `EVENT: receive read message id: ${messageId}, dialogid: ${dialogId} userid: ${userId}`,
       );
+      const resultMessage: DialogEventInfo = {
+        eventMessageType: EventMessageType.LocalMessage,
+        messageInfo: undefined,
+        dialogInfo: undefined,
+        messageStatus: {
+          isTyping: false,
+          userId,
+          dialogId,
+          messageId,
+          deliveryStatus: 'read',
+        },
+        notificationTypes: undefined,
+      };
+
+      this.subscriptionOnMessageStatus.informSubscribers(
+        resultMessage,
+        EventMessageType.LocalMessage,
+      );
     };
 
     //
@@ -722,7 +840,7 @@ export class RemoteDataSource implements IRemoteDataSource {
         photo: qbEntity.photo,
       };
     }
-    if (qbEntity.new_occupants_ids?.length > 0) {
+    if (qbEntity.new_occupants_ids && qbEntity.new_occupants_ids.length > 0) {
       data = {
         ...data,
         push_all: { occupants_ids: qbEntity.new_occupants_ids },
@@ -1009,7 +1127,7 @@ export class RemoteDataSource implements IRemoteDataSource {
           QBChatMarkMessageRead({
             messageId: dtoMessage.id,
             dialogId: dtoMessage.dialogId,
-            userId: currentUserId,
+            userId: dtoMessage.sender_id,
           });
         }
 
@@ -1069,7 +1187,7 @@ export class RemoteDataSource implements IRemoteDataSource {
 
     const qbEntity: QBChatNewMessage = {
       type: dto.dialog_type === DialogType.private ? 'chat' : 'groupchat',
-      body: messageText,
+      body: messageText || '',
       notification_type: dto.notification_type,
       dialog_id: dto.dialogId,
       extension: {
@@ -1086,6 +1204,7 @@ export class RemoteDataSource implements IRemoteDataSource {
         ),
       },
       markable: 1,
+      // markable: 0, // mark_as_read ??
     };
 
     if (dto.attachments?.length > 0) {
@@ -1237,7 +1356,9 @@ export class RemoteDataSource implements IRemoteDataSource {
   // eslint-disable-next-line @typescript-eslint/require-await,class-methods-use-this,@typescript-eslint/no-unused-vars
   async createFile(dto: RemoteFileDTO): Promise<RemoteFileDTO> {
     console.log('call createFile in remote with params: ', JSON.stringify(dto));
-    const qbParam: QBContentParam = await this.fileDTOMapper.fromDTO(dto);
+    const qbParam: QBBlobCreateUploadParams = await this.fileDTOMapper.fromDTO(
+      dto,
+    );
 
     const result = await QBCreateAndUploadContent(qbParam).catch((err) => {
       console.log('Error: ', stringifyError(err));
@@ -1257,9 +1378,9 @@ export class RemoteDataSource implements IRemoteDataSource {
       );
     }
 
-    const qbContentObject: QBContentObject = result as QBContentObject;
+    const qbContentObject: QBBlobCreate = result as QBBlobCreate;
     const newDto: RemoteFileDTO = await this.fileDTOMapper.toTDO<
-      QBContentObject,
+      QBBlobCreate,
       RemoteFileDTO
     >(qbContentObject);
 

package/src/Domain/entity/DialogEventInfo.ts

@@ -1,15 +1,19 @@
 import EventMessageType from './EventMessageType';
 import { NotificationTypes } from './NotificationTypes';
 import { MessageEntity } from './MessageEntity';
+import { DialogEntity } from './DialogEntity';
 
 export type MessageStatus = {
+  deliveryStatus: 'delivered' | 'read' | 'sent' | 'sending';
   isTyping: boolean;
   userId: number;
   dialogId: string;
+  messageId: string;
 };
 export type DialogEventInfo = {
   eventMessageType: EventMessageType;
   notificationTypes: NotificationTypes | undefined;
+  dialogInfo?: DialogEntity | undefined;
   messageInfo: MessageEntity | undefined;
   messageStatus: MessageStatus | undefined;
 };

package/src/Domain/entity/FileEntity.ts

@@ -7,5 +7,5 @@ export interface FileEntity {
   name?: string;
   size?: number;
   type?: FileType;
-  data?: string | File;
+  data?: File;
 }

package/src/Domain/entity/UserEntity.ts

@@ -3,21 +3,11 @@ export interface UserEntity {
   full_name: string;
   email: string;
   login: string;
-  // phone: string;
-  // website: string;
   created_at: string;
   updated_at: string;
-  last_request_at: string;
-  // external_user_id: null;
-  // facebook_id: string | null;
+  last_request_at: number;
   blob_id: string | null;
   photo: string | null;
   custom_data: string | null;
-  // age_over16: boolean;
-  // allow_statistics_analysis: boolean;
-  // allow_sales_activities: boolean;
-  // parents_contacts: string;
   user_tags: string | null;
-  // password?: string;
-  // old_password?: string;
 }

package/src/Domain/use_cases/GetAllMessagesForDialog.ts

@@ -4,7 +4,7 @@ import { IMessagesRepository } from '../repository/IMessagesRepository';
 import { PaginatedResult, Pagination } from '../repository/Pagination';
 
 export class GetAllMessagesForDialogMock
-  implements IUseCase<void, Array<MessageEntity>>
+  implements IUseCase<void, PaginatedResult<MessageEntity>>
 {
   private messagesRepository: IMessagesRepository;
 
@@ -24,7 +24,7 @@ export class GetAllMessagesForDialogMock
   }
 
   // eslint-disable-next-line class-methods-use-this
-  async execute(): Promise<Array<MessageEntity>> {
+  async execute(): Promise<PaginatedResult<MessageEntity>> {
     console.log('execute GetAllMessagesForDialog');
     //
     const result: PaginatedResult<MessageEntity> =
@@ -56,6 +56,6 @@ export class GetAllMessagesForDialogMock
     // return this.messagesRepository.getMessagesFromLocal(this.dialogId);
     //
     //
-    return result.ResultData;
+    return result;
   }
 }

package/src/Domain/use_cases/GetDialogByIdUseCase.ts

@@ -18,7 +18,11 @@ export class GetDialogByIdUseCase implements IUseCase<void, DialogEntity> {
     const fromRemote: DialogEntity =
       await this.dialogRepository.getDialogFromRemote(this.dialogId);
 
-    await this.dialogRepository.updateDialogInLocal(fromRemote);
+    try {
+      await this.dialogRepository.updateDialogInLocal(fromRemote);
+    } catch (e) {
+      await this.dialogRepository.saveDialogToLocal(fromRemote);
+    }
 
     const dialogResult: DialogEntity =
       await this.dialogRepository.getDialogFromLocal(this.dialogId);

package/src/Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase.ts

@@ -0,0 +1,31 @@
+import { DialogEntity } from '../entity/DialogEntity';
+import DialogsRepository from '../../Data/repository/DialogsRepository';
+import { IUseCase } from './base/IUseCase';
+import { GroupDialogEntity } from '../entity/GroupDialogEntity';
+
+export class UpdateCurrentDialogInDataSourceUseCase
+  implements IUseCase<void, DialogEntity>
+{
+  private dialogRepository: DialogsRepository;
+
+  private updateDialog: GroupDialogEntity;
+
+  constructor(
+    dialogRepository: DialogsRepository,
+    updateDialog: GroupDialogEntity,
+  ) {
+    console.log('CONSTRUCTOR UpdateCurrentDialogInDataSourceUseCase');
+    this.dialogRepository = dialogRepository;
+    this.updateDialog = updateDialog;
+  }
+
+  async execute(): Promise<DialogEntity> {
+    console.log('execute UpdateCurrentDialogInDataSourceUseCase');
+    const result: DialogEntity =
+      await this.dialogRepository.updateCurrentDialogInLocalDataSource(
+        this.updateDialog,
+      );
+
+    return Promise.resolve(result);
+  }
+}

package/src/Domain/use_cases/UpdateDialogUseCase.ts

@@ -55,10 +55,15 @@ export class UpdateDialogUseCase implements IUseCase<void, DialogEntity> {
     remoteMessageDTO.dialogId = result.id;
     remoteMessageDTO.notification_type = NotificationTypes.UPDATE_DIALOG;
 
+    const participants: Array<number> = [
+      ...(this.updateDialog.participantIds ?? []),
+      ...(this.updateDialog.newParticipantIds ?? []),
+    ];
+
     this.eventMessagesRepository.dispatchEvent<RemoteMessageDTO>(
       EventMessageType.SystemMessage,
       remoteMessageDTO,
-      [...this.updateDialog.participantIds],
+      [...participants],
     );
 
     this.eventMessagesRepository.dispatchEvent<DialogEntity>(

package/src/Domain/use_cases/base/Subscribable/SubscriptionPerformer.ts

@@ -107,7 +107,7 @@ export class SubscriptionPerformer<TArg> implements ISubscribable<TArg> {
         // local events and leave dialog
         Object.entries(this.onEventByTypeSubscribers[eventType]).forEach(
           (value) => {
-            if (arg) {
+            if (arg !== undefined) {
               // eslint-disable-next-line @typescript-eslint/no-unused-vars
               const currentEventName = value[0];
 

package/src/Presentation/Views/Dialog/AIComponents/AIAssist/AIAssist.scss

@@ -28,6 +28,11 @@
       position: relative;
       overflow: visible;
       fill: var(--main-elements, #3978FC);
+
+      &--disable {
+        fill: var(--disabled-elements);
+        cursor: default;
+      }
     }
   }
 }

package/src/Presentation/Views/Dialog/AIComponents/AIAssist/AIAssist.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import { ReactComponent as RobotSvg } from '../../../../icons/actions/robot.svg';
 import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
@@ -13,6 +14,7 @@ interface AIAssistProps {
   messageToAssist?: MessageEntity;
   messageHistory?: MessageEntity[];
   currentUserId?: number;
+  disableAction?: boolean;
 }
 
 export default function AIAssist({
@@ -24,9 +26,10 @@ export default function AIAssist({
   messageToAssist,
   messageHistory,
   currentUserId,
+  disableAction = false,
 }: AIAssistProps) {
   async function assistAnswerHandler() {
-    if (loading) {
+    if (loading || disableAction) {
       return;
     }
 
@@ -56,7 +59,11 @@ export default function AIAssist({
       {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
       <div className="ai-assist-answer__icon" onClick={assistAnswerHandler}>
         {!loading && (
-          <RobotSvg className="ai-assist-answer__icon__media-robot" />
+          <RobotSvg
+            className={cn('ai-assist-answer__icon__media-robot', {
+              'ai-assist-answer__icon__media-robot--disable': disableAction,
+            })}
+          />
         )}
       </div>
     </div>

package/src/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.scss

@@ -28,6 +28,11 @@
       text-align: right;
       font: var(--label-label-small);
       position: relative;
+
+      &--disable {
+        color: var(--disabled-elements);
+        cursor: default;
+      }
     }
   }
 
@@ -55,6 +60,11 @@
       position: relative;
       overflow: visible;
       fill: var(--tertiary-elements, #636D78);
+
+      &--disable {
+        fill: var(--disabled-elements);
+        cursor: default;
+      }
     }
   }
 }

package/src/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import Dropdown from '../../../../ui-components/Dropdown/Dropdown';
 import { ReactComponent as TranslateSvg } from '../../../../icons/actions/translate.svg';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
@@ -18,6 +19,7 @@ interface AITranslateComponentProps {
   messageToTranslate?: MessageEntity;
   messageHistory?: MessageEntity[];
   currentUserId?: number;
+  disableAction?: boolean;
 }
 
 export default function AITranslate({
@@ -33,11 +35,12 @@ export default function AITranslate({
   messageToTranslate,
   messageHistory,
   currentUserId,
+  disableAction = false,
 }: AITranslateComponentProps) {
   const options = languages.map((lang) => ({ value: lang, label: lang }));
 
   async function translateHandler(translateLanguage: string) {
-    if (loading) {
+    if (loading || disableAction) {
       return;
     }
 
@@ -79,12 +82,14 @@ export default function AITranslate({
   return (
     <div className="ai-translate">
       <div
-        className={
-          loading ? 'translate__caption--disable' : 'ai-translate__caption'
-        }
+        className={cn('ai-translate__caption', {
+          'translate__caption--disable': loading,
+        })}
       >
         <div
-          className="ai-translate__caption__label"
+          className={cn('ai-translate__caption__label', {
+            'ai-translate__caption__label--disable': disableAction,
+          })}
           onClick={() => {
             if (originalTextMessage) {
               translateHandler(defaultLanguage);
@@ -102,13 +107,17 @@ export default function AITranslate({
       <div>
         <Dropdown
           options={options}
-          disabled={loading}
+          disabled={loading || disableAction}
           onSelect={(language) => {
             translateHandler(language);
           }}
         >
           <div className="ai-translate__icon">
-            <TranslateSvg className="ai-translate__icon__media-translate" />
+            <TranslateSvg
+              className={cn('ai-translate__icon__media-translate', {
+                'ai-translate__icon__media-translate--disable': disableAction,
+              })}
+            />
           </div>
         </Dropdown>
       </div>

package/src/Presentation/Views/Dialog/AIWidgets/AIRephraseWidget/AIRephraseWidget.scss

@@ -9,11 +9,16 @@
   margin-bottom: 5px;
 }
 .rephrase-icon{
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
   fill: var(--color-icon);
 
+  &--disable {
+    cursor: default;
+    fill: var(--disabled-elements);
+  }
+
   svg path{
     fill: var(--color-icon);
   }

package/src/Presentation/Views/Dialog/AIWidgets/AIRephraseWidget/AIRephraseWidget.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import './AIRephraseWidget.scss';
 import { Tone } from 'qb-ai-rephrase/src/Tone';
 import { QBAIRephrase } from 'qb-ai-rephrase';
+import cn from 'classnames';
 import {
   FunctionTypeBooleanToVoid,
   FunctionTypeStringToVoid,
@@ -36,6 +37,7 @@ type AIRephraseWidgetProps = {
   rephraseTones: Tone[];
   theme?: UiKitTheme;
   setPrevValueText: FunctionTypeStringToVoid;
+  disableActions?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
 const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
@@ -51,6 +53,7 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
   setPrevValueText,
+  disableActions = false,
 }: AIRephraseWidgetProps) => {
   const [currentMessageText, setCurrentMessageText] =
     useState<string>(messageText);
@@ -91,7 +94,8 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
         if (
           currentMessageText &&
           currentMessageText.length > 0 &&
-          !waitAIWidget
+          !waitAIWidget &&
+          !disableActions
         ) {
           setWaitAIWidget(true);
           setPrevTextMessage(currentMessageText);
@@ -153,12 +157,17 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
         <div
           className="icon"
           style={{
-            cursor: !waitAIWidget ? 'pointer' : '',
+            cursor: !waitAIWidget || !disableActions ? 'pointer' : '',
           }}
         >
           <AIWidgetActions
+            disabled={!disableActions}
             widgetToRender={
-              <RephraseSvg className="rephrase-icon" />
+              <RephraseSvg
+                className={cn('rephrase-icon', {
+                  'rephrase-icon--disable': disableActions,
+                })}
+              />
               // <ToneIcon
               //   width="24"
               //   height="24"

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

@@ -8,10 +8,12 @@ import BaseViewModel, {
 } from '../../../CommonTypes/BaseViewModel';
 import { MessageEntity } from '../../../Domain/entity/MessageEntity';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { Pagination } from '../../../Domain/repository/Pagination';
 
 export interface DialogViewModel extends BaseViewModel<DialogEntity> {
   loading: boolean;
   error: string;
+  pagination: Pagination;
   messages: MessageEntity[]; // content
   getMessages: FunctionTypePaginationToVoid; // prepareContent
   sendTextMessage: FunctionTypeStringToVoid;

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

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
-  width: 332px;
+  width: 270px;
   position: relative;
 
 }