quickblox-react-ui-kit 0.1.0

package/src/Domain/use_cases/SyncDialogsUseCase.ts

@@ -0,0 +1,246 @@
+import { BaseUseCase } from './base/BaseUseCase';
+import DialogsRepository from '../../Data/repository/DialogsRepository';
+import { CallBackFunction } from './base/IUseCase';
+import ConnectionRepository from '../../Data/repository/ConnectionRepository';
+import { stringifyError } from '../../utils/parse';
+import EventMessagesRepository from '../../Data/repository/EventMessagesRepository';
+import { NotificationTypes } from '../entity/NotificationTypes';
+
+export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
+  private connectionRepository: ConnectionRepository;
+
+  private dialogRepository: DialogsRepository;
+
+  private eventMessagesRepository: EventMessagesRepository;
+
+  private callBackExecute: CallBackFunction<boolean> | undefined;
+
+  private timer1Id: NodeJS.Timer | undefined;
+
+  private timer2Id: NodeJS.Timer | undefined;
+
+  private timerId: NodeJS.Timer | undefined;
+
+  constructor(
+    dialogRepository: DialogsRepository,
+    connectionRepository: ConnectionRepository,
+    eventMessagesRepository: EventMessagesRepository,
+  ) {
+    super();
+    console.log('CONSTRUCTOR SyncDialogsUseCaseWithMock');
+    this.callBackExecute = undefined;
+
+    this.dialogRepository = dialogRepository;
+    this.connectionRepository = connectionRepository;
+    this.eventMessagesRepository = eventMessagesRepository;
+  }
+
+  // todo: SyncDialogUseCaseWithMock
+  // создаем подписку на переменную в LocalDataSource
+  // SyncDialogUseCase слушает ее и при возникновении - передает дальше
+  // избавиться от таймера мы сможем когда введем EventRepository котор слушаеточередь сообщений
+  // или подписка на ремоте датасурсе
+  execute(callBack: CallBackFunction<boolean>): Promise<boolean> {
+    console.log('EXECUTE in SyncDialogUseCaseWithMock', callBack);
+    // todo uncomment
+    this.syncDialogs().catch();
+    this.callBackExecute = callBack;
+    if (
+      this.callBackExecute !== undefined &&
+      typeof this.callBackExecute === 'function'
+    ) {
+      console.log('call SUBSCRIBE in SyncDialogsUseCaseWithMock');
+      this.subscribe(this.callBackExecute);
+    }
+
+    // if (this.timer1Id === undefined) {
+    //   this.timer1Id = setInterval(() => {
+    //     console.log(
+    //       'MOCK 1. connection lost',
+    //       'time: ',
+    //       new Date().toTimeString(),
+    //     );
+    //     this.connectionRepository.changeConnectionStatus(false);
+    //     this.setSyncInProgress();
+    //     this.informSubscribers(true);
+    //   }, 5000);
+    // }
+    //
+    // if (this.timer2Id === undefined) {
+    //   this.timer2Id = setInterval(() => {
+    //     console.log(
+    //       'MOCK 1. connection restore',
+    //       'time: ',
+    //       new Date().toTimeString(),
+    //     );
+    //     this.connectionRepository.changeConnectionStatus(true);
+    //     this.setSyncInProgress();
+    //     this.informSubscribers(true);
+    //   }, 10000);
+    // }
+    //
+    // add new item every 15 sec - not implemented
+    // if (this.timerId === undefined) {
+    //   setTimeout(() => {
+    //     console.log('MOCK 3. start update');
+    //     if (this.timerId === undefined) {
+    //       this.timerId = setInterval(() => {
+    //         console.log('MOCK 3. timer tick');
+    //         console.log('time: ', new Date().toTimeString());
+    //         //
+    //         this.dialogRepository.setLocalSynced(false);
+    //         const newItem: DialogEntity =
+    //           Stubs.createDialogEntityByTypeWithDefaultValues(
+    //             DialogType.public,
+    //           );
+    //
+    //         newItem.id = new Date().getTime().toString();
+    //         newItem.name = `Mock dialog ${new Date().toLocaleTimeString()}`;
+    //         newItem.lastMessage = {
+    //           dateSent: `${new Date().toLocaleTimeString()}`,
+    //           text: `Hello world! ${new Date().toLocaleTimeString()}`,
+    //           userId: 0,
+    //         };
+    //         newItem.updatedAt = `${new Date().toLocaleTimeString()}`;
+    //         this.dialogRepository
+    //           .saveDialogToLocal(newItem)
+    //           // eslint-disable-next-line promise/always-return
+    //           .then((result) => {
+    //             this.informSubscribers(result);
+    //             this.dialogRepository.setLocalSynced(true);
+    //           })
+    //           .catch((error) => {
+    //             console.log(error);
+    //           });
+    //       }, 15000);
+    //     }
+    //   }, 30000);
+    // }
+
+    return Promise.resolve(true);
+  }
+
+  private async syncDialogs(): Promise<void> {
+    console.log('call syncDialogs()  in SyncDialogsUseCaseWithMock');
+    // todo: cause of recycle v1
+    // this.connectionRepository.keepALiveChatConnection();
+    if (this.connectionRepository.isChatConnected()) {
+      await this.syncDialogsActions();
+    }
+    this.connectionRepository.subscribe(() => {
+      console.log('HAVE CHANGED CONNECTION');
+      if (this.connectionRepository.isChatConnected()) {
+        console.log('CONNECTED');
+        this.syncDialogsActions().catch((e) => {
+          console.log(
+            'HAVE EXCEPTION IN syncDialogsActions',
+            stringifyError(e),
+          );
+        });
+      } else {
+        console.log('HAVE NO CONNECTION');
+      }
+    });
+    this.eventMessagesRepository.subscribeOnSystemMessaging(
+      NotificationTypes.NEW_DIALOG,
+      () => {
+        console.log('call subscribeOnSystemMessaging in  syncDialogs Mock');
+        if (this.connectionRepository.isChatConnected()) {
+          console.log('NotificationTypes.NEW_DIALOG: GET UPDATED DIALOG LIST');
+          this.syncDialogsActions().catch((e) => {
+            console.log(
+              'HAVE EXCEPTION IN syncDialogsActions',
+              stringifyError(e),
+            );
+          });
+        } else {
+          console.log('GET UPDATED DIALOG LOST: HAVE NO CONNECTION');
+        }
+      },
+    );
+    this.eventMessagesRepository.subscribeOnSystemMessaging(
+      NotificationTypes.DELETE_LEAVE_DIALOG,
+      () => {
+        console.log('call subscribeOnSystemMessaging in  syncDialogs Mock');
+        if (this.connectionRepository.isChatConnected()) {
+          console.log('NotificationTypes.NEW_DIALOG: GET UPDATED DIALOG LIST');
+          this.syncDialogsActions().catch((e) => {
+            console.log(
+              'HAVE EXCEPTION IN syncDialogsActions',
+              stringifyError(e),
+            );
+          });
+        } else {
+          console.log('GET UPDATED DIALOG LOST: HAVE NO CONNECTION');
+        }
+      },
+    );
+    this.eventMessagesRepository.subscribeOnSystemMessaging(
+      NotificationTypes.UPDATE_DIALOG,
+      () => {
+        console.log('call subscribeOnSystemMessaging in  syncDialogs Mock');
+        if (this.connectionRepository.isChatConnected()) {
+          console.log('NotificationTypes.NEW_DIALOG: GET UPDATED DIALOG LIST');
+          this.syncDialogsActions().catch((e) => {
+            console.log(
+              'HAVE EXCEPTION IN syncDialogsActions',
+              stringifyError(e),
+            );
+          });
+        } else {
+          console.log('GET UPDATED DIALOG LOST: HAVE NO CONNECTION');
+        }
+      },
+    );
+  }
+
+  private async syncDialogsActions(): Promise<void> {
+    const remoteDialogs = await this.dialogRepository.getDialogsFromRemote();
+
+    await this.setSyncInProgressAndClearLocal();
+    for (let i = 0; i < remoteDialogs.ResultData.length; i += 1) {
+      const dialog = remoteDialogs.ResultData[i];
+
+      // eslint-disable-next-line no-await-in-loop
+      await this.dialogRepository.saveDialogToLocal(dialog);
+    }
+    this.setSyncInCompleted();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  private async setSyncInProgressAndClearLocal() {
+    this.setSyncInProgress();
+    // todo delete comment
+    // await this.deleteAllDialogsInLocal();
+  }
+
+  private async deleteAllDialogsInLocal() {
+    const dialogs = await this.dialogRepository.getDialogsFromLocal();
+
+    for (let i = 0; i < dialogs.length; i += 1) {
+      const item = dialogs[i];
+
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        await this.dialogRepository.deleteDialogFromLocal(item.id);
+      } catch {
+        console.log('have deleting problem with ', JSON.stringify(item));
+      }
+    }
+  }
+
+  private setSyncInProgress(): void {
+    this.dialogRepository.setLocalSynced(false);
+  }
+
+  private setSyncInCompleted(): void {
+    this.dialogRepository.setLocalSynced(true);
+  }
+
+  override release() {
+    super.release();
+    if (this.timerId) {
+      clearTimeout(this.timerId);
+    }
+  }
+}

package/src/Domain/use_cases/UpdateDialogUseCase.ts

@@ -0,0 +1,65 @@
+import { DialogEntity } from '../entity/DialogEntity';
+import DialogsRepository from '../../Data/repository/DialogsRepository';
+import { IUseCase } from './base/IUseCase';
+import { GroupDialogEntity } from '../entity/GroupDialogEntity';
+import { RemoteMessageDTO } from '../../Data/dto/message/RemoteMessageDTO';
+import { NotificationTypes } from '../entity/NotificationTypes';
+import EventMessagesRepository from '../../Data/repository/EventMessagesRepository';
+import EventMessageType from '../entity/EventMessageType';
+
+export class UpdateDialogUseCase implements IUseCase<void, DialogEntity> {
+  private dialogRepository: DialogsRepository;
+
+  private eventMessagesRepository: EventMessagesRepository;
+
+  private updateDialog: GroupDialogEntity;
+
+  constructor(
+    eventMessagesRepository: EventMessagesRepository,
+    dialogRepository: DialogsRepository,
+    updateDialog: GroupDialogEntity,
+  ) {
+    console.log('CONSTRUCTOR UpdateDialogUseCase');
+    this.dialogRepository = dialogRepository;
+    this.updateDialog = updateDialog;
+    this.eventMessagesRepository = eventMessagesRepository;
+  }
+
+  async execute(): Promise<DialogEntity> {
+    console.log('execute UpdateDialogUseCase');
+    const result: DialogEntity =
+      await this.dialogRepository.updateDialogInRemote(this.updateDialog);
+
+    await this.dialogRepository.updateDialogInLocal(result);
+
+    const remoteMessageDTO: RemoteMessageDTO = new RemoteMessageDTO();
+
+    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}`;
+
+    this.eventMessagesRepository.dispatchEvent<RemoteMessageDTO>(
+      EventMessageType.RegularMessage,
+      remoteMessageDTO,
+      [],
+    );
+
+    remoteMessageDTO.dialogId = result.id;
+    remoteMessageDTO.notification_type = NotificationTypes.UPDATE_DIALOG;
+
+    this.eventMessagesRepository.dispatchEvent<RemoteMessageDTO>(
+      EventMessageType.SystemMessage,
+      remoteMessageDTO,
+      [...this.updateDialog.participantIds],
+    );
+
+    this.eventMessagesRepository.dispatchEvent<DialogEntity>(
+      EventMessageType.LocalMessage,
+      result,
+      [],
+    );
+
+    return Promise.resolve(result);
+  }
+}

package/src/Domain/use_cases/UploadFileUseCase.ts

@@ -0,0 +1,24 @@
+import { IUseCase } from './base/IUseCase';
+import { FileRepository } from '../../Data/repository/FileRepository';
+import { FileEntity } from '../entity/FileEntity';
+
+export class UploadFileUseCase implements IUseCase<void, FileEntity> {
+  private fileRepository: FileRepository;
+
+  private fileEntity: FileEntity;
+
+  constructor(fileRepository: FileRepository, fileEntity: FileEntity) {
+    console.log('CONSTRUCTOR UploadFileUseCase');
+    this.fileRepository = fileRepository;
+    this.fileEntity = fileEntity;
+  }
+
+  async execute(): Promise<FileEntity> {
+    console.log('execute UploadFileUseCase');
+    const result: FileEntity = await this.fileRepository.saveFileInRemote(
+      this.fileEntity,
+    );
+
+    return Promise.resolve(result);
+  }
+}

package/src/Domain/use_cases/UserTypingMessageUseCase.ts

@@ -0,0 +1,51 @@
+import { IUseCase } from './base/IUseCase';
+import MessagesRepository from '../../Data/repository/MessagesRepository';
+import { DialogEntity } from '../entity/DialogEntity';
+
+export class UserTypingMessageUseCase implements IUseCase<void, void> {
+  private messagesRepository: MessagesRepository;
+
+  private readonly senderId: number;
+
+  private readonly dialog: DialogEntity;
+
+  private typingTimeout = 3;
+
+  private _typingTimer: NodeJS.Timer | undefined;
+
+  private _typingTime = 0;
+
+  constructor(
+    messagesRepository: MessagesRepository,
+    dialog: DialogEntity,
+    senderId: number,
+  ) {
+    console.log('CONSTRUCTOR SendUserIsTypingMessageUseCase');
+    this.messagesRepository = messagesRepository;
+    this.dialog = dialog;
+    this.senderId = senderId;
+  }
+
+  async execute(): Promise<void> {
+    console.log('execute SendUserIsTypingMessageUseCase');
+    // todo: add work with timer
+    this._typingTime = Date.now();
+    if (!this._typingTimer) {
+      await this.messagesRepository.typingMessageStart(
+        this.dialog,
+        this.senderId,
+      );
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      this._typingTimer = setInterval(() => {
+        if ((Date.now() - this._typingTime) / 1000 >= this.typingTimeout) {
+          this.messagesRepository.typingMessageStop(this.dialog, this.senderId);
+          clearInterval(this._typingTimer);
+          this._typingTimer = undefined;
+          this._typingTime = 0;
+        }
+      }, 500);
+    }
+
+    return Promise.resolve();
+  }
+}

package/src/Domain/use_cases/base/BaseUseCase.ts

@@ -0,0 +1,77 @@
+import { CallBackFunction, IUseCase } from './IUseCase';
+import { SubscriptionPerformer } from './Subscribable/SubscriptionPerformer';
+
+export abstract class BaseUseCase<TArg, TResult>
+  extends SubscriptionPerformer<TArg>
+  implements IUseCase<TArg, TResult>
+{
+  abstract execute(args: CallBackFunction<TArg>): Promise<TResult>;
+
+  // abstract subscribe(args: CallBackFunction): void;
+
+  // public release(): void {
+  //   this.onEventByTypeSubscribers.slice();
+  // }
+
+  // protected informSubscribers(arg?: TArg): void {
+  //   this.onEventByTypeSubscribers.forEach((subscriber) => {
+  //     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  //     subscriber(arg);
+  //   });
+  // }
+  //
+  // protected addSubscriber(subscriber: CallBackFunction): void {
+  //   this.onEventByTypeSubscribers.push(subscriber);
+  // }
+
+  // protected abstract dispatch(eventName: string): void;
+
+  // public subject: BehaviorSubject<TArg> = new BehaviorSubject(null as TArg);
+  //
+  //
+  // private readonly onEventByTypeSubscribers: Array<CallBackFunction>;
+
+  // protected constructor() {
+  //   this.onEventByTypeSubscribers = [];
+  // }
+
+  // protected dispatch(arg?: TArg): void {
+  //   const subscriber = this.onEventByTypeSubscribers[event];
+  //
+  //   if (subscriber === undefined) {
+  //     return;
+  //   }
+  //
+  //   Object.keys(subscriber).forEach((key) => {
+  //     console.log(`dispatch called for key:${key} `);
+  //     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  //     subscriber[key](arg);
+  //   });
+  // }
+  //
+  // public register(event: string, callback: CallBackFunction): Registry {
+  //   const id = this.getNextId();
+  //
+  //   if (!this.onEventByTypeSubscribers[event]) this.onEventByTypeSubscribers[event] = {};
+  //
+  //   this.onEventByTypeSubscribers[event][id] = callback;
+  //
+  //   return {
+  //     unregister: () => {
+  //       delete this.onEventByTypeSubscribers[event][id];
+  //       if (Object.keys(this.onEventByTypeSubscribers[event]).length === 0)
+  //         delete this.onEventByTypeSubscribers[event];
+  //     },
+  //   };
+  // }
+  //
+  // // eslint-disable-next-line class-methods-use-this
+  // private getNextId(): number {
+  //   // eslint-disable-next-line no-return-assign
+  //   //  return (BaseUseCase.nextId += 1);
+  //   return BaseUseCase.nextId;
+  // }
+
+  //
+  //
+}

package/src/Domain/use_cases/base/IUseCase.ts

@@ -0,0 +1,5 @@
+export type CallBackFunction<TArg> = (arg: TArg) => void;
+export type CallBackFunctionWithPromise<TArg> = (arg: TArg) => Promise<void>;
+export interface IUseCase<TArg, TResult> {
+  execute(callBack: CallBackFunction<TArg> | undefined): Promise<TResult>;
+}

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

@@ -0,0 +1,6 @@
+import { CallBackFunction } from '../IUseCase';
+
+export interface ISubscribable<TArg> {
+  subscribe(args: CallBackFunction<TArg>, event: string): void;
+  release(): void;
+}

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

@@ -0,0 +1,143 @@
+import { CallBackFunction } from '../IUseCase';
+import { ISubscribable } from './ISubscribable';
+import EventMessageType from '../../../entity/EventMessageType';
+
+export interface Registry {
+  unregister: () => void;
+}
+
+export interface Callable<TArg> {
+  [key: string]: CallBackFunction<TArg>;
+}
+
+export interface EventSubscriber<TArg> {
+  [key: string]: Callable<TArg>;
+}
+
+// SubscriptionPerformer<TArg>
+/*
+release
+subscribe
+informSubscribers
+ */
+type DictionaryType<T> = Dictionary<CallBackFunction<T>>;
+export class SubscriptionPerformer<TArg> implements ISubscribable<TArg> {
+  protected readonly onEventByTypeSubscribers: Dictionary<
+    DictionaryType<TArg>
+  > = {};
+
+  public static readonly DEFAULT_SUBSCRIPTION_NAME = 'DEFAULT';
+
+  protected readonly subscribers: DictionaryType<TArg> = {};
+
+  protected EVENT_NAME: string =
+    SubscriptionPerformer.DEFAULT_SUBSCRIPTION_NAME;
+
+  protected EVENT_TYPE: string = EventMessageType.LocalMessage;
+
+  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];
+    });
+    // Object.entries(this.onEventByTypeSubscribers).map((x) => {
+    //   const eventName = x[0];
+    //
+    //   return this.onEventByTypeSubscribers[eventName].slice();
+    // });
+  }
+
+  constructor() {
+    console.log('CONSTRUCTOR SubscriptionPerformer');
+    // this.onEventByTypeSubscribers[EventMessageType.LocalMessage] = [];
+    this.onEventByTypeSubscribers[EventMessageType.LocalMessage] =
+      this.subscribers;
+  }
+
+  subscribe(
+    callBack: CallBackFunction<TArg>,
+    typeEvent: string = this.EVENT_TYPE,
+    nameEvent: string = this.EVENT_NAME,
+  ): void {
+    console.log(
+      `have subscribe SubscriptionPerformer from event ${typeEvent}: `,
+      callBack,
+    );
+    if (this.onEventByTypeSubscribers[typeEvent] === undefined) {
+      this.onEventByTypeSubscribers[typeEvent] = {};
+    }
+    this.onEventByTypeSubscribers[typeEvent][nameEvent] = callBack;
+
+    // if (!this.onEventByTypeSubscribers[typeEvent]) {
+    //   this.onEventByTypeSubscribers[typeEvent] = [];
+    // }
+    // const alreadyHave = this.onEventByTypeSubscribers[typeEvent].includes(callBack);
+    //
+    // if (!alreadyHave) {
+    //   this.onEventByTypeSubscribers[typeEvent].push(callBack);
+    // } else {
+    //   console.log('ALREADY HAVE CALLBACK');
+    // }
+  }
+
+  public informSubscribers(
+    arg: TArg,
+    eventType: string = this.EVENT_TYPE,
+    event: string = SubscriptionPerformer.DEFAULT_SUBSCRIPTION_NAME,
+  ): void {
+    const haveSubscriptionsForType = this.onEventByTypeSubscribers[eventType];
+    const haveSubscriptionName =
+      event !== SubscriptionPerformer.DEFAULT_SUBSCRIPTION_NAME;
+    const haveSubscribers =
+      this.onEventByTypeSubscribers[eventType][event] !== undefined;
+    const haveValidType =
+      typeof this.onEventByTypeSubscribers[eventType][event] === 'function';
+
+    if (haveSubscriptionsForType) {
+      if (haveSubscriptionName && haveSubscribers && haveValidType) {
+        if (arg) {
+          this.onEventByTypeSubscribers[eventType][event](arg);
+        }
+      } else {
+        Object.entries(this.onEventByTypeSubscribers[eventType]).forEach(
+          (value) => {
+            if (arg) {
+              const currentEventName = value[0];
+
+              console.log('call for event: ', currentEventName);
+              value[1](arg);
+            }
+          },
+        );
+      }
+    }
+
+    // if (this.onEventByTypeSubscribers[eventType]) {
+    //   if (
+    //     event !== SubscriptionPerformer.DEFAULT_SUBSCRIPTION_NAME &&
+    //     this.onEventByTypeSubscribers[eventType][event] &&
+    //     typeof this.onEventByTypeSubscribers[eventType][event] === 'function'
+    //   ) {
+    //     if (arg) {
+    //       this.onEventByTypeSubscribers[eventType][event](arg);
+    //     }
+    //   } else {
+    //     Object.entries(this.onEventByTypeSubscribers[eventType]).forEach(
+    //       (value) => {
+    //         if (arg) {
+    //           const currentEventName = value[0];
+    //
+    //           console.log('call for event: ', currentEventName);
+    //           value[1](arg);
+    //         }
+    //       },
+    //     );
+    //   }
+    // }
+  }
+}

package/src/MyButton/MyButton.scss

@@ -0,0 +1,11 @@
+.my-button {
+    padding: 10px 5px;
+    color: black;
+    border: 1px solid black;
+    background: transparent;
+}
+
+.big-btn {
+    font-size: 30px;
+    padding: 20px;
+}

package/src/MyButton/MyButton.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from "react";
+import './MyButton.scss';
+
+export interface MyButtonProps {
+    children?: React.ReactNode
+    color: string;
+    big: boolean;
+}
+const MyButton: FC<MyButtonProps> = ({
+                                         children,
+                                         color,
+                                         big,
+                                         ...props}) => {
+    const rootClasses = ['my-button'];
+    if (big) {
+        rootClasses.push('big-btn')
+    }
+    return(
+        <button {...props} className={rootClasses.join(' ')} style={{color}}>
+            {children}
+        </button>
+    );
+};
+
+export default MyButton;

package/src/MyInput/MyInput.scss

@@ -0,0 +1,9 @@
+.my-input {
+    padding: 10px 5px;
+    border: 10px solid cornflowerblue;
+}
+
+.big-input {
+    font-size: 30px;
+    padding: 20px;
+}