v0.3.1-beta.5

Author: Artem-K-Koltunov

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.3.1-beta.3",
+  "version": "0.3.1-beta.5",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {
@@ -12,7 +12,7 @@
     "qb-ai-core": "^0.1.3",
     "qb-ai-rephrase": "^0.1.2",
     "qb-ai-translate": "^0.1.2",
-    "quickblox": "^2.16.3",
+    "quickblox": "^2.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",

src/Presentation/Views/DialogInfo/DialogInfo.tsx

@@ -74,10 +74,18 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId.toString();
   const useSubContent = subHeaderContent || false;
   const useUpContent = upHeaderContent || false;
-
+  const [isLeaving, setIsLeaving] = useState(false);
+  const toastLeavingId = React.useRef(null);
   const leaveDialogHandler = () => {
     if (!disableAction) {
-      // onLeaveDialog((dialogViewModel?.entity || dialog) as GroupDialogEntity);
+      setIsLeaving(true);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      toastLeavingId.current = toast('leaving dialog', {
+        autoClose: false,
+        isLoading: true,
+      });
+      // eslint-disable-next-line promise/catch-or-return
       dialogViewModel
         .deleteDialog((dialogViewModel?.entity || dialog) as GroupDialogEntity)
         .then((result) => {
@@ -90,6 +98,12 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
         .catch((e) => {
           console.log(e);
           toast("Can't leave dialog");
+        })
+        .finally(() => {
+          setIsLeaving(false);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          toast.dismiss(toastLeavingId.current);
         });
     }
   };
@@ -331,6 +345,18 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
 
   return (
     <div style={{ ...rootStyles }} className="dialog-information-container">
+      <div
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: '100',
+          display: isLeaving ? 'block' : 'none',
+        }}
+      />
       <ColumnContainer>
         {useUpContent && upHeaderContent}
         <Header title="Dialog information" className="header-dialog-info">
@@ -371,8 +397,8 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
                 >
                   <EditDialog
                     disableActions={disableAction}
-                    nameDialog={dialogViewModel?.entity.name || dialog.name}
-                    typeDialog={dialogViewModel?.entity.type || dialog.type}
+                    nameDialog={dialogViewModel?.entity.name || dialog?.name}
+                    typeDialog={dialogViewModel?.entity.type || dialog?.type}
                     ulrIcon={getUrlAvatar(dialogViewModel?.entity || dialog)}
                     typeAddEditDialog={TypeOpenDialog.edit}
                     clickUpdatedHandler={getDialogUpdatedInfoHandler}

src/Presentation/Views/DialogList/DialogList.tsx

@@ -281,7 +281,7 @@ const YourComponent = ({ dialogListViewModel }) => {
 
     return (
       <div
-        key={index}
+        key={item.entity.id}
         onClick={() => {
           setDialogsToView((prevState) => {
             // const newState = [...prevState];

src/Presentation/Views/EditDialog/EditDialog.tsx

@@ -140,7 +140,7 @@ const EditDialog: React.FC<EditDialogProps> = ({
         <UserAvatar
           urlAvatar={urlAvatar}
           clickRemoveAvatarHandler={() => {
-            setUrlAvatar('');
+            setUrlAvatar('null');
             setErrorMessageUpload('');
           }}
         />
@@ -159,7 +159,8 @@ const EditDialog: React.FC<EditDialogProps> = ({
     if (clickUpdatedHandler) {
       const params: EditDialogParams = {
         dialogTitle: dialogName,
-        dialogAvatar: urlAvatar.length ? fileUploadAvatar : '',
+        // dialogAvatar: urlAvatar.length ? fileUploadAvatar : '',
+        dialogAvatar: urlAvatar === 'null' ? 'null' : fileUploadAvatar,
       };
 
       clickUpdatedHandler(params);

src/Presentation/Views/InviteMembers/useInviteMembersViewModel.ts

@@ -71,7 +71,10 @@ export default function useInviteMembersViewModel(): InviteMembersViewModel {
             // work
             const filteredUsers: UserEntity[] = data.ResultData.reduce(
               (userList: UserEntity[], u: UserEntity) => {
-                if (!regex || regex.test(u.full_name)) {
+                const nameUserForTest =
+                  u.full_name || u.login || u.email || u.id.toString();
+
+                if (!regex || regex.test(nameUserForTest)) {
                   userList.push(u);
                 }
 

src/Presentation/Views/PreviewDialog/PreviewDialog.tsx

@@ -231,6 +231,16 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    getFileForPreview();
+
+    return () => {
+      if (fileUrl) {
+        URL.revokeObjectURL(fileUrl);
+      }
+    };
+  }, [previewMessage]);
+
   const trimFileName = (fileName: string): string => {
     if (fileName.length > 16) {
       return `${fileName.substring(0, 15)}... .${fileName.slice(

src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -60,6 +60,7 @@ import CreateNewDialogFlow from '../../Views/Flow/CreateDialogFlow/CreateNewDial
 import useModal from '../../../hooks/useModal';
 import useQBConnection from '../../providers/QuickBloxUIKitProvider/useQBConnection';
 import { ProxyConfig } from '../../../CommonTypes/CommonTypes';
+import EventMessageType from '../../../Domain/entity/EventMessageType';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
@@ -243,11 +244,17 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     browserOnline && connectionStatus,
   );
 
-  connectionRepository.subscribe((status) => {
-    console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
-    if (status) setIsOnline(true);
-    else setIsOnline(false);
-  });
+  connectionRepository.subscribe(
+    (status) => {
+      console.log(
+        `Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`,
+      );
+      if (status) setIsOnline(true);
+      else setIsOnline(false);
+    },
+    EventMessageType.LocalMessage,
+    'DESKTOP_LAYOUT',
+  );
 
   const [needRefresh, setNeedRefresh] = useState(false);
   const toastConnectionErrorId = React.useRef(null);
@@ -694,8 +701,18 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     setIsOpen((state) => !state);
   };
 
+  const [isLeaving, setIsLeaving] = useState(false);
+  const toastLeavingId = React.useRef(null);
   const handleLeaveDialog = () => {
     if (dialogToLeave) {
+      setIsLeaving(true);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      toastLeavingId.current = toast('leaving dialog', {
+        autoClose: false,
+        isLoading: true,
+      });
+      // eslint-disable-next-line promise/catch-or-return
       dialogsViewModel
         .deleteDialog(dialogToLeave as GroupDialogEntity)
         .then((result) => {
@@ -708,6 +725,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
         .catch((e) => {
           console.log(e);
           toast("Can't leave dialog");
+        })
+        .finally(() => {
+          setIsLeaving(false);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          toast.dismiss(toastLeavingId.current);
         });
     }
   };
@@ -892,12 +915,16 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             if (!resultOperation) {
               toast(`Incorrect data`);
             }
+          })
+          .finally(() => {
+            setFileToSend(null);
           });
       }
     } else if (fileToSend) {
       toast(
         `file size ${fileToSend?.size} must be less then ${MAXSIZE_FOR_MESSAGE} mb.`,
       );
+      setFileToSend(null);
     }
   }, [fileToSend]);
   useEffect(() => {
@@ -986,6 +1013,18 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   return (
     <ToastProvider>
       <div className="qb-uikit-layout">
+        <div
+          style={{
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: '100',
+            display: isLeaving ? 'block' : 'none',
+          }}
+        />
         <DesktopLayout
           mainContainerStyles={{
             minHeight: workHeight,
@@ -1226,7 +1265,11 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                   minHeight: clientContainerHeight,
                   maxHeight: clientContainerHeight,
                 }}
-                // subHeaderContent={<CompanyLogo />}
+                subHeaderContent={
+                  <div>
+                    <p>v0.3.1-beta.5</p>
+                  </div>
+                }
                 // upHeaderContent={<CompanyLogo />}
                 dialog={selectedDialog}
                 dialogViewModel={dialogsViewModel}

src/Presentation/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider.tsx

@@ -322,14 +322,22 @@ function QuickBloxUIKitProvider({
   // };
 
   useEffect(() => {
-    if (!accountData.accountKey || !accountData.appId || !accountData.authKey) {
+    if (
+      !accountData.accountKey ||
+      !accountData.appId ||
+      (!accountData.authKey && !accountData.sessionToken)
+    ) {
       toast(
         'Please input AppId, AuthKey, AuthSecret, AccountKey to sign in/up',
       );
     }
   }, []);
 
-  if (!accountData.accountKey || !accountData.appId || !accountData.authKey) {
+  if (
+    !accountData.accountKey ||
+    !accountData.appId ||
+    (!accountData.authKey && !accountData.sessionToken)
+  ) {
     return (
       <>
         <ToastContainer

src/Presentation/ui-components/Avatar/Avatar.scss

@@ -13,6 +13,9 @@
   color: var(--secondary-text);
 
   svg {
+    height: 100%;
+    width: 100%;
+    
     fill: var(--secondary-text);
     padding: 10px;
   }