quickblox-react-ui-kit 0.2.4 → 0.2.5

package/src/Presentation/components/UI/Dialogs/MessagesView/useMessagesViewModel.ts

@@ -161,32 +161,33 @@ export default function useMessagesViewModel(
     console.log('EXECUTE USE CASE MessagesViewModelWithMockUseCase EXECUTED');
   }
 
-  const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
-    console.log('call dialogUpdateHandler in useMessagesViewModel');
-    const getSender = async (sender_id: number) => {
-      const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
-        new UsersRepository(
-          currentContext.storage.LOCAL_DATA_SOURCE,
-          currentContext.storage.REMOTE_DATA_SOURCE,
-        ),
-        [sender_id],
-      );
+  const getSender = async (sender_id: number) => {
+    const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
+      new UsersRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        currentContext.storage.REMOTE_DATA_SOURCE,
+      ),
+      [sender_id],
+    );
 
-      let userEntity: UserEntity | undefined;
+    let userEntity: UserEntity | undefined;
 
-      await getUser
-        .execute()
-        // eslint-disable-next-line promise/always-return
-        .then((data) => {
-          // eslint-disable-next-line prefer-destructuring
-          userEntity = data[0];
-        })
-        .catch((e) => {
-          console.log('have ERROR get users :', JSON.stringify(e));
-        });
+    await getUser
+      .execute()
+      // eslint-disable-next-line promise/always-return
+      .then((data) => {
+        // eslint-disable-next-line prefer-destructuring
+        userEntity = data[0];
+      })
+      .catch((e) => {
+        console.log('have ERROR get users :', JSON.stringify(e));
+      });
 
-      return userEntity;
-    };
+    return userEntity;
+  };
+
+  const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
+    console.log('call dialogUpdateHandler in useMessagesViewModel');
 
     if (dialogInfo.eventMessageType === EventMessageType.LocalMessage) {
       if (dialogInfo.messageStatus) {
@@ -233,9 +234,20 @@ export default function useMessagesViewModel(
           })
           .finally(() => {
             setMessages((prevState) => {
-              const newState = [...prevState];
+              let newState = [...prevState];
+
+              if (newState.find((it) => it.id === messageId)) {
+                newState = newState.map((elem) => {
+                  const v: MessageEntity = {
+                    ...elem,
+                    delivered_ids: ResultMessage.delivered_ids,
+                  };
 
-              newState.push(ResultMessage);
+                  return v;
+                });
+              } else {
+                newState.push(ResultMessage);
+              }
 
               return newState;
             });
@@ -311,7 +323,7 @@ export default function useMessagesViewModel(
     fileEntity.uid = '';
     fileEntity.name = file.name;
     fileEntity.size = file.size;
-    fileEntity.type = file.type;
+    fileEntity.type = file.type || 'application/zip';
     const uploadFileUseCase: UploadFileUseCase = new UploadFileUseCase(
       new FileRepository(
         currentContext.storage.LOCAL_DATA_SOURCE,
@@ -343,6 +355,27 @@ export default function useMessagesViewModel(
     // eslint-disable-next-line promise/catch-or-return
     sendTextMessageUseCase
       .execute()
+      // eslint-disable-next-line promise/always-return
+      .then((me) => {
+        //
+        // eslint-disable-next-line promise/catch-or-return
+        getSender(me.sender_id)
+          // eslint-disable-next-line promise/always-return
+          .then((user) => {
+            // eslint-disable-next-line no-param-reassign
+            me.sender = user;
+          })
+          .finally(() => {
+            setMessages((prevState) => {
+              const newState = [...prevState];
+
+              newState.push(me);
+
+              return newState;
+            });
+          });
+        //
+      })
       .catch((reason) => {
         const errorMessage: string = stringifyError(reason);
 
@@ -388,70 +421,78 @@ export default function useMessagesViewModel(
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const sendAttachmentMessage = (newMessage: File) => {
+  const sendAttachmentMessage = async (newMessage: File): Promise<boolean> => {
     console.log('call sendTextMessage');
     setLoading(true);
     const currentUserId =
       currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId || 0;
 
-    uploadFile(newMessage)
-      // eslint-disable-next-line promise/always-return
-      .then((fileMessage: FileEntity) => {
-        console.log(JSON.stringify(fileMessage));
-        // '[attachment]'
-        const recipientId =
-          dialog.type === DialogType.private
-            ? (dialog as PrivateDialogEntity).participantId
-            : currentUserId;
-
+    try {
+      await uploadFile(newMessage)
         // eslint-disable-next-line promise/always-return
-        const messageBody = fileMessage.name || '[attachment]';
-        const messageToSend: MessageEntity =
-          Stubs.createMessageEntityWithParams(
-            '',
-            dialog.id,
-            messageBody,
-            Date.now().toString(),
-            Date.now(),
-            Date.now().toString(),
-            [],
-            [],
-            1,
-            currentUserId,
-            // eslint-disable-next-line promise/always-return
-            recipientId,
-            [],
-            '',
-            DialogType.group,
-          );
-
-        messageToSend.dialogType = dialog.type;
-        const attachments: ChatMessageAttachmentEntity[] = [
-          {
-            id: fileMessage.id as string,
-            uid: fileMessage.uid,
-            type: fileMessage.type!,
-            file: fileMessage,
-            name: fileMessage.name,
-            size: fileMessage.size,
-            url: fileMessage.url,
-          },
-        ];
-
-        messageToSend.attachments = attachments;
-
-        messageToSend.message = `MediaContentEntity|${messageBody}|${
-          fileMessage.uid
-        }|${fileMessage.type!.toString()}`;
-        sendMessage(messageToSend);
-        //
-      })
-      .catch((reason) => {
-        const errorMessage = stringifyError(reason);
+        .then((fileMessage: FileEntity) => {
+          console.log(JSON.stringify(fileMessage));
 
-        console.log('EXCEPTION in sendAttachmentMessage');
-        throw new Error(errorMessage);
-      });
+          const recipientId =
+            dialog.type === DialogType.private
+              ? (dialog as PrivateDialogEntity).participantId
+              : currentUserId;
+
+          // eslint-disable-next-line promise/always-return
+          const messageBody = fileMessage.name || '[attachment]';
+          const messageToSend: MessageEntity =
+            Stubs.createMessageEntityWithParams(
+              '',
+              dialog.id,
+              messageBody,
+              Date.now().toString(),
+              Date.now(),
+              Date.now().toString(),
+              [],
+              [],
+              1,
+              currentUserId,
+              // eslint-disable-next-line promise/always-return
+              recipientId,
+              [],
+              '',
+              DialogType.group,
+            );
+
+          messageToSend.dialogType = dialog.type;
+          const attachments: ChatMessageAttachmentEntity[] = [
+            {
+              id: fileMessage.id as string,
+              uid: fileMessage.uid,
+              type: fileMessage.type!,
+              file: fileMessage,
+              name: fileMessage.name,
+              size: fileMessage.size,
+              url: fileMessage.url,
+            },
+          ];
+
+          messageToSend.attachments = attachments;
+
+          messageToSend.message = `MediaContentEntity|${messageBody}|${
+            fileMessage.uid
+          }|${fileMessage.type!.toString()}`;
+          sendMessage(messageToSend);
+          //
+        })
+        .catch((reason) => {
+          setLoading(false);
+          const errorMessage = stringifyError(reason);
+
+          console.log('EXCEPTION in sendAttachmentMessage', errorMessage);
+
+          throw new Error(errorMessage);
+        });
+    } catch (e) {
+      return false;
+    }
+
+    return true;
   };
 
   return {

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

@@ -33,6 +33,10 @@ $preview-dialog-avatar-wrapper-background-color-private: var(--caption);
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+    position: relative;
   }
   &__text {
     position: relative;
@@ -56,7 +60,13 @@ $preview-dialog-avatar-wrapper-background-color-private: var(--caption);
     overflow: hidden;
     max-height: $row-center-container-base-font-line-height; /* (Number of lines you want visible) * (line-height) */
     line-height: 11px; // $row-center-container-base-font-size;
-    text-align:justify;
+    //text-align:justify;
+    color: var(--main-text);
+    text-align: left;
+    font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
+    position: relative;
+    align-self: stretch;
+    height: 32px;
   }
 
   //&__text.ellipsis::after {
@@ -98,3 +108,19 @@ $preview-dialog-avatar-wrapper-background-color-private: var(--caption);
   padding-top: 2px;
 }
 
+.dialog-item-preview-text{
+  color: var(--main-text);
+  text-align: left;
+  font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
+  position: relative;
+  align-self: stretch;
+  height: 32px;
+}
+
+.dialog-item-date-time-sent{
+  color: var(--secondary-text);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}
+

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

@@ -312,7 +312,9 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
       const fileUid: string = messageParts[2];
       const fileUrl: string = fileUid && QB.content.privateUrl(fileUid);
 
-      const result: JSX.Element = <div>{message}</div>;
+      const result: JSX.Element = (
+        <div className="dialog-item-preview-text">{message}</div>
+      );
 
       if (messageParts[3].includes('audio')) {
         return <PreviewAudioFile fileName={fileName} />;
@@ -341,7 +343,8 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
         haveHover
           ? {
               ...titleDialogStyles,
-              background: hoverTheme.backgroundColorMainSection,
+              // background: hoverTheme.backgroundColorMainSection,
+              background: 'var(--chat-input)',
               border: `1px solid ${hoverTheme.divider}`,
             }
           : titleDialogStyles
@@ -382,7 +385,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
           <ColumnContainer gapBetweenItem="3px" maxWidth="213px">
             <RowLeftContainer
               RightItem={
-                <div style={{ textAlign: 'right' }}>
+                <div className="dialog-item-date-time-sent">
                   {!haveHover ? message_date_time_sent : ''}
                 </div>
               }

package/src/index-ui.ts

@@ -37,7 +37,10 @@ import { AIMessageWidget } from './Presentation/components/UI/Dialogs/MessagesVi
 import { AISource, IChatMessage } from './Data/source/AISource';
 import AIWidgetIcon from './Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './Presentation/components/UI/Dialogs/MessagesView/AIWidgets/ErrorMessageIcon';
-
+import PreviewDialogViewModel from './Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialogViewModel';
+import {AvatarContentIncomingUserProps} from './Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser';
+import {FunctionTypeViewModelToVoid} from './Presentation/Views/Base/BaseViewModel';
+import {GetUserNameFct} from './Presentation/components/UI/Dialogs/MessagesView/InComingMessage/InComingMessage';
 export {
   MainButton,
   TypeButton,
@@ -74,4 +77,8 @@ export {
   type IChatMessage,
   AIWidgetIcon,
   ErrorMessageIcon,
+  PreviewDialogViewModel,
+  type FunctionTypeViewModelToVoid,
+  type AvatarContentIncomingUserProps,
+  type GetUserNameFct
 };

package/src/index.scss

@@ -1,4 +1,3 @@
-@import "Presentation/assets/styles/reset-styles";
 @import "Presentation/assets/styles/fonts";
 @import "Presentation/assets/styles/theme_colors_scheme";
 @import "Presentation/assets/styles/variables";

package/src/package_artan_react_ui.json

@@ -1,6 +1,6 @@
 {
   "name": "artan-react-ui-sample",
-  "version": "0.0.51",
+  "version": "0.0.55",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {

package/src/package_original.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "keywords": [