quickblox-react-ui-kit 0.1.6 → 0.1.7

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

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

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

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

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

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

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

@@ -0,0 +1,343 @@
+import React from 'react';
+import { ProviderProps } from '../ProviderProps';
+import ModalContextProvider from '../ModalContextProvider/ModalContextProvider';
+import { LocalDataSource } from '../../../../Data/source/local/LocalDataSource';
+import {
+  AuthorizationData,
+  LoginData,
+  RemoteDataSource,
+} from '../../../../Data/source/remote/RemoteDataSource';
+import DialogsRepository from '../../../../Data/repository/DialogsRepository';
+import { SyncDialogsUseCase } from '../../../../Domain/use_cases/SyncDialogsUseCase';
+import { BaseUseCase } from '../../../../Domain/use_cases/base/BaseUseCase';
+import { QBConfig } from '../../../../QBconfig';
+import ConnectionRepository from '../../../../Data/repository/ConnectionRepository';
+import EventMessagesRepository from '../../../../Data/repository/EventMessagesRepository';
+import { CallBackFunction } from '../../../../Domain/use_cases/base/IUseCase';
+
+// import packageInfo from '../../../../../package.json';
+
+const initialValues = {
+  LOCAL_DATA_SOURCE: new LocalDataSource(), // localstorage or session storage
+  REMOTE_DATA_SOURCE: new RemoteDataSource(), // QB instances
+  CONNECTION_REPOSITORY: new ConnectionRepository(),
+};
+
+const initialEvent = {
+  EVENT_MESSAGE_REPOSITORY: new EventMessagesRepository(
+    initialValues.REMOTE_DATA_SOURCE,
+    initialValues.LOCAL_DATA_SOURCE,
+    initialValues.CONNECTION_REPOSITORY,
+  ),
+};
+
+const initialSync = {
+  SYNC_DIALOGS_USE_CASE: new SyncDialogsUseCase(
+    new DialogsRepository(
+      initialValues.LOCAL_DATA_SOURCE,
+      initialValues.REMOTE_DATA_SOURCE,
+    ),
+    initialValues.CONNECTION_REPOSITORY,
+    initialEvent.EVENT_MESSAGE_REPOSITORY,
+  ),
+};
+
+type AccountData = {
+  appId: number;
+  accountKey: string;
+  authSecret?: string;
+  authKey: string;
+  sessionToken?: string;
+};
+
+/*
+{ username: string; password: string }
+ */
+
+export type InitParams = {
+  maxFileSize: number;
+  accountData: AccountData;
+  qbConfig?: QBConfig;
+  loginData?: LoginData;
+};
+
+type QuickBloxProviderProps = ProviderProps & InitParams;
+
+type QBDataStorage = {
+  LOCAL_DATA_SOURCE: LocalDataSource;
+  REMOTE_DATA_SOURCE: RemoteDataSource;
+  SYNC_DIALOGS_USE_CASE: BaseUseCase<boolean, boolean>; // need Factory pattern
+  CONNECTION_REPOSITORY: ConnectionRepository;
+  EVENT_MESSAGE_REPOSITORY: EventMessagesRepository;
+};
+
+export type QBReactUIKitVersionInfo = {
+  version: string;
+  build: string;
+};
+
+export type QBDataContextType = {
+  // authProcessed: boolean;
+  storage: QBDataStorage;
+  InitParams: InitParams;
+  updateStorage: (storage: QBDataStorage) => void;
+  updateQBInitParams: (InitParams: InitParams) => void;
+  release: () => void;
+  authorize: (authorizationData: AuthorizationData) => Promise<void>;
+  setSubscribeOnSessionExpiredListener: (
+    callback: CallBackFunction<boolean>,
+  ) => void;
+};
+const initDataContext: QBDataContextType = {
+  // authProcessed: false,
+  storage: {
+    LOCAL_DATA_SOURCE: initialValues.LOCAL_DATA_SOURCE, // localstorage or session storage
+    REMOTE_DATA_SOURCE: initialValues.REMOTE_DATA_SOURCE, // QB instances
+    CONNECTION_REPOSITORY: initialValues.CONNECTION_REPOSITORY,
+    EVENT_MESSAGE_REPOSITORY: initialEvent.EVENT_MESSAGE_REPOSITORY,
+    SYNC_DIALOGS_USE_CASE: initialSync.SYNC_DIALOGS_USE_CASE,
+    // SYNC_DIALOGS_USE_CASE: new SyncDialogsUseCase(
+    //   new DialogsRepository(
+    //     initialValues.LOCAL_DATA_SOURCE,
+    //     initialValues.REMOTE_DATA_SOURCE,
+    //   ),
+    //   initialValues.CONNECTION_REPOSITORY,
+    //   initialEvent.EVENT_MESSAGE_REPOSITORY,
+    // ),
+  },
+  InitParams: {
+    accountData: QBConfig.credentials,
+    maxFileSize: QBConfig.appConfig.maxFileSize,
+  },
+  updateQBInitParams: (InitParams: InitParams) => {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    console.log(
+      `call function updateQBInitParams with param ${JSON.stringify(
+        InitParams,
+      )}`,
+    );
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this.InitParams = InitParams;
+  },
+  updateStorage: (storage: QBDataStorage) => {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    console.log(`empty function with param ${storage}`);
+  },
+  release: (): void => {
+    console.log(`function release start`);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialSync.SYNC_DIALOGS_USE_CASE.release();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialValues.CONNECTION_REPOSITORY.stopKeepAlive();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialValues.REMOTE_DATA_SOURCE.disconnectAndLogoutUser().catch();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialValues.LOCAL_DATA_SOURCE.clearAll().catch();
+    console.log(`function release end`);
+  },
+  authorize: async (authorizationData: AuthorizationData): Promise<void> => {
+    console.log('UI Kit authorize');
+    initialValues.REMOTE_DATA_SOURCE.authInformation = authorizationData;
+    initialValues.REMOTE_DATA_SOURCE.setAuthProcessedSuccessed();
+    //
+    initialValues.REMOTE_DATA_SOURCE.initEventsHandlers();
+    //
+    console.log('UI Kit authorize event handler has initialized');
+    //
+    await initialValues.CONNECTION_REPOSITORY.initializeStates();
+    if (!initialValues.CONNECTION_REPOSITORY.needInit) {
+      initialValues.CONNECTION_REPOSITORY.keepALiveChatConnection();
+    }
+    await initialSync.SYNC_DIALOGS_USE_CASE.execute(() => {
+      console.log('sync dialogs has started');
+    }).catch(() => {
+      console.log('sync dialogs has exception');
+    });
+    //
+    console.log(`function authorize end`);
+    //
+  },
+  setSubscribeOnSessionExpiredListener: (
+    callback: CallBackFunction<boolean>,
+  ): void => {
+    initialValues.REMOTE_DATA_SOURCE.subscribeOnSessionExpiredListener(
+      callback,
+    );
+  },
+};
+
+export const qbDataContext =
+  React.createContext<QBDataContextType>(initDataContext);
+
+const { Provider } = qbDataContext;
+
+function QuickBloxUIKitProvider({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  accountData,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  qbConfig,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loginData,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  maxFileSize,
+}: QuickBloxProviderProps) {
+  console.log(
+    'QuickBloxUIKitProvider with account data: ',
+    JSON.stringify(accountData),
+  );
+  console.log(
+    'QuickBloxUIKitProvider with login data: ',
+    JSON.stringify(loginData),
+  );
+  const initStorageState = {
+    LOCAL_DATA_SOURCE: initialValues.LOCAL_DATA_SOURCE, // localstorage or session storage
+    REMOTE_DATA_SOURCE: initialValues.REMOTE_DATA_SOURCE, // QB instances
+    CONNECTION_REPOSITORY: initialValues.CONNECTION_REPOSITORY,
+    EVENT_MESSAGE_REPOSITORY: initialEvent.EVENT_MESSAGE_REPOSITORY,
+    SYNC_DIALOGS_USE_CASE: initialSync.SYNC_DIALOGS_USE_CASE,
+    // SYNC_DIALOGS_USE_CASE: new SyncDialogsUseCase(
+    //   new DialogsRepository(
+    //     initialValues.LOCAL_DATA_SOURCE,
+    //     initialValues.REMOTE_DATA_SOURCE,
+    //   ),
+    //   initialValues.CONNECTION_REPOSITORY,
+    //   initialEvent.EVENT_MESSAGE_REPOSITORY,
+    // ),
+  };
+
+  console.log(
+    'QuickBloxUIKitProvider with storage init data: ',
+    JSON.stringify(initStorageState),
+  );
+  const [storage, setStorage] = React.useState<QBDataStorage>(initStorageState);
+
+  console.log('have storage useState completed');
+  const updateStorage = (dataStorage: QBDataStorage) => {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    setStorage(dataStorage);
+  };
+  // todo: must use accountData if we haves
+  const [InitParams, setInitParams] = React.useState<InitParams>({
+    accountData: {
+      appId: accountData.appId,
+      accountKey: accountData.accountKey,
+      authKey: accountData.authKey,
+      authSecret: accountData.authSecret,
+      sessionToken: accountData.sessionToken,
+    },
+    loginData: {
+      login: loginData?.login || '',
+      password: loginData?.password || '',
+    },
+    maxFileSize,
+  });
+
+  console.log('have InitParams useState completed');
+  const updateQBInitParams = (initParams: InitParams) => {
+    console.log(`log updateQBInitParams ${JSON.stringify(initParams)}`);
+    setInitParams(initParams);
+  };
+
+  const release = (): void => {
+    console.log(`function release start`);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialSync.SYNC_DIALOGS_USE_CASE.release();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialValues.CONNECTION_REPOSITORY.stopKeepAlive();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialValues.REMOTE_DATA_SOURCE.disconnectAndLogoutUser().catch();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    initialValues.LOCAL_DATA_SOURCE.clearAll().catch();
+    console.log(`function release end`);
+  };
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const authorize = (authorizationData: AuthorizationData): Promise<void> => {
+    initialValues.REMOTE_DATA_SOURCE.authInformation = authorizationData;
+    initialValues.REMOTE_DATA_SOURCE.setAuthProcessedSuccessed();
+  };
+
+  const setSubscribeOnSessionExpiredListener = (
+    callback: CallBackFunction<boolean>,
+  ): void => {
+    initialValues.REMOTE_DATA_SOURCE.subscribeOnSessionExpiredListener(
+      callback,
+    );
+  };
+
+  // todo: temporary off, must turn on
+  // todo: cause of recycle v1
+  // storage.CONNECTION_REPOSITORY.keepALiveChatConnection();
+  // todo: temporary off, must turn on
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  // storage.SYNC_DIALOGS_USE_CASE.execute(() => {});
+
+  // todo: MUST use sessionToken or login/pass to re-init
+  // const remoteDataSourceMock: RemoteDataSource =
+  //   storage.REMOTE_DATA_SOURCE as RemoteDataSource;
+  // // remoteDataSourceMock
+  //   .initSDK({
+  //     appIdOrToken: QBInitParams.accountData.appId,
+  //     authKeyOrAppId: QBInitParams.accountData.authKey,
+  //     authSecret: QBInitParams.accountData.authSecret,
+  //     accountKey: QBInitParams.accountData.accountKey,
+  //   })
+  //   .catch(() => {
+  //     console.log('EXCEPTION remoteDataSourceMock.initSDK');
+  //   });
+  // console.log('!!!-3-after initSDK');
+  // // todo: temporary off, must turn on and reorganize code rows
+  // storage.CONNECTION_REPOSITORY.initializeStates();
+  // // todo: must delete it
+  // remoteDataSourceMock.setUpMockStorage();
+  // // START SYNC MOCK
+  // storage.SYNC_DIALOGS_USE_CASE.execute(() => {
+  //   console.log('SYNC_DIALOGS_USE_CASE_MOCK.execute');
+  // }).catch(() => {
+  //   console.log('EXCEPTION SYNC_DIALOGS_USE_CASE_MOCK.execute');
+  // });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // const [authProcessed, setAuthProcessed] = React.useState(false);
+  // const updateAuthProcessedStatus = (status: boolean) => {
+  //   console.log('updateAuthProcessedStatus, set ', status);
+  //   setAuthProcessed(status);
+  // };
+
+  return (
+    <Provider
+      value={{
+        InitParams,
+        updateQBInitParams,
+        // authProcessed,
+        release,
+        authorize,
+        setSubscribeOnSessionExpiredListener,
+        storage,
+        updateStorage,
+      }}
+    >
+      <ModalContextProvider>{children}</ModalContextProvider>
+    </Provider>
+  );
+}
+
+export default QuickBloxUIKitProvider;

package/src/Presentation/components/providers/QuickBloxUIKitProvider/useEventMessagesRepository.ts

@@ -0,0 +1,10 @@
+import EventMessagesRepository from '../../../../Data/repository/EventMessagesRepository';
+import useQbDataContext from './useQbDataContext';
+
+const useEventMessagesRepository = (): EventMessagesRepository => {
+  const currentQbDataContext = useQbDataContext();
+
+  return currentQbDataContext.storage.EVENT_MESSAGE_REPOSITORY;
+};
+
+export default useEventMessagesRepository;

package/src/Presentation/components/providers/QuickBloxUIKitProvider/useQBConnection.ts

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { qbDataContext } from './QuickBloxUIKitProvider';
+import ConnectionRepository from '../../../../Data/repository/ConnectionRepository';
+
+type QBConnectionInfo = {
+  connectionRepository: ConnectionRepository;
+  browserOnline: boolean;
+};
+const useQBConnection = (): QBConnectionInfo => {
+  const currentQbDataContext = React.useContext(qbDataContext);
+  const [navigatorOnline, setNavigatorOnline] = React.useState(
+    navigator.onLine,
+  );
+
+  useEffect(() => {
+    const setOnline = () => {
+      setNavigatorOnline(true);
+    };
+    const setOffline = () => {
+      setNavigatorOnline(false);
+    };
+
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+
+  return {
+    browserOnline: navigatorOnline,
+    connectionRepository: currentQbDataContext.storage.CONNECTION_REPOSITORY,
+  };
+};
+
+export default useQBConnection;