quickblox-react-ui-kit 0.2.3 → 0.2.5

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

@@ -1,5 +1,5 @@
 import BaseViewModel, {
-  FunctionTypeFileToToVoid,
+  FunctionTypeFileToToBoolean,
   FunctionTypePaginationToVoid,
   FunctionTypeStringToVoid,
   FunctionTypeVoidToVoid,
@@ -13,7 +13,7 @@ export interface MessagesViewModel extends BaseViewModel<DialogEntity> {
   messages: MessageEntity[]; // content
   getMessages: FunctionTypePaginationToVoid; // prepareContent
   sendTextMessage: FunctionTypeStringToVoid;
-  sendAttachmentMessage: FunctionTypeFileToToVoid;
+  sendAttachmentMessage: FunctionTypeFileToToBoolean;
   release: FunctionTypeVoidToVoid; // release Content
   sendTypingTextMessage: FunctionTypeVoidToVoid; //
   typingText: string;

package/src/Presentation/components/UI/Dialogs/MessagesView/OutGoingMessage/OutGoingMessage.tsx

@@ -92,7 +92,7 @@ export function OutGoingMessage(props: {
         }
         className="message-view-container__outgoing-message"
       >
-        {props.element}
+        <div className="message-in-a-single-line">{props.element}</div>
       </div>
     </div>
   );

package/src/Presentation/components/UI/Dialogs/MessagesView/SystemDateBanner/SystemDateBanner.scss

@@ -0,0 +1,23 @@
+.system-date-banner-chat-banner,
+.system-date-banner-chat-banner * {
+  box-sizing: border-box;
+}
+.system-date-banner-chat-banner {
+  background: var(--incoming-background);
+  border-radius: 30px;
+  padding: 2px 8px 2px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.system-date-this-chat  {
+  color: var(--secondary-text);
+  text-align: center;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/SystemDateBanner/SystemDateBanner.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './SystemDateBanner.scss';
+
+type SystemDateBannerProps = {
+  text: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const SystemDateBanner: React.FC<SystemDateBannerProps> = ({
+  text,
+}: SystemDateBannerProps) => {
+  return (
+    <div className="system-date-banner-chat-banner">
+      <div className="system-date-this-chat">{text}</div>
+    </div>
+  );
+};

package/src/Presentation/components/UI/Dialogs/MessagesView/SystemMessageBanner/SystemMessageBanner.scss

@@ -0,0 +1,21 @@
+.system-message-chat-banner,
+.system-message-chat-banner * {
+  box-sizing: border-box;
+}
+.system-message-chat-banner {
+  padding: 2px 8px 2px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 328px;
+  position: relative;
+}
+.username-join-this-chat {
+  color: var(--secondary-text);
+  text-align: center;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/SystemMessageBanner/SystemMessageBanner.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './SystemMessageBanner.scss';
+
+type SystemMessageBannerProps = {
+  messageText: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const SystemMessageBanner: React.FC<SystemMessageBannerProps> = ({
+  messageText,
+}: SystemMessageBannerProps) => {
+  return (
+    <div className="system-message-chat-banner">
+      <div className="username-join-this-chat">{messageText}</div>
+    </div>
+  );
+};

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/PreviewAudioFile/PreviewAudioFile.scss

@@ -0,0 +1,62 @@
+.preview-audio-file-container,
+.preview-audio-file-container * {
+  box-sizing: border-box;
+}
+.preview-audio-file-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &--placeholder {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: static;
+
+    &__bg {
+      background: var(--incoming-background, #e4e6e8);
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+    &__icon {
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+    }
+  }
+
+  &--audio-mp-3 {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+
+.media-audio-file {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

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

@@ -0,0 +1,25 @@
+import './PreviewAudioFile.scss';
+import React from 'react';
+import AudioFile from '../../../svgs/Icons/Media/AudioFile';
+
+type PreviewAudioFileProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewAudioFile: React.FC<PreviewAudioFileProps> = ({
+  fileName,
+}: PreviewAudioFileProps) => {
+  return (
+    <div className="preview-audio-file-container">
+      <div className="preview-audio-file-container--placeholder">
+        <div className="preview-audio-file-container--placeholder__bg" />
+        <div className="preview-audio-file-container--placeholder__icon">
+          <AudioFile width="16" height="16" applyZoom color="var(--caption)" />
+        </div>
+      </div>
+      <div className="preview-audio-file-container--audio-mp-3">{fileName}</div>
+    </div>
+  );
+};
+
+export default PreviewAudioFile;

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

@@ -0,0 +1,61 @@
+.preview-default-file-container,
+.preview-default-file-container * {
+  box-sizing: border-box;
+}
+.preview-default-file-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &--placeholder {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: static;
+
+    &__bg {
+      background: var(--incoming-background, #e4e6e8);
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+    &__icon {
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+    }
+  }
+
+  &--default-file {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+.media-text-document {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

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

@@ -0,0 +1,32 @@
+import './PreviewDefaultFile.scss';
+import React from 'react';
+import TextDocument from '../../../svgs/Icons/Media/TextDocument';
+
+type PreviewDefaultFileProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewDefaultFile: React.FC<PreviewDefaultFileProps> = ({
+  fileName,
+}: PreviewDefaultFileProps) => {
+  return (
+    <div className="preview-default-file-container">
+      <div className="preview-default-file-container--placeholder">
+        <div className="preview-default-file-container--placeholder__bg" />
+        <div className="preview-default-file-container--placeholder__icon">
+          <TextDocument
+            width="16"
+            height="16"
+            applyZoom
+            color="var(--caption)"
+          />
+        </div>
+      </div>
+      <div className="preview-default-file-container--default-file">
+        {fileName}
+      </div>
+    </div>
+  );
+};
+
+export default PreviewDefaultFile;

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

@@ -2,7 +2,7 @@
 
 $preview-dialog-color-divider: var(--color-divider);
 $row-center-container-base-font-size: 12px;
-$row-center-container-base-font-line-height: 24px;
+$row-center-container-base-font-line-height: 32px;
 $row--main-container-min-height: 72px;
 $row--main-container-min-width: 320px;
 $row--main-container-text-title-width: 120px;
@@ -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;
@@ -55,8 +59,14 @@ $preview-dialog-avatar-wrapper-background-color-private: var(--caption);
     word-wrap: break-word;
     overflow: hidden;
     max-height: $row-center-container-base-font-line-height; /* (Number of lines you want visible) * (line-height) */
-    line-height: $row-center-container-base-font-size;
-    text-align:justify;
+    line-height: 11px; // $row-center-container-base-font-size;
+    //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;
+}
+