quickblox-react-ui-kit 0.1.0

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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,128 @@
+$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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,7 @@
+.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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,133 @@
+$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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,25 @@
+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;