const { componentOwnerId, contract, projectId, taskId } = props; const Comments = styled.div` width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 84px; margin-top: 1rem; `; const CommentsContainer = styled.div` display: flex; flex-direction: column; gap: 10px; width: 520px; `; const OldComments = styled.div` max-height: 300px; overflow-y: scroll; scrollbar-color: black black; ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: black; } * { scrollbar-color: black black; } html::-webkit-scrollbar { width: 12px; } html::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } html::-webkit-scrollbar-thumb:hover { background-color: black; } `; const Label = styled.label` color: #777583; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; width: 104px; height: 40px; padding: 8px 60px 8px 16px; border-radius: 4px; background-color: transparent; :focus { outline-color: #d0fc42; outline-style: solid; outline-width: 1px; } border: none; `; const [comments, setComments] = useState(props.comments); const addComment = useCallback( (comment) => { const newComment = { id: comments.length + 1, member_id: context.accountId, message: comment, date: new Date(), }; setComments(comments.concat(newComment)); return Near.fakCalimeroCall(contract, "comment_on_task", { project_id: projectId, task_id: taskId, message: comment, }); }, [comments, contract, projectId, taskId] ); const getComments = useCallback( (taskId) => { try { Near.fakCalimeroCall(contract, "get_task", { project_id: projectId, task_id: taskId, }).then((task) => { setComments(task.comments); }); } catch (e) { console.log("getComments", e); } }, [setComments] ); useEffect(() => { if (taskId) { getComments(taskId); } }, [taskId]); return ( <Comments> <Label>Comments</Label> <CommentsContainer> {comments && ( <OldComments> {comments.map((comment, id) => ( <Widget key={comment.id + id} src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.Comment`} props={{ comment, componentOwnerId, }} /> ))} </OldComments> )} <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.CommentInput`} props={{ componentOwnerId, contract, projectId, taskId, addComment, }} /> </CommentsContainer> </Comments> );