quickblox-react-ui-kit 0.1.6 → 0.1.7

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

@@ -0,0 +1,67 @@
+import { Pagination } from '../../../Domain/repository/Pagination';
+import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { FileEntity } from '../../../Domain/entity/FileEntity';
+
+export default class BaseViewModel<TResult> {
+  get entity(): TResult {
+    return this._entity as TResult;
+  }
+
+  set entity(value: TResult) {
+    this._entity = value;
+  }
+
+  // private _id?: number | undefined;
+  //
+  // private _name?: string | undefined;
+  //
+  // get id(): number | undefined {
+  //   return this._id;
+  // }
+  //
+  // set id(value: number | undefined) {
+  //   this._id = value;
+  // }
+  //
+  // get name(): string | undefined {
+  //   return this._name;
+  // }
+  //
+  // set name(value: string | undefined) {
+  //   this._name = value;
+  // }
+
+  protected constructor(baseEntity: TResult) {
+    // id: number, name: string,
+    // this._id = id;
+    // this._name = name;
+    this._entity = baseEntity;
+  }
+
+  private _entity?: TResult;
+}
+export type FunctionTypeViewModelToVoid<TResult> = (
+  it: BaseViewModel<TResult>,
+) => void;
+
+export type EditDialogParams = {
+  dialogTitle: string;
+  dialogAvatar: File | string | null;
+};
+
+export type FunctionTypeFileToToVoid = (file: File) => void;
+export type FunctionTypePaginationToVoid = (pagination: Pagination) => void;
+export type FunctionTypeVoidToVoid = () => void;
+export type FunctionTypeStringToVoid = (value: string) => void;
+export type FunctionTypeBooleanToVoid = (value: boolean) => void;
+export type FunctionTypeEditDialogParamsToVoid = (
+  params: EditDialogParams,
+) => void;
+export type FunctionTypeDialogEntityToDialogEntity = (
+  entity: GroupDialogEntity,
+) => Promise<DialogEntity>;
+export type FunctionTypeDialogEntityToBoolean = (
+  entity: GroupDialogEntity,
+) => Promise<boolean>;
+export type FunctionTypeFileToFileEntity = (file: File) => Promise<FileEntity>;

package/src/Presentation/Views/CreateDialogFlow/CreateNewDialogFlow.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect, useState } from 'react';
+import CreateDialog from '../../components/UI/Dialogs/CreateDialog/CreateDialog';
+import { DialogType } from '../../../Domain/entity/DialogTypes';
+import EditDialog, {
+  TypeOpenDialog,
+} from '../../components/UI/Dialogs/EditDialog/EditDialog';
+import InviteMembers from '../../components/UI/Dialogs/InviteMembers/InviteMembers';
+import { ModalContext } from '../../components/providers/ModalContextProvider/Modal';
+import { DialogsViewModel } from '../Dialogs/DialogViewModel';
+import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
+import { Stubs } from '../../../Data/Stubs';
+import { stringifyError } from '../../../utils/parse';
+import { EditDialogParams } from '../Base/BaseViewModel';
+import { FileEntity } from '../../../Domain/entity/FileEntity';
+import { qbDataContext } from '../../components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import { RemoteDataSource } from '../../../Data/source/remote/RemoteDataSource';
+
+type CreateNewDialogFlowProps = {
+  dialogsViewModel: DialogsViewModel;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
+  dialogsViewModel,
+}: CreateNewDialogFlowProps) => {
+  const { handleModal } = React.useContext(ModalContext);
+  const currentContext = React.useContext(qbDataContext);
+  const remoteDataSourceMock: RemoteDataSource =
+    currentContext.storage.REMOTE_DATA_SOURCE;
+  const setUpDialogType = 1;
+  const setDialogTitle = 2;
+  const inviteUsers = 3;
+  const [stepToCreate, setNumStepToCreate] = React.useState(setUpDialogType);
+  const [selectedDialogType, setSelectedDialogType] = useState<DialogType>();
+  const [dialogName, setDialogName] = React.useState<string>('NOT DEFINE');
+  const [uidAvatar, setUidAvatar] = React.useState<string | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (
+      // selectedDialogType === DialogType.private ||
+      selectedDialogType === DialogType.group
+    ) {
+      setNumStepToCreate(setDialogTitle);
+    } else if (selectedDialogType === DialogType.private) {
+      setNumStepToCreate(inviteUsers);
+    }
+  }, [selectedDialogType]);
+
+  const getDialogNameHandler = (params: EditDialogParams) => {
+    console.log(params.dialogTitle);
+    setDialogName(params.dialogTitle);
+
+    let newUidAvatar: string | undefined = '';
+
+    console.log('before urlPhoto: ', newUidAvatar);
+    if (params.dialogAvatar) {
+      if (params.dialogAvatar !== 'null') {
+        dialogsViewModel
+          .uploadFile(params.dialogAvatar as File)
+          // eslint-disable-next-line promise/always-return
+          .then((uploadedFile: FileEntity) => {
+            newUidAvatar = uploadedFile.uid;
+
+            console.log('after urlPhoto: ', newUidAvatar);
+            setUidAvatar(newUidAvatar);
+
+            setNumStepToCreate(inviteUsers);
+          })
+          .catch((error) => {
+            console.log(stringifyError(error));
+          });
+      } else {
+        setUidAvatar('null');
+      }
+    } else {
+      setNumStepToCreate(inviteUsers);
+    }
+  };
+
+  const getDialogParticipantsHandler = async (participants: number[]) => {
+    if (
+      selectedDialogType &&
+      (DialogType.group === selectedDialogType ||
+        (selectedDialogType === DialogType.private && participants.length > 0))
+    ) {
+      // if (
+      //   selectedDialogType === DialogType.private &&
+      //   participants.length > 0
+      // )
+      // {
+      const dialog: GroupDialogEntity =
+        Stubs.createDialogEntityByTypeWithDefaultValues(
+          selectedDialogType,
+        ) as GroupDialogEntity;
+
+      dialog.name = dialogName;
+      dialog.photo = uidAvatar || '';
+      dialog.participantIds = participants;
+      dialog.type = selectedDialogType;
+      // eslint-disable-next-line promise/always-return
+      await dialogsViewModel
+        .createDialog(dialog)
+        // eslint-disable-next-line promise/always-return
+        .then((newEntity) => {
+          handleModal(false, '', '', false, false);
+          console.log(
+            `HAVE CREATED DIALOG from param: ${JSON.stringify(
+              newEntity,
+            )} from viewmodel ${JSON.stringify(dialogsViewModel.entity)} `,
+          );
+        })
+        .catch((e) => {
+          console.log('Have exception: ', stringifyError(e));
+        });
+      // }
+    }
+  };
+
+  const closeModal = () => {
+    handleModal(false, '', '', false, false);
+  };
+
+  return (
+    <div>
+      {stepToCreate === setUpDialogType && (
+        <CreateDialog
+          createPrivateDialogClickHandler={() => {
+            setSelectedDialogType(DialogType.private);
+          }}
+          createPrivateDialogTouchHandler={() => {
+            setSelectedDialogType(DialogType.private);
+          }}
+          createGroupDialogClickHandler={() => {
+            setSelectedDialogType(DialogType.group);
+          }}
+          createGroupDialogTouchHandler={() => {
+            setSelectedDialogType(DialogType.group);
+          }}
+          createPublicDialogClickHandler={() => {
+            setSelectedDialogType(DialogType.public);
+          }}
+          createPublicDialogTouchHandler={() => {
+            setSelectedDialogType(DialogType.public);
+          }}
+        />
+      )}
+      {stepToCreate === setDialogTitle && (
+        <div
+        // style={{
+        //   minHeight: '160px',
+        //   minWidth: '380px',
+        //   maxHeight: '160px',
+        //   maxWidth: '380px',
+        //   backgroundColor: 'var(--main-background)',
+        //   border: '3px solid blue',
+        // }}
+        >
+          <EditDialog
+            nameDialog=""
+            typeDialog={selectedDialogType!}
+            typeAddEditDialog={TypeOpenDialog.create}
+            clickUpdatedHandler={getDialogNameHandler}
+            clickCancelHandler={() => {
+              closeModal();
+            }}
+          />
+        </div>
+      )}
+      {stepToCreate === inviteUsers && (
+        <InviteMembers
+          applyInviteUsersHandler={(selectedUsers) => {
+            getDialogParticipantsHandler(selectedUsers);
+          }}
+          cancelInviteMembersHandler={() => {
+            closeModal();
+          }}
+          typeDialog={selectedDialogType || DialogType.group}
+          typeAddEditDialog={TypeOpenDialog.create}
+          idOwnerDialog={remoteDataSourceMock.authInformation!.userId.toString()}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CreateNewDialogFlow;

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

@@ -0,0 +1,25 @@
+import BaseViewModel, {
+  FunctionTypeBooleanToVoid,
+  FunctionTypeDialogEntityToBoolean,
+  FunctionTypeDialogEntityToDialogEntity,
+  FunctionTypeFileToFileEntity,
+  FunctionTypePaginationToVoid,
+  FunctionTypeVoidToVoid,
+} from '../Base/BaseViewModel';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { Pagination } from '../../../Domain/repository/Pagination';
+
+export interface DialogsViewModel extends BaseViewModel<DialogEntity> {
+  loading: boolean;
+  error: string;
+  pagination?: Pagination;
+  dialogs: DialogEntity[]; // content // PublicDialogEntity
+  getDialogs: FunctionTypePaginationToVoid; // prepareContent
+  release: FunctionTypeVoidToVoid; // release Content
+  setWaitLoadingStatus: FunctionTypeBooleanToVoid; // set loading state
+  createDialog: FunctionTypeDialogEntityToDialogEntity;
+  updateDialog: FunctionTypeDialogEntityToDialogEntity;
+  deleteDialog: FunctionTypeDialogEntityToBoolean;
+  uploadFile: FunctionTypeFileToFileEntity;
+  removeMembers: FunctionTypeDialogEntityToBoolean;
+}

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

@@ -0,0 +1,76 @@
+.scroll-box{
+  max-height: 736px !important;
+  overflow: hidden !important;
+  scrollbar-width: none !important;
+  ///
+  //overflow-y: scroll;
+  //overflow-x: hidden;
+  &::-webkit-scrollbar {
+    width: 0px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    width: 0px;
+    background: transparent;
+  }
+
+  &.scroll-box.border {
+    padding-bottom: 12px;
+    margin-bottom: 23px;
+    border-bottom: 2px solid rgba($color: #2c80e2, $alpha: 0.08);
+  }
+}
+.scroll-box:hover{
+  overflow-y: auto !important;
+  overflow-x: hidden;
+  scrollbar-width: none !important;
+}
+.scroll-dialogs-container{
+  // border: 1px solid darkred;
+  flex: 1 1 200px;
+  width: 100%;
+  max-height: 200px;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+
+}
+.search-dialog-name-input{
+  margin: 16px;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  align-items: center;
+  text-align: center;
+  padding: 8px;
+  width: 288px;
+  height: 44px;
+
+  border: 1px solid #90979F;
+  border-radius: 4px;
+
+  background-color: var(--main-background);
+  color: var(--secondary-text);
+
+  input {
+    color: var(--secondary-text);
+    background-color: var(--main-background);
+    margin-left: 6px;
+    margin-right: 6px;
+
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.15px;
+  }
+}