quickblox-react-ui-kit 0.1.6 → 0.1.8

package/src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+import cn from 'classnames';
+
+import './ScrollableContainer.scss';
+
+interface FlatListProps<T> {
+  className?: string;
+  data: Array<T>;
+  ListEmptyComponent?: React.ComponentClass | React.FunctionComponent;
+  onEndReached?: VoidFunction;
+  onEndReachedThreshold?: number;
+  refreshing?: boolean;
+  autoScrollToBottom?: boolean;
+  renderItem: (item: T, index: number) => React.ReactElement | null;
+}
+
+export default function ScrollableContainer<T>(props: FlatListProps<T>) {
+  const {
+    className,
+    data,
+    ListEmptyComponent,
+    onEndReached,
+    onEndReachedThreshold,
+    refreshing,
+    autoScrollToBottom,
+    renderItem,
+  } = props;
+
+  const container = useRef<HTMLDivElement>(null);
+
+  const scrollHandler = () => {
+    console.log('call scrollHandler');
+    if (container.current) {
+      const { scrollHeight, clientHeight, scrollTop } = container.current;
+      const scrollOffset = (scrollTop + clientHeight) / scrollHeight;
+      let endReached = false;
+
+      if (typeof onEndReachedThreshold === 'number') {
+        if (scrollOffset >= onEndReachedThreshold) {
+          endReached = true;
+        }
+      } else if (scrollOffset >= 0.99) {
+        endReached = true;
+      }
+
+      if (endReached && onEndReached) {
+        onEndReached();
+      }
+    }
+  };
+  const messageEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    console.log('call scrollToBottom start');
+    if (autoScrollToBottom)
+      messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    console.log('useEffect []');
+    if (autoScrollToBottom) scrollToBottom();
+  }, []);
+
+  useEffect(() => {
+    console.log('useEffect messages');
+    if (autoScrollToBottom) scrollToBottom();
+  }, [data.length]);
+  console.log('çount items to scroll:', data.length);
+  console.log('data to scrolling: ', JSON.stringify(data));
+
+  return (
+    <div className={cn('list', className)}>
+      {refreshing && <div>loading...</div>}
+      {data && data.length ? (
+        <div className="list-content" onScroll={scrollHandler} ref={container}>
+          {/* {data.map(renderItem)} */}
+          {data.map((it, index) => renderItem(it, index))}
+          <div style={{ float: 'left', clear: 'both' }} ref={messageEndRef} />
+        </div>
+      ) : (
+        !refreshing && ListEmptyComponent && <ListEmptyComponent />
+      )}
+    </div>
+  );
+}

package/src/Presentation/components/layouts/Desktop/DesktopLayout.scss

@@ -0,0 +1,31 @@
+$desktop-main-container-max-width: 1360px;
+$desktop-main-container-min-height: 800px;
+$desktop-main-container-item-width: 320px;
+$desktop-main-container-item-center-width: 720px;
+// $desktop-main-container-item-center-width: 1040px;
+
+.desktop-layout-main-container{
+  // border: 10px solid #6c38cc;
+  min-height: $desktop-main-container-min-height;
+  max-width: $desktop-main-container-max-width;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 0 auto;
+
+  &__item-left {
+    border-bottom: 1px solid var(--divider);
+    flex: 1 1 $desktop-main-container-item-width;
+    max-width: $desktop-main-container-item-width
+  }
+  &__item-right {
+    border: 1px solid  var(--divider);
+    flex: 1 1 $desktop-main-container-item-width;
+    max-width: $desktop-main-container-item-width
+  }
+  &__item-center {
+    border: 1px solid  var(--divider);
+    flex: 3 2 $desktop-main-container-item-center-width;
+  }
+}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import './DesktopLayout.scss';
+import UiKitTheme from '../../../assets/UiKitTheme';
+
+type LayoutItems = {
+  dialogsView: React.ReactNode;
+  dialogMessagesView: React.ReactNode;
+  dialogInfoView: React.ReactNode;
+  theme?: UiKitTheme;
+};
+function DesktopLayout({
+  dialogsView,
+  dialogMessagesView,
+  dialogInfoView,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme = undefined,
+}: LayoutItems) {
+  const mainContainerStyles = theme
+    ? {
+        color: theme.mainText(),
+        backgroundColor: theme.mainBackground(),
+        border: `1px solid ${theme.divider()}`,
+      }
+    : {};
+
+  return (
+    <div style={mainContainerStyles} className="desktop-layout-main-container">
+      <div
+        style={mainContainerStyles}
+        className="desktop-layout-main-container__item-left"
+      >
+        {dialogsView}
+      </div>
+      <div
+        style={mainContainerStyles}
+        className="desktop-layout-main-container__item-center"
+      >
+        {dialogMessagesView}
+      </div>
+      {dialogInfoView && (
+        <div
+          style={mainContainerStyles}
+          className="desktop-layout-main-container__item-right"
+        >
+          {dialogInfoView}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DesktopLayout;

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

@@ -0,0 +1,277 @@
+import React, { useEffect, useState } from 'react';
+// import { Configuration, OpenAIApi } from 'openai';
+import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+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';
+// import { InputWidget } from '../../UI/Dialogs/MessagesView/InputWidget/InputWidget';
+// import useDefaultTextInputWidget from '../../UI/Dialogs/MessagesView/InputWidget/UseDefaultTextInputWidget';
+// import useDefaultVoiceInputWidget from '../../UI/Dialogs/MessagesView/InputWidget/useDefaultVoiceInputWidget';
+// import UseDefaultIncomingMessageWidget from '../../UI/Dialogs/MessagesView/InputWidget/UseDefaultIncomingMessageWidget';
+// import CompanyLogo from '../TestStage/CompanyLogo/CompanyLogo';
+
+type QuickBloxUIKitDesktopLayoutProps = {
+  theme?: UiKitTheme;
+  // InputWidgetToLeftPlaceHolder?: InputWidget;
+  // InputWidgetToRightPlaceHolder?: InputWidget;
+  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
+};
+
+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 = useQbInitializedDataContext();
+  // 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);
+
+  // let defaultLeftPlaceHolderInputWidget = InputWidgetToLeftPlaceHolder; // useDefaultTextInputWidget();
+  //
+  // if (!defaultLeftPlaceHolderInputWidget) {
+  //   defaultLeftPlaceHolderInputWidget = useDefaultTextInputWidget();
+  // }
+  // const defaultRightPlaceHolderInputWidget =
+  //   InputWidgetToRightPlaceHolder || useDefaultVoiceInputWidget();
+  // let defaultIncomingMessageWidget = IncomingMessageWidgetToRightPlaceHolder;
+  //
+  // if (!defaultIncomingMessageWidget) {
+  //   const apiKey = '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'; // Замените на ваш реальный ключ API
+  //
+  //   const openAIConfiguration = new Configuration({
+  //     apiKey,
+  //   });
+  //
+  //   const openAIApi = new OpenAIApi(openAIConfiguration);
+  //
+  //   defaultIncomingMessageWidget = UseDefaultIncomingMessageWidget({
+  //     openAIApi,
+  //   });
+  // }
+
+  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
+          // subHeaderContent={<CompanyLogo />}
+          // upHeaderContent={<CompanyLogo />}
+          dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
+          onDialogSelectHandler={selectDialogActions}
+          additionalSettings={{
+            withoutHeader: false,
+            themeHeader: theme,
+            themePreview: theme,
+            useSubHeader: false,
+            useUpHeader: false,
+          }}
+        />
+      }
+      dialogMessagesView={
+        selectedDialog && selectedDialog.entity && dialogsViewModel.entity ? (
+          <MessagesView
+            // subHeaderContent={<CompanyLogo />}
+            // upHeaderContent={<CompanyLogo />}
+            dialogsViewModel={dialogsViewModel}
+            onDialogInformationHandler={informationOpenHandler}
+            maxWidthToResize={
+              selectedDialog && needDialogInformation ? undefined : '1040px'
+            }
+            // InputWidgetToLeftPlaceHolder={defaultLeftPlaceHolderInputWidget}
+            // InputWidgetToRightPlaceHolder={defaultRightPlaceHolderInputWidget}
+            // IncomingMessageWidgetToRightPlaceHolder={
+            //   defaultIncomingMessageWidget
+            // }
+            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
+              // subHeaderContent={<CompanyLogo />}
+              // upHeaderContent={<CompanyLogo />}
+              dialog={selectedDialog.entity}
+              dialogViewModel={dialogsViewModel}
+              onCloseDialogInformationHandler={informationCloseHandler}
+            />
+          )}
+        </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/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="../../../../../../src/Presentation/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/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 useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+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(
+    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;
+  }
+}