quickblox-react-ui-kit 0.1.0

package/src/Presentation/components/UI/Dialogs/DialogInformation/DialogMemberButton/DialogMembersButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './DialogMembersButton.scss';
+import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
+import ActiveButton from '../../../Buttons/ActiveButton/ActiveButton';
+
+type DialogMembersButtonProps = {
+  content: string;
+  clickHandler: FunctionTypeVoidToVoid;
+  touchHandler: FunctionTypeVoidToVoid;
+};
+// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
+const DialogMembersButton: React.FC<DialogMembersButtonProps> = ({
+  content,
+  clickHandler,
+  touchHandler,
+}) => {
+  return (
+    <ActiveButton
+      content={<div className="dialog-members-btn">{content}</div>}
+      clickAction={clickHandler}
+      touchAction={touchHandler}
+    />
+  );
+};
+
+export default DialogMembersButton;

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/SingleUser/SingleUser.scss

@@ -0,0 +1,95 @@
+$user-single-container-height: 320px;
+.user-single-container {
+  min-height: $user-single-container-height;
+  max-height: $user-single-container-height;
+  height: $user-single-container-height;
+  //border: 1px solid green;
+
+  &--search-wrapper{
+    min-height: 56px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+
+    //border: 1px solid blue;
+
+    &__search-text{
+      min-height: 24px;
+      // margin: 16px 16px 16px 16px;
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      flex: 2 2 268px;
+      letter-spacing: 0.15px;
+
+      //border: 1px solid orange;
+    }
+    &__search-icon{
+      min-height: 24px;
+      margin-left: 10px;
+      flex: 1 1 24px;
+      cursor: pointer;
+
+      //border: 1px solid red;
+    }
+  }
+
+  &--wrapper {
+    min-height: 56px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+
+   // border: 1px solid blue;
+
+    &__username {
+      min-height: 24px;
+      min-width: 232px;
+      max-width: 232px;
+      // margin: 16px 16px 16px 16px;
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      flex: 2 2 268px;
+      letter-spacing: 0.15px;
+
+      //border: 1px solid orange;
+    }
+
+    &__icon {
+      min-height: 40px;
+      min-width: 40px;
+      max-height: 40px;
+      max-width: 40px;
+      margin-left: 16px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      // flex: 1 1 24px;
+      display: flex;
+      //cursor: pointer;
+      background-color: var(--caption);
+      border-radius: 50%;
+      align-items: center;
+      text-align: center;
+      align-content: center;
+
+      // border: 1px solid red;
+
+      &__content {
+        margin: 6px;
+      }
+    }
+  }
+}

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/SingleUser/SingleUser.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './SingleUser.scss';
+import { UserEntity } from '../../../../../../../Domain/entity/UserEntity';
+import ActiveSvg from '../../../../svgs/ActiveSvg/ActiveSvg';
+import User from '../../../../svgs/Icons/Contents/User';
+
+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 }) => {
+  return (
+    <div className="user-single-container--wrapper">
+      <div className="user-single-container--wrapper__icon">
+        <ActiveSvg
+          content={
+            <div className="user-single-container--wrapper__icon__content">
+              <User
+                width="26"
+                height="26"
+                applyZoom
+                color="var(--disabled-elements)"
+              />
+            </div>
+          }
+          clickAction={() => {
+            console.log('user click...');
+          }}
+          touchAction={() => {
+            console.log('user touch...');
+          }}
+        />
+      </div>
+      <div key={keyValue} className="user-single-container--wrapper__username">
+        {user?.full_name || user?.login || user?.email || user?.id}
+      </div>
+    </div>
+  );
+};
+
+export default UserSingle;

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/UsersList.scss

@@ -0,0 +1,60 @@
+//.btn-container {
+//  min-width: 287px;
+//  min-height: 64px;
+//
+//  border: 1px solid green;
+//  &--wrapper {
+//    display: flex;
+//    flex-direction: row;
+//    justify-content: center;
+//    align-items: flex-start;
+//    padding: 8px 0px 24px;
+//    gap: 8px;
+//    min-width: 287px;
+//    margin-left: 16px;
+//    margin-right: 16px;
+//
+//    &__btn{
+//      box-sizing: border-box;
+//
+//      /* Auto layout */
+//
+//      display: flex;
+//      flex-direction: row;
+//      justify-content: center;
+//      align-items: center;
+//      padding: 8px 16px;
+//
+//      // width: 143px;
+//      height: 32px;
+//
+//      /* Secondary/Secondary-500 */
+//
+//      border: 1px solid var(--secondary-elements);
+//      border-radius: 4px;
+//
+//      /* Inside auto layout */
+//
+//      flex: none;
+//      order: 0;
+//      flex-grow: 0;
+//
+//      /* Button/Default */
+//
+//      font-family: 'Roboto';
+//      font-style: normal;
+//      font-weight: 700;
+//      font-size: 14px;
+//      line-height: 16px;
+//      /* identical to box height, or 114% */
+//
+//      letter-spacing: 0.4px;
+//
+//      /* Secondary/Secondary-500 */
+//
+//      color: var(--secondary-elements);
+//    }
+//  }
+//
+//
+//}

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/UsersList.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import './UsersList.scss';
+import { UserEntity } from '../../../../../../Domain/entity/UserEntity';
+import ScrollableContainer from '../../../../containers/ScrollableContainer/ScrollableContainer';
+import SingleUser from './SingleUser/SingleUser';
+
+type UsersListProps = {
+  usersFirstPageToView: UserEntity[];
+  allUsers: UserEntity[];
+  usersInDialogCount: number;
+};
+// eslint-disable-next-line react/function-component-definition
+const UsersList: React.FC<UsersListProps> = ({
+  usersFirstPageToView,
+  allUsers,
+  usersInDialogCount = 0,
+}) => {
+  const [hasMore, setHasMore] = React.useState(false);
+  const [usersToView, setUsersToView] = React.useState<UserEntity[]>([
+    ...usersFirstPageToView,
+  ]);
+
+  useEffect(() => {
+    setUsersToView([...usersFirstPageToView]);
+  }, [usersFirstPageToView, allUsers]);
+
+  const renderUserComponent = (user: UserEntity, index: number) => {
+    return <SingleUser user={user} keyValue={user.id + index} />;
+  };
+
+  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;
+      });
+    }
+  };
+
+  return (
+    <ScrollableContainer
+      data={usersToView}
+      renderItem={renderUserComponent}
+      onEndReached={fetchMoreData}
+      onEndReachedThreshold={0.8}
+      refreshing={false}
+    />
+  );
+};
+
+export default UsersList;

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/UsersListViewModel.ts

@@ -0,0 +1,13 @@
+import BaseViewModel, {
+  FunctionTypeVoidToVoid,
+} from '../../../../../Views/Base/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
+}

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/useUsersListViewModel.ts

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
+import useQbDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+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';
+
+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>(dialogEntity);
+
+  const currentContext = useQbDataContext();
+
+  async function getUsers() {
+    console.log('call getUsers in useUsersListViewModel');
+    let participants: Array<number> = [];
+
+    if (dialog && dialog?.type === DialogType.group) {
+      participants = (dialog as GroupDialogEntity).participantIds;
+    } else if (dialog && dialog?.type === DialogType.private) {
+      participants = [(dialog as PrivateDialogEntity).participantId];
+    } else if (dialog && dialog?.type === DialogType.public) {
+      participants = [];
+    }
+    setLoading(true);
+    const initAllUsersByIdsUseCase: GetUsersByIdsUseCase =
+      new GetUsersByIdsUseCase(
+        new UsersRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          currentContext.storage.REMOTE_DATA_SOURCE,
+        ),
+        participants,
+      );
+
+    await initAllUsersByIdsUseCase
+      .execute()
+      // eslint-disable-next-line promise/always-return
+      .then((data) => {
+        console.log('have getUsers :', JSON.stringify(data));
+        console.log('have idis :', JSON.stringify(participants));
+        setUsers([...data]);
+        setLoading(false);
+        setError('');
+      })
+      .catch((e) => {
+        console.log('have ERROR get users :', JSON.stringify(e));
+        setLoading(false);
+        setError((e as unknown as Error).message);
+      });
+
+    console.log('EXECUTE USE CASES getUsers');
+  }
+
+  const release = () => {
+    console.log('call release in useUsersListViewModel');
+  };
+
+  return {
+    get entity(): DialogEntity {
+      return dialog;
+    },
+    set entity(newDialog) {
+      setDialog(newDialog);
+    },
+    users,
+    loading,
+    error,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    getUsers,
+    release,
+  };
+}

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

@@ -0,0 +1,183 @@
+$container-width: 332px;
+$container-height: 236px;
+$create-dialog-container-width: 332px;
+$create-dialog-container-height: 180px;
+
+.edit-container {
+  //border: 1px solid blue;
+  min-height: $container-height;
+  max-height: $container-height;
+  height: $container-height;
+  min-width: $container-width;
+  max-width: $container-width;
+  width: $container-width;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.edit-btn-container{
+  //border: 3px solid black;
+  min-height: 34px;
+  max-height: 34px;
+  height: 34px;
+  min-width: $container-width;
+  max-width: $container-width;
+  width: $container-width;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.edit-dialog-container {
+  min-height: $create-dialog-container-height;
+  max-height: $create-dialog-container-height;
+  height: $create-dialog-container-height;
+  min-width: $create-dialog-container-width;
+  max-width: $create-dialog-container-width;
+  width: $create-dialog-container-width;
+
+  //border: 3px solid green;
+
+  margin-bottom: 24px;
+
+  &--wrapper{
+    min-height: 180px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    //border: 1px solid blue;
+
+    &__inf{
+      min-height: 20px;
+
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      // color: var(--color-background);
+
+      //border: 1px solid orange;
+    }
+
+    &__icon-container {
+      min-height: 56px;
+      max-height: 56px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      &__icon {
+        min-height: 56px;
+        max-height: 56px;
+        height: 56px;
+        min-width: 56px;
+        max-width: 56px;
+        height: 56px;
+        margin-top: 8px;
+
+
+        background-color: var(--disabled-elements);
+        border-radius: 50%;
+        text-align: center;
+        align-content: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        //border: 1px solid red;
+
+        &__content {
+          // margin: 10px;
+        }
+      }
+
+      &__upload {
+        min-height: 32px;
+        max-height: 32px;
+        min-width: 80px;
+        max-width: 80px;
+        margin-top: 8px;
+        padding-left: 16px;
+        padding-top: 20px;
+
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 16px;
+        letter-spacing: 0.4px;
+        color: var(--color-icon);
+        //cursor: pointer;
+
+        // border: 1px solid green;
+      }
+    }
+
+    &__dialog-name-inf{
+      min-height: 20px;
+
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      margin-top: 24px;
+
+      //border: 1px solid orange;
+    }
+
+    &__dialog-name-input{
+      margin-top: 8px;
+
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 8px;
+
+      width: 320px;
+      height: 44px;
+
+      border: 1px solid var(--tertiary-elements);//#90979F;
+      border-radius: 4px;
+
+      flex: none;
+      order: 1;
+      align-self: stretch;
+      flex-grow: 0;
+
+      background-color: var(--main-background);
+
+      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;
+      }
+    }
+  }
+}