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

package/src/Presentation/layouts/LayoutCommonTypes.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export type ContainerProps = {
+  children?: React.ReactNode;
+  gapBetweenItem?: string;
+  maxWidth?: string;
+};

package/src/Presentation/layouts/TestStage/CompanyLogo/CompanyLogo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// eslint-disable-next-line react/function-component-definition
+const CompanyLogo: React.FC = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '322px',
+        height: '42px',
+        border: '1px solid #333',
+      }}
+    >
+      <img
+        src="../../../assets/img/bee-img.png"
+        alt="Company Logo"
+        style={{ width: '100px', height: 'auto', marginRight: '10px' }}
+      />
+      <span style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>
+        Your Company Name
+      </span>
+    </div>
+  );
+};
+
+export default CompanyLogo;

package/src/Presentation/layouts/TestStage/LoginView/Login.scss

@@ -0,0 +1,72 @@
+a { text-decoration: none; }
+
+h1 { font-size: 1em; }
+
+h1, p {
+  margin-bottom: 10px;
+}
+
+strong {
+  font-weight: bold;
+}
+
+.uppercase { text-transform: uppercase; }
+
+/* ---------- LOGIN ---------- */
+
+#login {
+  border: 3px solid #6c38cc;
+  margin: 50px auto;
+  width: 100%;
+}
+
+form fieldset input[type="text"],
+input[type="password"] {
+  appearance: none;
+  background: #e5e5e5;
+  border: none;
+  border-radius: 3px;
+  color: #5a5656;
+  font-family: inherit;
+  font-size: 14px;
+  height: 50px;
+  outline: none;
+  padding: 0px 10px;
+  width: 100%;
+  border: 1px solid #008dde;
+  margin: 1px;
+}
+
+form fieldset button[type="submit"] {
+  appearance: none;
+  background-color: #008dde;
+  border: none;
+  border-radius: 3px;
+  color: #f4f4f4;
+  cursor: pointer;
+  font-family: inherit;
+  height: 50px;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+form fieldset a {
+  color: #5a5656;
+  font-size: 10px;
+}
+
+form fieldset a:hover { text-decoration: underline; }
+
+.btn-round {
+  background: #5a5656;
+  border-radius: 50%;
+  color: #f4f4f4;
+  display: block;
+  font-size: 12px;
+  height: 50px;
+  line-height: 50px;
+  margin: 30px 125px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 50px;
+}

package/src/Presentation/layouts/TestStage/LoginView/Login.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import './Login.scss';
+import { LoginData } from '../../../../Data/source/remote/RemoteDataSource';
+
+export type FunctionTypeLoginDataToVoid = (data: LoginData) => void;
+
+type LoginProps = {
+  loginHandler?: FunctionTypeLoginDataToVoid;
+};
+// eslint-disable-next-line react/function-component-definition
+const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
+  // const currentContext = useQbInitializedDataContext();
+  const [UserName, setUsername] = useState('');
+  const [Password, setPassword] = useState('');
+
+  // const [term, setTerm] = useState('');
+
+  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
+    // Preventing the page from reloading
+    event.preventDefault();
+
+    // Do something
+    // alert(username);
+    console.log('submit actions perform');
+
+    const data: LoginData = {
+      login: UserName,
+      password: Password,
+    };
+
+    console.log('data: ', data);
+
+    if (loginHandler) {
+      //
+      // const oldData: InitParams = currentContext.InitParams;
+      // const newData: InitParams = { ...oldData, loginData: data };
+
+      // currentContext.updateQBInitParams(newData);
+      // //
+      loginHandler(data);
+    }
+  };
+
+  return (
+    <div id="login">
+      <h1>Please login.</h1>
+
+      <form onSubmit={submitForm}>
+        <fieldset>
+          <p>
+            <input
+              type="text"
+              required
+              placeholder="Username"
+              value={UserName}
+              onChange={(event) => setUsername(event.target.value)}
+            />
+          </p>
+
+          <p>
+            <input
+              type="password"
+              required
+              placeholder="Password"
+              value={Password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </p>
+
+          <button type="submit">Submit</button>
+        </fieldset>
+      </form>
+    </div>
+    // <div className="container">
+    //   <form onSubmit={submitForm}>
+    //     <input
+    //       value={term}
+    //       onChange={(e) => setTerm(e.target.value)}
+    //       type="text"
+    //       placeholder="Enter a term"
+    //       className="input"
+    //     />
+    //     <button type="submit" className="btn">
+    //       Submit
+    //     </button>
+    //   </form>
+    // </div>
+  );
+};
+
+export default Login;

package/src/Presentation/providers/ProviderProps.ts

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

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

@@ -0,0 +1,375 @@
+import React, { useEffect } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { ProviderProps } from '../ProviderProps';
+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 ConnectionRepository from '../../../Data/repository/ConnectionRepository';
+import EventMessagesRepository from '../../../Data/repository/EventMessagesRepository';
+import { CallBackFunction } from '../../../Domain/use_cases/base/IUseCase';
+import { DefaultConfigurations } from '../../../Data/DefaultConfigurations';
+import { QBUIKitConfig } from '../../../CommonTypes/CommonTypes';
+
+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;
+};
+
+export type InitParams = {
+  maxFileSize: number;
+  accountData: AccountData;
+  qbConfig: QBUIKitConfig;
+  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: DefaultConfigurations.getDefaultQBConfig().credentials,
+    maxFileSize:
+      DefaultConfigurations.getDefaultQBConfig().appConfig.maxFileSize,
+    qbConfig: DefaultConfigurations.getDefaultQBConfig(),
+  },
+  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,
+    qbConfig,
+  });
+
+  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 apiKeyOrSessionToken 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);
+  // };
+
+  useEffect(() => {
+    if (
+      !accountData.accountKey ||
+      !accountData.appId ||
+      (!accountData.authKey && !accountData.sessionToken)
+    ) {
+      toast(
+        'Please input AppId, AuthKey, AuthSecret, AccountKey to sign in/up',
+      );
+    }
+  }, []);
+
+  if (
+    !accountData.accountKey ||
+    !accountData.appId ||
+    (!accountData.authKey && !accountData.sessionToken)
+  ) {
+    return (
+      <>
+        <ToastContainer
+          position="top-center"
+          autoClose={5000}
+          bodyClassName="toast__body"
+          toastClassName="toast"
+          pauseOnHover={false}
+          closeButton={false}
+          hideProgressBar
+        />
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <Provider
+      value={{
+        InitParams,
+        updateQBInitParams,
+        // authProcessed,
+        release,
+        authorize,
+        setSubscribeOnSessionExpiredListener,
+        storage,
+        updateStorage,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+}
+
+export default QuickBloxUIKitProvider;

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

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

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

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { qbDataContext } from './QuickBloxUIKitProvider';
+import ConnectionRepository from '../../../Data/repository/ConnectionRepository';
+
+type QBConnectionInfo = {
+  connectionRepository: ConnectionRepository;
+  browserOnline: boolean;
+  connectionStatus: boolean;
+};
+const useQBConnection = (): QBConnectionInfo => {
+  const currentQbDataContext = React.useContext(qbDataContext);
+  const [navigatorOnline, setNavigatorOnline] = React.useState(
+    navigator.onLine,
+  );
+  const [connectStatus, setConnectStatus] = React.useState(
+    currentQbDataContext.storage.CONNECTION_REPOSITORY.isChatConnected(),
+  );
+
+  currentQbDataContext.storage.CONNECTION_REPOSITORY.subscribe((status) => {
+    console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
+    if (status) setConnectStatus(true);
+    else setConnectStatus(false);
+  });
+  useEffect(() => {
+    const setOnline = () => {
+      setNavigatorOnline(true);
+      setConnectStatus(
+        currentQbDataContext.storage.CONNECTION_REPOSITORY.isChatConnected(),
+      );
+    };
+    const setOffline = () => {
+      setNavigatorOnline(false);
+      setConnectStatus(
+        currentQbDataContext.storage.CONNECTION_REPOSITORY.isChatConnected(),
+      );
+    };
+
+    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,
+    connectionStatus: connectStatus,
+  };
+};
+
+export default useQBConnection;