Refectored Message comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/room/RoomViewContent.jsx

@@ -7,39 +7,14 @@ import dateFormat from 'dateformat';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
-import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
-import { diffMinutes, isNotInSameDay, getEventCords } from '../../../util/common';
-import { openEmojiBoard, openProfileViewer, openReadReceipts } from '../../../client/action/navigation';
+import { diffMinutes, isNotInSameDay } from '../../../util/common';
 
 import Divider from '../../atoms/divider/Divider';
-import Avatar from '../../atoms/avatar/Avatar';
-import IconButton from '../../atoms/button/IconButton';
-import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
-import {
-  Message,
-  MessageHeader,
-  MessageReply,
-  MessageContent,
-  MessageEdit,
-  MessageReactionGroup,
-  MessageReaction,
-  MessageOptions,
-  PlaceholderMessage,
-} from '../../molecules/message/Message';
-import * as Media from '../../molecules/media/Media';
+import { Message, PlaceholderMessage } from '../../molecules/message/Message';
 import RoomIntro from '../../molecules/room-intro/RoomIntro';
 import TimelineChange from '../../molecules/message/TimelineChange';
 
-import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
-import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
-import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
-import BinIC from '../../../../public/res/ic/outlined/bin.svg';
-
-import { parseReply, parseTimelineChange } from './common';
+import { parseTimelineChange } from './common';
 
 const MAX_MSG_DIFF_MINUTES = 5;
 
@@ -52,84 +27,6 @@ function genPlaceholders(key) {
   );
 }
 
-function isMedia(mE) {
-  return (
-    mE.getContent()?.msgtype === 'm.file'
-    || mE.getContent()?.msgtype === 'm.image'
-    || mE.getContent()?.msgtype === 'm.audio'
-    || mE.getContent()?.msgtype === 'm.video'
-    || mE.getType() === 'm.sticker'
-  );
-}
-
-function genMediaContent(mE) {
-  const mx = initMatrix.matrixClient;
-  const mContent = mE.getContent();
-  if (!mContent || !mContent.body) return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
-
-  let mediaMXC = mContent?.url;
-  const isEncryptedFile = typeof mediaMXC === 'undefined';
-  if (isEncryptedFile) mediaMXC = mContent?.file?.url;
-
-  let thumbnailMXC = mContent?.info?.thumbnail_url;
-
-  if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
-
-  let msgType = mE.getContent()?.msgtype;
-  if (mE.getType() === 'm.sticker') msgType = 'm.image';
-
-  switch (msgType) {
-    case 'm.file':
-      return (
-        <Media.File
-          name={mContent.body}
-          link={mx.mxcUrlToHttp(mediaMXC)}
-          type={mContent.info?.mimetype}
-          file={mContent.file || null}
-        />
-      );
-    case 'm.image':
-      return (
-        <Media.Image
-          name={mContent.body}
-          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
-          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
-          link={mx.mxcUrlToHttp(mediaMXC)}
-          file={isEncryptedFile ? mContent.file : null}
-          type={mContent.info?.mimetype}
-        />
-      );
-    case 'm.audio':
-      return (
-        <Media.Audio
-          name={mContent.body}
-          link={mx.mxcUrlToHttp(mediaMXC)}
-          type={mContent.info?.mimetype}
-          file={mContent.file || null}
-        />
-      );
-    case 'm.video':
-      if (typeof thumbnailMXC === 'undefined') {
-        thumbnailMXC = mContent.info?.thumbnail_file?.url || null;
-      }
-      return (
-        <Media.Video
-          name={mContent.body}
-          link={mx.mxcUrlToHttp(mediaMXC)}
-          thumbnail={thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)}
-          thumbnailFile={isEncryptedFile ? mContent.info?.thumbnail_file : null}
-          thumbnailType={mContent.info?.thumbnail_info?.mimetype || null}
-          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
-          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
-          file={isEncryptedFile ? mContent.file : null}
-          type={mContent.info?.mimetype}
-        />
-      );
-    default:
-      return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
-  }
-}
-
 function genRoomIntro(mEvent, roomTimeline) {
   const mx = initMatrix.matrixClient;
   const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
@@ -149,38 +46,6 @@ function genRoomIntro(mEvent, roomTimeline) {
   );
 }
 
-function getMyEmojiEventId(emojiKey, eventId, roomTimeline) {
-  const mx = initMatrix.matrixClient;
-  const rEvents = roomTimeline.reactionTimeline.get(eventId);
-  let rEventId = null;
-  rEvents?.find((rE) => {
-    if (rE.getRelation() === null) return false;
-    if (rE.getRelation().key === emojiKey && rE.getSender() === mx.getUserId()) {
-      rEventId = rE.getId();
-      return true;
-    }
-    return false;
-  });
-  return rEventId;
-}
-
-function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
-  const myAlreadyReactEventId = getMyEmojiEventId(emojiKey, eventId, roomTimeline);
-  if (typeof myAlreadyReactEventId === 'string') {
-    if (myAlreadyReactEventId.indexOf('~') === 0) return;
-    redactEvent(roomId, myAlreadyReactEventId);
-    return;
-  }
-  sendReaction(roomId, eventId, emojiKey);
-}
-
-function pickEmoji(e, roomId, eventId, roomTimeline) {
-  openEmojiBoard(getEventCords(e), (emoji) => {
-    toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
-    e.target.click();
-  });
-}
-
 const scroll = {
   from: 0,
   limit: 0,
@@ -194,9 +59,10 @@ function RoomViewContent({
 }) {
   const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
   const [onStateUpdate, updateState] = useState(null);
-  const [editEvent, setEditEvent] = useState(null);
+
   const mx = initMatrix.matrixClient;
   const noti = initMatrix.notifications;
+
   if (scroll.limit === 0) {
     const from = roomTimeline.timeline.size - timelineScroll.maxEvents;
     scroll.from = (from < 0) ? 0 : from;
@@ -259,7 +125,7 @@ function RoomViewContent({
       if (roomTimeline.ongoingDecryptionCount === 0) updateState({});
     } else setIsReachedTimelineEnd(true);
   };
-  // force update RoomTimeline on cons.events.roomTimeline.EVENT
+  // force update RoomTimeline
   const updateRT = () => {
     if (timelineScroll.position === 'BOTTOM') {
       trySendingReadReceipt();
@@ -323,291 +189,37 @@ function RoomViewContent({
   }, [onStateUpdate]);
 
   let prevMEvent = null;
-  function genMessage(mEvent) {
-    const myPowerlevel = roomTimeline.room.getMember(mx.getUserId())?.powerLevel;
-    const canIRedact = roomTimeline.room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
-
-    const isContentOnly = (
-      prevMEvent !== null
-      && prevMEvent.getType() !== 'm.room.member'
+  function renderMessage(mEvent) {
+    const isContentOnly = (prevMEvent !== null && prevMEvent.getType() !== 'm.room.member'
       && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
       && prevMEvent.getSender() === mEvent.getSender()
     );
 
-    let content = mEvent.getContent().body;
-    if (typeof content === 'undefined') return null;
-    const msgType = mEvent.getContent()?.msgtype;
-    let reply = null;
-    let reactions = null;
-    let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
-    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
-    const isEdited = roomTimeline.editedTimeline.has(mEvent.getId());
-    const haveReactions = roomTimeline.reactionTimeline.has(mEvent.getId());
-
-    if (isReply) {
-      const parsedContent = parseReply(content);
-      if (parsedContent !== null) {
-        const c = roomTimeline.room.currentState;
-        const displayNameToUserIds = c.getUserIdsWithDisplayName(parsedContent.displayName);
-        const ID = parsedContent.userId || displayNameToUserIds[0];
-        reply = {
-          color: colorMXID(ID || parsedContent.displayName),
-          to: parsedContent.displayName || getUsername(parsedContent.userId),
-          content: parsedContent.replyContent,
-        };
-        content = parsedContent.content;
-      }
-    }
-
-    if (isEdited) {
-      const editedList = roomTimeline.editedTimeline.get(mEvent.getId());
-      const latestEdited = editedList[editedList.length - 1];
-      if (typeof latestEdited.getContent()['m.new_content'] === 'undefined') return null;
-      const latestEditBody = latestEdited.getContent()['m.new_content'].body;
-      const parsedEditedContent = parseReply(latestEditBody);
-      isMarkdown = latestEdited.getContent()['m.new_content'].format === 'org.matrix.custom.html';
-      if (parsedEditedContent === null) {
-        content = latestEditBody;
-      } else {
-        content = parsedEditedContent.content;
-      }
-    }
-
-    if (haveReactions) {
-      reactions = [];
-      roomTimeline.reactionTimeline.get(mEvent.getId()).forEach((rEvent) => {
-        if (rEvent.getRelation() === null) return;
-        function alreadyHaveThisReaction(rE) {
-          for (let i = 0; i < reactions.length; i += 1) {
-            if (reactions[i].key === rE.getRelation().key) return true;
-          }
-          return false;
-        }
-        if (alreadyHaveThisReaction(rEvent)) {
-          for (let i = 0; i < reactions.length; i += 1) {
-            if (reactions[i].key === rEvent.getRelation().key) {
-              reactions[i].users.push(rEvent.getSender());
-              if (reactions[i].isActive !== true) {
-                const myUserId = initMatrix.matrixClient.getUserId();
-                reactions[i].isActive = rEvent.getSender() === myUserId;
-                if (reactions[i].isActive) reactions[i].id = rEvent.getId();
-              }
-              break;
-            }
-          }
-        } else {
-          reactions.push({
-            id: rEvent.getId(),
-            key: rEvent.getRelation().key,
-            users: [rEvent.getSender()],
-            isActive: (rEvent.getSender() === initMatrix.matrixClient.getUserId()),
-          });
-        }
-      });
-    }
-
-    const senderMXIDColor = colorMXID(mEvent.sender.userId);
-    const userAvatar = isContentOnly ? null : (
-      <button type="button" onClick={() => openProfileViewer(mEvent.sender.userId, roomId)}>
-        <Avatar
-          imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
-          text={getUsernameOfRoomMember(mEvent.sender)}
-          bgColor={senderMXIDColor}
-          size="small"
-        />
-      </button>
-    );
-    const userHeader = isContentOnly ? null : (
-      <MessageHeader
-        userId={mEvent.sender.userId}
-        name={getUsernameOfRoomMember(mEvent.sender)}
-        color={senderMXIDColor}
-        time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
-      />
-    );
-    const userReply = reply === null ? null : (
-      <MessageReply
-        name={reply.to}
-        color={reply.color}
-        content={reply.content}
-      />
-    );
-    const userContent = (
-      <MessageContent
-        senderName={getUsernameOfRoomMember(mEvent.sender)}
-        isMarkdown={isMarkdown}
-        content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
-        msgType={msgType}
-        isEdited={isEdited}
-      />
-    );
-    const userReactions = reactions === null ? null : (
-      <MessageReactionGroup>
-        {
-          reactions.map((reaction) => (
-            <MessageReaction
-              key={reaction.id}
-              reaction={reaction.key}
-              users={reaction.users}
-              isActive={reaction.isActive}
-              onClick={() => {
-                toggleEmoji(roomId, mEvent.getId(), reaction.key, roomTimeline);
-              }}
-            />
-          ))
-        }
-        <IconButton
-          onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
-          src={EmojiAddIC}
-          size="extra-small"
-          tooltip="Add reaction"
-        />
-      </MessageReactionGroup>
-    );
-    const userOptions = (
-      <MessageOptions>
-        <IconButton
-          onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
-          src={EmojiAddIC}
-          size="extra-small"
-          tooltip="Add reaction"
-        />
-        <IconButton
-          onClick={() => {
-            viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
-          }}
-          src={ReplyArrowIC}
-          size="extra-small"
-          tooltip="Reply"
-        />
-        {(mEvent.getSender() === mx.getUserId() && !isMedia(mEvent)) && (
-          <IconButton
-            onClick={() => setEditEvent(mEvent)}
-            src={PencilIC}
-            size="extra-small"
-            tooltip="Edit"
-          />
-        )}
-        <ContextMenu
-          content={() => (
-            <>
-              <MenuHeader>Options</MenuHeader>
-              <MenuItem
-                iconSrc={EmojiAddIC}
-                onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
-              >
-                Add reaction
-              </MenuItem>
-              <MenuItem
-                iconSrc={ReplyArrowIC}
-                onClick={() => {
-                  viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
-                }}
-              >
-                Reply
-              </MenuItem>
-              {(mEvent.getSender() === mx.getUserId() && !isMedia(mEvent)) && (
-                <MenuItem iconSrc={PencilIC} onClick={() => setEditEvent(mEvent)}>Edit</MenuItem>
-              )}
-              <MenuItem
-                iconSrc={TickMarkIC}
-                onClick={() => openReadReceipts(roomId, mEvent.getId())}
-              >
-                Read receipts
-              </MenuItem>
-              {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
-                <>
-                  <MenuBorder />
-                  <MenuItem
-                    variant="danger"
-                    iconSrc={BinIC}
-                    onClick={() => {
-                      if (window.confirm('Are you sure you want to delete this event')) {
-                        redactEvent(roomId, mEvent.getId());
-                      }
-                    }}
-                  >
-                    Delete
-                  </MenuItem>
-                </>
-              )}
-            </>
-          )}
-          render={(toggleMenu) => (
-            <IconButton
-              onClick={toggleMenu}
-              src={VerticalMenuIC}
-              size="extra-small"
-              tooltip="Options"
-            />
-          )}
-        />
-      </MessageOptions>
-    );
-
-    const isEditingEvent = editEvent?.getId() === mEvent.getId();
-    const myMessageEl = (
-      <Message
-        key={mEvent.getId()}
-        avatar={userAvatar}
-        header={userHeader}
-        reply={userReply}
-        content={editEvent !== null && isEditingEvent ? null : userContent}
-        msgType={msgType}
-        editContent={editEvent !== null && isEditingEvent ? (
-          <MessageEdit
-            content={content}
-            onSave={(newBody) => {
-              if (newBody !== content) {
-                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
-              }
-              setEditEvent(null);
-            }}
-            onCancel={() => setEditEvent(null)}
-          />
-        ) : null}
-        reactions={userReactions}
-        options={editEvent !== null && isEditingEvent ? null : userOptions}
-      />
-    );
-    return myMessageEl;
-  }
-
-  function renderMessage(mEvent) {
-    if (!cons.supportEventTypes.includes(mEvent.getType())) return false;
-    if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
-    if (mEvent.isRedacted()) return false;
-
-    if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
-
-    let divider = null;
+    let DividerComp = null;
     if (prevMEvent !== null && isNotInSameDay(mEvent.getDate(), prevMEvent.getDate())) {
-      divider = <Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />;
+      DividerComp = <Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />;
     }
+    prevMEvent = mEvent;
 
-    if (mEvent.getType() !== 'm.room.member') {
-      const messageComp = genMessage(mEvent);
-      prevMEvent = mEvent;
+    if (mEvent.getType() === 'm.room.member') {
+      const timelineChange = parseTimelineChange(mEvent);
+      if (timelineChange === null) return false;
       return (
         <React.Fragment key={`box-${mEvent.getId()}`}>
-          {divider}
-          {messageComp}
+          {DividerComp}
+          <TimelineChange
+            key={mEvent.getId()}
+            variant={timelineChange.variant}
+            content={timelineChange.content}
+            time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
+          />
         </React.Fragment>
       );
     }
-
-    prevMEvent = mEvent;
-    const timelineChange = parseTimelineChange(mEvent);
-    if (timelineChange === null) return false;
     return (
       <React.Fragment key={`box-${mEvent.getId()}`}>
-        {divider}
-        <TimelineChange
-          key={mEvent.getId()}
-          variant={timelineChange.variant}
-          content={timelineChange.content}
-          time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
-        />
+        {DividerComp}
+        <Message mEvent={mEvent} isBodyOnly={isContentOnly} roomTimeline={roomTimeline} />
       </React.Fragment>
     );
   }
@@ -625,7 +237,8 @@ function RoomViewContent({
           if (mEvent.getType() !== 'm.room.create' && !isReachedTimelineEnd) tl.push(genPlaceholders(1));
           if (mEvent.getType() !== 'm.room.create' && isReachedTimelineEnd) tl.push(genRoomIntro(undefined, roomTimeline));
         }
-        tl.push(renderMessage(mEvent));
+        if (mEvent.getType() === 'm.room.create') tl.push(genRoomIntro(mEvent, roomTimeline));
+        else tl.push(renderMessage(mEvent));
       }
       i += 1;
       if (i > scroll.getEndIndex()) break;

src/app/organisms/room/RoomViewInput.jsx

@@ -9,6 +9,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { openEmojiBoard } from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
 import { bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
@@ -152,9 +153,9 @@ function RoomViewInput({
     textAreaRef.current.focus();
   }
 
-  function setUpReply(userId, eventId, content) {
-    setReplyTo({ userId, eventId, content });
-    roomsInput.setReplyTo(roomId, { userId, eventId, content });
+  function setUpReply(userId, eventId, body) {
+    setReplyTo({ userId, eventId, body });
+    roomsInput.setReplyTo(roomId, { userId, eventId, body });
     focusInput();
   }
 
@@ -164,7 +165,7 @@ function RoomViewInput({
     roomsInput.on(cons.events.roomsInput.FILE_UPLOADED, clearAttachment);
     viewEvent.on('cmd_error', errorCmd);
     viewEvent.on('cmd_fired', firedCmd);
-    viewEvent.on('reply_to', setUpReply);
+    navigation.on(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
     if (textAreaRef?.current !== null) {
       isTyping = false;
       focusInput();
@@ -178,7 +179,7 @@ function RoomViewInput({
       roomsInput.removeListener(cons.events.roomsInput.FILE_UPLOADED, clearAttachment);
       viewEvent.removeListener('cmd_error', errorCmd);
       viewEvent.removeListener('cmd_fired', firedCmd);
-      viewEvent.removeListener('reply_to', setUpReply);
+      navigation.removeListener(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
       if (isCmdActivated) deactivateCmd();
       if (textAreaRef?.current === null) return;
 
@@ -410,7 +411,7 @@ function RoomViewInput({
           userId={replyTo.userId}
           name={getUsername(replyTo.userId)}
           color={colorMXID(replyTo.userId)}
-          content={replyTo.content}
+          body={replyTo.body}
         />
       </div>
     );

src/app/organisms/room/common.jsx

@@ -165,27 +165,6 @@ function getUsersActionJsx(roomId, userIds, actionStr) {
   return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} other are {actionStr}</>;
 }
 
-function parseReply(rawContent) {
-  if (rawContent.indexOf('>') !== 0) return null;
-  let content = rawContent.slice(rawContent.indexOf('<') + 1);
-  const user = content.slice(0, content.indexOf('>'));
-
-  content = content.slice(content.indexOf('>') + 2);
-  const replyContent = content.slice(0, content.indexOf('\n\n'));
-  content = content.slice(content.indexOf('\n\n') + 2);
-
-  if (user === '') return null;
-
-  const isUserId = user.match(/^@.+:.+/);
-
-  return {
-    userId: isUserId ? user : null,
-    displayName: isUserId ? null : user,
-    replyContent,
-    content,
-  };
-}
-
 function parseTimelineChange(mEvent) {
   const tJSXMsgs = getTimelineJSXMessages();
   const makeReturnObj = (variant, content) => ({
@@ -237,6 +216,5 @@ function parseTimelineChange(mEvent) {
 export {
   getTimelineJSXMessages,
   getUsersActionJsx,
-  parseReply,
   parseTimelineChange,
 };