quickblox-react-ui-kit 0.3.0-beta.3 → 0.3.0

package/src/Presentation/providers/QuickBloxUIKitProvider/useQBConnection.ts

@@ -5,19 +5,34 @@ import ConnectionRepository from '../../../Data/repository/ConnectionRepository'
 type QBConnectionInfo = {
   connectionRepository: ConnectionRepository;
   browserOnline: boolean;
+  connectionStatus: boolean;
 };
 const useQBConnection = (): QBConnectionInfo => {
   const currentQbDataContext = React.useContext(qbDataContext);
   const [navigatorOnline, setNavigatorOnline] = React.useState(
     navigator.onLine,
   );
+  const [connectStatus, setConnectStatus] = React.useState(
+    currentQbDataContext.storage.CONNECTION_REPOSITORY.isChatConnected(),
+  );
 
+  currentQbDataContext.storage.CONNECTION_REPOSITORY.subscribe((status) => {
+    console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
+    if (status) setConnectStatus(true);
+    else setConnectStatus(false);
+  });
   useEffect(() => {
     const setOnline = () => {
       setNavigatorOnline(true);
+      setConnectStatus(
+        currentQbDataContext.storage.CONNECTION_REPOSITORY.isChatConnected(),
+      );
     };
     const setOffline = () => {
       setNavigatorOnline(false);
+      setConnectStatus(
+        currentQbDataContext.storage.CONNECTION_REPOSITORY.isChatConnected(),
+      );
     };
 
     window.addEventListener('online', setOnline);
@@ -32,6 +47,7 @@ const useQBConnection = (): QBConnectionInfo => {
   return {
     browserOnline: navigatorOnline,
     connectionRepository: currentQbDataContext.storage.CONNECTION_REPOSITORY,
+    connectionStatus: connectStatus,
   };
 };
 

package/src/Presentation/ui-components/DialogWindow/DialogWindow.scss

@@ -11,6 +11,17 @@
   position: fixed;
   background-color: rgba(19, 29, 40, 0.8);
 
+  &--disable {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: block;
+  }
+
   &__content {
     width: 380px;
     position: absolute;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import cn from 'classnames';
 
@@ -12,6 +12,7 @@ interface DialogWindowProps {
   children: ReactElement | ReactElement[];
   onClose?: VoidFunction;
   className?: string;
+  disableActions?: boolean;
 }
 
 export default function DialogWindow({
@@ -20,11 +21,13 @@ export default function DialogWindow({
   open = false,
   title,
   className,
+  disableActions = false,
 }: DialogWindowProps) {
   if (!open) return null;
 
   return createPortal(
     <div className={cn('dialog-window', className)}>
+      <div className={cn('', { 'dialog-window--disable': disableActions })} />
       <div className="dialog-window__content">
         <Header
           className="dialog-window__header"

package/src/Presentation/ui-components/Dropdown/Dropdown.scss

@@ -67,6 +67,10 @@
     padding: 4px 16px;
 
     cursor: pointer;
+
+    &--disabled {
+      color: var(--caption);
+    }
   }
 
   &__label {

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

@@ -65,7 +65,6 @@ export default function Dropdown({
     <div ref={dropdownRef} className={cn('dropdown', className)}>
       <button
         type="button"
-        disabled={disabled}
         className="dropdown__toggle"
         onClick={handleToggleOpen}
       >
@@ -80,6 +79,7 @@ export default function Dropdown({
           <DropdownOption
             label={label}
             value={value}
+            disabled={disabled}
             onSelect={handleSelect}
             leftIcon={leftIcon}
             rightIcon={rightIcon}

package/src/Presentation/ui-components/Dropdown/DropdownOption.tsx

@@ -1,8 +1,10 @@
 import { ReactElement } from 'react';
+import cn from 'classnames';
 
 export interface Option {
   value: string;
   label: string;
+  disabled?: boolean;
   leftIcon?: ReactElement;
   rightIcon?: ReactElement;
 }
@@ -14,12 +16,18 @@ interface DropdownOptionProps extends Option {
 export default function DropdownOption({
   label,
   value,
+  disabled,
   leftIcon,
   rightIcon,
   onSelect,
 }: DropdownOptionProps) {
   return (
-    <li className="dropdown__option" onClick={() => onSelect(value)}>
+    <li
+      className={cn('dropdown__option', {
+        'dropdown__option--disabled': disabled,
+      })}
+      onClick={() => !disabled && onSelect(value)}
+    >
       <span className="dropdown__label">
         {leftIcon}
         {label}

package/src/Presentation/ui-components/MessageInput/AttachmentUploader/AttachmentUploader.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 type AttachmentMessageProps = {
   icon: React.ReactNode;
   onChangeFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disableAction: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
 const AttachmentUploader: React.FC<AttachmentMessageProps> = ({
   icon,
   onChangeFile,
+  disableAction,
 }: AttachmentMessageProps) => {
   return (
     <label
@@ -25,6 +27,7 @@ const AttachmentUploader: React.FC<AttachmentMessageProps> = ({
         onChange={(event) => {
           onChangeFile(event);
         }}
+        disabled={disableAction}
       />
     </label>
   );

package/src/Presentation/ui-components/MessageInput/MessageInput.scss

@@ -3,12 +3,19 @@ $message-view-container-chat-input-min-height: 54px;
 .chat-container{
   width: 100%;
   &__icon{
-    width: 32px;
-    height: 32px;
-    fill: var(--input-elements);
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    fill: var(--secondary-elements);
+    &__send {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      fill: var(--main-elements);
+    }
 
     svg path{
-      fill: var(--input-elements);
+      fill: var(--main-elements);
     }
   }
   &__icon--mute{
@@ -17,6 +24,13 @@ $message-view-container-chat-input-min-height: 54px;
       fill: var(--disabled-elements);
     }
   }
+  &__icon--disable{
+    fill: var(--disabled-elements);
+    cursor: default;
+    svg path{
+      fill: var(--disabled-elements);
+    }
+  }
   &__icon--red{
     fill: var(--error);
     svg path{

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

@@ -23,6 +23,7 @@ export type MessageInputProps = {
   rephrase?: ReactElement;
   loading?: boolean;
   placeholder?: string;
+  disableActions?: boolean;
   className?: string;
 };
 
@@ -42,6 +43,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
   rephrase,
   loading,
   placeholder,
+  disableActions = false,
   className,
 }: MessageInputProps) => {
   const [isVoiceMessage, setVoiceMessage] = useState(true);
@@ -60,7 +62,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
   function sendTextMessageActions() {
     if (value && onSend) {
       onSend(value);
-      if (onChange) {
+      if (onChange && !disableActions) {
         onChange('');
       }
     }
@@ -78,10 +80,12 @@ const MessageInput: React.FC<MessageInputProps> = ({
         className="chat-input"
       >
         <AttachmentUploader
+          disableAction={disableActions}
           icon={
             <AttachmentSvg
               className={cn('chat-container__icon', {
                 'chat-container__icon--mute': disableAttachment || loading,
+                'chat-container__icon--disable': disableActions,
               })}
             />
           }
@@ -122,8 +126,9 @@ const MessageInput: React.FC<MessageInputProps> = ({
         {!isVoiceMessage && !loading && (
           <div>
             <SendSvg
-              className={cn('chat-container__icon', {
+              className={cn('chat-container__icon__send', {
                 'chat-container__icon--mute': loading,
+                'chat-container__icon--disable': disableActions,
               })}
               onClick={() => {
                 sendTextMessageActions();
@@ -138,6 +143,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
             <VoiceSvg
               className={cn('chat-container__icon', {
                 'chat-container__icon--red': enableVoice,
+                'chat-container__icon--disable': disableActions,
               })}
               onClick={() => {
                 if (onVoice) {

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

@@ -1,11 +1,11 @@
 import cn from 'classnames';
-import { TextDocumentSvg, AudioFileSvg, VideoFileSvg } from '../../icons';
+import { TextDocumentSvg, AudioFileSvg, PlaySvg } from '../../icons';
 import './PreviewFileMessage.scss';
 
 const iconDictionary = {
   document: TextDocumentSvg,
   audio: AudioFileSvg,
-  video: VideoFileSvg,
+  video: PlaySvg,
 };
 
 export interface PreviewFileMessageProps {

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

@@ -37,6 +37,7 @@ const meta: Meta<typeof SettingsItem> = {
       description: 'Additional classes',
     },
     icon: {
+      control: false,
       table: {
         defaultValue: {
           summary: 'svg | ReactElement',
@@ -56,6 +57,7 @@ const meta: Meta<typeof SettingsItem> = {
       description: 'Elements for the right section',
     },
     onClick: {
+      control: false,
       table: {
         defaultValue: {
           summary: 'VoidFunction',

package/src/index.scss

@@ -3,14 +3,17 @@
 @import 'Presentation/themes/styles/variables';
 @import 'Presentation/themes/styles/mixins';
 
-* {
+.qb-uikit-layout * {
   box-sizing: border-box;
 }
 
-body {
+.qb-uikit-layout {
   font-family: 'Roboto';
   color: var(--main-text);
   background-color: var(--main-background);
+  //to hide the scrollbars if DialogInfo clicked
+  overflow: hidden !important;
+  scrollbar-width: none !important;
 }
 
 /* Media-query for mobile devices */

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

@@ -1,11 +1,12 @@
 import { stringifyError } from '../utils/parse';
+import { QBConfig } from '../CommonTypes/FunctionResult';
 
 export type QBInitParams = {
   appIdOrToken: string | number;
   authKeyOrAppId: string | number;
   authSecret?: string;
   accountKey: string;
-  config?: QBConfig;
+  config?: QBConfig; // todo: change type artan 26.03.24
 };
 
 export function QBInit(params: QBInitParams) {
@@ -20,13 +21,22 @@ export function QBInit(params: QBInitParams) {
 
 export function QBCreateSession(params?: QBLoginParams) {
   return new Promise<QBSession>((resolve, reject) => {
-    QB.createSession(params, (sessionError, session) => {
-      if (sessionError) {
-        reject(stringifyError(sessionError));
-      } else {
-        resolve(session);
-      }
-    });
+    if (!params) {
+      QB.createSession((sessionError, session) => {
+        if (sessionError) {
+          reject(stringifyError(sessionError));
+        } else {
+          resolve(session!);
+        }
+      });
+    } else
+      QB.createSession(params, (sessionError, session) => {
+        if (sessionError) {
+          reject(stringifyError(sessionError));
+        } else {
+          resolve(session!);
+        }
+      });
   });
 }
 
@@ -50,7 +60,7 @@ export function loginToQuickBlox(params: QBLoginParams) {
       if (loginError) {
         reject(stringifyError(loginError));
       } else {
-        resolve(user);
+        resolve(user!);
       }
     });
   });
@@ -90,19 +100,19 @@ export function QBChatDisconnect() {
   QB.chat.disconnect();
 }
 
-export function registrationAccount(params: QBCreateUserParams) {
+export function registrationAccount(params: QBUserCreateParams) {
   return new Promise<QBUser>((resolve, reject) => {
     QB.users.create(params, (error, createdUser) => {
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(createdUser);
+        resolve(createdUser!);
       }
     });
   });
 }
 
-export function QBUserCreate(params: QBCreateUserParams) {
+export function QBUserCreate(params: QBUserCreateParams) {
   let session: QBSession;
 
   return QBCreateSession()
@@ -120,7 +130,7 @@ export function QBUserUpdate(userId: QBUser['id'], user: Partial<QBUser>) {
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(updatedUser);
+        resolve(updatedUser!);
       }
     });
   });
@@ -133,18 +143,18 @@ export function QBUserGet(params: GetUserParams | number) {
         if (error) {
           reject(error);
         } else {
-          resolve(result);
+          resolve(result!);
         }
       });
     });
   }
 
   return new Promise<ListUserResponse>((resolve, reject) => {
-    QB.users.get(params, (error, result: ListUserResponse) => {
+    QB.users.get(params, (error, result) => {
       if (error) {
         reject(error);
       } else {
-        resolve(result);
+        resolve(result!);
       }
     });
   });
@@ -152,11 +162,11 @@ export function QBUserGet(params: GetUserParams | number) {
 //
 export function QBUsersGet(params: GetUserParams) {
   return new Promise<ListUserResponse>((resolve, reject) => {
-    QB.users.get(params, (error, result: ListUserResponse) => {
+    QB.users.get(params, (error, result) => {
       if (error) {
         reject(error);
       } else {
-        resolve(result);
+        resolve(result!);
       }
     });
   });
@@ -167,7 +177,7 @@ export function QBUsersGetById(params: number) {
       if (error) {
         reject(error);
       } else {
-        resolve(result);
+        resolve(result!);
       }
     });
   });
@@ -180,7 +190,7 @@ export function QBUserList(params: ListUserParams) {
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(response);
+        resolve(response!);
       }
     });
   });
@@ -200,7 +210,7 @@ export function QBDataGet<T extends QBCustomObject>(
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(result);
+        resolve(result!);
       }
     });
   });
@@ -215,21 +225,22 @@ export function QBDataCreate<T extends QBCustomObject>(
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(customObject);
+        resolve(customObject!);
       }
     });
   });
 }
 
-export function QBDataDelete<
-  T extends QBCustomObject['_id'] | Array<QBCustomObject['_id']>,
->(className: string, ids: T) {
+export function QBDataDelete(
+  className: string,
+  ids: QBCustomObject['_id'] | Array<QBCustomObject['_id']>,
+) {
   return new Promise<QBDataDeletedResponse>((resolve, reject) => {
-    QB.data.delete<T>(className, ids, (error, customObject) => {
+    QB.data.delete(className, ids, (error, customObject) => {
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(customObject);
+        resolve(customObject!);
       }
     });
   });
@@ -241,17 +252,13 @@ export function QBDataUpdate<T extends QBCustomObject>(
   data: Dictionary<unknown>,
 ) {
   return new Promise<T>((resolve, reject) => {
-    QB.data.update<{ _id: string } & Dictionary<unknown>, T>(
-      className,
-      { _id, ...data },
-      (error, item) => {
-        if (error) {
-          reject(stringifyError(error));
-        } else {
-          resolve(item);
-        }
-      },
-    );
+    QB.data.update<T>(className, { _id, ...data }, (error, item) => {
+      if (error) {
+        reject(stringifyError(error));
+      } else {
+        resolve(item!);
+      }
+    });
   });
 }
 
@@ -262,7 +269,7 @@ export function QBGetDialogs(filters: Dictionary<any>) {
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(result);
+        resolve(result!);
       }
     });
   });
@@ -274,7 +281,7 @@ export function QBGetDialogById(id: string) {
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(result);
+        resolve(result!);
       }
     });
   });
@@ -298,7 +305,7 @@ export function QBCreatePrivateDialog(
         if (error) {
           reject(stringifyError(error));
         } else {
-          resolve(chat);
+          resolve(chat!);
         }
       },
     );
@@ -345,7 +352,7 @@ export function QBCreateGroupDialog(
         if (error) {
           reject(stringifyError(error));
         } else {
-          resolve(chat);
+          resolve(chat!);
         }
       },
     );
@@ -361,7 +368,7 @@ export function QBUpdateDialog(
       if (error) {
         reject(stringifyError(error));
       } else {
-        resolve(chat);
+        resolve(chat!);
       }
     });
   });
@@ -407,7 +414,7 @@ export function QBLeaveDialog(dialogId: QBChatDialog['_id']) {
   });
 }
 
-export function QBGetInfoFile(fileId: QBContentObject['id']) {
+export function QBGetInfoFile(fileId: QBBlob['id']) {
   return new Promise((resolve, reject) => {
     QB.content.getInfo(fileId, (error, response) => {
       if (error) {
@@ -419,7 +426,7 @@ export function QBGetInfoFile(fileId: QBContentObject['id']) {
   });
 }
 
-export function QBDeleteContent(contentId: QBContentObject['id']) {
+export function QBDeleteContent(contentId: QBBlob['id']) {
   return new Promise((resolve, reject) => {
     QB.content.delete(contentId, (error, response) => {
       if (error) {
@@ -431,7 +438,9 @@ export function QBDeleteContent(contentId: QBContentObject['id']) {
   });
 }
 
-export function QBCreateAndUploadContent(paramContent: QBContentParam) {
+export function QBCreateAndUploadContent(
+  paramContent: QBBlobCreateUploadParams,
+) {
   return new Promise((resolve, reject) => {
     QB.content.createAndUpload(paramContent, (error, response) => {
       if (error) {
@@ -499,7 +508,7 @@ export function qbChatGetMessagesExtended(
         if (error) {
           reject(error);
         } else {
-          resolve(messages);
+          resolve(messages!);
         }
       },
     );
@@ -568,14 +577,14 @@ export function QBChatMarkMessageRead(params: QBMessageStatusParams) {
 
 export function QBWebRTCSessionGetUserMedia(
   session: QBWebRTCSession,
-  params: QBGetUserMediaParams,
+  params: QBMediaParams,
 ) {
   return new Promise<MediaStream | undefined>((resolve, reject) => {
     session.getUserMedia({ ...params }, (error, stream) => {
       if (error) {
         reject(error);
       } else {
-        resolve(stream);
+        resolve(stream!);
       }
     });
   });