All files / components/ChatItem ChatItem.js

100% Statements 20/20
87.5% Branches 7/8
100% Functions 5/5
100% Lines 20/20

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              4x 7x   7x   7x       7x   7x   7x 2x 2x 2x     7x 3x     7x 3x 2x         7x 5x 2x 2x         7x                                                                
import { ProfilePicPlaceholder } from "hc-inbox-profile";
import React, { useContext, useEffect, useState } from "react";
import ChatContext from "../../context/chat/ChatContext";
import { getHoursFromTimestamp } from "../../_helpers/getHoursFromTimestamp";
import { profilePicPlaceholderStyle } from "../ConversationShell/ConversationShell";
import styles from "./ChatItem.module.scss";
 
const ChatItem = ({ user, active, onClick }) => {
  const chatContext = useContext(ChatContext);
 
  const { unrepliedCount } = chatContext;
 
  const [fields, setFields] = useState({
    recentMessage: null,
    messageTime: null,
  });
  const [counts, setCounts] = useState({});
 
  const { recentMessage, messageTime } = fields;
 
  const getrecentMessage = () => {
    let length = user?.threads[0]?.messages?.length;
    let field = user?.threads[0]?.messages[length - 1];
    setFields({ ...fields, recentMessage: field });
  };
 
  useEffect(() => {
    setCounts(unrepliedCount);
  }, [unrepliedCount]);
 
  useEffect(() => {
    if (user) {
      getrecentMessage();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);
 
  useEffect(() => {
    if (recentMessage !== null) {
      let time = getHoursFromTimestamp(parseInt(recentMessage?.timestamp));
      setFields({ ...fields, messageTime: time });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [recentMessage]);
 
  return (
    <div
      className={`${!active ? styles.ChatItem : styles.ChatItem__active}`}
      onClick={onClick}
    >
      <div className={styles.ChatItem__imgcontainer}>
        <ProfilePicPlaceholder
          name={user?.username}
          id={user?.id}
          height={profilePicPlaceholderStyle.height}
          width={profilePicPlaceholderStyle.width}
          fontSize={profilePicPlaceholderStyle.fontSize}
        />
        <div className={styles.ChatItem__imgcontainer__status_circle}></div>
      </div>
      <div className={styles.ChatItem__body}>
        <div className={styles.ChatItem__body__name}>
          <span>{user?.username}</span>
          <small>{messageTime}</small>
        </div>
        <div className={styles.ChatItem__body__message}>
          <span>{recentMessage?.body}</span>
          {counts[user?.threads[0]?.id] !== 0 && (
            <small>{counts[user?.threads[0]?.id]}</small>
          )}
        </div>
      </div>
    </div>
  );
};
 
export default ChatItem;