quickblox-react-ui-kit 0.1.1 → 0.1.2

package/src/Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -1,217 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import useQbDataContext from '../../providers/QuickBloxUIKitProvider/useQbDataContext';
-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 DesktopLayout from './DesktopLayout';
-import MessagesView from '../../UI/Dialogs/MessagesView/MessagesView';
-import useDialogsViewModel from '../../../Views/Dialogs/useDialogsViewModel';
-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';
-import UiKitTheme from '../../../assets/UiKitTheme';
-import BaseViewModel from '../../../Views/Base/BaseViewModel';
-
-type QuickBloxUIKitDesktopLayoutProps = {
-  theme?: UiKitTheme;
-};
-
-const QuickBloxUIKitDesktopLayout: React.FC<
-  QuickBloxUIKitDesktopLayoutProps
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,react/function-component-definition
-> = ({ theme = undefined }: QuickBloxUIKitDesktopLayoutProps) => {
-  console.log('create QuickBloxUIKitDesktopLayout');
-  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?.userName;
-  const userId =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
-
-  const dialogsViewModel: DialogsViewModel =
-    useDialogsViewModel(currentContext);
-
-  const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
-    new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
-
-  /* DATA needed to init MockData
-  const remoteDataSourceMock: RemoteDataSourceMock = currentContext.storage
-    .REMOTE_DATA_SOURCE_MOCK as RemoteDataSourceMock;
-  // 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_MOCK.needInit: ${currentContext.storage.REMOTE_DATA_SOURCE.needInit}`,
-    );
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.REMOTE_DATA_SOURCE_MOCK.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 (
-    <DesktopLayout
-      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 QuickBloxUIKitDesktopLayout;

package/src/Presentation/components/layouts/LayoutCommonTypes.ts

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

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

@@ -1,71 +0,0 @@
-a { text-decoration: none; }
-
-h1 { font-size: 1em; }
-
-h1, p {
-  margin-bottom: 10px;
-}
-
-strong {
-  font-weight: bold;
-}
-
-.uppercase { text-transform: uppercase; }
-
-/* ---------- LOGIN ---------- */
-
-#login {
-  margin: 50px auto;
-  width: 300px;
-}
-
-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: 280px;
-  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: 280px;
-}
-
-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/components/layouts/TestStage/LoginView/Login.tsx

@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-import './Login.scss';
-import { InitParams } from '../../../providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
-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 = useQbDataContext();
-  const [UserName, setUsername] = useState(
-    currentContext.InitParams.loginData?.userName || 'tester',
-  );
-  const [Password, setPassword] = useState('quickblox');
-
-  // 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 = {
-      userName: 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>
-    //   <div>Login data:</div>
-    //   <div>user: anruaav</div>
-    //   <div>password: quickblox</div>
-    //   <button
-    //     onClick={() => {
-    //       console.log('ok');
-    //       const data = {
-    //         userName: 'anruaav',
-    //         password: 'anruaav',
-    //       };
-    //
-    //       if (loginHandler) {
-    //         loginHandler(data);
-    //       }
-    //     }}
-    //     type="button"
-    //   >
-    //     login
-    //   </button>
-    // </div>
-    <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/components/layouts/TestStage/TestStageMarkup.scss

@@ -1,24 +0,0 @@
-$gap-width: 20px;
-$column-count: 4;
-$gap-count: $column-count - 1;
-
-$content-gap-width: 5px;
-
-.container-test-stage{
-  border: 10px solid #6c38cc;
-  display: flex;
-  flex-wrap: wrap;
-  gap: $gap-width;
-  &__item{
-    //border: 1px solid #6c38cc;
-    text-align: center;
-    padding: calc($gap-width / 2);
-    flex: 0 1 calc(100% / $column-count - $gap-width * $gap-count / $column-count);
-  }
-  &--content-wrapper{
-    //border: 10px solid #6c38cc;
-    display: flex;
-    flex-wrap: wrap;
-    gap: $content-gap-width;
-  }
-}