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;
|