quickblox-react-ui-kit 0.1.0 → 0.1.1

package/src/Presentation/components/UI/Dialogs/MessagesView/{useMessagesViewModelWithMockUseCase.ts → useMessagesViewModel.ts}

@@ -28,11 +28,11 @@ import ChatMessageAttachmentEntity from '../../../../../Domain/entity/ChatMessag
 import { UserTypingMessageUseCase } from '../../../../../Domain/use_cases/UserTypingMessageUseCase';
 import { DialogEventInfo } from '../../../../../Domain/entity/DialogEventInfo';
 
-export default function useMessagesViewModelWithMockUseCase(
+export default function useMessagesViewModel(
   dialogType: DialogType,
   dialogEntity: DialogEntity,
 ): MessagesViewModel {
-  console.log('useMessagesViewModelWithMockUseCase');
+  console.log('useMessagesViewModel');
   const [loading, setLoading] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [error, setError] = useState('error: wrong message list');
@@ -50,9 +50,7 @@ export default function useMessagesViewModelWithMockUseCase(
 
   const [typingText, setTypingText] = useState<string>('');
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
-    console.log(
-      'call dialogUpdateHandler in useMessagesViewModelWithMockUseCase',
-    );
+    console.log('call dialogUpdateHandler in useMessagesViewModel');
     const getSender = async (sender_id: number) => {
       const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
         new UsersRepository(
@@ -338,7 +336,7 @@ export default function useMessagesViewModelWithMockUseCase(
         const errorMessage = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useMessagesViewModelWithMockUseCase',
+          'exception in sendMessage in useMessagesViewModel',
           errorMessage,
         );
         setLoading(false);

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialog.tsx

@@ -13,7 +13,7 @@ import RowLeftContainer from '../../../containers/RowLeftContainer/RowLeftContai
 import PreviewDialogViewModel from './PreviewDialogViewModel';
 import NotifyOff from '../../svgs/Icons/Toggle/NotifyOff';
 import EditDots from '../../svgs/Icons/Actions/EditDots';
-import Theme from '../../../../assets/Theme';
+import UiKitTheme from '../../../../assets/UiKitTheme';
 
 export type ThemeNames = 'light' | 'dark' | 'custom';
 type PreviewDialogsColorTheme = {
@@ -26,7 +26,7 @@ type PreviewDialogsColorTheme = {
 };
 type PreviewDialogsTheme = {
   themeName?: ThemeNames;
-  colorTheme?: Theme;
+  colorTheme?: UiKitTheme;
   selected: boolean;
   muted: boolean;
 };

package/src/Presentation/components/layouts/Desktop/{DesktopLayoutForMockModels.tsx → DesktopLayout.tsx}

@@ -6,7 +6,7 @@ type LayoutItems = {
   dialogMessagesView: React.ReactNode;
   dialogInfoView: React.ReactNode;
 };
-function DesktopLayoutForMockModels({
+function DesktopLayout({
   dialogsView,
   dialogMessagesView,
   dialogInfoView,
@@ -28,4 +28,4 @@ function DesktopLayoutForMockModels({
   );
 }
 
-export default DesktopLayoutForMockModels;
+export default DesktopLayout;

package/src/Presentation/components/layouts/{TestStage/TestStageWithMockData/TestStageWithMockData.tsx → Desktop/QuickBloxUIKitDesktopLayout.tsx}

@@ -1,23 +1,31 @@
 import React, { useEffect, useState } from 'react';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
-import BaseViewModel from '../../../../Views/Base/BaseViewModel';
-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 DesktopLayoutForMockModels from '../../Desktop/DesktopLayoutForMockModels';
-import MessagesView from '../../../UI/Dialogs/MessagesView/MessagesView';
-import useDialogsViewModelWithMockUseCase from '../../../../Views/Dialogs/useDialogsViewModelWithMockUseCase';
-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';
-
-function TestStageWithMockData() {
-  console.log('create TestStageWithMockData');
+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>>();
 
@@ -25,20 +33,20 @@ function TestStageWithMockData() {
   const eventMessaging = useEventMessagesRepository();
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const { userName } =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation;
+  const userName =
+    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
   const userId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
 
   const dialogsViewModel: DialogsViewModel =
-    useDialogsViewModelWithMockUseCase(currentContext);
+    useDialogsViewModel(currentContext);
 
   const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
     new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
 
   /* DATA needed to init MockData
-  const remoteDataSourceMock: RemoteDataSource = currentContext.storage
-    .REMOTE_DATA_SOURCE as RemoteDataSource;
+  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;
@@ -55,11 +63,11 @@ function TestStageWithMockData() {
 
     console.log(
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.REMOTE_DATA_SOURCE.needInit: ${currentContext.storage.REMOTE_DATA_SOURCE.needInit}`,
+      `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.authProcessed: ${currentContext.storage.REMOTE_DATA_SOURCE.authProcessed}`,
+      `initialValue.REMOTE_DATA_SOURCE_MOCK.authProcessed: ${currentContext.storage.REMOTE_DATA_SOURCE.authProcessed}`,
     );
 
     console.log(
@@ -159,7 +167,7 @@ function TestStageWithMockData() {
   };
 
   return (
-    <DesktopLayoutForMockModels
+    <DesktopLayout
       dialogsView={
         <DialogsComponent
           dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
@@ -204,6 +212,6 @@ function TestStageWithMockData() {
       }
     />
   );
-}
+};
 
-export default TestStageWithMockData;
+export default QuickBloxUIKitDesktopLayout;

package/src/Presentation/components/layouts/TestStage/TestStageMarkup.tsx

@@ -200,7 +200,7 @@ function TestStageMarkup() {
   );
 
   function changeThemeActions() {
-    console.log('Theme has changed.');
+    console.log('UiKitTheme has changed.');
     setThemeName(document.documentElement.getAttribute('data-theme'));
     setDialogsList(dialogs);
   }

package/src/QBconfig.ts

@@ -1,11 +1,3 @@
-/*
-const configApp = {
-    APPLICATION_ID: 75949,+
-    AUTH_KEY: "DdS7zxMEm5Q7DaS",
-    AUTH_SECRET: "g88RhdOjnDOqFkv",+
-    ACCOUNT_KEY: "uK_8uinNyz8-npTNB6tx",+
-};
- */
 export const QBConfig = {
   credentials: {
     appId: 0,

package/src/index-ui.ts

@@ -2,8 +2,6 @@ import './index.scss';
 import MainButton, {
   TypeButton,
 } from './Presentation/components/UI/Buttons/MainButton/MainButton';
-import MyButton from './MyButton/MyButton';
-import MyInput from './MyInput/MyInput';
 import QuickBloxUIKitProvider, {
   qbDataContext,
 } from './Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
@@ -12,14 +10,14 @@ import useQBConnection from './Presentation/components/providers/QuickBloxUIKitP
 import useQbDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbDataContext';
 import useEventMessagesRepository from './Presentation/components/providers/QuickBloxUIKitProvider/useEventMessagesRepository';
 import { DialogsViewModel } from './Presentation/Views/Dialogs/DialogViewModel';
-import useDialogsViewModelWithMockUseCase from './Presentation/Views/Dialogs/useDialogsViewModelWithMockUseCase';
+import useDialogsViewModel from './Presentation/Views/Dialogs/useDialogsViewModel';
 import { SubscribeToDialogEventsUseCase } from './Domain/use_cases/SubscribeToDialogEventsUseCase';
 import { Pagination } from './Domain/repository/Pagination';
 import { DialogEventInfo } from './Domain/entity/DialogEventInfo';
 import EventMessageType from './Domain/entity/EventMessageType';
 import { NotificationTypes } from './Domain/entity/NotificationTypes';
 import { stringifyError } from './utils/parse';
-import DesktopLayoutForMockModels from './Presentation/components/layouts/Desktop/DesktopLayoutForMockModels';
+import DesktopLayout from './Presentation/components/layouts/Desktop/DesktopLayout';
 import DialogsComponent from './Presentation/Views/Dialogs/Dialogs';
 import MessagesView from './Presentation/components/UI/Dialogs/MessagesView/MessagesView';
 import DialogInformation from './Presentation/components/UI/Dialogs/DialogInformation/DialogInformation';
@@ -29,11 +27,10 @@ import {
   LoginData,
   RemoteDataSource,
 } from './Data/source/remote/RemoteDataSource';
+import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout';
 
 export {
   MainButton,
-  MyButton,
-  MyInput,
   TypeButton,
   type LoginData,
   QuickBloxUIKitProvider,
@@ -44,17 +41,18 @@ export {
   useQbDataContext,
   useEventMessagesRepository,
   type DialogsViewModel,
-  useDialogsViewModelWithMockUseCase,
+  useDialogsViewModel,
   SubscribeToDialogEventsUseCase,
   Pagination,
   type DialogEventInfo,
   EventMessageType,
   NotificationTypes,
   stringifyError,
-  DesktopLayoutForMockModels,
+  DesktopLayout,
   DialogsComponent,
   MessagesView,
   DialogInformation,
   type DialogEntity,
   BaseViewModel,
+  QuickBloxUIKitDesktopLayout,
 };

package/dist/MyButton/MyButton.d.ts

@@ -1,9 +0,0 @@
-import React, { FC } from "react";
-import './MyButton.scss';
-export interface MyButtonProps {
-    children?: React.ReactNode;
-    color: string;
-    big: boolean;
-}
-declare const MyButton: FC<MyButtonProps>;
-export default MyButton;

package/dist/MyInput/MyInput.d.ts

@@ -1,10 +0,0 @@
-import React, { FC } from "react";
-import './MyInput.scss';
-export interface MyInputProps {
-    children?: React.ReactNode;
-    placeholer: string;
-    label: string;
-    big: boolean;
-}
-declare const MyInput: FC<MyInputProps>;
-export default MyInput;

package/dist/Presentation/Views/Dialogs/useDialogsViewModelWithMockUseCase.d.ts

@@ -1,4 +0,0 @@
-import { QBDataContextType } from '../../components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
-import { Pagination } from '../../../Domain/repository/Pagination';
-import { DialogsViewModel } from './DialogViewModel';
-export default function useDialogsViewModelWithMockUseCase(currentContext: QBDataContextType, initPagination?: Pagination): DialogsViewModel;

package/dist/Presentation/components/layouts/Desktop/Desktop.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import './DesktopLayout.scss';
-declare function Desktop(): JSX.Element;
-export default Desktop;

package/dist/Presentation/components/layouts/TestStage/TestStageWithMockData/TestStageWithMockData.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function TestStageWithMockData(): JSX.Element;
-export default TestStageWithMockData;

package/src/MyButton/MyButton.scss

@@ -1,11 +0,0 @@
-.my-button {
-    padding: 10px 5px;
-    color: black;
-    border: 1px solid black;
-    background: transparent;
-}
-
-.big-btn {
-    font-size: 30px;
-    padding: 20px;
-}

package/src/MyButton/MyButton.tsx

@@ -1,25 +0,0 @@
-import React, {FC} from "react";
-import './MyButton.scss';
-
-export interface MyButtonProps {
-    children?: React.ReactNode
-    color: string;
-    big: boolean;
-}
-const MyButton: FC<MyButtonProps> = ({
-                                         children,
-                                         color,
-                                         big,
-                                         ...props}) => {
-    const rootClasses = ['my-button'];
-    if (big) {
-        rootClasses.push('big-btn')
-    }
-    return(
-        <button {...props} className={rootClasses.join(' ')} style={{color}}>
-            {children}
-        </button>
-    );
-};
-
-export default MyButton;

package/src/MyInput/MyInput.scss

@@ -1,9 +0,0 @@
-.my-input {
-    padding: 10px 5px;
-    border: 10px solid cornflowerblue;
-}
-
-.big-input {
-    font-size: 30px;
-    padding: 20px;
-}

package/src/MyInput/MyInput.tsx

@@ -1,36 +0,0 @@
-import React, {FC} from "react";
-import './MyInput.scss';
-
-export interface MyInputProps {
-    children?: React.ReactNode;
-    placeholer: string;
-    label: string;
-    big: boolean;
-}
-const MyInput: FC<MyInputProps> = ({
-    children,
-    placeholer,
-    label,
-    big,
-    ...props
-                                   }) => {
-    const rootClasses = ['my-input'];
-    if (big) {
-        rootClasses.push('big-input')
-    }
-
-    return(
-        <div>
-            <label>
-                {label}
-                <input className={rootClasses.join(' ')}
-                       placeholder={placeholer} {...props} />
-            </label>
-            <div className="name">*important data</div>
-        </div>
-
-
-    );
-}
-
-export default MyInput;