quickblox-react-ui-kit 0.4.2-beta.2 → 0.4.2-beta.4

package/src/Presentation/Views/DialogInfo/MembersList/MembersList.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import './MembersList.scss';
+import { FunctionTypeVoidToVoid } from '../../../../CommonTypes/BaseViewModel';
+import { UserEntity } from '../../../../Domain/entity/UserEntity';
+import UsersList from '../UsersList/UsersList';
+import Header from '../../../ui-components/Header/Header';
+import { CloseSvg, SearchSvg } from '../../../icons';
+import Badge from '../../../ui-components/Badge/Badge';
+import { TextField } from '../../../ui-components';
+
+type MembersListProps = {
+  closeInformationHandler: FunctionTypeVoidToVoid;
+  members: UserEntity[];
+  maxHeight?: number;
+};
+// eslint-disable-next-line react/function-component-definition
+const MembersList: React.FC<MembersListProps> = ({
+  closeInformationHandler,
+  members,
+  maxHeight = 0,
+}: MembersListProps) => {
+  const [userNameForFilter, setUserNameForFilter] = useState<string>('');
+  const [membersListFilter, setMembersListFilter] = useState<UserEntity[]>([
+    ...members,
+  ]);
+
+  useEffect(() => {
+    if (userNameForFilter.length >= 3) {
+      const newFilteredMembers = members.filter((item) =>
+        item.full_name
+          ? item.full_name
+              .toUpperCase()
+              .includes(userNameForFilter.toUpperCase(), 0)
+          : false,
+      );
+
+      setMembersListFilter([...newFilteredMembers]);
+    } else {
+      setMembersListFilter([...members]);
+    }
+  }, [userNameForFilter]);
+
+  return (
+    <div className="members-container">
+      <Header
+        title="Members"
+        badge={<Badge count={members.length} mute limit={9} />}
+        className="members-container-header"
+      >
+        <CloseSvg
+          onClick={closeInformationHandler}
+          className="members-container-header-icon"
+        />
+      </Header>
+      <TextField
+        placeholder="Search"
+        onChange={(value) => setUserNameForFilter(value)}
+        value={userNameForFilter}
+        icon={<SearchSvg className="members-container-text-field-icon" />}
+        className="members-container-text-field"
+      />
+      <div className="members-container-members-list-wrapper">
+        <UsersList
+          maxHeight={maxHeight}
+          usersFirstPageToView={[...membersListFilter]}
+          allUsers={[...membersListFilter]}
+          usersInDialogCount={membersListFilter.length}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MembersList;

package/src/Presentation/Views/DialogInfo/UsersList/SingleUser/SingleUser.scss

@@ -0,0 +1,66 @@
+.list-single-user,
+.list-single-user * {
+  box-sizing: border-box;
+}
+.list-single-user {
+  background: var(--light-theme-mainbackground, #ffffff);
+  padding: 8px 16px 8px 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.list-single-user-avatar {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+.list-single-user-avatar-rectangle {
+  position: absolute;
+  right: 0%;
+  left: 0%;
+  width: 100%;
+  bottom: 0%;
+  top: 0%;
+  height: 100%;
+}
+.list-single-user-avatar-ellipse {
+  background: var(--disabled-elements, #bcc1c5);
+  border-radius: 50%;
+  position: absolute;
+  right: 0%;
+  left: 0%;
+  width: 100%;
+  bottom: 0%;
+  top: 0%;
+  height: 100%;
+}
+.list-single-user-contents-user {
+  height: auto;
+  position: absolute;
+  right: 17.86%;
+  left: 17.86%;
+  width: 64.29%;
+  bottom: 17.86%;
+  top: 17.86%;
+  height: 64.29%;
+  overflow: visible;
+}
+.list-single-user-subtitle {
+  color: var(--color-font, #0b1b0f);
+  text-align: left;
+  font-family: var(--body-body-large-font-family, "Roboto-Regular", sans-serif);
+  font-size: var(--body-body-large-font-size, 16px);
+  line-height: var(--body-body-large-line-height, 24px);
+  font-weight: var(--body-body-large-font-weight, 400);
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}

package/src/Presentation/Views/DialogInfo/UsersList/SingleUser/SingleUser.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import './SingleUser.scss';
+import { UserEntity } from '../../../../../Domain/entity/UserEntity';
+import User from '../../../../components/UI/svgs/Icons/Contents/User';
+import UserAvatar from '../../../EditDialog/UserAvatar/UserAvatar';
+
+type UserSingleProps = {
+  user: UserEntity;
+  keyValue?: number;
+};
+// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
+const UserSingle: React.FC<UserSingleProps> = ({ user, keyValue }) => {
+  // const [dialogAvatarUrl, setDialogAvatarUrl] = React.useState('');
+  // const getUserAvatarUid = () => {
+  //   let result = '';
+  //
+  //   result = user?.blob_id || '';
+  //
+  //   return result;
+  // };
+  //
+  // async function getDialogPhotoFileForPreview() {
+  //   const fileUid: string = getUserAvatarUid();
+  //
+  //   if (fileUid && fileUid.length > 0) {
+  //     let tmpFileUrl: string = fileUid && QB.content.privateUrl(fileUid);
+  //     const { blobFile } = await Creator.createBlobFromUrl(tmpFileUrl);
+  //
+  //     tmpFileUrl = blobFile ? URL.createObjectURL(blobFile) : tmpFileUrl || '';
+  //     setDialogAvatarUrl(tmpFileUrl);
+  //   }
+  // }
+  // useEffect(() => {
+  //   getDialogPhotoFileForPreview();
+  //
+  //   return () => {
+  //     if (dialogAvatarUrl) {
+  //       URL.revokeObjectURL(dialogAvatarUrl);
+  //     }
+  //   };
+  // }, []);
+
+  return (
+    <div className="list-single-user">
+      {user.photo ? (
+        <UserAvatar
+          urlAvatar={user.photo}
+          iconTheme={{ width: '41px', height: '41px' }}
+        />
+      ) : (
+        <div className="list-single-user-avatar">
+          <div className="list-single-user-avatar-rectangle" />
+          <div className="list-single-user-avatar-ellipse" />
+          <div className="list-single-user-contents-user">
+            <User
+              width="26"
+              height="26"
+              applyZoom
+              color="var(--tertiary-elements)"
+            />
+          </div>
+        </div>
+      )}
+      <div className="list-single-user-subtitle">
+        {user?.full_name || user?.login || user?.email || user?.id}
+      </div>
+    </div>
+  );
+};
+
+export default UserSingle;

package/src/Presentation/Views/DialogInfo/UsersList/UsersList.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+import './UsersList.scss';
+import { UserEntity } from '../../../../Domain/entity/UserEntity';
+import ScrollableContainer from '../../../components/containers/ScrollableContainer/ScrollableContainer';
+import { UserListItem } from '../../../ui-components';
+
+type UsersListProps = {
+  usersFirstPageToView: UserEntity[];
+  allUsers: UserEntity[];
+  usersInDialogCount: number;
+  maxHeight?: number;
+};
+// eslint-disable-next-line react/function-component-definition
+const UsersList: React.FC<UsersListProps> = ({
+  usersFirstPageToView,
+  allUsers,
+  usersInDialogCount = 0,
+  maxHeight = 0,
+}) => {
+  const [hasMore, setHasMore] = React.useState(false);
+  const [usersToView, setUsersToView] = React.useState<UserEntity[]>([
+    ...usersFirstPageToView,
+  ]);
+
+  useEffect(() => {
+    setUsersToView([...usersFirstPageToView]);
+  }, [usersFirstPageToView, allUsers]);
+
+  const fetchMoreData = () => {
+    if (usersToView.length >= usersInDialogCount) {
+      setHasMore(false);
+
+      return;
+    }
+    if (
+      hasMore &&
+      usersToView.length > 0 &&
+      usersToView.length < usersInDialogCount
+    ) {
+      setUsersToView((prevState) => {
+        const newState = [...prevState];
+
+        const newUserEntity: UserEntity = allUsers[prevState.length];
+
+        newState.push(newUserEntity);
+
+        return newState;
+      });
+    }
+  };
+  const rootStyles = maxHeight > 0 ? { maxHeight: `${maxHeight}px` } : {};
+
+  return (
+    <ScrollableContainer
+      rootStyles={rootStyles}
+      data={usersToView}
+      renderItem={(user) => (
+        <UserListItem
+          userName={user.full_name}
+          avatarUrl={user.photo!}
+          key={user.id}
+        />
+      )}
+      onEndReached={fetchMoreData}
+      onEndReachedThreshold={0.8}
+      refreshing={false}
+    />
+  );
+};
+
+export default UsersList;

package/src/Presentation/Views/DialogInfo/UsersList/UsersListViewModel.ts

@@ -0,0 +1,15 @@
+import BaseViewModel, {
+  FunctionTypeUserIdToUserEntity,
+  FunctionTypeVoidToVoid,
+} from '../../../../CommonTypes/BaseViewModel';
+import { UserEntity } from '../../../../Domain/entity/UserEntity';
+import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
+
+export interface UsersListViewModel extends BaseViewModel<DialogEntity> {
+  loading: boolean;
+  error: string;
+  users: UserEntity[]; // content
+  getUsers: FunctionTypeVoidToVoid; // prepareContent
+  release: FunctionTypeVoidToVoid; // release Content
+  getUserById: FunctionTypeUserIdToUserEntity;
+}

package/src/Presentation/Views/DialogInfo/UsersList/useUsersListViewModel.ts

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+import { UserEntity } from '../../../../Domain/entity/UserEntity';
+import { UsersListViewModel } from './UsersListViewModel';
+import { GetUsersByIdsUseCase } from '../../../../Domain/use_cases/GetUsersByIdsUseCase';
+import UsersRepository from '../../../../Data/repository/UsersRepository';
+import { DialogType } from '../../../../Domain/entity/DialogTypes';
+import { GroupDialogEntity } from '../../../../Domain/entity/GroupDialogEntity';
+import { PrivateDialogEntity } from '../../../../Domain/entity/PrivateDialogEntity';
+import { DefaultConfigurations } from '../../../../Data/DefaultConfigurations';
+
+export default function useUsersListViewModel(
+  dialogEntity?: DialogEntity,
+): UsersListViewModel {
+  console.log('create useUsersListViewModel');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('error with getting user list');
+  const [users, setUsers] = useState<UserEntity[]>([]);
+  const [dialog, setDialog] = useState<DialogEntity | undefined>(dialogEntity);
+
+  const currentContext = useQbInitializedDataContext();
+  const QBConfig =
+    currentContext.InitParams.qbConfig ||
+    DefaultConfigurations.getDefaultQBConfig();
+  const { regexUserName } = QBConfig.appConfig;
+  const regex = regexUserName ? new RegExp(regexUserName) : null;
+
+  function logData(message: string, data: any) {
+    console.log(`${message} :`, JSON.stringify(data));
+  }
+  function handleSuccessfulFetch(participants: Array<number>, data: any) {
+    logData('have getUsers', data);
+    logData('have idis', participants);
+    setUsers([...data]);
+    setLoading(false);
+    setError('');
+  }
+
+  function handleFailedFetch(errorMessage: string) {
+    logData('have ERROR get users', errorMessage);
+    setLoading(false);
+    setError(errorMessage);
+  }
+
+  async function getUsersData(participants: Array<number>) {
+    const usersRepository = new UsersRepository(
+      currentContext.storage.LOCAL_DATA_SOURCE,
+      currentContext.storage.REMOTE_DATA_SOURCE,
+    );
+    const getUsersByIdsUseCase = new GetUsersByIdsUseCase(
+      usersRepository,
+      participants,
+    );
+    const data = await getUsersByIdsUseCase.execute();
+
+    return data;
+  }
+  async function fetchUsersData(participants: Array<number>) {
+    setLoading(true);
+    try {
+      const data = await getUsersData(participants);
+      //
+      const filteredUsers: UserEntity[] = [];
+
+      for (let i = 0; i < data.length; i += 1) {
+        const u = data[i];
+        const regexResult = regex
+          ? u.full_name && regex.test(u.full_name)
+          : true;
+
+        if (!regexResult) {
+          u.full_name = 'Unknown';
+        }
+        filteredUsers.push(u);
+      }
+
+      //
+      handleSuccessfulFetch(participants, filteredUsers);
+    } catch (er) {
+      const errorMessage = (er as Error).message;
+
+      handleFailedFetch(errorMessage);
+    }
+  }
+  async function getUsers() {
+    console.log('call getUsers in useUsersListViewModel');
+    const participants: Array<number> =
+      // eslint-disable-next-line no-nested-ternary
+      dialog?.type === DialogType.group
+        ? (dialog as GroupDialogEntity).participantIds
+        : dialog?.type === DialogType.private
+        ? [(dialog as PrivateDialogEntity).participantId]
+        : [];
+
+    await fetchUsersData(participants);
+    console.log('EXECUTE USE CASES getUsers');
+  }
+  async function getUserById(id: number): Promise<UserEntity> {
+    const response = await getUsersData([id]);
+
+    return Promise.resolve(response[0]);
+  }
+
+  const release = () => {
+    console.log('call release in useUsersListViewModel');
+  };
+
+  return {
+    get entity(): DialogEntity {
+      return dialog!;
+    },
+    set entity(newDialog) {
+      setDialog(newDialog);
+      getUsers().catch();
+    },
+    users,
+    loading,
+    error,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    getUsers,
+    getUserById,
+    release,
+  };
+}

package/src/Presentation/Views/DialogList/DialogList.scss

@@ -0,0 +1,150 @@
+$header-color-divider: var(--color-divider);
+$header-container-height: 64px;
+.dialog-list-header{
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  letter-spacing: 0.0015em;
+
+  border-bottom: 1px solid var(--color-divider);
+  border-right: 1px solid var(--color-divider);
+
+  // border-right: 1px solid $header-color-divider;
+  height: $header-container-height;
+  &__icons{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    fill: var(--color-icon);
+
+    &--disable {
+      cursor: default;
+      fill: var(--disabled-elements);
+    }
+
+    svg path {
+      fill: var(--color-icon);
+    }
+  }
+}
+.dialog-list {
+  min-width: var(--max-width-dialog-list);
+  width: 100%;
+  border: 1px solid var(--divider);
+
+  &__loader-container{
+    display: flex;
+    flexDirection: row;
+    alignItems: center;
+    justifyContent: center;
+  }
+
+  &__loader{
+    fill: var(--color-background-info);
+
+    svg path {
+      fill: var(--color-background-info);
+    }
+  }
+}
+
+@media only screen and (max-width: var(--min-width-screen-desktop)) {
+  .dialog-list {
+    width: 100%;
+    border: 1px solid var(--divider);
+  }
+}
+
+.scroll-box{
+  scrollbar-width: none !important;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-right: 1px solid var(--color-divider);
+  &::-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{
+  flex: 1 1 200px;
+  width: 100%;
+  max-height: 200px;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+
+}
+.search-dialog-text-field{
+  width: 90%;
+  margin: 16px;
+  padding: 8px;
+
+  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;
+
+    border: none;
+    outline: none;
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    fill: var(--tertiary-elements);
+
+    svg path {
+      fill: var(--tertiary-elements);
+    }
+  }
+
+}
+.dialog-list-new-dialog-mobile-container{
+  width: 300px;
+  background-color: var(--main-background);
+}
+.dialog-list-new-dialog-desktop-container{
+  width: 380px;
+  background-color: var(--main-background);
+}
+
+.dialog-empty-chat-placeholder {
+  justify-content: center;
+  height: 100%;
+  white-space: pre-line;
+}
+

package/src/Presentation/Views/DialogList/DialogList.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import cn from 'classnames';
+import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { useMobileLayout } from '../../components/containers/SectionList/hooks';
+import './DialogList.scss';
+import BaseViewModel from '../../../CommonTypes/BaseViewModel';
+
+type DialogListProps = {
+  onDialogSelected: (
+    dialog: BaseViewModel<DialogEntity>,
+    index: number,
+  ) => void;
+  renderHeader: React.ReactNode;
+  renderFilter?: React.ReactNode;
+  renderDialogList: (
+    handleSelectDialog: (
+      dialog: BaseViewModel<DialogEntity>,
+      index: number,
+    ) => void,
+  ) => React.ReactNode;
+  scrollableHeight?: number;
+  canScrolling?: boolean;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const DialogList: React.FC<DialogListProps> = ({
+  onDialogSelected,
+  renderHeader,
+  renderFilter,
+  renderDialogList,
+  scrollableHeight = 736,
+  canScrolling = false,
+}) => {
+  const [isMobile] = useMobileLayout();
+
+  return (
+    <div className="dialog-list">
+      <ColumnContainer maxWidth={isMobile ? '100%' : '320px'}>
+        <div className="dialog-list-header">{renderHeader}</div>
+        {renderFilter}
+
+        <div
+          className={cn('scroll-box', {
+            'dialog-list__scrolling': canScrolling,
+          })}
+          style={{ maxHeight: 'initial', height: 'initial' }}
+          ref={(el) => {
+            if (el) {
+              el.style.setProperty(
+                'max-height',
+                `${scrollableHeight}px`,
+                'important',
+              );
+              el.style.setProperty(
+                'height',
+                `${scrollableHeight}px`,
+                'important',
+              );
+            }
+          }}
+        >
+          {renderDialogList(onDialogSelected)}
+        </div>
+      </ColumnContainer>
+    </div>
+  );
+};
+
+export default DialogList;

package/src/Presentation/Views/DialogList/DialogListViewModel.ts

@@ -0,0 +1,25 @@
+import BaseViewModel, {
+  FunctionTypeBooleanToVoid,
+  FunctionTypeDialogEntityToBoolean,
+  FunctionTypeDialogEntityToDialogEntity,
+  FunctionTypeFileToFileEntity,
+  FunctionTypePaginationToVoid,
+  FunctionTypeVoidToVoid,
+} from '../../../CommonTypes/BaseViewModel';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { Pagination } from '../../../Domain/repository/Pagination';
+
+export interface DialogListViewModel 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;
+}