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

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

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

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

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

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

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

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

@@ -1,150 +0,0 @@
-$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;
-}
-