quickblox-react-ui-kit 0.2.5 → 0.2.6-patch

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

@@ -1,574 +0,0 @@
-import React, { useEffect } from 'react';
-import './DialogInformation.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
-import Close from '../../svgs/Icons/Navigation/Close';
-import NotifyOn from '../../svgs/Icons/Toggle/NotifyOn';
-import SwitchButton from '../../Elements/SwitchButton/SwitchButton';
-import GroupChat from '../../svgs/Icons/Contents/GroupChat';
-import Search from '../../svgs/Icons/Navigation/Search';
-import UsersList from './UsersList/UsersList';
-import useUsersListViewModel from './UsersList/useUsersListViewModel';
-import ErrorComponent from '../../Placeholders/ErrorComponent/ErrorComponent';
-import LoaderComponent from '../../Placeholders/LoaderComponent/LoaderComponent';
-import ActiveSvg from '../../svgs/ActiveSvg/ActiveSvg';
-import {
-  EditDialogParams,
-  FunctionTypeVoidToVoid,
-} from '../../../../Views/Base/BaseViewModel';
-import Leave from '../../svgs/Icons/Navigation/Leave';
-import Next from '../../svgs/Icons/Navigation/Next';
-import Down from '../../svgs/Icons/Navigation/Down';
-import { DialogType } from '../../../../../Domain/entity/DialogTypes';
-import PublicChannel from '../../svgs/Icons/Contents/PublicChannel';
-import User from '../../svgs/Icons/Contents/User';
-import ActiveButton from '../../Buttons/ActiveButton/ActiveButton';
-import { ModalContext } from '../../../providers/ModalContextProvider/Modal';
-import EditDialog, { TypeOpenDialog } from '../EditDialog/EditDialog';
-import InviteMembers from '../InviteMembers/InviteMembers';
-import { PublicDialogEntity } from '../../../../../Domain/entity/PublicDialogEntity';
-import YesNoQuestionComponent from '../YesNoQuestion/YesNoQuestion';
-import MembersList from '../MembersList/MembersList';
-import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
-import { GroupDialogEntity } from '../../../../../Domain/entity/GroupDialogEntity';
-import { stringifyError } from '../../../../../utils/parse';
-import { FileEntity } from '../../../../../Domain/entity/FileEntity';
-import UserAvatar from '../EditDialog/UserAvatar/UserAvatar';
-import MainButton, { TypeButton } from '../../Buttons/MainButton/MainButton';
-import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
-import UiKitTheme from '../../../../assets/UiKitTheme';
-
-type HeaderDialogsProps = {
-  dialog: DialogEntity;
-  dialogViewModel: DialogsViewModel;
-  onCloseDialogInformationHandler: FunctionTypeVoidToVoid;
-  theme?: UiKitTheme;
-  subHeaderContent?: React.ReactNode;
-  upHeaderContent?: React.ReactNode;
-};
-// eslint-disable-next-line react/function-component-definition
-const DialogInformation: React.FC<HeaderDialogsProps> = ({
-  dialog,
-  dialogViewModel,
-  onCloseDialogInformationHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  theme = undefined,
-  subHeaderContent = undefined,
-  upHeaderContent = undefined,
-}: HeaderDialogsProps) => {
-  const currentContext = useQbInitializedDataContext();
-  const currentUserId =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId.toString();
-  const { handleModal } = React.useContext(ModalContext);
-  const userViewModel = useUsersListViewModel(dialog);
-  const [showMembersDialog, setShowMembersDialog] = React.useState(false);
-  const [isAllMembersShow, setIsAllMembersShow] = React.useState(false);
-
-  useEffect(() => {
-    console.log('HAVE NEW DIALOG');
-    if (dialog === undefined && onCloseDialogInformationHandler) {
-      console.log('HAVE UNDEFINED NEW DIALOG');
-      onCloseDialogInformationHandler();
-
-      return;
-    }
-    userViewModel.entity = dialogViewModel.entity;
-
-    setShowMembersDialog(false);
-  }, [dialog, dialogViewModel.entity]);
-
-  useEffect(() => {
-    userViewModel.getUsers();
-  }, [userViewModel.entity]);
-
-  useEffect(() => {
-    console.log('users list has changed in DialogInformation:');
-    console.log(userViewModel.users);
-  }, [userViewModel.users]);
-
-  const searchDialogHandler = () => {
-    console.log('searchDialogHandler');
-  };
-  const closeModal = () => {
-    handleModal(false, '', '', false, false);
-  };
-  const leaveDialogHandler = () => {
-    handleModal(
-      true,
-      <ColumnContainer gapBetweenItem="8px">
-        <YesNoQuestionComponent
-          noActionCaption="Cancel"
-          yesActionCaption="Leave"
-          ClickYesActionHandler={() => {
-            dialogViewModel
-              .deleteDialog(
-                (dialogViewModel?.entity || dialog) as GroupDialogEntity,
-              )
-              .then((result) => {
-                if (result) closeModal();
-
-                return result;
-              })
-              .catch((e) => {
-                console.log(
-                  'exception in DeleteDialogHandler',
-                  stringifyError(e),
-                );
-              });
-          }}
-          ClickNoActionHandler={() => {
-            closeModal();
-          }}
-        />
-      </ColumnContainer>,
-      'Leave dialog?',
-      false,
-      true,
-    );
-  };
-  const showMembersDialogHandler = () => {
-    setShowMembersDialog(!showMembersDialog);
-  };
-
-  // eslint-disable-next-line consistent-return
-  const renderIconForTypeDialog = (dialogEntity: DialogEntity) => {
-    console.log(JSON.stringify(dialogEntity));
-    if (dialogEntity.type === DialogType.group) {
-      const groupDialogEntity = dialogEntity as GroupDialogEntity;
-
-      if (groupDialogEntity.photo) {
-        return (
-          <UserAvatar
-            urlAvatar={groupDialogEntity.photo}
-            iconTheme={{ width: '81px', height: '81px' }}
-          />
-        );
-      }
-
-      return <GroupChat width="51" height="51" color="var(--secondary-text)" />;
-    }
-    if (dialogEntity.type === DialogType.private) {
-      return <User width="51" height="51" color="var(--secondary-text)" />;
-    }
-    if (dialogEntity.type === DialogType.public) {
-      const publicDialogEntity = dialogEntity as PublicDialogEntity;
-
-      if (publicDialogEntity.photo) {
-        return (
-          <UserAvatar
-            urlAvatar={publicDialogEntity.photo}
-            iconTheme={{ width: '81px', height: '81px' }}
-          />
-        );
-      }
-
-      return (
-        <PublicChannel width="51" height="51" color="var(--secondary-text)" />
-      );
-    }
-  };
-
-  async function executeUpdateActions(params: EditDialogParams) {
-    let newUidAvatar: string | undefined | null = null;
-
-    console.log('before urlPhoto: ', newUidAvatar);
-    if (params.dialogAvatar) {
-      if (params.dialogAvatar !== 'null') {
-        const uploadedFile: FileEntity = await dialogViewModel.uploadFile(
-          params.dialogAvatar as File,
-        );
-
-        newUidAvatar = uploadedFile.uid;
-      } else {
-        newUidAvatar = 'null';
-      }
-    }
-    console.log('after urlPhoto: ', newUidAvatar);
-
-    if (
-      // newUidAvatar ||
-      (dialog as GroupDialogEntity).photo !== newUidAvatar ||
-      (params.dialogTitle.length > 0 && params.dialogTitle !== dialog.name)
-    ) {
-      const dialogForUpdate: GroupDialogEntity = {
-        ...(dialog as GroupDialogEntity),
-        name: params.dialogTitle,
-        photo: newUidAvatar, // || '',
-        newParticipantIds: [],
-      };
-
-      dialogViewModel
-        .updateDialog(dialogForUpdate)
-        // eslint-disable-next-line promise/always-return
-        .then((data) => {
-          console.log('result update title dialog: ', JSON.stringify(data));
-          // closeModal();
-        })
-        .catch((e) => {
-          console.log('Exception: ', e);
-        });
-    }
-  }
-
-  const getDialogUpdatedInfoHandler = (params: EditDialogParams) => {
-    console.log(
-      'call getDialogUpdatedInfoHandler, params: ',
-      JSON.stringify(params),
-    );
-
-    // eslint-disable-next-line promise/catch-or-return,promise/always-return
-    executeUpdateActions(params).then(() => {
-      closeModal();
-    });
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [themeName, setThemeName] = React.useState(
-    document.documentElement.getAttribute('data-theme'),
-  );
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const changeThemeActions = () => {
-    setThemeName(document.documentElement.getAttribute('data-theme'));
-  };
-
-  const getUrlAvatar = (dialogEntity: DialogEntity) => {
-    switch (dialogEntity.type) {
-      case DialogType.group:
-        return (dialogEntity as GroupDialogEntity).photo || undefined;
-        break;
-      case DialogType.public:
-        return (dialogEntity as PublicDialogEntity).photo || undefined;
-        break;
-      case DialogType.private:
-        return undefined;
-        break;
-      default:
-        return undefined;
-        break;
-    }
-  };
-
-  const useSubContent = subHeaderContent || false;
-  const useUpContent = upHeaderContent || false;
-
-  return isAllMembersShow ? (
-    <MembersList
-      closeInformationHandler={() => {
-        setIsAllMembersShow(false);
-      }}
-      members={userViewModel.users}
-    />
-  ) : (
-    <div className="dialog-information-container">
-      <ColumnContainer maxWidth="320px">
-        {useUpContent && upHeaderContent}
-        <div className="dialog-information-container--dialog-information-wrapper">
-          <div className="dialog-information-container__dialog-information">
-            <div>Dialog information</div>
-          </div>
-          <div className="dialog-information-container__dialog-information-close">
-            <ActiveSvg
-              content={<Close applyZoom color="var(--secondary-elements)" />}
-              clickAction={() => {
-                if (onCloseDialogInformationHandler) {
-                  onCloseDialogInformationHandler();
-                }
-              }}
-            />
-          </div>
-        </div>
-        {useSubContent && subHeaderContent}
-        <div className="dialog-information-container--icon-dialog-wrapper">
-          <div className="dialog-information-container__icon-dialog">
-            <div className="dialog-information-container__icon-dialog__info">
-              {dialog.type !== DialogType.private &&
-              dialog.ownerId === currentUserId ? (
-                <div className="dialog-information-container__icon-dialog__btn">
-                  <ActiveButton
-                    content="Edit"
-                    clickAction={() => {
-                      handleModal(
-                        true,
-                        <EditDialog
-                          nameDialog={
-                            dialogViewModel?.entity.name || dialog.name
-                          }
-                          typeDialog={
-                            dialogViewModel?.entity.type || dialog.type
-                          }
-                          ulrIcon={getUrlAvatar(
-                            dialogViewModel?.entity || dialog,
-                          )}
-                          typeAddEditDialog={TypeOpenDialog.edit}
-                          clickUpdatedHandler={getDialogUpdatedInfoHandler}
-                          clickCancelHandler={closeModal}
-                        />,
-                        'Edit dialog',
-                        false,
-                        false,
-                      );
-                    }}
-                    touchAction={() => {
-                      console.log('call touchAction');
-                    }}
-                  />
-                </div>
-              ) : null}
-
-              <div className="dialog-information-container__icon-dialog__info__icon">
-                <div className="dialog-information-container__icon-dialog__info__icon__content">
-                  {renderIconForTypeDialog(dialogViewModel?.entity || dialog)}
-                </div>
-              </div>
-              <div className="dialog-information-container__icon-dialog__info__dialog-name">
-                {/* {dialog?.name} */}
-                {dialogViewModel?.entity?.name || dialog?.name}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="dialog-information-container--notifications-wrapper">
-          <div className="dialog-information-container--notifications-wrapper__notifications-icon">
-            <NotifyOn width="24" height="24" applyZoom />
-          </div>
-          <div className="dialog-information-container--notifications-wrapper__notifications">
-            Notifications
-          </div>
-          <div
-            onClick={() => {
-              console.log('clicked SwitchButton theme');
-              document.documentElement.setAttribute('data-theme', 'dark');
-
-              // changeThemeActions();
-            }}
-            className="dialog-information-container--notifications-wrapper__notifications-button"
-          >
-            <SwitchButton
-              clickHandler={() => {
-                console.log('clicked SwitchButton theme');
-              }}
-            />
-          </div>
-        </div>
-
-        {dialog.type !== DialogType.private ? (
-          <div>
-            <div className="dialog-information-container--members-wrapper">
-              <div className="dialog-information-container--members-wrapper__members-icon">
-                <GroupChat
-                  width="24"
-                  height="24"
-                  applyZoom
-                  color="var(--secondary-elements)"
-                />
-              </div>
-              <div className="dialog-information-container--members-wrapper__members">
-                Members
-              </div>
-              <div className="dialog-information-container--members-wrapper__members-button">
-                <div className="dialog-information-container--members-wrapper__members-button__count">
-                  <div className="dialog-information-container--members-wrapper__members-button__count__content">
-                    {userViewModel.users.length}
-                  </div>
-                </div>
-                <div className="dialog-information-container--members-wrapper__members-button__btn">
-                  <ActiveSvg
-                    content={
-                      showMembersDialog ? (
-                        <Down
-                          applyZoom
-                          width="24"
-                          height="24"
-                          color="var(--secondary-elements)"
-                        />
-                      ) : (
-                        <Next
-                          applyZoom
-                          width="24"
-                          height="24"
-                          color="var(--secondary-elements)"
-                        />
-                      )
-                    }
-                    clickAction={() => showMembersDialogHandler()}
-                    touchAction={() => console.log('showMembersDialogHandler')}
-                  />
-                </div>
-              </div>
-            </div>
-            <div>
-              {showMembersDialog ? (
-                <ColumnContainer>
-                  {userViewModel?.loading && (
-                    <div
-                      style={{
-                        height: '44px',
-                        width: '44px',
-                      }}
-                    >
-                      <LoaderComponent width="44" height="44" />
-                    </div>
-                  )}
-                  {userViewModel?.error && (
-                    <ErrorComponent
-                      title={userViewModel?.error}
-                      ClickActionHandler={() => {
-                        alert('call click retry');
-                      }}
-                    />
-                  )}
-                  {userViewModel.users && userViewModel.users.length > 0 && (
-                    <div className="dialog-information-container--members-wrapper__members-list">
-                      <UsersList
-                        usersFirstPageToView={userViewModel.users}
-                        allUsers={userViewModel.users}
-                        usersInDialogCount={userViewModel.users.length}
-                      />
-                    </div>
-                  )}
-                  <div className="btn-container-members">
-                    <div className="btn-container-members--wrapper">
-                      <MainButton
-                        title="Invite members"
-                        clickHandler={() => {
-                          handleModal(
-                            true,
-                            <InviteMembers
-                              participants={PublicDialogEntity.getParticipants(
-                                dialogViewModel?.entity || dialog,
-                              )}
-                              applyInviteUsersHandler={(
-                                usersForInvite,
-                                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                usersForRemove,
-                              ) => {
-                                console.log('apply invite users');
-                                console.log(
-                                  'HAVE SELECTED USERS: ',
-                                  JSON.stringify(usersForInvite),
-                                );
-
-                                const alreadyPresents =
-                                  PublicDialogEntity.getParticipants(
-                                    dialogViewModel?.entity || dialog,
-                                  );
-                                const newParticipants = usersForInvite.filter(
-                                  (item) => alreadyPresents.indexOf(item) < 0,
-                                );
-
-                                if (newParticipants.length > 0) {
-                                  const dialogForUpdate: GroupDialogEntity = {
-                                    ...(dialogViewModel?.entity ||
-                                      (dialog as GroupDialogEntity)),
-                                    participantIds: (
-                                      (dialogViewModel?.entity ||
-                                        dialog) as GroupDialogEntity
-                                    ).participantIds,
-                                    newParticipantIds: newParticipants,
-                                    photo: '',
-                                    name: '',
-                                  };
-
-                                  dialogViewModel
-                                    .updateDialog(dialogForUpdate)
-                                    // eslint-disable-next-line promise/always-return
-                                    .then((data) => {
-                                      console.log(
-                                        'result update dialog: ',
-                                        JSON.stringify(data),
-                                      );
-                                      closeModal();
-                                    })
-                                    .catch((e) => {
-                                      console.log('Exception: ', e);
-                                    });
-                                }
-
-                                if (usersForRemove.length > 0) {
-                                  const dialogForUpdate: GroupDialogEntity = {
-                                    ...((dialogViewModel?.entity ||
-                                      dialog) as GroupDialogEntity),
-                                    photo: '',
-                                    name: '',
-                                    participantsToRemoveIds: usersForRemove,
-                                  };
-
-                                  dialogViewModel
-                                    .removeMembers(dialogForUpdate)
-                                    // eslint-disable-next-line promise/always-return
-                                    .then((data) => {
-                                      console.log(
-                                        'result removeMembers dialog: ',
-                                        JSON.stringify(data),
-                                      );
-                                      closeModal();
-                                    })
-                                    .catch((e) => {
-                                      console.log('Exception: ', e);
-                                    });
-                                }
-                              }}
-                              cancelInviteMembersHandler={() => {
-                                closeModal();
-                              }}
-                              typeAddEditDialog={TypeOpenDialog.edit}
-                              typeDialog={dialog.type}
-                              idOwnerDialog={dialog.ownerId}
-                            />,
-                            'Edit dialog',
-                            false,
-                            false,
-                          );
-                        }}
-                        typeButton={TypeButton.outlined}
-                        disabled={dialog.ownerId !== currentUserId}
-                      />
-                      <MainButton
-                        title="See all members"
-                        typeButton={TypeButton.outlined}
-                        clickHandler={() => setIsAllMembersShow(true)}
-                      />
-                    </div>
-                  </div>
-                </ColumnContainer>
-              ) : null}
-            </div>
-          </div>
-        ) : null}
-
-        <div className="dialog-information-container--search-wrapper">
-          <div className="dialog-information-container--search-wrapper__search-icon">
-            <ActiveSvg
-              content={<Search width="24" height="24" applyZoom />}
-              clickAction={() => searchDialogHandler()}
-              touchAction={() => searchDialogHandler()}
-            />
-          </div>
-          <div className="dialog-information-container--search-wrapper__search-text">
-            Search in dialog
-          </div>
-        </div>
-        <div className="dialog-information-container--leave-dialog-wrapper">
-          <div className="dialog-information-container--leave-dialog-wrapper__leave-icon">
-            <ActiveSvg
-              content={
-                <Leave width="24" height="24" applyZoom color="var(--error)" />
-              }
-              clickAction={() => {
-                leaveDialogHandler();
-              }}
-              touchAction={() => {
-                leaveDialogHandler();
-              }}
-            />
-          </div>
-          <div className="dialog-information-container--leave-dialog-wrapper__leave-text">
-            Leave Dialog
-          </div>
-        </div>
-      </ColumnContainer>
-    </div>
-  );
-};
-
-export default DialogInformation;

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

@@ -1,42 +0,0 @@
-.dialog-members-btn {
-  box-sizing: border-box;
-
-  /* Auto layout */
-
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 10px;
-
-  // 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);
-
-  cursor: pointer;
-}

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

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