69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { getAvatarColor } from "../../../../modules/collaboration/functions/getAvatarColor";
|
|
import { getUserData } from "../../../../functions/getUserData";
|
|
import { getRelativeTime } from "../function/getRelativeTime";
|
|
|
|
interface CommentThreadsProps {
|
|
commentClicked: () => void;
|
|
comment?: CommentSchema;
|
|
}
|
|
|
|
const CommentThreads: React.FC<CommentThreadsProps> = ({ commentClicked, comment }) => {
|
|
const [expand, setExpand] = useState(false);
|
|
const commentsedUsers = [{ creatorId: "1" }];
|
|
const { userName } = getUserData();
|
|
|
|
function getUsername(userId: string) {
|
|
const UserName = userName?.charAt(0).toUpperCase() || "user";
|
|
return UserName;
|
|
}
|
|
|
|
function getDetails(type?: "clicked") {
|
|
if (type === "clicked") {
|
|
setExpand(true);
|
|
commentClicked();
|
|
} else {
|
|
setExpand((prev) => !prev);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="comments-threads-wrapper">
|
|
<button
|
|
onPointerEnter={() => getDetails()}
|
|
onPointerLeave={() => getDetails()}
|
|
onClick={() => getDetails("clicked")}
|
|
className={`comments-threads-container ${expand ? "open" : "closed"} unread`}
|
|
>
|
|
<div className="users-commented">
|
|
{commentsedUsers.map((val, i) => (
|
|
<div
|
|
className="users"
|
|
key={val.creatorId}
|
|
style={{
|
|
background: getAvatarColor(i, getUsername(val.creatorId)),
|
|
}}
|
|
>
|
|
{getUsername(val.creatorId)[0]}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className={`last-comment-details ${expand ? "expand" : ""}`}>
|
|
<div className="header">
|
|
<div className="user-name">{userName}</div>
|
|
<div className="time">{comment?.createdAt && getRelativeTime(comment.createdAt)}</div>
|
|
</div>
|
|
<div className="message">{comment?.threadTitle}</div>
|
|
{comment && comment?.comments.length > 0 && (
|
|
<div className="comments">
|
|
{comment?.comments.length} {comment?.comments.length === 1 ? "comment" : "replies"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommentThreads;
|