quickblox-react-ui-kit 0.1.0 → 0.1.2

package/src/Presentation/components/layouts/TestStage/TestStageWithMockData/TestStageWithMockData.tsx

@@ -1,209 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
-import BaseViewModel from '../../../../Views/Base/BaseViewModel';
-import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
-import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
-import DialogsComponent from '../../../../Views/Dialogs/Dialogs';
-import DialogInformation from '../../../UI/Dialogs/DialogInformation/DialogInformation';
-import DesktopLayoutForMockModels from '../../Desktop/DesktopLayoutForMockModels';
-import MessagesView from '../../../UI/Dialogs/MessagesView/MessagesView';
-import useDialogsViewModelWithMockUseCase from '../../../../Views/Dialogs/useDialogsViewModelWithMockUseCase';
-import { Pagination } from '../../../../../Domain/repository/Pagination';
-import { SubscribeToDialogEventsUseCase } from '../../../../../Domain/use_cases/SubscribeToDialogEventsUseCase';
-import useEventMessagesRepository from '../../../providers/QuickBloxUIKitProvider/useEventMessagesRepository';
-import EventMessageType from '../../../../../Domain/entity/EventMessageType';
-import { NotificationTypes } from '../../../../../Domain/entity/NotificationTypes';
-import { stringifyError } from '../../../../../utils/parse';
-import { DialogEventInfo } from '../../../../../Domain/entity/DialogEventInfo';
-
-function TestStageWithMockData() {
-  console.log('create TestStageWithMockData');
-  const [selectedDialog, setSelectedDialog] =
-    React.useState<BaseViewModel<DialogEntity>>();
-
-  const currentContext = useQbDataContext();
-  const eventMessaging = useEventMessagesRepository();
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const { userName } =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation;
-  const userId =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
-
-  const dialogsViewModel: DialogsViewModel =
-    useDialogsViewModelWithMockUseCase(currentContext);
-
-  const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
-    new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
-
-  /* DATA needed to init MockData
-  const remoteDataSourceMock: RemoteDataSource = currentContext.storage
-    .REMOTE_DATA_SOURCE as RemoteDataSource;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const localDataSource: LocalDataSource =
-    currentContext.storage.LOCAL_DATA_SOURCE;
-  const { connectionRepository } = useQBConnection();
-*/
-  // инициализация СДК и загрузка тестовых данных, запуск пинга - может не быть
-  // todo: добавить метод в контекст
-  const isAuthProcessed = (): boolean => {
-    console.log('call isAuthProcessed');
-    const result =
-      currentContext.storage.REMOTE_DATA_SOURCE.needInit === false &&
-      currentContext.storage.REMOTE_DATA_SOURCE.authProcessed &&
-      currentContext.storage.CONNECTION_REPOSITORY.needInit === false;
-
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.REMOTE_DATA_SOURCE.needInit: ${currentContext.storage.REMOTE_DATA_SOURCE.needInit}`,
-    );
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.REMOTE_DATA_SOURCE.authProcessed: ${currentContext.storage.REMOTE_DATA_SOURCE.authProcessed}`,
-    );
-
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.CONNECTION_REPOSITORY.needInit: ${currentContext.storage.CONNECTION_REPOSITORY.needInit}`,
-    );
-
-    return result;
-  };
-
-  useEffect(() => {
-    console.log('TestStage: GET DATA ');
-    console.log(
-      `auth data: ${JSON.stringify(
-        currentContext.InitParams.loginData,
-      )} at ${new Date().toLocaleTimeString()}`,
-    );
-    if (isAuthProcessed()) {
-      console.log('auth is completed, CAN GET DATA');
-      const pagination: Pagination = new Pagination();
-
-      dialogsViewModel?.getDialogs(pagination);
-    }
-
-    return () => {
-      console.log('TestStage: USE EFFECT release');
-      dialogsViewModel.release();
-    };
-  }, []); // сейчас это выполняется один раз при старте, а нужно каждый раз при смене пользователя
-
-  const dialogsEventHandler = (dialogInfo: DialogEventInfo) => {
-    console.log('call dialogsEventHandler in subscribeToDialogEventsUseCase');
-    if (dialogInfo.eventMessageType === EventMessageType.SystemMessage) {
-      switch (dialogInfo.notificationTypes) {
-        case NotificationTypes.DELETE_LEAVE_DIALOG: {
-          if (
-            dialogInfo.messageInfo &&
-            dialogInfo.messageInfo.sender_id === userId
-          ) {
-            setSelectedDialog(undefined);
-          }
-
-          break;
-        }
-        default: {
-          const pagination: Pagination = new Pagination();
-
-          dialogsViewModel?.getDialogs(pagination);
-          break;
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    console.log('TestStage: GET DATA AFTER User data has CHANGED');
-    console.log(
-      `auth is ${JSON.stringify(
-        currentContext.InitParams.loginData,
-      )} at ${new Date().toLocaleTimeString()}`,
-    );
-
-    if (isAuthProcessed()) {
-      console.log('auth is completed, FETCH DATA');
-      const pagination: Pagination = new Pagination();
-
-      dialogsViewModel?.getDialogs(pagination);
-      //
-      console.log('auth is completed, subscribe');
-
-      subscribeToDialogEventsUseCase
-        .execute(dialogsEventHandler)
-        .catch((reason) => {
-          console.log(stringifyError(reason));
-        });
-      //
-    }
-  }, [currentContext.InitParams]);
-
-  useEffect(() => {
-    console.log(
-      `TestStage: selectedDialog: ${
-        selectedDialog?.entity?.name || 'Dialog Name is empty'
-      }`,
-    );
-    if (selectedDialog) {
-      dialogsViewModel.entity = selectedDialog.entity!;
-    }
-  }, [selectedDialog]);
-
-  const [needDialogInformation, setNeedDialogInformation] = useState(true);
-  const informationCloseHandler = (): void => {
-    setNeedDialogInformation(false);
-  };
-  const informationOpenHandler = (): void => {
-    setNeedDialogInformation(true);
-  };
-
-  return (
-    <DesktopLayoutForMockModels
-      dialogsView={
-        <DialogsComponent
-          dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
-          itemSelectHandler={setSelectedDialog}
-          additionalSettings={{ withoutHeader: false }}
-        />
-      }
-      dialogMessagesView={
-        selectedDialog && selectedDialog.entity ? (
-          <MessagesView
-            dialog={selectedDialog?.entity}
-            InformationHandler={informationOpenHandler}
-            maxWidthToResize={
-              selectedDialog && needDialogInformation ? undefined : '1040px'
-            }
-          /> // 1 Get Messages + 1 Get User by Id
-        ) : (
-          <div
-            style={{
-              minHeight: '799px',
-              minWidth: '1040px',
-              border: '1px solid var(--divider)',
-              margin: '0 auto',
-            }}
-          >
-            You login as {userName}({userId}). Select chat to start
-            conversation.
-          </div>
-        )
-      }
-      dialogInfoView={
-        // 1 Get User by 1 + Get user by name
-        <div>
-          {selectedDialog && needDialogInformation && (
-            <DialogInformation
-              dialog={selectedDialog.entity}
-              dialogViewModel={dialogsViewModel}
-              closeInformationHandler={informationCloseHandler}
-            />
-          )}
-        </div>
-      }
-    />
-  );
-}
-
-export default TestStageWithMockData;

package/src/Presentation/components/providers/ModalContextProvider/Modal.scss

@@ -1,71 +0,0 @@
-.modal-container-overlay{
-  position: fixed;
-  top: 0;
-  width: 100%;//inherit;
-  height: 100%;//inherit;
-  background: var(--secondary-background-modal);
-  //display: flex;
-  //align-items: center;
-  //justify-content: center;
-
-  &[aria-expanded='false']{
-    display: none;
-  }
-}
-
-.modal-container{
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  width: 380px;
-  min-height: 312px;
-  background-color: var(--main-background);
-  // padding: 24px;
-  padding-top: 24px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 4px;
-
-  &__close{
-    position: absolute;
-    top: 24px;
-    right: 24px;
-    cursor: pointer;
-
-    //font-weight: 500;
-    //font-size: 20px;
-    //font-style: normal;
-    //font-family: 'Roboto';
-
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 24px;
-    /* identical to box height, or 120% */
-    letter-spacing: 0.0015em;
-    color: var(--secondary-elements);
-  }
-  &__subtitle{
-    margin-bottom: 24px;
-    //
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 24px;
-    letter-spacing: 0.0015em;
-    color: var(--main-text);
-
-    //border: 1px solid black;
-  }
-  &__content{
-    margin-bottom: 20px;
-    //border: 1px solid brown;
-  }
-  &__footer{
-    //border: 1px solid black;
-  }
-}

package/src/Presentation/components/providers/ModalContextProvider/Modal.tsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import './Modal.scss';
-import Close from '../../UI/svgs/Icons/Navigation/Close';
-
-type ModalContextType = {
-  isOpen: boolean;
-  handleModal: (
-    show: boolean,
-    content: React.ReactNode,
-    headerText?: string,
-    withoutClose?: boolean,
-    haveModalFooter?: boolean,
-    haveModalContainerStyle?: React.CSSProperties,
-  ) => void;
-  modalContent: React.ReactNode;
-  modalHeader: string;
-  modalCloseTab: boolean;
-  haveModalFooter: boolean;
-  ModalContainerStyle: React.CSSProperties;
-};
-const initValue: ModalContextType = {
-  isOpen: false,
-  modalCloseTab: true,
-  haveModalFooter: true,
-  modalHeader: '',
-  modalContent: '',
-  handleModal: () => {
-    console.log('empty function');
-  },
-  ModalContainerStyle: {},
-};
-
-export const ModalContext = React.createContext<ModalContextType>(initValue);
-
-function Modal() {
-  const {
-    isOpen,
-    handleModal,
-    modalContent,
-    modalHeader,
-    modalCloseTab,
-    haveModalFooter,
-    ModalContainerStyle,
-  } = React.useContext(ModalContext);
-
-  const onClickHandler = () => {
-    handleModal(false, '');
-  };
-  const questionSizeBox: React.CSSProperties = haveModalFooter
-    ? {
-        minHeight: '160px',
-        minWidth: '380px',
-        maxHeight: '160px',
-        maxWidth: '380px',
-        backgroundColor: 'var(--main-background)',
-        // border: '3px solid blue',
-      }
-    : ModalContainerStyle || {};
-
-  return (
-    <div className="modal-container-overlay" aria-expanded={isOpen}>
-      {isOpen ? (
-        <div style={questionSizeBox} className="modal-container">
-          {modalCloseTab && (
-            <div className="modal-container__close" onClick={onClickHandler}>
-              <Close width="24" height="24" color="var(--secondary-elements)" />
-            </div>
-          )}
-          <div
-            style={haveModalFooter ? { marginBottom: '30px' } : {}}
-            className="modal-container__subtitle"
-          >
-            {modalHeader}
-          </div>
-          <div className="modal-container__content">{modalContent}</div>
-          {/* {haveModalFooter && ( */}
-          {/*  <div className="modal-container__footer"> */}
-          {/*    <RowRightContainer */}
-          {/*      minHeightContainer="32px" */}
-          {/*      gapBetweenItem="8px" */}
-          {/*      RightContainerSize={{ */}
-          {/*        flexBasis: '63px', */}
-          {/*        minWidth: '63px', */}
-          {/*        maxWidth: '63px', */}
-          {/*        minHeight: '32px', */}
-          {/*        maxHeight: '32px', */}
-          {/*      }} */}
-          {/*      RightItem={ */}
-          {/*        <div> */}
-          {/*          <button */}
-          {/*            style={{ */}
-          {/*              width: '62px', */}
-          {/*              height: '31px', */}
-          {/*              borderRadius: '4px', */}
-          {/*            }} */}
-          {/*            type="button" */}
-          {/*          > */}
-          {/*            Next */}
-          {/*          </button> */}
-          {/*        </div> */}
-          {/*      } */}
-          {/*      CenterContainerSize={{ */}
-          {/*        flexBasis: '78px', */}
-          {/*        minWidth: '78px', */}
-          {/*        maxWidth: '78px', */}
-          {/*        minHeight: '32px', */}
-          {/*        maxHeight: '32px', */}
-          {/*      }} */}
-          {/*      CenterItem={ */}
-          {/*        <div> */}
-          {/*          <button */}
-          {/*            style={{ */}
-          {/*              width: '78px', */}
-          {/*              height: '31px', */}
-          {/*              borderRadius: '4px', */}
-          {/*            }} */}
-          {/*            type="button" */}
-          {/*          > */}
-          {/*            Cancel */}
-          {/*          </button> */}
-          {/*        </div> */}
-          {/*      } */}
-          {/*    /> */}
-          {/*  </div> */}
-          {/* )} */}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-export default Modal;

package/src/Presentation/components/providers/ModalContextProvider/ModalContextProvider.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import useModal from './useModal';
-import Modal, { ModalContext } from './Modal';
-import { ProviderProps } from '../ProviderProps';
-
-const { Provider } = ModalContext;
-
-function ModalContextProvider({ children }: ProviderProps) {
-  console.log('call ModalContextProvider:');
-  const {
-    isOpen,
-    handleModal,
-    modalContent,
-    modalHeader,
-    modalCloseTab,
-    haveModalFooter,
-    ModalContainerStyle,
-  } = useModal();
-
-  return (
-    <Provider
-      value={{
-        isOpen,
-        handleModal,
-        modalContent,
-        modalHeader,
-        modalCloseTab,
-        haveModalFooter,
-        ModalContainerStyle,
-      }}
-    >
-      {children}
-      <Modal />
-    </Provider>
-  );
-}
-
-export default ModalContextProvider;

package/src/Presentation/components/providers/ModalContextProvider/useModal.ts

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-
-const useModal = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [modalContent, setModalContent] = React.useState<React.ReactNode>('');
-  const [modalHeader, setModalHeader] = React.useState<string>('');
-  const [modalCloseTab, setModalCloseTab] = React.useState<boolean>(true);
-  const [haveModalFooter, setHaveModalFooter] = React.useState<boolean>(true);
-  const [ModalContainerStyle, setModalContainerStyle] =
-    useState<React.CSSProperties>({});
-  const handleModal = (
-    show: boolean,
-    content: React.ReactNode,
-    headerText?: string,
-    withoutCloseTab?: boolean,
-    withoutFooter?: boolean,
-    haveModalContainerStyle?: React.CSSProperties,
-  ) => {
-    setIsOpen(show);
-    if (content) setModalContent(content);
-    if (headerText) setModalHeader(headerText);
-    setModalCloseTab(!withoutCloseTab);
-    setHaveModalFooter(withoutFooter || false);
-    if (haveModalContainerStyle)
-      setModalContainerStyle(haveModalContainerStyle);
-  };
-
-  return {
-    isOpen,
-    handleModal,
-    modalContent,
-    modalHeader,
-    modalCloseTab,
-    haveModalFooter,
-    ModalContainerStyle,
-  };
-};
-
-export default useModal;

package/src/Presentation/components/providers/ProviderProps.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export type ProviderProps = {
-  children?: React.ReactNode;
-};