quickblox-react-ui-kit 0.3.0 → 0.3.1-beta.2

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

@@ -59,6 +59,7 @@ import ToastProvider from '../../ui-components/Toast/ToastProvider';
 import CreateNewDialogFlow from '../../Views/Flow/CreateDialogFlow/CreateNewDialogFlow';
 import useModal from '../../../hooks/useModal';
 import useQBConnection from '../../providers/QuickBloxUIKitProvider/useQBConnection';
+import { ProxyConfig } from '../../../CommonTypes/CommonTypes';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
@@ -373,6 +374,8 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 
     if (tmpFileUrl && tmpFileUrl.length > 0) {
       setDialogAvatarUrl(tmpFileUrl);
+    } else {
+      setDialogAvatarUrl('');
     }
   }
 
@@ -703,44 +706,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
         });
     }
   };
-  // // eslint-disable-next-line react/prop-types,@typescript-eslint/no-unused-vars
-  // const defaultGetSenderName: GetUserNameFct = async (props: {
-  //   userId?: number;
-  //   sender?: UserEntity;
-  // }): Promise<string | undefined> => {
-  //   let result = 'undefined user';
-  //
-  //   // eslint-disable-next-line react/prop-types
-  //   if (!props.sender) {
-  //     // eslint-disable-next-line react/prop-types
-  //     if (props.userId && props.userId > 0) {
-  //       // eslint-disable-next-line react/prop-types,@typescript-eslint/no-unsafe-call
-  //       const senderUser = await userViewModel.getUserById(props.userId);
-  //
-  //       if (!senderUser) {
-  //         return result;
-  //       }
-  //       result =
-  //         senderUser.full_name ||
-  //         senderUser.login ||
-  //         senderUser.email ||
-  //         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  //         senderUser.id.toString();
-  //     } else return result;
-  //   } else {
-  //     result =
-  //       // eslint-disable-next-line react/prop-types
-  //       props.sender.full_name ||
-  //       // eslint-disable-next-line react/prop-types
-  //       props.sender.login ||
-  //       // eslint-disable-next-line react/prop-types
-  //       props.sender.email ||
-  //       // eslint-disable-next-line react/prop-types
-  //       props.sender.id.toString();
-  //   }
-  //
-  //   return result;
-  // };
 
   const createDialogHandler = () => {
     if (isOnline) {
@@ -749,7 +714,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   };
 
   useEffect(() => {
-    const codeVersion = '0.3.0';
+    const codeVersion = '0.3.1';
 
     console.log(`React UIKit CODE VERSION IS ${codeVersion}`);
     if (isAuthProcessed()) {
@@ -834,8 +799,8 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   }, [isOnline]);
   useEffect(() => {
-    getDialogPhotoFileForPreview();
     if (dialogsViewModel.entity) {
+      getDialogPhotoFileForPreview().catch();
       userViewModel.entity = dialogsViewModel.entity;
     }
 
@@ -1134,10 +1099,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                             AIAssistWidget={defaultAIAssistWidget}
                             AITranslateWidget={defaultAITranslateWidget}
                             languagesForAITranslate={DefaultConfigurations.getAdditionalLanguagesForAITranslate(
+                              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                               currentContext.InitParams.qbConfig.configAIApi
                                 .AITranslateWidgetConfig,
                             )}
                             defaultTranslationLanguage={DefaultConfigurations.getDefaultLanguageForAITranslate(
+                              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                               currentContext.InitParams.qbConfig.configAIApi
                                 .AITranslateWidgetConfig,
                             )}
@@ -1290,8 +1257,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
           <CreateNewDialogFlow
             dialogsViewModel={dialogsViewModel}
             onCancel={newModal.toggleModal}
-            onFinished={() => {
+            onFinished={(newDialog) => {
               newModal.toggleModal();
+              setSelectedDialog(newDialog);
             }}
             isOnline={isOnline}
           />

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

@@ -1,7 +1,5 @@
 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;
@@ -11,11 +9,9 @@ type LoginProps = {
 };
 // 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 currentContext = useQbInitializedDataContext();
+  const [UserName, setUsername] = useState('');
+  const [Password, setPassword] = useState('');
 
   // const [term, setTerm] = useState('');
 
@@ -36,11 +32,11 @@ const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
 
     if (loginHandler) {
       //
-      const oldData: InitParams = currentContext.InitParams;
-      const newData: InitParams = { ...oldData, loginData: data };
+      // const oldData: InitParams = currentContext.InitParams;
+      // const newData: InitParams = { ...oldData, loginData: data };
 
-      currentContext.updateQBInitParams(newData);
-      //
+      // currentContext.updateQBInitParams(newData);
+      // //
       loginHandler(data);
     }
   };

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

@@ -1,4 +1,6 @@
-import React from 'react';
+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 {
@@ -13,6 +15,7 @@ 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
@@ -50,7 +53,7 @@ type AccountData = {
 export type InitParams = {
   maxFileSize: number;
   accountData: AccountData;
-  qbConfig: QBConfig;
+  qbConfig: QBUIKitConfig;
   loginData?: LoginData;
 };
 
@@ -318,6 +321,31 @@ function QuickBloxUIKitProvider({
   //   setAuthProcessed(status);
   // };
 
+  useEffect(() => {
+    if (!accountData.accountKey || !accountData.appId || !accountData.authKey) {
+      toast(
+        'Please input AppId, AuthKey, AuthSecret, AccountKey to sign in/up',
+      );
+    }
+  }, []);
+
+  if (!accountData.accountKey || !accountData.appId || !accountData.authKey) {
+    return (
+      <>
+        <ToastContainer
+          position="top-center"
+          autoClose={5000}
+          bodyClassName="toast__body"
+          toastClassName="toast"
+          pauseOnHover={false}
+          closeButton={false}
+          hideProgressBar
+        />
+        {children}
+      </>
+    );
+  }
+
   return (
     <Provider
       value={{

package/src/Presentation/ui-components/SettingsItem/SettingsItem.stories.tsx

@@ -67,6 +67,7 @@ const meta: Meta<typeof SettingsItem> = {
       description: 'function onClick for icon',
     },
     children: {
+      control: false,
       table: {
         defaultValue: {
           summary: 'ReactElement | ReactElement[]',

package/src/Presentation/ui-components/TextField/TextField.tsx

@@ -1,7 +1,9 @@
 import {
   DetailedHTMLProps,
+  ForwardedRef,
   InputHTMLAttributes,
   ReactElement,
+  forwardRef,
   useId,
 } from 'react';
 import cn from 'classnames';
@@ -24,55 +26,63 @@ interface TextFieldProps extends Omit<HTMLInputProps, 'onChange'> {
   onChange: (value: string) => void;
 }
 
-export default function TextField({
-  label,
-  icon,
-  loading = false,
-  disabled = false,
-  className,
-  id,
-  value,
-  onChange,
-  ...inputProps
-}: TextFieldProps) {
-  const defaultId = useId();
+const TextField = forwardRef(
+  (
+    {
+      label,
+      icon,
+      loading = false,
+      disabled = false,
+      className,
+      id,
+      value,
+      onChange,
+      ...inputProps
+    }: TextFieldProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const defaultId = useId();
 
-  return (
-    <div
-      className={cn(
-        'text-field',
-        {
-          'text-field--disabled': disabled,
-        },
-        className,
-      )}
-    >
-      {label && (
-        <label htmlFor={id || defaultId} className="text-field__label">
-          {label}
-        </label>
-      )}
-
-      <div className="text-field__wrapper">
-        {icon && <span className="text-field__icon">{icon}</span>}
-        <input
-          {...inputProps}
-          disabled={loading || disabled}
-          className="text-field__input"
-          id={id || defaultId}
-          value={value}
-          onChange={(e) => onChange(e.currentTarget.value)}
-        />
-        {!loading && value && (
-          <RemoveSvg
-            className="text-field__reset"
-            onClick={() => onChange('')}
-          />
+    return (
+      <div
+        className={cn(
+          'text-field',
+          {
+            'text-field--disabled': disabled,
+          },
+          className,
         )}
-        {loading && !disabled && (
-          <Loader size="sm" className="text-field__loader" />
+      >
+        {label && (
+          <label htmlFor={id || defaultId} className="text-field__label">
+            {label}
+          </label>
         )}
+
+        <div className="text-field__wrapper">
+          {icon && <span className="text-field__icon">{icon}</span>}
+          <input
+            {...inputProps}
+            ref={ref}
+            disabled={loading || disabled}
+            className="text-field__input"
+            id={id || defaultId}
+            value={value}
+            onChange={(e) => onChange(e.currentTarget.value)}
+          />
+          {!loading && value && (
+            <RemoveSvg
+              className="text-field__reset"
+              onClick={() => onChange('')}
+            />
+          )}
+          {loading && !disabled && (
+            <Loader size="sm" className="text-field__loader" />
+          )}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+);
+
+export default TextField;

package/src/QBconfig.ts

@@ -1,4 +1,6 @@
-export const QBConfig = {
+import { QBUIKitConfig } from './CommonTypes/CommonTypes';
+
+export const QBConfig: QBUIKitConfig = {
   credentials: {
     appId: -1,
     accountKey: '',
@@ -122,7 +124,7 @@ export const QBConfig = {
     },
   },
   appConfig: {
-    maxFileSize: 10 * 1024 * 1024,
+    maxFileSize: 10485760,
     sessionTimeOut: 122,
     chatProtocol: {
       active: 2,
@@ -135,15 +137,15 @@ export const QBConfig = {
       api: 'api.quickblox.com',
       chat: 'chat.quickblox.com',
     },
-    on: {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
-      async sessionExpired(handleResponse: any, retry: any) {
-        console.log(
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          `QBconfig sessionExpired handle: ${handleResponse} ${retry}`,
-        );
-      },
-    },
+    // on: {
+    //   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
+    //   async sessionExpired(handleResponse: any, retry: any) {
+    //     console.log(
+    //       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    //       `QBconfig sessionExpired handle: ${handleResponse} ${retry}`,
+    //     );
+    //   },
+    // },
     streamManagement: {
       enable: true,
     },

package/src/qb-api-calls/index.ts

@@ -1,12 +1,38 @@
+import QB, {
+  ChatConnectParams,
+  GetMessagesResult,
+  GetUserParams,
+  ListUserParams,
+  ListUserResponse,
+  QBBlob,
+  QBBlobCreateUploadParams,
+  QBChatMessage,
+  QBCustomObject,
+  QBDataDeletedResponse,
+  QBGetDialogResult,
+  QBLoginParams,
+  QBMediaParams,
+  QBMessageStatusParams,
+  QBSession,
+  QBSystemMessage,
+  QBUser,
+  QBUserCreateParams,
+  QBWebRTCSession,
+} from 'quickblox/quickblox';
 import { stringifyError } from '../utils/parse';
-import { QBConfig } from '../CommonTypes/FunctionResult';
+import {
+  QBChatDialogType,
+  QBUIKitChatDialog,
+  QBUIKitChatNewMessage,
+  QBUIKitConfig,
+} from '../CommonTypes/CommonTypes';
 
 export type QBInitParams = {
   appIdOrToken: string | number;
   authKeyOrAppId: string | number;
   authSecret?: string;
   accountKey: string;
-  config?: QBConfig; // todo: change type artan 26.03.24
+  config?: QBUIKitConfig;
 };
 
 export function QBInit(params: QBInitParams) {
@@ -15,7 +41,7 @@ export function QBInit(params: QBInitParams) {
     params.authKeyOrAppId,
     params.authSecret,
     params.accountKey,
-    params.config,
+    params.config?.appConfig,
   );
 }
 
@@ -298,7 +324,7 @@ export function QBCreatePrivateDialog(
     }`,
   );
 
-  return new Promise<QBChatDialog>((resolve, reject) => {
+  return new Promise<QBUIKitChatDialog>((resolve, reject) => {
     QB.chat.dialog.create(
       { name: dialogName || '-', occupants_ids: [userId], type: 3, data },
       (error, chat) => {
@@ -339,7 +365,7 @@ export function QBCreateGroupDialog(
     };
   }
 
-  return new Promise<QBChatDialog>((resolve, reject) => {
+  return new Promise<QBUIKitChatDialog>((resolve, reject) => {
     QB.chat.dialog.create(
       // {
       //   name: dialogName || '-',
@@ -360,10 +386,10 @@ export function QBCreateGroupDialog(
 }
 
 export function QBUpdateDialog(
-  dialogId: QBChatDialog['_id'],
+  dialogId: QBUIKitChatDialog['_id'],
   data: Dictionary<unknown>,
 ) {
-  return new Promise<QBChatDialog>((resolve, reject) => {
+  return new Promise<QBUIKitChatDialog>((resolve, reject) => {
     QB.chat.dialog.update(dialogId, data, (error, chat) => {
       if (error) {
         reject(stringifyError(error));
@@ -374,7 +400,7 @@ export function QBUpdateDialog(
   });
 }
 
-export function QBJoinGroupDialog(dialogId: QBChatDialog['_id']) {
+export function QBJoinGroupDialog(dialogId: QBUIKitChatDialog['_id']) {
   return new Promise((resolve, reject) => {
     const dialogJid = QB.chat.helpers.getRoomJidFromDialogId(dialogId);
 
@@ -388,7 +414,7 @@ export function QBJoinGroupDialog(dialogId: QBChatDialog['_id']) {
   });
 }
 
-export function QBDeleteDialog(dialogIds: Array<QBChatDialog['_id']>) {
+export function QBDeleteDialog(dialogIds: Array<QBUIKitChatDialog['_id']>) {
   return new Promise<void>((resolve, reject) => {
     QB.chat.dialog.delete(dialogIds, (error) => {
       if (error) {
@@ -400,7 +426,7 @@ export function QBDeleteDialog(dialogIds: Array<QBChatDialog['_id']>) {
   });
 }
 
-export function QBLeaveDialog(dialogId: QBChatDialog['_id']) {
+export function QBLeaveDialog(dialogId: QBUIKitChatDialog['_id']) {
   return new Promise((resolve, reject) => {
     const dialogJid = QB.chat.helpers.getRoomJidFromDialogId(dialogId);
 
@@ -481,7 +507,7 @@ export function QBCreateAndUploadContent(
 // //
 
 export function qbChatGetMessagesExtended(
-  dialogId: QBChatDialog['_id'],
+  dialogId: QBUIKitChatDialog['_id'],
   params: Partial<{
     skip: number;
     limit: number;
@@ -516,7 +542,7 @@ export function qbChatGetMessagesExtended(
 }
 //
 export function QBSendIsTypingStatus(
-  dialog: QBChatDialog,
+  dialog: QBUIKitChatDialog,
   senderId: QBUser['id'],
 ) {
   const isPrivate: QBChatDialogType = 3;
@@ -534,7 +560,7 @@ export function QBSendIsTypingStatus(
   }
 }
 export function QBSendIsStopTypingStatus(
-  dialog: QBChatDialog,
+  dialog: QBUIKitChatDialog,
   senderId: QBUser['id'],
 ) {
   const isPrivate: QBChatDialogType = 3;
@@ -555,7 +581,7 @@ export function QBSendIsStopTypingStatus(
 
 export function QBChatSendMessage(
   to: string | number, // artan 22.06.23
-  message: QBChatNewMessage,
+  message: QBUIKitChatNewMessage,
 ) {
   return new Promise<QBChatMessage['_id']>((resolve) => {
     resolve(QB.chat.send(to, message));
@@ -575,6 +601,10 @@ export function QBChatMarkMessageRead(params: QBMessageStatusParams) {
   QB.chat.sendReadStatus(params);
 }
 
+export function QBChatMarkMessageDelivered(params: QBMessageStatusParams) {
+  QB.chat.sendDeliveredStatus(params);
+}
+
 export function QBWebRTCSessionGetUserMedia(
   session: QBWebRTCSession,
   params: QBMediaParams,

package/src/utils/formatFileSize.ts

@@ -0,0 +1,8 @@
+export const formatFileSize = (size: number) => {
+  const units = ['B', 'kB', 'MB', 'GB', 'TB'];
+  const currentUnitIndex = Math.floor(Math.log(size) / Math.log(1024));
+
+  return `${Math.round(size / 1024 ** currentUnitIndex)} ${
+    units[currentUnitIndex]
+  }`;
+};

package/src/utils/parse.ts

@@ -1,3 +1,5 @@
+import { QBError } from 'quickblox/quickblox';
+
 export const jsonParse = <P>(text: string): P | string => {
   try {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment