All files / Message Message.js

100% Statements 4/4
66.66% Branches 12/18
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83                  10x               6x   6x         6x                                                                                                                    
import React from "react";
import Highlighter from "react-highlight-words";
import "./Message.scss";
import classNames from "classnames";
import { getHoursFromTimestamp } from "../../_helpers/getHoursFromTimestamp";
import { useParams } from "react-router-dom";
import { ProfilePicPlaceholder } from "hc-inbox-profile";
import { profilePicPlaceholderStyle } from "../ConversationShell/ConversationShell";
 
const Message = ({
  name,
  query,
  isMyMessage,
  message,
  centralMessage,
  queryMessagesBody,
}) => {
  const { username } = useParams();
 
  const messageClass = classNames("message-row", {
    "you-message": isMyMessage,
    "other-message": !isMyMessage,
  });
 
  return (
    <div className="Message">
      <div className={messageClass}>
        <div className="message-content">
          {isMyMessage ? null : (
            <div className={"img-container"}>
              <ProfilePicPlaceholder
                name={
                  queryMessagesBody ? queryMessagesBody.user?.username : name
                }
                id={
                  queryMessagesBody
                    ? queryMessagesBody.user?.thread?.sender?.id
                    : username
                }
                height={profilePicPlaceholderStyle.height}
                width={profilePicPlaceholderStyle.width}
                fontSize={profilePicPlaceholderStyle.fontSize}
              />
              <div className={"img-container-status-circle"}></div>
            </div>
          )}
          <div
            className={`message-container ${
              queryMessagesBody !== null
                ? message?.id === centralMessage
                  ? "selected-message"
                  : ""
                : ""
            }`}
          >
            <div className="message-title">
              {!isMyMessage && <span>{message?.from}</span>}
              <span>{getHoursFromTimestamp(parseInt(message?.timestamp))}</span>
            </div>
            <div className="message-body">
              {queryMessagesBody !== null ? (
                message?.id === centralMessage ? (
                  <Highlighter
                    highlightClassName="highlighted-search-text"
                    searchWords={[query?.parameter]}
                    textToHighlight={message?.body? message.body : ""}
                  />
                ) : (
                  message?.body
                )
              ) : (
                message?.body
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
 
export default Message;