586 edit msg (#594)

* stashed files added * signin page ui * renamed file * fixed linting issues * integrated rainbow wallet * integrated metamask wallet & fixed home image strech issue * fixed error message * removed provider check * removed fontawesome library & added svg image * added user profile page * integrated user contact list * changed color of contact background on hover * created hamburger menu ui * removed unused import * fixed prettier issue * created contacts action menu * added contact menu list * UI for user contact page * contact info page * add conversation UI * integrated add conversation modal * integrated preferences modal * optimized code * removed unused code & fixed linting * changed let to const * UI for profile configuration * added error messages * Configure user profile * removed unused parameter * fixed prettier issue * env test * hide contact integrated * modified condition check * profile not configured info box * env test * chat screen * chat message UI * library function integration for chat * removed unused code * message actions * fixed user config profile method * edit message integration * edit message context state * integrated message edit functionality * added edited text on edited msg * added edited text below edited msg * fixed message type text --------- Co-authored-by: Bhupesh-MS <[email protected]> Co-authored-by: Heiko Burkhardt <[email protected]>
dm3-org · Sep 1, 2023 · e8a734d · e8a734d
1 parent 1ba315a
commit e8a734d
Show file tree

Hide file tree

Showing 13 changed files with 297 additions and 59 deletions.
diff --git a/packages/messenger-widget/src/components/Chat/bl.ts b/packages/messenger-widget/src/components/Chat/bl.ts
@@ -79,6 +79,7 @@ const handleMessageContainer = (
             time: container.envelop.message.metadata.timestamp.toString(),
             messageState: container.messageState,
             ownMessage: false,
+            envelop: container.envelop,
         };
         if (
             isSameEnsName(
@@ -127,16 +128,16 @@ export const handleMessages = (
     });
 
     const newMessages = checkedContainers
-        .filter((conatier) => conatier.messageState === MessageState.Send)
+        .filter((container) => container.messageState === MessageState.Send)
         .map((container) => ({
             ...container,
             messageState: MessageState.Read,
         }));
 
     const oldMessages = checkedContainers.filter(
-        (conatier) =>
-            conatier.messageState === MessageState.Read ||
-            conatier.messageState === MessageState.Created,
+        (container) =>
+            container.messageState === MessageState.Read ||
+            container.messageState === MessageState.Created,
     );
 
     handleMessageContainer(state, oldMessages, alias, setListOfMessages);

diff --git a/packages/messenger-widget/src/components/Message/Message.css b/packages/messenger-widget/src/components/Message/Message.css
@@ -50,5 +50,15 @@
 }
 
 .msg:hover div .content-style + .msg-action-container {
-    visibility: visible !important;
+    visibility: visible;
+}
+
+.hide-action {
+    visibility: hidden !important;
+}
+
+.msg-editing-active {
+    background-color: var(--text-secondary-color) !important;
+    color: var(--text-primary-color) !important;
+    border: 1px solid var(--text-primary-color) !important;
 }
diff --git a/packages/messenger-widget/src/components/Message/Message.tsx b/packages/messenger-widget/src/components/Message/Message.tsx
@@ -1,12 +1,16 @@
 import './Message.css';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { MessageState } from 'dm3-lib-messaging';
 import tickIcon from '../../assets/images/tick.svg';
 import { MessageProps } from '../../interfaces/props';
 import threeDotsIcon from '../../assets/images/three-dots.svg';
 import { MessageAction } from '../MessageAction/MessageAction';
+import { MessageActionType } from '../../utils/enum-type-utils';
+import { GlobalContext } from '../../utils/context-utils';
 
 export function Message(props: MessageProps) {
+    const { state } = useContext(GlobalContext);
+
     // state to show action items three dots
     const [isHovered, setIsHovered] = useState(false);
 
@@ -18,6 +22,17 @@ export function Message(props: MessageProps) {
         setIsHovered(false);
     };
 
+    const getMessageChangeText = (): string => {
+        switch (props.envelop.message.metadata.type) {
+            case 'EDIT':
+                return '(edited) ';
+            case 'DELETE_REQUEST':
+                return '(deleted) ';
+            default:
+                return '';
+        }
+    };
+
     return (
         <span
             className={'text-primary-color d-grid msg'.concat(
@@ -32,14 +47,22 @@ export function Message(props: MessageProps) {
                     className={'width-fill text-left font-size-14 border-radius-6 content-style'.concat(
                         ' ',
                         props.ownMessage
-                            ? 'ms-3 normal-btn-hover'
+                            ? state.uiView.selectedMessageView.actionType ===
+                                  MessageActionType.EDIT &&
+                              state.uiView.selectedMessageView.messageData
+                                  ?.envelop.id === props.envelop.id
+                                ? 'msg-editing-active'
+                                : 'ms-3 normal-btn-hover'
                             : 'background-config-box',
                     )}
                 >
-                    {props.message}
+                    {props.message ? props.message : 'This message is deleted'}
                 </div>
                 <div
-                    className="msg-action-container d-flex pointer-cursor border-radius-3 position-relative"
+                    className={'msg-action-container d-flex pointer-cursor border-radius-3 position-relative'.concat(
+                        ' ',
+                        !props.message ? 'hide-action' : '',
+                    )}
                     onMouseOver={handleMouseOver}
                     onMouseLeave={handleMouseOut}
                 >
@@ -57,6 +80,7 @@ export function Message(props: MessageProps) {
                     props.ownMessage ? 'ms-3' : '',
                 )}
             >
+                {getMessageChangeText()}
                 {new Date(Number(props.time)).toLocaleString()}
                 <span className="tick-icon readed-tick-icon">
                     {!props.ownMessage ? (

diff --git a/packages/messenger-widget/src/components/MessageAction/MessageAction.css b/packages/messenger-widget/src/components/MessageAction/MessageAction.css
@@ -7,17 +7,13 @@
     z-index: 1;
     border: 1px solid #000000;
     border-radius: 5px;
+    margin-top: 1rem;
 }
 
 .own-msg {
-    margin-top: 1rem;
     margin-left: -9rem;
 }
 
-.contact-msg {
-    margin-top: 1rem;
-}
-
 .msg-dropdown-content-top-align {
     margin-top: -6.9rem !important;
 }

diff --git a/packages/messenger-widget/src/components/MessageAction/MessageAction.tsx b/packages/messenger-widget/src/components/MessageAction/MessageAction.tsx
@@ -1,20 +1,44 @@
 import './MessageAction.css';
 import editIcon from '../../assets/images/edit.svg';
 import replyIcon from '../../assets/images/reply.svg';
-import deleteIcon from '../../assets/images/chat-delete.svg';
 import { MessageProps } from '../../interfaces/props';
+import deleteIcon from '../../assets/images/chat-delete.svg';
+import { GlobalContext } from '../../utils/context-utils';
+import { useContext } from 'react';
+import {
+    MessageActionType,
+    UiViewStateType,
+} from '../../utils/enum-type-utils';
 
 export function MessageAction(props: MessageProps) {
+    const { dispatch } = useContext(GlobalContext);
+
+    const setAction = (action: MessageActionType) => {
+        dispatch({
+            type: UiViewStateType.SetMessageView,
+            payload: {
+                messageData: props,
+                actionType: action,
+            },
+        });
+        const element = document.getElementById('msg-dropdown') as HTMLElement;
+        element && (element.style.display = 'none');
+    };
+
     return (
         <div
+            id="msg-dropdown"
             className={'msg-dropdown-content font-size-14 font-weight-400'.concat(
                 ' ',
-                props.ownMessage ? 'own-msg' : 'contact-msg',
+                props.ownMessage ? 'own-msg' : '',
             )}
         >
             {props.ownMessage && (
                 <>
-                    <div className="d-flex align-items-center justify-content-start">
+                    <div
+                        className="d-flex align-items-center justify-content-start"
+                        onClick={() => setAction(MessageActionType.EDIT)}
+                    >
                         <img src={editIcon} alt="edit" className="me-2" />
                         Edit
                     </div>

diff --git a/packages/messenger-widget/src/components/MessageInput/MessageInput.tsx b/packages/messenger-widget/src/components/MessageInput/MessageInput.tsx
@@ -2,19 +2,44 @@ import './MessageInput.css';
 import sendBtnIcon from '../../assets/images/send-btn.svg';
 import fileIcon from '../../assets/images/file.svg';
 import emojiIcon from '../../assets/images/emoji.svg';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { GlobalContext } from '../../utils/context-utils';
 import { handleSubmit } from './bl';
+import {
+    MessageActionType,
+    UiViewStateType,
+} from '../../utils/enum-type-utils';
 
 export function MessageInput() {
     const [message, setMessage] = useState('');
 
     const { state, dispatch } = useContext(GlobalContext);
 
     function setMessageContent(e: React.ChangeEvent<HTMLInputElement>) {
+        // if message action is edit and message length is 0, update message action
+        if (!e.target.value.length) {
+            dispatch({
+                type: UiViewStateType.SetMessageView,
+                payload: {
+                    actionType: MessageActionType.NONE,
+                    messageData: undefined,
+                },
+            });
+        }
         setMessage(e.target.value);
     }
 
+    useEffect(() => {
+        if (
+            state.uiView.selectedMessageView.actionType ===
+            MessageActionType.EDIT
+        ) {
+            setMessage(
+                state.uiView.selectedMessageView.messageData?.message as string,
+            );
+        }
+    }, [state.uiView.selectedMessageView]);
+
     return (
         <>
             {/* Message emoji, file & input window */}