quickblox-react-ui-kit 0.2.4 → 0.2.5

package/src/Domain/use_cases/SendTextMessageUseCase.ts

@@ -19,8 +19,9 @@ export class SendTextMessageUseCase implements IUseCase<void, MessageEntity> {
   async execute(): Promise<MessageEntity> {
     console.log('execute SendTextMessageUseCase');
 
-    await this.messagesRepository.sendMessageToRemote(this.messageToSend);
+    const sentMessage: MessageEntity =
+      await this.messagesRepository.sendMessageToRemote(this.messageToSend);
 
-    return Promise.resolve(this.messageToSend);
+    return Promise.resolve(sentMessage);
   }
 }

package/src/Domain/use_cases/SubscribeToDialogEventsUseCase.ts

@@ -51,6 +51,12 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
       this.EVENT_NAME,
     );
 
+    this.eventMessagesRepository.subscribeOnSystemMessaging(
+      NotificationTypes.REMOVE_USER,
+      this.removeUserDialogEventHandler.bind(this),
+      this.EVENT_NAME,
+    );
+
     this.eventMessagesRepository.subscribeOnSystemMessaging(
       NotificationTypes.UPDATE_DIALOG,
       this.updateDialogEventHandler.bind(this),
@@ -124,6 +130,21 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
     this.informSubscribers(messageInfo);
   }
 
+  removeUserDialogEventHandler(messageEntity: MessageEntity): void {
+    console.log(
+      'execute removeUserDialogEventHandler in SubscribeToDialogEventsUseCase:',
+      JSON.stringify(messageEntity),
+    );
+    const messageInfo: DialogEventInfo = {
+      messageInfo: messageEntity,
+      notificationTypes: NotificationTypes.REMOVE_USER,
+      eventMessageType: EventMessageType.SystemMessage,
+      messageStatus: undefined,
+    };
+
+    this.informSubscribers(messageInfo);
+  }
+
   newDialogEventHandler(messageEntity: MessageEntity): void {
     console.log(
       'execute newDialogEventHandler in SubscribeToDialogEventsUseCase:',

package/src/Domain/use_cases/UpdateDialogUseCase.ts

@@ -14,15 +14,19 @@ export class UpdateDialogUseCase implements IUseCase<void, DialogEntity> {
 
   private updateDialog: GroupDialogEntity;
 
+  private textInformationMessage: string;
+
   constructor(
     eventMessagesRepository: EventMessagesRepository,
     dialogRepository: DialogsRepository,
     updateDialog: GroupDialogEntity,
+    textInformationMessage: string,
   ) {
     console.log('CONSTRUCTOR UpdateDialogUseCase');
     this.dialogRepository = dialogRepository;
     this.updateDialog = updateDialog;
     this.eventMessagesRepository = eventMessagesRepository;
+    this.textInformationMessage = textInformationMessage;
   }
 
   async execute(): Promise<DialogEntity> {
@@ -37,7 +41,10 @@ export class UpdateDialogUseCase implements IUseCase<void, DialogEntity> {
     remoteMessageDTO.dialogId = result.id;
     remoteMessageDTO.notification_type = NotificationTypes.UPDATE_DIALOG;
     remoteMessageDTO.date_sent = Date.now();
-    remoteMessageDTO.message = `User ${this.updateDialog.ownerId} has updated dialog ${this.updateDialog.name}`;
+    remoteMessageDTO.message =
+      this.textInformationMessage && this.textInformationMessage.length > 0
+        ? this.textInformationMessage
+        : `User ${this.updateDialog.ownerId} has updated dialog ${this.updateDialog.name}`;
 
     this.eventMessagesRepository.dispatchEvent<RemoteMessageDTO>(
       EventMessageType.RegularMessage,

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

@@ -35,20 +35,17 @@ export class SubscriptionPerformer<TArg> implements ISubscribable<TArg> {
 
   protected EVENT_TYPE: string = EventMessageType.LocalMessage;
 
+  // eslint-disable-next-line class-methods-use-this
   public release(): void {
-    Object.entries(this.onEventByTypeSubscribers).map((x) => {
-      const eventName = x[0];
-
-      this.onEventByTypeSubscribers[eventName][this.EVENT_NAME] = () => {
-        console.log('ERROR release event in SubscriptionPerformer');
-      };
-
-      return this.onEventByTypeSubscribers[eventName][this.EVENT_NAME];
-    });
+    console.log('SubscriptionPerformer release actions.');
     // Object.entries(this.onEventByTypeSubscribers).map((x) => {
     //   const eventName = x[0];
     //
-    //   return this.onEventByTypeSubscribers[eventName].slice();
+    //   this.onEventByTypeSubscribers[eventName][this.EVENT_NAME] = () => {
+    //     console.log('ERROR release event in SubscriptionPerformer');
+    //   };
+    //
+    //   return this.onEventByTypeSubscribers[eventName][this.EVENT_NAME];
     // });
   }
 

package/src/Presentation/Views/Base/BaseViewModel.ts

@@ -53,6 +53,7 @@ export type EditDialogParams = {
 };
 
 export type FunctionTypeFileToToVoid = (file: File) => void;
+export type FunctionTypeFileToToBoolean = (file: File) => Promise<boolean>;
 export type FunctionTypePaginationToVoid = (pagination: Pagination) => void;
 export type FunctionTypeVoidToVoid = () => void;
 export type FunctionTypeStringToVoid = (value: string) => void;

package/src/Presentation/Views/Dialogs/Dialogs.scss

@@ -72,5 +72,8 @@
     display: flex;
     align-items: center;
     letter-spacing: 0.15px;
+
+    border: none;
+    outline: none;
   }
 }

package/src/Presentation/Views/Dialogs/useDialogsViewModel.ts

@@ -28,6 +28,9 @@ import { DialogType } from '../../../Domain/entity/DialogTypes';
 import { RemoveUsersFromTheDialogUseCase } from '../../../Domain/use_cases/RemoveUsersFromTheDialogUseCase';
 import { DialogEventInfo } from '../../../Domain/entity/DialogEventInfo';
 import { RemoteDataSource } from '../../../Data/source/remote/RemoteDataSource';
+import { GetUsersByIdsUseCase } from '../../../Domain/use_cases/GetUsersByIdsUseCase';
+import UsersRepository from '../../../Data/repository/UsersRepository';
+import { UserEntity } from '../../../Domain/entity/UserEntity';
 
 export default function useDialogsViewModel(
   currentContext: QBDataContextType,
@@ -43,7 +46,9 @@ export default function useDialogsViewModel(
 
   //
   const currentUserId =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
+    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId || -1;
+  const currentUserName =
+    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName || '';
   // const currentContext = useQbInitializedDataContext();
   const remoteDataSourceMock: RemoteDataSource =
     currentContext.storage.REMOTE_DATA_SOURCE;
@@ -65,6 +70,49 @@ export default function useDialogsViewModel(
       'DialogsViewModel',
     );
 
+  async function getDialogs(currentPagination: Pagination) {
+    console.log('getDialogs in useDialogsViewModel');
+    console.log(
+      'EXECUTE USE CASES GET DIALOG WITH PAGINATION: ',
+      JSON.stringify(currentPagination),
+    );
+    setLoading(true);
+    const useCaseGetAllDialogs: GetAllDialogsUseCaseWithMock =
+      new GetAllDialogsUseCaseWithMock(
+        new DialogsRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          remoteDataSourceMock,
+        ),
+        currentPagination,
+      );
+
+    await useCaseGetAllDialogs
+      ?.execute()
+      // eslint-disable-next-line promise/always-return
+      .then((result) => {
+        console.log('EXECUTE COMPLETED: ', JSON.stringify(currentPagination));
+        setDialogs([...(result.ResultData as PublicDialogEntity[])]);
+        setLoading(false);
+        setPagination(result.CurrentPagination);
+      })
+      .catch((e) => {
+        console.log('call catch....', JSON.stringify(e));
+        setError(`${(e as unknown as Error).message}`);
+        setLoading(false);
+      });
+    await useCaseSubscribeToDialogsUpdates?.execute((data) => {
+      try {
+        console.log('3.SUBSCRIBE EXECUTE in useDialogsViewModel:', data);
+        setDialogs([...(data as PublicDialogEntity[])]);
+        setLoading(false);
+        setError('');
+      } catch (e) {
+        console.log('catch error2');
+        setError('ERROR2!!!');
+      }
+    });
+  }
+
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogsViewModel');
     if (
@@ -89,9 +137,7 @@ export default function useDialogsViewModel(
             setNewDialog(updatedDialog);
           });
         }
-      }
-      //
-      if (
+      } else if (
         dialogInfo.notificationTypes === NotificationTypes.DELETE_LEAVE_DIALOG
       ) {
         if (
@@ -100,8 +146,23 @@ export default function useDialogsViewModel(
         ) {
           setNewDialog(undefined);
         }
+      } else if (
+        dialogInfo.notificationTypes === NotificationTypes.REMOVE_USER
+      ) {
+        if (
+          dialogInfo.messageInfo &&
+          dialogInfo.messageInfo.dialogId === newDialog?.id
+        ) {
+          setNewDialog(undefined);
+        }
+        getDialogs(pagination);
+      } else if (
+        dialogInfo.notificationTypes === NotificationTypes.NEW_DIALOG
+      ) {
+        // const pagination: Pagination = new Pagination();
+
+        getDialogs(pagination).catch();
       }
-      //
     }
   };
 
@@ -112,48 +173,6 @@ export default function useDialogsViewModel(
     });
 
   // eslint-disable-next-line @typescript-eslint/require-await
-  async function getDialogs(currentPagination: Pagination) {
-    console.log('getDialogs in useDialogsViewModel');
-    console.log(
-      'EXECUTE USE CASES GET DIALOG WITH PAGINATION: ',
-      JSON.stringify(currentPagination),
-    );
-    setLoading(true);
-    const useCaseGetAllDialogs: GetAllDialogsUseCaseWithMock =
-      new GetAllDialogsUseCaseWithMock(
-        new DialogsRepository(
-          currentContext.storage.LOCAL_DATA_SOURCE,
-          remoteDataSourceMock,
-        ),
-        currentPagination,
-      );
-
-    await useCaseGetAllDialogs
-      ?.execute()
-      // eslint-disable-next-line promise/always-return
-      .then((result) => {
-        console.log('EXECUTE COMPLETED: ', JSON.stringify(currentPagination));
-        setDialogs([...(result.ResultData as PublicDialogEntity[])]);
-        setLoading(false);
-        setPagination(result.CurrentPagination);
-      })
-      .catch((e) => {
-        console.log('call catch....', JSON.stringify(e));
-        setError(`${(e as unknown as Error).message}`);
-        setLoading(false);
-      });
-    await useCaseSubscribeToDialogsUpdates?.execute((data) => {
-      try {
-        console.log('3.SUBSCRIBE EXECUTE in useDialogsViewModel:', data);
-        setDialogs([...(data as PublicDialogEntity[])]);
-        setLoading(false);
-        setError('');
-      } catch (e) {
-        console.log('catch error2');
-        setError('ERROR2!!!');
-      }
-    });
-  }
 
   const release = () => {
     useCaseSubscribeToDialogsUpdates.release();
@@ -163,6 +182,31 @@ export default function useDialogsViewModel(
     setLoading(status);
   };
 
+  const getSenders = async (senders: number[]) => {
+    const getUsers: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
+      new UsersRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        currentContext.storage.REMOTE_DATA_SOURCE,
+      ),
+      [...senders],
+    );
+
+    let userEntites: UserEntity[] = [];
+
+    await getUsers
+      .execute()
+      // eslint-disable-next-line promise/always-return
+      .then((data) => {
+        // eslint-disable-next-line prefer-destructuring
+        userEntites = data;
+      })
+      .catch((e) => {
+        console.log('have ERROR get users :', JSON.stringify(e));
+      });
+
+    return userEntites;
+  };
+
   const createDialog = async (
     dialogInfo: GroupDialogEntity,
   ): Promise<DialogEntity> => {
@@ -170,7 +214,7 @@ export default function useDialogsViewModel(
       'call createDialog in use case with params: ',
       JSON.stringify(dialogInfo),
     );
-
+    const textInformationMessage = `${currentUserName} create the chat`;
     const createDialogUseCase: CreateDialogUseCase = new CreateDialogUseCase(
       eventMessageRepository,
       new DialogsRepository(
@@ -178,6 +222,7 @@ export default function useDialogsViewModel(
         remoteDataSourceMock,
       ),
       dialogInfo,
+      textInformationMessage,
     );
     const resultDialog: DialogEntity = await createDialogUseCase
       .execute()
@@ -201,6 +246,7 @@ export default function useDialogsViewModel(
     // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
     dialog: GroupDialogEntity,
   ): Promise<DialogEntity> => {
+    const textInformationMessage = `${currentUserName} has updated dialog`;
     const updateDialogUseCase: UpdateDialogUseCase = new UpdateDialogUseCase(
       eventMessageRepository,
       new DialogsRepository(
@@ -208,6 +254,7 @@ export default function useDialogsViewModel(
         remoteDataSourceMock,
       ),
       dialog,
+      textInformationMessage,
     );
 
     const resultDialog: DialogEntity = await updateDialogUseCase
@@ -242,6 +289,7 @@ export default function useDialogsViewModel(
     let leaveResult = false;
 
     if (dialogToDelete.type === DialogType.private) {
+      const textInformationMessage = `${currentUserName} has left dialog`;
       const leaveDialogUseCase: LeaveDialogUseCase = new LeaveDialogUseCase(
         eventMessageRepository,
         new DialogsRepository(
@@ -250,6 +298,7 @@ export default function useDialogsViewModel(
         ),
         dialogToDelete,
         DialogLeaveType.delete,
+        textInformationMessage,
       );
 
       leaveResult = await leaveDialogUseCase.execute().catch((e) => {
@@ -263,6 +312,7 @@ export default function useDialogsViewModel(
         remoteDataSourceMock?.authInformation?.userId || 0;
 
       usersForDeleteFromDialog.push(userToDeleteId);
+      const textInformationMessage = `${currentUserName} has left dialog`;
       const deleteUsersFromDialog: RemoveUsersFromTheDialogUseCase =
         new RemoveUsersFromTheDialogUseCase(
           eventMessageRepository,
@@ -272,6 +322,7 @@ export default function useDialogsViewModel(
           ),
           dialogToDelete,
           usersForDeleteFromDialog,
+          textInformationMessage,
         );
 
       leaveResult = await deleteUsersFromDialog.execute().catch((e) => {
@@ -297,6 +348,15 @@ export default function useDialogsViewModel(
       dialog.participantsToRemoveIds &&
       dialog.participantsToRemoveIds.length > 0
     ) {
+      const usersToDelete: UserEntity[] = await getSenders(
+        dialog.participantsToRemoveIds,
+      );
+      let userNames = '';
+
+      usersToDelete.forEach((u) => {
+        userNames += u.login || u.full_name || u.email;
+      });
+      const textInformationMessage = `${currentUserName} remove ${userNames}`;
       const deleteUsersFromDialog: RemoveUsersFromTheDialogUseCase =
         new RemoveUsersFromTheDialogUseCase(
           eventMessageRepository,
@@ -306,6 +366,7 @@ export default function useDialogsViewModel(
           ),
           dialog,
           dialog.participantsToRemoveIds,
+          textInformationMessage,
         );
 
       leaveResult = await deleteUsersFromDialog.execute().catch((e) => {

package/src/Presentation/assets/styles/_variables.scss

@@ -1,2 +1,21 @@
 @import "theme_light";
 @import "theme_dark";
+
+/* Fonts */
+:root{
+  --title-title-large: 500 20px/24px "Roboto", sans-serif;
+  --title-title-medium: 500 16px/24px "Roboto", sans-serif;
+  --title-title-small: 500 14px/20px "Roboto", sans-serif;
+  --label-label-large: 500 14px/20px "Roboto", sans-serif;
+  --label-label-medium: 500 12px/16px "Roboto", sans-serif;
+  --label-label-small: 500 11px/16px "Roboto", sans-serif;
+  --body-body-large: 400 16px/24px "Roboto", sans-serif;
+  --body-body-medium: 400 14px/20px "Roboto", sans-serif;
+  --body-body-small: 400 12px/16px "Roboto", sans-serif;
+  --button-fab: 500 14px/16px "Roboto", sans-serif;
+  --button-default: 700 14px/16px "Roboto", sans-serif;
+  --ui-kit-header: 500 48px "Roboto Mono", sans-serif;
+  --ui-kit-title: 500 32px "Roboto Mono", sans-serif;
+  --ui-kit-body: 400 17px "Roboto Mono", sans-serif;
+}
+

package/src/Presentation/components/UI/Buttons/MainButton/MainButton.scss

@@ -31,6 +31,9 @@
 
   /* Light UiKitTheme/System */
   color: var(--main-background);
+
+  border: none;
+  outline: none;
 }
 
 .danger-button {
@@ -61,6 +64,9 @@
   letter-spacing: 0.4px;
   /* Light UiKitTheme/System */
   color: var(--main-background);
+
+  border: none;
+  outline: none;
 }
 
 .secondary-button{
@@ -124,4 +130,7 @@
   letter-spacing: 0.4px;
   /* Light UiKitTheme/Secondary text */
   color: var(--secondary-text);
+
+  border: none;
+  outline: none;
 }

package/src/Presentation/components/UI/Dialogs/EditDialog/EditDialog.scss

@@ -190,6 +190,9 @@ $create-dialog-container-height: 180px;
         display: flex;
         align-items: center;
         letter-spacing: 0.15px;
+
+        border: none;
+        outline: none;
       }
     }
   }

package/src/Presentation/components/UI/Dialogs/InviteMembers/InviteMembers.scss

@@ -114,6 +114,9 @@ $create-dialog-container-height: 412px;
           display: flex;
           align-items: center;
           letter-spacing: 0.15px;
+
+          border: none;
+          outline: none;
         }
 
       }

package/src/Presentation/components/UI/Dialogs/MembersList/MembersList.scss

@@ -114,6 +114,9 @@ $members-list-container-height: 800px;
         display: flex;
         align-items: center;
         letter-spacing: 0.15px;
+
+        border: none;
+        outline: none;
       }
 
     }

package/src/Presentation/components/UI/Dialogs/MessagesView/AudioAttachmentComponent/AudioAttachmentComponent.tsx

@@ -17,7 +17,7 @@ const AudioAttachmentComponent: React.FC<AudioAttachmentComponentProps> = ({
         <source src={audioFile.url} type="audio/mpeg" />
         <source src={audioFile.url} type="audio/ogg" />
       </audio>
-      <a href={audioFile.url} download>
+      <a href={audioFile.url} target="_blank" download rel="noreferrer">
         Download
       </a>
     </div>

package/src/Presentation/components/UI/Dialogs/MessagesView/DefaultAttachmentComponent/DefaultAttachmentComponent.tsx

@@ -4,27 +4,33 @@ import TextDocument from '../../../svgs/Icons/Media/TextDocument';
 
 type DefaultAttachmentComponentProps = {
   fileName: string;
+  fileUrl: string;
 };
 // eslint-disable-next-line react/function-component-definition
 const DefaultAttachmentComponent: React.FC<DefaultAttachmentComponentProps> = ({
   fileName,
+  fileUrl,
 }: DefaultAttachmentComponentProps) => {
   return (
-    <div className="default-attachment-component-container">
-      <div className="default-attachment-component-container--file-wrapper">
-        <div className="default-attachment-component-container--file-wrapper--placeholder">
-          <div className="default-attachment-component-container--file-wrapper--placeholder__bg" />
-          <div className="default-attachment-component-container--file-wrapper--placeholder__icon">
-            <TextDocument
-              width="16"
-              height="16"
-              applyZoom
-              color="var(--incoming-background)"
-            />
+    <div>
+      <div className="default-attachment-component-container">
+        <div className="default-attachment-component-container--file-wrapper">
+          <div className="default-attachment-component-container--file-wrapper--placeholder">
+            <div className="default-attachment-component-container--file-wrapper--placeholder__bg" />
+            <div className="default-attachment-component-container--file-wrapper--placeholder__icon">
+              <a href={fileUrl} target="_blank" download rel="noreferrer">
+                <TextDocument
+                  width="16"
+                  height="16"
+                  applyZoom
+                  color="var(--incoming-background)"
+                />
+              </a>
+            </div>
+          </div>
+          <div className="default-attachment-component-container--file-wrapper__file-d">
+            {fileName}
           </div>
-        </div>
-        <div className="default-attachment-component-container--file-wrapper__file-d">
-          {fileName}
         </div>
       </div>
     </div>

package/src/Presentation/components/UI/Dialogs/MessagesView/ImageAttachmentComponent/ImageAttachmentComponent.tsx

@@ -12,12 +12,14 @@ const ImageAttachmentComponent: React.FC<ImageAttachmentComponentProps> = ({
 }: ImageAttachmentComponentProps) => {
   return (
     <div>
-      <img
-        className="image-body"
-        key={imageFile.id}
-        src={imageFile.url}
-        alt={imageFile.name || 'attached image'}
-      />
+      <a href={imageFile.url} download="file" target="_blank" rel="noreferrer">
+        <img
+          className="image-body"
+          key={imageFile.id}
+          src={imageFile.url}
+          alt={imageFile.name || 'attached image'}
+        />
+      </a>
     </div>
   );
 };

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import './AvatarContentIncomingUser.scss';
 
+export interface AvatarContentIncomingUserProps {
+  // eslint-disable-next-line react/no-unused-prop-types
+  userId: number;
+}
+
 export default function AvatarContentIncomingUser() {
+  // props: AvatarContentIncomingUserProps,
   return (
     <div className="avatar-wrap">
       <div className="avatar">

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/InComingMessage.scss

@@ -255,7 +255,7 @@
   max-width: 480px;
 }
 .message-in-a-single-line {
-  color: var(--secondary-secondary-900, #0b121b);
+  color: var(--main-text);
   text-align: left;
   font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
   position: relative;