quickblox-react-ui-kit 0.1.0 → 0.1.2

package/src/Presentation/components/UI/Dialogs/InviteMembers/useInviteMembersViewModel.ts

@@ -1,116 +0,0 @@
-import { useState } from 'react';
-import { InviteMembersViewModel } from './InviteMembersViewModel';
-import {
-  PaginatedResult,
-  Pagination,
-} from '../../../../../Domain/repository/Pagination';
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import { GetAllUsersUseCase } from '../../../../../Domain/use_cases/GetAllUsersUseCase';
-import UsersRepository from '../../../../../Data/repository/UsersRepository';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
-import { Stubs } from '../../../../../Data/Stubs';
-import { stringifyError } from '../../../../../utils/parse';
-import {
-  NOT_FOUND_REMOTE_DATASOURCE_EXCEPTION_CODE,
-  RemoteDataSourceException,
-} from '../../../../../Data/source/exception/RemoteDataSourceException';
-
-export default function useInviteMembersViewModel(): InviteMembersViewModel {
-  // initPagination?: Pagination,
-  console.log('create useUsersListViewModel');
-  const currentContext = useQbDataContext();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('error with getting user list');
-
-  const startPagination: Pagination = new Pagination(0, 0);
-  const [pagination, setPagination] = useState<Pagination>(startPagination);
-  const [users, setUsers] = useState<UserEntity[]>([]);
-  const [filter, setFilter] = useState<string>('');
-
-  function updateFilter(newFilter: string) {
-    setFilter(newFilter);
-    setPagination(startPagination);
-  }
-
-  async function getUsers(currentPagination: Pagination) {
-    console.log('call getUsers in useInviteMembersViewModel');
-    console.log('currentPagination: ', JSON.stringify(currentPagination));
-    console.log('pagination: ', JSON.stringify(pagination));
-
-    console.log('after return call getUsers');
-    setLoading(true);
-    const allUsersUseCase: GetAllUsersUseCase = new GetAllUsersUseCase(
-      new UsersRepository(
-        currentContext.storage.LOCAL_DATA_SOURCE,
-        currentContext.storage.REMOTE_DATA_SOURCE,
-      ),
-      currentPagination,
-      filter,
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    await allUsersUseCase
-      .execute()
-      // eslint-disable-next-line promise/always-return
-      .then((data: PaginatedResult<UserEntity>) => {
-        console.log('HAVE PAGINATED RESULT:', JSON.stringify(data.ResultData));
-        setError('');
-        setLoading(false);
-        setPagination(data.CurrentPagination);
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        setUsers((prevState) => {
-          const newItems =
-            currentPagination.getCurrentPage() === 0
-              ? [...data.ResultData]
-              : [...prevState, ...data.ResultData];
-
-          return newItems;
-        });
-      })
-      .catch((e) => {
-        console.log('have ERROR get all users :', JSON.stringify(e));
-        if (
-          (e as RemoteDataSourceException).code ===
-          NOT_FOUND_REMOTE_DATASOURCE_EXCEPTION_CODE
-        ) {
-          setError('');
-        } else {
-          setError(stringifyError(e));
-        }
-        setLoading(false);
-        setUsers([]);
-      });
-    console.log('EXECUTE USE CASES getUsers');
-  }
-
-  const release = () => {
-    console.log('call release in useUsersListViewModel');
-  };
-
-  return {
-    get entity(): UserEntity {
-      return Stubs.createUserEntityWithParams(
-        0,
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-      );
-    },
-    // id: Date.now(),
-    // name: '',
-    users,
-    loading,
-    error,
-    pagination,
-    filter,
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    getUsers,
-    release,
-    updateFilter,
-  };
-}

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

@@ -1,128 +0,0 @@
-$members-list-container-height: 800px;
-
-.members-container {
-  min-height: $members-list-container-height;
-  max-height: $members-list-container-height;
-  height: $members-list-container-height;
-
-  display: flex;
-  flex-direction: column;
-
-  // border: 3px solid green;
-
-  &--members-information-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 0 0 0 0;
-    height: 64px;
-    min-height: 64px;
-    max-height: 64px;
-
-    // border: 1px solid red;
-
-    &__members-information {
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 24px;
-      letter-spacing: 0.0015em;
-      height: 24px;
-      margin-left: 24px;
-      margin-top: 20px;
-      margin-bottom: 20px;
-
-      // border: 1px solid orange;
-    }
-
-    &__members-information-count{
-      height: 20px;
-      margin: 22px 130px 22px 8px;
-      align-items: center;
-      padding: 2px 6px;
-      gap: 10px;
-      background: var(--disabled-elements);
-      border-radius: 30px;
-
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 16px;
-      text-align: center;
-      letter-spacing: 0.5px;
-      color: var(--main-background);
-    }
-    &__members-close {
-      margin-top: 16px;
-      margin-right: 16px;
-      margin-bottom: 16px;
-
-      max-height: 50px;
-
-      // border: 1px solid purple;
-    }
-  }
-
-
-  &--members-search-wrapper{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 0 0 0 0;
-    height: 76px;
-    min-height: 76px;
-    max-height: 76px;
-
-    // border: 1px solid red;
-
-    &__search-member-input{
-      margin: 16px;
-      max-width: 288px;
-      width: 288px;
-      //padding-right: 6px;
-
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-
-      align-items: center;
-      text-align: center;
-      align-content: center;
-
-      width: 320px;
-      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);
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-
-        display: flex;
-        align-items: center;
-        letter-spacing: 0.15px;
-      }
-
-    }
-
-    &--members-list-wrapper{
-      //border: 3px solid firebrick;
-      display: flex;
-      max-height: 660px;
-      height: 660px;
-    }
-  }
-}

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

@@ -1,89 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './MembersList.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import ActiveSvg from '../../svgs/ActiveSvg/ActiveSvg';
-import Close from '../../svgs/Icons/Navigation/Close';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import Search from '../../svgs/Icons/Navigation/Search';
-import UsersList from '../DialogInformation/UsersList/UsersList';
-
-type MembersListProps = {
-  closeInformationHandler: FunctionTypeVoidToVoid;
-  members: UserEntity[];
-};
-// eslint-disable-next-line react/function-component-definition
-const MembersList: React.FC<MembersListProps> = ({
-  closeInformationHandler,
-  members,
-}: MembersListProps) => {
-  const [userNameForFilter, setUserNameForFilter] = useState<string>('');
-  const [membersListFilter, setMembersListFilter] = useState<UserEntity[]>([
-    ...members,
-  ]);
-
-  useEffect(() => {
-    if (userNameForFilter.length > 0) {
-      const newFilteredMembers = members.filter((item) =>
-        item.full_name ? item.full_name.includes(userNameForFilter, 0) : false,
-      );
-
-      setMembersListFilter([...newFilteredMembers]);
-    } else {
-      setMembersListFilter([...members]);
-    }
-  }, [userNameForFilter]);
-
-  return (
-    <div className="members-container">
-      <ColumnContainer>
-        <div className="members-container--members-information-wrapper">
-          <div className="members-container--members-information-wrapper__members-information">
-            Members
-          </div>
-          <div className="members-container--members-information-wrapper__members-information-count">
-            {members.length}
-          </div>
-          <div className="members-container--members-information-wrapper__members-close">
-            <ActiveSvg
-              content={<Close applyZoom color="var(--secondary-elements)" />}
-              clickAction={() => {
-                if (closeInformationHandler) {
-                  closeInformationHandler();
-                }
-              }}
-            />
-          </div>
-        </div>
-        <div className="members-container--members-search-wrapper">
-          <div className="members-container--members-search-wrapper__search-member-input">
-            <Search
-              applyZoom
-              width="24"
-              height="24"
-              color="var(--tertiary-elements)"
-            />
-            <input
-              type="text"
-              style={{ width: '280px' }}
-              value={userNameForFilter}
-              onChange={(event) => {
-                setUserNameForFilter(event.target.value);
-              }}
-              placeholder="Search"
-            />
-          </div>
-        </div>
-        <div className="members-container--members-list-wrapper">
-          <UsersList
-            usersFirstPageToView={[...membersListFilter]}
-            allUsers={[...membersListFilter]}
-            usersInDialogCount={membersListFilter.length}
-          />
-        </div>
-      </ColumnContainer>
-    </div>
-  );
-};
-
-export default MembersList;

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

@@ -1,7 +0,0 @@
-.audio-body{
-  // border: 1px solid red;
-  // max-height: 300px;
-  // max-width: 100%;
-  padding: 0;
-  border-radius: 4px;
-}

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import './AudioAttachmentComponent.scss';
-import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
-
-type AudioAttachmentComponentProps = {
-  audioFile: FileEntity;
-};
-// eslint-disable-next-line react/function-component-definition
-const AudioAttachmentComponent: React.FC<AudioAttachmentComponentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  audioFile,
-}: AudioAttachmentComponentProps) => {
-  return (
-    <div>
-      <audio className="audio-body" controls preload="auto">
-        <source src={audioFile.url} type={audioFile?.type?.toString()} />
-        <source src={audioFile.url} type="audio/mpeg" />
-        <source src={audioFile.url} type="audio/ogg" />
-      </audio>
-      <a href={audioFile.url} download>
-        Download
-      </a>
-    </div>
-  );
-};
-
-export default AudioAttachmentComponent;

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

@@ -1,133 +0,0 @@
-$dialog-information-container-height: 64px;
-$dialog-information-container-width: 720px;
-$dialog-information-container-dialog-information-height: 64px;
-
-.message-header-container {
-  border-bottom: 1px solid var(--divider);
-  min-height: $dialog-information-container-height;
-  max-height: $dialog-information-container-height;
-  height: $dialog-information-container-height;
-
-  // todo: delete this comment
-  // min-width: $dialog-information-container-width; // !!!
-
-  display: flex;
-  flex-direction: column;
-  //align-items: center;
-  padding: 0px;
-
-  //position: absolute;
-  //width: 720px;
-  //height: 64px;
-  //left: 0px;
-  //top: 0px;
-
-  // border: 1px solid green;
-
-  &--info-wrapper{
-    min-height: $dialog-information-container-dialog-information-height;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-
-    margin: 0px;
-    //padding: 0px;
-
-    //align-items: center;
-    //gap: 16px;
-
-    // border: 1px solid orange;
-
-    &__dialog-icon{
-      flex: 1 1 40px;
-      min-height: 40px;
-      min-width: 40px;
-      max-width: 40px;
-      margin-left: 20px;
-      margin-top: 12px;
-      margin-bottom: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--disabled-elements);
-      border-radius: 50%;
-
-      // border: 1px solid red;
-    }
-
-    &__detail{
-      flex: 2 3;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 0px;
-
-
-      min-height: 40px;
-      // border: 1px solid orange;
-
-      &__dialog-name{
-        margin-top: 12px;
-        //margin-bottom: 28px;
-        margin-left: 8px;
-
-        max-width: 250px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 0.15px;
-        color: var(--main-text);
-
-        // border: 1px solid blue;
-      }
-
-      &__dialog-members{
-        margin-left: 8px;
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 11px;
-        line-height: 16px;
-        letter-spacing: 0.5px;
-        color: var(--secondary-text)
-        // border: 1px solid green;
-      }
-    }
-
-    &__detail-button{
-      flex: 1 1 80px;
-      min-width: 80px;
-      max-width: 80px;
-      display: flex;
-      flex-direction: row;
-      //justify-content: flex-end;
-      align-items: flex-end;
-      padding: 0px;
-      gap: 16px;
-
-      min-height: 32px;
-      min-width: 80px;
-      margin: 16px 16px 16px 0px;
-      // flex: 1 1 40px;
-
-      // border: 1px solid green;
-
-      &__call {
-        // border: 1px solid orange;
-      }
-
-      &__info {
-        // border: 1px solid blue;
-      }
-    }
-  }
-}

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

@@ -1,137 +0,0 @@
-import './HeaderMessages.scss';
-import React from 'react';
-import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
-import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
-import GroupChat from '../../../svgs/Icons/Contents/GroupChat';
-import Phone from '../../../svgs/Icons/Actions/Phone';
-import InformationFill from '../../../svgs/Icons/Status/InformationFill';
-import ActiveSvg from '../../../svgs/ActiveSvg/ActiveSvg';
-import { DialogType } from '../../../../../../Domain/entity/DialogTypes';
-import { GroupDialogEntity } from '../../../../../../Domain/entity/GroupDialogEntity';
-import UserAvatar from '../../EditDialog/UserAvatar/UserAvatar';
-import User from '../../../svgs/Icons/Contents/User';
-import { PublicDialogEntity } from '../../../../../../Domain/entity/PublicDialogEntity';
-import PublicChannel from '../../../svgs/Icons/Contents/PublicChannel';
-
-type HeaderMessagesProps = {
-  dialog: DialogEntity;
-  countMembers?: number;
-  InformationHandler?: FunctionTypeVoidToVoid;
-  CallHandler?: FunctionTypeVoidToVoid;
-};
-// eslint-disable-next-line react/function-component-definition
-const HeaderMessages: React.FC<HeaderMessagesProps> = ({
-  dialog,
-  countMembers = 0,
-  InformationHandler,
-  CallHandler,
-}: HeaderMessagesProps) => {
-  // TODO: check showDialogInformation, add handler for close DialogInformation
-  const [showDialogInformation, setShowDialogInformation] =
-    React.useState(false);
-
-  // eslint-disable-next-line consistent-return
-  const renderIconForTypeDialog = (dialogEntity: DialogEntity) => {
-    if (dialogEntity.type === DialogType.group) {
-      const groupDialogEntity = dialogEntity as GroupDialogEntity;
-
-      if (groupDialogEntity.photo) {
-        return (
-          <UserAvatar
-            urlAvatar={groupDialogEntity.photo}
-            iconTheme={{ width: '40px', height: '40px' }}
-          />
-        );
-      }
-
-      return (
-        <GroupChat
-          width="24"
-          height="24"
-          applyZoom
-          color="var(--secondary-text)"
-        />
-      );
-    }
-    if (dialogEntity.type === DialogType.private) {
-      return (
-        <User width="24" height="24" applyZoom color="var(--secondary-text)" />
-      );
-    }
-    if (dialogEntity.type === DialogType.public) {
-      const publicDialogEntity = dialogEntity as PublicDialogEntity;
-
-      if (publicDialogEntity.photo) {
-        return (
-          <UserAvatar
-            urlAvatar={publicDialogEntity.photo}
-            iconTheme={{ width: '40px', height: '40px' }}
-          />
-        );
-      }
-
-      return (
-        <PublicChannel
-          width="24"
-          height="24"
-          applyZoom
-          color="var(--secondary-text)"
-        />
-      );
-    }
-  };
-
-  return (
-    <div className="message-header-container">
-      <div className="message-header-container--info-wrapper">
-        <div className="message-header-container--info-wrapper__dialog-icon">
-          {renderIconForTypeDialog(dialog)}
-          {/* <GroupChat width="40" height="40" applyZoom color="#636D78" /> */}
-        </div>
-        <div className="message-header-container--info-wrapper__detail">
-          <div className="message-header-container--info-wrapper__detail__dialog-name">
-            {dialog?.name || 'Dialog name'}
-          </div>
-          <div className="message-header-container--info-wrapper__detail__dialog-members">
-            {countMembers || 0} members
-          </div>
-        </div>
-        <div className="message-header-container--info-wrapper__detail-button">
-          <div className="message-header-container--info-wrapper__detail-button__call">
-            <ActiveSvg
-              content={<Phone width="32" height="32" applyZoom />}
-              clickAction={() => {
-                if (CallHandler) CallHandler();
-              }}
-              touchAction={() => {
-                if (CallHandler) CallHandler();
-              }}
-            />
-          </div>
-          <div className="message-header-container--info-wrapper__detail-button__info">
-            <ActiveSvg
-              content={
-                <InformationFill
-                  width="32"
-                  height="32"
-                  applyZoom
-                  color="var(--secondary-background)"
-                />
-              }
-              clickAction={() => {
-                setShowDialogInformation(!showDialogInformation);
-                if (InformationHandler) InformationHandler();
-              }}
-              touchAction={() => {
-                setShowDialogInformation(!showDialogInformation);
-                if (InformationHandler) InformationHandler();
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default HeaderMessages;

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

@@ -1,11 +0,0 @@
-.image-body{
-  // border: 1px solid red;
-  max-width: 240px;
-  max-height: 160px;
-  min-width: 240px;
-  min-height: 160px;
-  width: 240px;
-  height: 160px;
-  padding: 0;
-  border-radius: 4px;
-}

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import './ImageAttachmentComponent.scss';
-import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
-
-type ImageAttachmentComponentProps = {
-  imageFile: FileEntity;
-};
-// eslint-disable-next-line react/function-component-definition
-const ImageAttachmentComponent: React.FC<ImageAttachmentComponentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  imageFile,
-}: ImageAttachmentComponentProps) => {
-  return (
-    <div>
-      <img
-        className="image-body"
-        key={imageFile.id}
-        src={imageFile.url}
-        alt={imageFile.name || 'attached image'}
-      />
-    </div>
-  );
-};
-
-export default ImageAttachmentComponent;