quickblox-react-ui-kit 0.1.1 → 0.1.2

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

@@ -1,187 +0,0 @@
-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}
-          idOwnerDialog={remoteDataSourceMock.authInformation!.userId.toString()}
-        />
-      )}
-    </div>
-  );
-};
-
-export default CreateNewDialogFlow;

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

@@ -1,23 +0,0 @@
-import BaseViewModel, {
-  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
-  createDialog: FunctionTypeDialogEntityToDialogEntity;
-  updateDialog: FunctionTypeDialogEntityToDialogEntity;
-  deleteDialog: FunctionTypeDialogEntityToBoolean;
-  uploadFile: FunctionTypeFileToFileEntity;
-  removeMembers: FunctionTypeDialogEntityToBoolean;
-}

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

@@ -1,66 +0,0 @@
-.scroll-box{
-  max-height: 736px !important;
-  overflow: auto;
-  &::-webkit-scrollbar {
-    width: 0px;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: transparent;
-  }
-
-  &.scroll-box.border {
-    padding-bottom: 12px;
-    margin-bottom: 23px;
-    border-bottom: 2px solid rgba($color: #2c80e2, $alpha: 0.08);
-  }
-}
-.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;
-  }
-}

package/src/Presentation/Views/Dialogs/Dialogs.tsx

@@ -1,375 +0,0 @@
-import React, { useEffect } from 'react';
-import './Dialogs.scss';
-import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
-import { DialogType } from '../../../Domain/entity/DialogTypes';
-import BaseViewModel, {
-  FunctionTypeViewModelToVoid,
-} from '../Base/BaseViewModel';
-import PreviewDialogViewModel from '../../components/UI/Dialogs/PreviewDialog/PreviewDialogViewModel';
-import PreviewDialog, {
-  ThemeNames,
-} from '../../components/UI/Dialogs/PreviewDialog/PreviewDialog';
-import LoaderComponent from '../../components/UI/Placeholders/LoaderComponent/LoaderComponent';
-import ErrorComponent from '../../components/UI/Placeholders/ErrorComponent/ErrorComponent';
-import HeaderDialogs from '../../components/UI/Dialogs/HeaderDialogs/HeaderDialogs';
-import { ModalContext } from '../../components/providers/ModalContextProvider/Modal';
-import { DialogsViewModel } from './DialogViewModel';
-import { DialogEntity } from '../../../Domain/entity/DialogEntity';
-import CreateNewDialogFlow from '../CreateDialogFlow/CreateNewDialogFlow';
-import { getTimeShort24hFormat } from '../../../utils/DateTimeFormatter';
-import { IconTheme } from '../../components/UI/svgs/Icons/IconsCommonTypes';
-import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
-import Search from '../../components/UI/svgs/Icons/Navigation/Search';
-import Remove from '../../components/UI/svgs/Icons/Actions/Remove';
-import UiKitTheme from '../../assets/UiKitTheme';
-
-type DialogsComponentSettings = {
-  themeName?: ThemeNames;
-  withoutHeader?: boolean;
-  useSubHeader?: boolean;
-  themeHeader?: UiKitTheme;
-  themePreview?: UiKitTheme;
-};
-
-type DialogsProps = {
-  header?: React.ReactNode;
-  subHeaderContent?: React.ReactNode;
-  itemSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
-  dialogsViewModel: DialogsViewModel;
-  additionalSettings?: DialogsComponentSettings;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const DialogsComponent: React.FC<DialogsProps> = ({
-  header,
-  subHeaderContent,
-  itemSelectHandler,
-  dialogsViewModel,
-  additionalSettings = undefined,
-}: DialogsProps) => {
-  const dialogs: PreviewDialogViewModel[] = [];
-  const [dialogsToView, setDialogsToView] = React.useState<
-    PreviewDialogViewModel[]
-  >([]);
-
-  const [selectedItem, setSelectedItem] = React.useState<{
-    selectedIndex: number | undefined;
-    item: BaseViewModel<DialogEntity> | undefined;
-  }>({ selectedIndex: undefined, item: undefined });
-
-  const [showSearchDialogs, setShowSearchDialogs] = React.useState(false);
-  const [nameDialogForSearch, setNameDialogForSearch] = React.useState('');
-
-  useEffect(() => {
-    console.log('USE EFFECT DIALOG LIST HAS CHANGED');
-    console.log(JSON.stringify(dialogsViewModel?.dialogs));
-    dialogs.slice(0);
-
-    dialogsViewModel?.dialogs.forEach((entiy, index) => {
-      const pw: PreviewDialogViewModel = new PreviewDialogViewModel(
-        (it) => {
-          if (itemSelectHandler) {
-            setSelectedItem({ selectedIndex: index, item: it });
-            itemSelectHandler(it);
-          }
-        },
-        (it) => {
-          if (itemSelectHandler) {
-            setSelectedItem({ selectedIndex: index, item: it });
-            itemSelectHandler(it);
-          }
-        },
-        // Number(entiy.id),
-        // entiy.name,
-        entiy,
-      );
-
-      if (selectedItem && selectedItem.selectedIndex === index) {
-        pw.isSelected = true;
-      }
-      dialogs.push(pw);
-    });
-
-    setDialogsToView(dialogs);
-  }, [dialogsViewModel?.dialogs]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const fetchMoreData = () => {
-    console.log(
-      'call fetchMoreData with: pagination: ',
-      JSON.stringify(dialogsViewModel?.pagination),
-      'View length: ',
-      dialogsToView.length,
-      'Model length: ',
-      dialogsViewModel?.dialogs.length,
-    );
-    if (
-      dialogsViewModel?.dialogs.length === dialogsToView.length &&
-      dialogsViewModel?.pagination?.hasNextPage()
-    ) {
-      // setDialogsToView((prevState) => {
-      //   const newState = [...prevState];
-      //
-      //   const newDialogEntity: DialogEntity =
-      //     dialogsViewModel?.dialogs[prevState.length];
-      //
-      //   newState.push(newDialogEntity);
-      //
-      //   return newState;
-      // });
-      const newPagination = dialogsViewModel?.pagination;
-
-      newPagination.perPage = 6;
-      newPagination.nextPage(); // curPage + 1
-
-      console.log(
-        'call fetchMoreData with: pagination: ',
-        JSON.stringify(newPagination),
-        'View length: ',
-        dialogsToView.length,
-        'Model length: ',
-        dialogsViewModel?.dialogs.length,
-      );
-      // eslint-disable-next-line @typescript-eslint/await-thenable
-      dialogsViewModel?.getDialogs(newPagination);
-    }
-  };
-
-  // useEffect(() => {
-  //   const firstPagination = new Pagination(1, 1000);
-  //
-  //   console.log(
-  //     'useEffect DialogsComponent, getDialogs(): ',
-  //     JSON.stringify(firstPagination),
-  //   );
-  //   dialogsViewModel?.getDialogs(firstPagination);
-  // }, []);
-
-  const { handleModal } = React.useContext(ModalContext);
-  const useHeader = !additionalSettings?.withoutHeader || header || false;
-  const useSubContent =
-    additionalSettings?.useSubHeader || subHeaderContent || false;
-  const usingHeader = header || (
-    <HeaderDialogs
-      title="Dialogs"
-      clickSearchHandler={() => {
-        setShowSearchDialogs(!showSearchDialogs);
-        setNameDialogForSearch('');
-      }}
-      ClickActionHandler={() => {
-        handleModal(
-          true,
-          <CreateNewDialogFlow dialogsViewModel={dialogsViewModel} />,
-          'New dialog',
-          false,
-          false,
-          {
-            minHeight: '200px',
-            minWidth: '380px',
-            maxWidth: '380px',
-            backgroundColor: 'var(--main-background)',
-            // border: '3px solid red',
-          },
-        );
-      }}
-    />
-  );
-
-  const renderPreviewDialog = (item: PreviewDialogViewModel, index: number) => {
-    function getMessageDateTimeSent() {
-      let dateInt = 0;
-      let formattedValue = '';
-
-      if (item.entity.lastMessage.dateSent) {
-        dateInt = parseInt(item.entity.lastMessage.dateSent, 10);
-        if (Number.isNaN(dateInt)) {
-          return formattedValue;
-        }
-        formattedValue = getTimeShort24hFormat(dateInt);
-      }
-
-      return formattedValue;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function isMute(entity: DialogEntity) {
-      return false;
-    }
-
-    const getDialogAvatar = (
-      currentDialog: PreviewDialogViewModel,
-    ): JSX.Element | undefined => {
-      let AvatarComponent: JSX.Element | undefined;
-
-      if (
-        currentDialog.entity.type === DialogType.group ||
-        currentDialog.entity.type === DialogType.public
-      ) {
-        const imagePhoto = (currentDialog.entity as GroupDialogEntity).photo;
-
-        console.log('Dialogs: avatar: ', imagePhoto || 'NO FOTO');
-        AvatarComponent = imagePhoto ? (
-          <img
-            style={{ width: '55px', height: '55px', borderRadius: '50%' }}
-            src={imagePhoto}
-          />
-        ) : undefined;
-      }
-
-      return AvatarComponent;
-    };
-
-    return (
-      <div
-        key={index}
-        onClick={() => {
-          setDialogsToView((prevState) => {
-            const newState = [...prevState];
-
-            if (selectedItem && selectedItem.selectedIndex) {
-              newState[selectedItem.selectedIndex].isSelected = false;
-            }
-            newState[index].isSelected = true;
-
-            return newState;
-          });
-        }}
-      >
-        <PreviewDialog
-          typeDialog={item?.entity?.type || DialogType.group}
-          dialogViewModel={item}
-          theme={{
-            themeName:
-              additionalSettings?.themeName === 'dark' ? 'dark' : 'light',
-            selected: item.isSelected,
-            muted: isMute(item.entity),
-          }}
-          title={`${item.entity.name || ''}`}
-          unreadMessageCount={
-            item.entity.unreadMessageCount > 0
-              ? item.entity.unreadMessageCount
-              : undefined
-          }
-          message_date_time_sent={getMessageDateTimeSent()}
-          previewMessage={item.entity.lastMessage.text}
-          dialogAvatar={getDialogAvatar(item)}
-        />
-      </div>
-    );
-  };
-
-  const loaderTheme: IconTheme = {
-    color: 'var(--divider)',
-    width: '42',
-    height: '42',
-  };
-
-  const renderSearchDialogs = () => {
-    return (
-      <div className="search-dialog-name-input">
-        <Search
-          applyZoom
-          width="24"
-          height="24"
-          color="var(--tertiary-elements)"
-        />
-        <input
-          type="text"
-          style={{ width: '268px' }}
-          value={nameDialogForSearch}
-          onChange={(event) => {
-            setNameDialogForSearch(event.target.value);
-          }}
-          placeholder="Search"
-        />
-        {nameDialogForSearch.length > 0 ? (
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              setNameDialogForSearch('');
-            }}
-          >
-            <Remove width="24" height="24" color="var(--tertiary-elements)" />
-          </div>
-        ) : null}
-      </div>
-    );
-  };
-
-  return (
-    <div
-      style={{
-        minHeight: '800px',
-        minWidth: '322px',
-        border: '1px solid var(--divider)',
-      }}
-    >
-      <ColumnContainer>
-        {useHeader && usingHeader}
-        {/* {showSearchDialogs ? renderSearchDialogs() : null} */}
-        {useSubContent && subHeaderContent}
-        {dialogsViewModel?.loading && (
-          // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>
-          //   <LoaderComponent width="44" height="44" color="var(--divider)" />
-          // </div>
-          <LoaderComponent
-            width={loaderTheme.width}
-            height={loaderTheme.height}
-            color={loaderTheme.color}
-          />
-        )}
-        {dialogsViewModel?.error && (
-          <ErrorComponent
-            title="Something is wrong."
-            ClickActionHandler={() => {
-              alert('call click retry');
-            }}
-          />
-        )}
-        {/* <div className="scroll-box"> */}
-        <div className="scroll-box">
-          {showSearchDialogs ? renderSearchDialogs() : null}
-          {nameDialogForSearch.length > 0 &&
-            dialogsToView
-              .filter((item) =>
-                item.entity.name.includes(nameDialogForSearch, 0),
-              )
-              .map((item, index) => renderPreviewDialog(item, index))}
-          {nameDialogForSearch.length === 0 &&
-            (dialogsToView && dialogsToView.length) > 0 &&
-            dialogsToView.map((item, index) =>
-              renderPreviewDialog(item, index),
-            )}
-
-          {/* /!* eslint-disable-next-line no-nested-ternary *!/ */}
-          {/* {nameDialogForSearch.length > 0 ? ( */}
-          {/*  dialogsToView */}
-          {/*    .filter((item) => */}
-          {/*      item.entity.name.includes(nameDialogForSearch, 0), */}
-          {/*    ) */}
-          {/*    .map((item, index) => renderPreviewDialog(item, index)) */}
-          {/* ) : (dialogsToView && dialogsToView.length) > 0 ? ( */}
-          {/*  dialogsToView.map((item, index) => renderPreviewDialog(item, index)) */}
-          {/* ) : ( */}
-          {/*  <div>Create new chat</div> */}
-          {/* )} */}
-          {/* {dialogsToView && dialogsToView.length > 0 ? ( */}
-          {/*  dialogsToView.map((item, index) => renderPreviewDialog(item, index)) */}
-          {/* ) : ( */}
-          {/*  // <ScrollableContainer */}
-          {/*  //   data={dialogsToView} */}
-          {/*  //   renderItem={renderPreviewDialog} */}
-          {/*  //   onEndReached={fetchMoreData} */}
-          {/*  //   // onEndReachedThreshold={0.8} */}
-          {/*  //   refreshing={dialogsViewModel?.loading} */}
-          {/*  // /> */}
-          {/*  // */}
-          {/*  <div>Create new chat</div> */}
-          {/* )} */}
-        </div>
-      </ColumnContainer>
-    </div>
-  );
-};
-
-export default DialogsComponent;