quickblox-react-ui-kit 0.1.6 → 0.1.7

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

@@ -0,0 +1,234 @@
+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 selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
+    if (!dialogsViewModel.loading) {
+      setSelectedDialog(item);
+    }
+  };
+
+  // const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
+  //   new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
+
+  // инициализация СДК и загрузка тестовых данных, запуск пинга - может не быть
+  // 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 QuickBloxUIKitDesktopLayout');
+  //   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));
+      //   });
+      // //
+      // console.log('subscribe is completed, go');
+    }
+  }, [currentContext.InitParams]);
+
+  useEffect(() => {
+    console.log(
+      `TestStage: selectedDialog: ${
+        selectedDialog?.entity?.name || 'Dialog Name is empty'
+      }`,
+    );
+    if (selectedDialog && selectedDialog.entity) {
+      dialogsViewModel.entity = selectedDialog.entity;
+    }
+  }, [selectedDialog]);
+
+  useEffect(() => {
+    console.log(
+      `Clear selected dialog: ${
+        selectedDialog?.entity?.name || 'Dialog Name is empty'
+      }`,
+    );
+    if (!dialogsViewModel.entity) {
+      setSelectedDialog(undefined);
+    }
+  }, [dialogsViewModel.entity]);
+
+  const [needDialogInformation, setNeedDialogInformation] = useState(true);
+  const informationCloseHandler = (): void => {
+    setNeedDialogInformation(false);
+  };
+  const informationOpenHandler = (): void => {
+    setNeedDialogInformation(true);
+  };
+
+  return (
+    <DesktopLayout
+      theme={theme}
+      dialogsView={
+        <DialogsComponent
+          dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
+          itemSelectHandler={selectDialogActions}
+          additionalSettings={{
+            withoutHeader: false,
+            themeHeader: theme,
+            themePreview: theme,
+          }}
+        />
+      }
+      dialogMessagesView={
+        selectedDialog && selectedDialog.entity && dialogsViewModel.entity ? (
+          <MessagesView
+            dialogsViewModel={dialogsViewModel}
+            InformationHandler={informationOpenHandler}
+            maxWidthToResize={
+              selectedDialog && needDialogInformation ? undefined : '1040px'
+            }
+            theme={theme}
+          /> // 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}
+              theme={theme}
+            />
+          )}
+        </div>
+      }
+    />
+  );
+};
+
+export default QuickBloxUIKitDesktopLayout;

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

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

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

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

@@ -0,0 +1,95 @@
+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?.login || '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 = {
+      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/components/layouts/TestStage/TestStageMarkup.scss

@@ -0,0 +1,24 @@
+$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;
+  }
+}