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

package/src/Presentation/Views/EditDialog/EditDialog.scss

@@ -50,6 +50,17 @@ $create-dialog-container-height: 180px;
 
   margin-bottom: 24px;
 
+  &--disable {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: block;
+  }
+
   &--wrapper {
     min-height: 180px;
     display: flex;

package/src/Presentation/Views/EditDialog/EditDialog.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import './EditDialog.scss';
+import cn from 'classnames';
 import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
 import User from '../../components/UI/svgs/Icons/Contents/User';
 import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
@@ -14,6 +14,7 @@ import GroupChat from '../../components/UI/svgs/Icons/Contents/GroupChat';
 import PublicChannel from '../../components/UI/svgs/Icons/Contents/PublicChannel';
 import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { Button, TextField } from '../../ui-components';
+import './EditDialog.scss';
 
 export const TypeOpenDialog = {
   edit: 'edit',
@@ -29,6 +30,7 @@ type EditDialogProps = {
   typeAddEditDialog: OpenDialogArcheType;
   clickUpdatedHandler?: FunctionTypeEditDialogParamsToVoid;
   clickCancelHandler?: FunctionTypeVoidToVoid;
+  disableActions?: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
@@ -39,6 +41,7 @@ const EditDialog: React.FC<EditDialogProps> = ({
   typeAddEditDialog = TypeOpenDialog.create,
   clickUpdatedHandler,
   clickCancelHandler,
+  disableActions = false,
 }) => {
   const currentContext = useQbInitializedDataContext();
   const maxUploadFileSize = currentContext.InitParams.maxFileSize;
@@ -176,6 +179,11 @@ const EditDialog: React.FC<EditDialogProps> = ({
         }}
         className="edit-container"
       >
+        <div
+          className={cn('', {
+            'edit-dialog-container--disable': disableActions,
+          })}
+        />
         <div className="edit-dialog-container">
           <div className="edit-dialog-container--wrapper">
             <div className="edit-dialog-container--wrapper__inf">

package/src/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.tsx

@@ -17,6 +17,7 @@ type CreateNewDialogFlowProps = {
   dialogsViewModel: DialogListViewModel;
   onFinished: (newEntity: DialogEntity) => void;
   onCancel?: () => void;
+  isOnline: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
@@ -24,6 +25,7 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
   dialogsViewModel,
   onFinished,
   onCancel,
+  isOnline,
 }: CreateNewDialogFlowProps) => {
   const currentContext = React.useContext(qbDataContext);
   const remoteDataSourceMock: RemoteDataSource =
@@ -122,6 +124,18 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
 
   return (
     <div>
+      <div
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: '100',
+          display: isOnline ? 'none' : 'block',
+        }}
+      />
       {stepToCreate === setUpDialogType && (
         <CreateDialog
           createPrivateDialogOnClick={() => {

package/src/Presentation/Views/InviteMembers/useInviteMembersViewModel.ts

@@ -116,17 +116,7 @@ export default function useInviteMembersViewModel(): InviteMembersViewModel {
 
   return {
     get entity(): UserEntity {
-      return Stubs.createUserEntityWithParams(
-        0,
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-      );
+      return Stubs.createUserEntityWithParams(0, '', '', '', '', '', 0, '', '');
     },
     // id: Date.now(),
     // name: '',

package/src/Presentation/Views/PreviewDialog/PreviewDialog.tsx

@@ -53,6 +53,7 @@ type PreviewDialogsProps = {
   theme?: PreviewDialogsTheme;
   onLeaveDialog: FunctionTypeDialogEntityToVoid;
   additionalSettings?: PreviewDialogSettings;
+  disableActions?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
 const PreviewDialog: React.FC<PreviewDialogsProps> = ({
@@ -65,6 +66,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
   message_date_time_sent,
   theme = undefined,
   onLeaveDialog,
+  disableActions = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   additionalSettings = undefined,
 }: PreviewDialogsProps) => {
@@ -293,8 +295,10 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
             {
               value: 'Leave',
               label: 'Leave',
+              disabled: disableActions,
             },
           ]}
+          disabled={disableActions}
           onSelect={(value: string) => {
             if (value === 'Leave') {
               onLeaveDialog(dialogViewModel?.entity as DialogEntity);

package/src/Presentation/icons/media/video-file.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.69727 7.33337V16.6667L16.0306 12L8.69727 7.33337Z"/>
+<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+    <path d="M33.0001 7.33325L36.6667 14.6666H31.1667L27.5001 7.33325H23.8334L27.5001 14.6666H22.0001L18.3334 7.33325H14.6667L18.3334 14.6666H12.8334L9.16675 7.33325H7.33341C5.31675 7.33325 3.68508 8.98325 3.68508 10.9999L3.66675 32.9999C3.66675 35.0166 5.31675 36.6666 7.33341 36.6666H36.6667C38.6834 36.6666 40.3334 35.0166 40.3334 32.9999V7.33325H33.0001Z"/>
 </svg>

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

@@ -117,19 +117,45 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     dialogsViewModel.entity,
   );
 
-  const { connectionRepository, browserOnline } = useQBConnection();
-  const [isOnline, setIsOnline] = useState<boolean>(browserOnline);
+  const { browserOnline, connectionStatus, connectionRepository } =
+    useQBConnection();
+
+  const [isOnline, setIsOnline] = useState<boolean>(
+    browserOnline && connectionStatus,
+  );
+
+  connectionRepository.subscribe((status) => {
+    console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
+    if (status) setIsOnline(true);
+    else setIsOnline(false);
+  });
+
+  const [needRefresh, setNeedRefresh] = useState(false);
+  const toastConnectionErrorId = React.useRef(null);
 
   useEffect(() => {
-    if (
-      isOnline === false ||
-      connectionRepository.isChatConnected() === false
-    ) {
-      setIsOnline(false);
-    } else {
+    if (browserOnline) {
       setIsOnline(true);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      toast.dismiss(toastConnectionErrorId.current);
+    } else {
+      setIsOnline(false);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      toastConnectionErrorId.current = toast('Connection ...', {
+        autoClose: false,
+        isLoading: true,
+      });
     }
-  }, [browserOnline, connectionRepository.isChatConnected()]);
+  }, [browserOnline && connectionStatus]);
+
+  useEffect(() => {
+    if (!isOnline) {
+      setNeedRefresh(true);
+    }
+  }, [isOnline]);
 
   let defaultAIRephraseWidget = AIRephrase?.AIWidget; // useDefaultTextInputWidget();
   let defaultAITranslateWidget = AITranslate?.AIWidget;
@@ -249,9 +275,11 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const { enableReplying } = QBConfig.appConfig;
 
   const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
-    if (!dialogsViewModel.loading) {
-      setSelectedDialog(item.entity);
-      // dialogsViewModel.entity = item.entity;
+    if (isOnline) {
+      if (!dialogsViewModel.loading) {
+        setSelectedDialog(item.entity);
+        // dialogsViewModel.entity = item.entity;
+      }
     }
   };
 
@@ -394,6 +422,15 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   }, [messagesViewModel.entity]);
 
+  useEffect(() => {
+    if (isOnline && needRefresh) {
+      if (messagesViewModel.entity) {
+        messagesViewModel.getMessages(new Pagination(0, messagePerPage));
+
+        setNeedRefresh(false);
+      }
+    }
+  }, [isOnline]);
   const fetchMoreData = () => {
     if (messagesViewModel.pagination.hasNextPage()) {
       const newPagination = messagesViewModel.pagination;
@@ -434,6 +471,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 
   useEffect(() => {
     getDialogPhotoFileForPreview();
+    if (dialogsViewModel.entity) {
+      userViewModel.entity = dialogsViewModel.entity;
+    }
 
     return () => {
       if (dialogAvatarUrl) {
@@ -577,7 +617,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
         };
 
         repliedActions(replyData);
-      } else {
+      } else if (isOnline) {
         // eslint-disable-next-line promise/catch-or-return
         messagesViewModel
           .sendAttachmentMessage(fileToSend)
@@ -782,30 +822,32 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   //
 
   function sendTextMessageActions(textToSend: string) {
-    // closeReplyMessageFlowHandler
-    if (messagesViewModel?.loading) return;
-    // setVoiceMessage(true);
-    if (textToSend.length > 0 && textToSend.length <= 1000) {
-      setMessageText('');
-      if (showReplyMessage && messagesToReply?.length > 0) {
-        const replyData: ReplyMessagesParams = {
-          messagesToReply,
-          relatedTextMessage: textToSend,
-        };
+    if (isOnline) {
+      // closeReplyMessageFlowHandler
+      if (messagesViewModel?.loading) return;
+      // setVoiceMessage(true);
+      if (textToSend.length > 0 && textToSend.length <= 1000) {
+        setMessageText('');
+        if (showReplyMessage && messagesToReply?.length > 0) {
+          const replyData: ReplyMessagesParams = {
+            messagesToReply,
+            relatedTextMessage: textToSend,
+          };
 
-        repliedActions(replyData);
-      } else {
-        messagesViewModel.sendTextMessage(textToSend);
+          repliedActions(replyData);
+        } else {
+          messagesViewModel.sendTextMessage(textToSend);
+          setMessageText('');
+        }
         setMessageText('');
+      } else {
+        setWarningErrorText(
+          'length of text message must be less then 1000 chars.',
+        );
+        setTimeout(() => {
+          setWarningErrorText('');
+        }, 3000);
       }
-      setMessageText('');
-    } else {
-      setWarningErrorText(
-        'length of text message must be less then 1000 chars.',
-      );
-      setTimeout(() => {
-        setWarningErrorText('');
-      }, 3000);
     }
   }
   //
@@ -833,16 +875,18 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   //
 
   const ChangeFileHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const reader = new FileReader();
-    const file = event.currentTarget.files
-      ? event.currentTarget.files[0]
-      : null;
+    if (isOnline) {
+      const reader = new FileReader();
+      const file = event.currentTarget.files
+        ? event.currentTarget.files[0]
+        : null;
 
-    reader.onloadend = () => {
-      setFileToSend(file);
-    };
+      reader.onloadend = () => {
+        setFileToSend(file);
+      };
 
-    if (file !== null) reader.readAsDataURL(file);
+      if (file !== null) reader.readAsDataURL(file);
+    }
   };
 
   //
@@ -1007,7 +1051,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 
   const [dialogToLeave, setDialogToLeave] = useState<DialogEntity>();
   const leaveDialogHandler = (dialog: DialogEntity) => {
-    setDialogToLeave(dialog);
+    if (isOnline) {
+      setDialogToLeave(dialog);
+    }
   };
 
   const [isOpen, setIsOpen] = useState(false);
@@ -1092,12 +1138,15 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 
   const newModal = useModal();
 
+  const createDialogHandler = () => {
+    if (isOnline) {
+      newModal.toggleModal();
+    }
+  };
+
   return (
     <ToastProvider>
-      <div>
-        {/* <div style={{ height: '18px', border: '1px solid red' }}> */}
-        {/*  h:{height},w:{width},ch:{clientHeight},wh:{workHeight} */}
-        {/* </div> */}
+      <div className="qb-uikit-layout">
         <DesktopLayout
           mainContainerStyles={{
             minHeight: workHeight,
@@ -1108,13 +1157,14 @@ const QuickBloxUIKitDesktopLayout: React.FC<
           dialogsView={
             showDialogList ? (
               <DialogList
+                disableAction={!isOnline}
                 scrollableHeight={dialogListScrollableHeight}
                 // subHeaderContent={<CompanyLogo />}
                 // upHeaderContent={<CompanyLogo />}
                 dialogListViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
                 selectedDialog={dialogsViewModel.entity}
                 onDialogSelected={selectDialogActions}
-                onCreateDialog={() => newModal.toggleModal()}
+                onCreateDialog={createDialogHandler}
                 onLeaveDialog={leaveDialogHandler}
                 additionalSettings={{
                   withoutHeader: false,
@@ -1175,7 +1225,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                       className="messages-container"
                       onEndReached={fetchMoreData}
                       onEndReachedThreshold={0.95}
-                      refreshing={messagesViewModel?.loading}
+                      refreshing={needRefresh || messagesViewModel?.loading}
                       renderSectionHeader={(section) => (
                         <div className="message-view-container--system-message-wrapper">
                           <div
@@ -1196,6 +1246,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                       renderItem={([, groupMessages], listRef) =>
                         groupMessages.map((message) => (
                           <MessageItem
+                            disableAction={!isOnline}
                             // defaultGetSenderName={defaultGetSenderName}
                             message={message}
                             currentUserId={currentUserId || -1}
@@ -1205,8 +1256,10 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                               handleOnReply(m);
                             }}
                             onForward={(m: MessageEntity) => {
-                              setForwardMessage(m);
-                              forwardMessageModal.toggleModal();
+                              if (isOnline) {
+                                setForwardMessage(m);
+                                forwardMessageModal.toggleModal();
+                              }
                             }}
                             listRef={listRef}
                             AIAssistWidget={defaultAIAssistWidget}
@@ -1233,6 +1286,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                 }
                 renderMessageInput={
                   <MessageInput
+                    disableActions={!isOnline}
                     previewMessage={
                       showReplyMessage ? (
                         <ReplyMessagePreview
@@ -1263,11 +1317,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                     onAttachment={ChangeFileHandler}
                     enableVoice={isRecording}
                     onVoice={() => {
-                      if (messagesViewModel?.loading) return;
+                      if (messagesViewModel?.loading || !isOnline) return;
                       setIsRecording(!isRecording);
                     }}
                     rephrase={
                       <AIRephraseWidget
+                        disableActions={!isOnline}
                         waitAIWidget={waitAIWidget}
                         messageText={messageText}
                         theme={theme}
@@ -1321,6 +1376,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
               />
             ) : (
               <DialogInfo
+                disableAction={!isOnline}
                 onShowAllMemberClick={(value: boolean) => {
                   setIsAllMembersShow(value);
                 }}
@@ -1368,6 +1424,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             onFinished={() => {
               newModal.toggleModal();
             }}
+            isOnline={isOnline}
           />
         </DialogWindow>
         {selectedDialog && (
@@ -1382,6 +1439,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
               currentUserName={userName || ''}
               dialogs={dialogsViewModel.dialogs}
               onSendData={handleSendData}
+              disableActions={!isOnline}
             />
           </DialogWindow>
         )}

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{