semantic-ui-react#Comment JavaScript Examples
The following examples show how to use
semantic-ui-react#Comment.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: PostComments.js From social-network with MIT License | 6 votes |
|
render() {
const { post, comments } = this.props;
if (comments[post.postId]) {
const fetchedComments = comments[post.postId].comments;
const hasMore =
fetchedComments.length === post.commentsCount ? false : true;
const postComments = fetchedComments.map(comment => (
<PostComment key={comment._id} comment={comment} post={post} />
));
const fetching = comments[post.postId].fetching;
return (
<div className="post-comments">
<Comment.Group
size="large"
onScroll={e => this.handleScroll(e, hasMore)}
style={{ overflow: "auto", maxHeight: "600px" }}
>
{fetching ? <p>loading...</p> : null}
{postComments.length ? postComments : null}
{fetchedComments.length && hasMore ? (
<Fragment>
<Divider></Divider>
<Button loading={fetching} onClick={this.fetchData}>
Load {post.commentsCount - fetchedComments.length} more
</Button>
</Fragment>
) : null}
</Comment.Group>
</div>
);
} else return null;
}
Example #2
| Source File: CommentReplies.js From social-network with MIT License | 5 votes |
|
render() {
const { collapsed } = this.state;
const {
replies,
comment: { commentId, repliesNum },
post
} = this.props;
let comments = null;
const hasMore =
repliesNum === replies[commentId].comments.length ? false : true;
const fetching = replies[commentId].fetching;
if (replies[commentId].comments.length) {
comments = replies[commentId].comments.map(comment => {
return <CommentReply key={comment._id} comment={comment} post={post} />;
});
}
return (
<Fragment>
{repliesNum !== 0 ? (
<div
onClick={() => this.handleCheckbox()}
style={{ cursor: "pointer", margin: "20px 0 20px" }}
>
<Icon name="arrow down" />{" "}
{collapsed ? repliesNum + " replies" : "Show less"}
</div>
) : null}
<Comment.Group collapsed={collapsed}>
{comments}
{hasMore ? (
<Fragment>
<Divider></Divider>
<Button loading={fetching} onClick={this.fetchReplies}>
Load {repliesNum - replies[commentId].comments.length} more
</Button>
</Fragment>
) : null}
</Comment.Group>
</Fragment>
);
}
Example #3
| Source File: CommentReply.js From social-network with MIT License | 5 votes |
|
CommentReply = ({ username, comment, post: { postId, photo } }) => {
return (
<Comment>
<Comment.Avatar
src={`/images/profile-picture/100x100/${comment.author[0].profilePicture}`}
/>
<Comment.Content>
<Comment.Author
as={Link}
to={
comment.author[0].username === username
? "/profile"
: "/" + comment.author[0].username
}
>
{comment.author[0].firstName + " " + comment.author[0].lastName}
</Comment.Author>
<Comment.Metadata>
<div>{dayjs(comment.createdAt).fromNow()}</div>
</Comment.Metadata>
<Comment.Text style={{ whiteSpace: "pre-line" }}>
<Linkify options={linkifyOptions}>{comment.text}</Linkify>
</Comment.Text>
<Comment.Actions>
<LikeCommetReply
comment={{
commentId: comment._id,
commentText: comment.text,
likes: comment.likes,
authorId: comment.author[0]._id,
commentAt: comment.commentAt
}}
post={{
postId,
photo
}}
/>
</Comment.Actions>
</Comment.Content>
</Comment>
);
}
Example #4
| Source File: LikeCommetReply.js From social-network with MIT License | 5 votes |
|
LikeCommentReply = ({
dispatch,
comment: { commentId, likes, commentAt, authorId },
post: { postId },
commentReplyLikes,
commentLikeList
}) => {
const handleCommentLike = () => {
dispatch(
commentActions.likeCommentReply({
commentId,
commentAt,
authorId,
postId,
commentReplyLikes
})
);
};
const getCommentLikes = () => {
dispatch(commentActions.getCommentReplyLikes(commentId));
};
const handleClose = () => {
dispatch({ type: "CLEAR_COMMENT_REPLY_LIKES" });
};
const list = commentLikeList.length
? commentLikeList.map(({ author }) => (
<FollowingFollowerList
key={author._id}
user={author}
></FollowingFollowerList>
))
: null;
return (
<Fragment>
<Modal
trigger={
<span
style={{ cursor: "pointer", marginRight: "3px" }}
onClick={getCommentLikes}
>
{likes}
</span>
}
onClose={handleClose}
>
<Modal.Header>Likes</Modal.Header>
<Modal.Content scrolling>
<Modal.Description>
<List verticalAlign="middle" size="huge">
{list}
</List>
</Modal.Description>
</Modal.Content>
</Modal>
<Comment.Action onClick={handleCommentLike}>
{commentReplyLikes.some(e => e === commentId) ? (
<Icon style={{ color: "#ed4956" }} name="heart" />
) : (
<Icon name="heart" />
)}
Like
</Comment.Action>
</Fragment>
);
}
Example #5
| Source File: LikeComment.js From social-network with MIT License | 5 votes |
|
LikeComment = ({
dispatch,
comment: { commentId, likes, authorId },
commentLikes,
post: { postId },
commentLikeList
}) => {
const handleCommentLike = () => {
dispatch(
commentActions.likeComment({
commentId,
authorId,
postId,
commentLikes
})
);
};
const getCommentLikes = () => {
dispatch(commentActions.getCommentLikes(commentId));
};
const handleClose = () => {
dispatch({ type: "CLEAR_COMMENT_LIKES" });
};
const list = commentLikeList.length
? commentLikeList.map(({ author }) => (
<FollowingFollowerList
key={author._id}
user={author}
></FollowingFollowerList>
))
: null;
return (
<Fragment>
<Modal
trigger={
<span
style={{ cursor: "pointer", marginRight: "3px" }}
onClick={getCommentLikes}
>
{likes}
</span>
}
onClose={handleClose}
>
<Modal.Header>Likes</Modal.Header>
<Modal.Content scrolling>
<Modal.Description>
<List verticalAlign="middle" size="huge">
{list}
</List>
</Modal.Description>
</Modal.Content>
</Modal>
<Comment.Action onClick={handleCommentLike}>
{commentLikes.some(e => e === commentId) ? (
<Icon style={{ color: "#ed4956" }} name="heart" />
) : (
<Icon name="heart" />
)}
Like
</Comment.Action>
</Fragment>
);
}
Example #6
| Source File: ViewQuestion.js From graphql-sample-apps with Apache License 2.0 | 4 votes |
|
export default function ViewQuestion(props) {
const [numLikes, setNumLikes] = useState(0);
const [answer, setAnswer] = useState("");
const [collapsed, setCollapsed] = useState(true);
const history = useHistory();
let params = queryString.parse(props.location.search);
let questionID = params.questionID;
const { loading, error, data } = useQuery(GET_QUESTION, {
variables: { questionID },
fetchPolicy: "network-only"
});
const [addAnswer] = useMutation(ADD_ANSWER);
if (loading) return "Fetching Questions...";
if (error) return `Error: ${error}`;
const question = data.getQuestion;
if (numLikes === 0) {
setNumLikes(question.numLikes);
}
return (
<div className="container">
<div className="h3 text-center">
{question.title}
</div>
<hr />
<div className="text-post">
{question.text}
<span className="tagsset-post">
{question.tags.map(tag => (
<span className="badge badge-secondary tag-post" key={tag}>
{tag}
</span>
))}
</span>
</div>
<Feed.Like>
<Icon name="like" />
{question.likes} Likes
</Feed.Like>
<Comment.Group>
<Header as="h5" dividing>
Comments
</Header>
<Comment>
{question.comments.length !== 0 &&
question.comments.map(commentL1 => {
return (
<Comment.Content key={commentL1.id}>
<Comment.Author as="a">
{commentL1.author.username}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(commentL1.datePublished).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>{commentL1.text}</Comment.Text>
</Comment.Content>
);
})}
<Comment.Group collapsed={collapsed}>
<Comment>
{question.comments.length !== 0 &&
question.comments[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{question.comments[0].comments[0].author.username}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.comments[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.comments[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
<Comment.Group>
<Comment>
{question.comments.length !== 0 &&
question.comments[0].comments.length !== 0 &&
question.comments[0].comments[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{
question.comments[0].comments[0].comments[0].author
.username
}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.comments[0].comments[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.comments[0].comments[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
</Comment>
</Comment.Group>
</Comment>
</Comment.Group>
</Comment>
{question.comments.length !== 0 && collapsed && (
<button
type="button"
className="btn btn-link"
onClick={e => setCollapsed(false)}
>
More comments
</button>
)}
</Comment.Group>
<Comment.Group>
<Header as="h5" dividing>
Answers
</Header>
<Comment>
{question.answers.map(answer => (
<Comment.Content key={answer.id}>
<Comment.Author as="a">{answer.author.username}</Comment.Author>
<Comment.Metadata>
<span>{new Date(answer.datePublished).toLocaleString()}</span>
</Comment.Metadata>
<Comment.Text>{answer.text}</Comment.Text>
</Comment.Content>
))}
<Comment.Group>
<Comment>
{question.answers.length !== 0 &&
question.answers[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{question.answers[0].comments[0].author.username}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.answers[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.answers[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
<Comment.Group>
<Comment>
{question.answers.length !== 0 &&
question.answers[0].comments.length !== 0 &&
question.answers[0].comments[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{
question.answers[0].comments[0].comments[0].author
.username
}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.answers[0].comments[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.answers[0].comments[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
</Comment>
</Comment.Group>
</Comment>
</Comment.Group>
</Comment>
<Form reply>
<Form.TextArea
value={answer}
onChange={e => setAnswer(e.target.value)}
/>
<Button
content="Add Answer"
labelPosition="left"
icon="edit"
primary
onClick={async e => {
e.preventDefault();
await addAnswer({ variables: { answer, questionID } });
history.push({
pathname: '/',
});
history.push({
pathname: '/view',
search: `?questionID=${questionID}`
});
}}
/>
</Form>
</Comment.Group>
<div>
</div>
</div>
);
}
Example #7
| Source File: ViewQuestion.js From graphql-sample-apps with Apache License 2.0 | 4 votes |
|
export default function ViewQuestion(props) {
const [numLikes, setNumLikes] = useState(0);
const [answer, setAnswer] = useState("");
const [collapsed, setCollapsed] = useState(true);
const history = useHistory();
const { user } = useAuth0();
let params = queryString.parse(props.location.search);
let questionID = params.questionID;
let author
if (user !== undefined) {
author = {"username": user.email, "email": user.email}
}
let datePublished = new Date().toISOString()
const { loading, error, data } = useQuery(GET_QUESTION, {
variables: { questionID },
fetchPolicy: "network-only"
});
const [addAnswer] = useMutation(ADD_ANSWER);
if (loading) return "Fetching Questions...";
if (error) return `Error: ${error}`;
const question = data.getQuestion;
if (numLikes === 0) {
setNumLikes(question.numLikes);
}
return (
<div className="container">
<div className="h3 text-center">
{question.title}
</div>
<hr />
<div className="text-post">
{question.text}
<span className="tagsset-post">
{question.tags.map(tag => (
<span className="badge badge-secondary tag-post" key={tag}>
{tag}
</span>
))}
</span>
</div>
<Feed.Like>
<Icon name="like" />
{question.likes} Likes
</Feed.Like>
<Comment.Group>
<Header as="h5" dividing>
Comments
</Header>
<Comment>
{question.comments.length !== 0 &&
question.comments.map(commentL1 => {
return (
<Comment.Content key={commentL1.id}>
<Comment.Author as="a">
{commentL1.author.username}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(commentL1.datePublished).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>{commentL1.text}</Comment.Text>
</Comment.Content>
);
})}
<Comment.Group collapsed={collapsed}>
<Comment>
{question.comments.length !== 0 &&
question.comments[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{question.comments[0].comments[0].author.username}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.comments[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.comments[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
<Comment.Group>
<Comment>
{question.comments.length !== 0 &&
question.comments[0].comments.length !== 0 &&
question.comments[0].comments[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{
question.comments[0].comments[0].comments[0].author
.username
}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.comments[0].comments[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.comments[0].comments[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
</Comment>
</Comment.Group>
</Comment>
</Comment.Group>
</Comment>
{question.comments.length !== 0 && collapsed && (
<button
type="button"
className="btn btn-link"
onClick={e => setCollapsed(false)}
>
More comments
</button>
)}
</Comment.Group>
<Comment.Group>
<Header as="h5" dividing>
Answers
</Header>
<Comment>
{question.answers.map(answer => (
<Comment.Content key={answer.id}>
<Comment.Author as="a">{answer.author.username}</Comment.Author>
<Comment.Metadata>
<span>{new Date(answer.datePublished).toLocaleString()}</span>
</Comment.Metadata>
<Comment.Text>{answer.text}</Comment.Text>
</Comment.Content>
))}
<Comment.Group>
<Comment>
{question.answers.length !== 0 &&
question.answers[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{question.answers[0].comments[0].author.username}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.answers[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.answers[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
<Comment.Group>
<Comment>
{question.answers.length !== 0 &&
question.answers[0].comments.length !== 0 &&
question.answers[0].comments[0].comments.length !== 0 && (
<Comment.Content>
<Comment.Author as="a">
{
question.answers[0].comments[0].comments[0].author
.username
}
</Comment.Author>
<Comment.Metadata>
<span>
{new Date(
question.answers[0].comments[0].comments[0].datePublished
).toLocaleString()}
</span>
</Comment.Metadata>
<Comment.Text>
{question.answers[0].comments[0].comments[0].text}
</Comment.Text>
</Comment.Content>
)}
</Comment>
</Comment.Group>
</Comment>
</Comment.Group>
</Comment>
<Form reply>
<Form.TextArea
value={answer}
onChange={e => setAnswer(e.target.value)}
/>
<Button
content="Add Answer"
labelPosition="left"
icon="edit"
primary
onClick={async e => {
e.preventDefault();
await addAnswer({ variables: { answer, questionID, author, datePublished } });
history.push({
pathname: '/',
});
history.push({
pathname: '/view',
search: `?questionID=${questionID}`
});
}}
/>
</Form>
</Comment.Group>
<div>
</div>
</div>
);
}
Example #8
| Source File: PostComment.js From social-network with MIT License | 4 votes |
|
render() {
const { post, comment, username } = this.props;
const { isOpen, replyText, suggestions } = this.state;
return (
<Comment>
<Comment.Avatar
src={`/images/profile-picture/100x100/${comment.author[0].profilePicture}`}
/>
<Comment.Content>
<Comment.Author
as={Link}
to={
comment.author[0].username === username
? "/profile"
: "/" + comment.author[0].username
}
>
{comment.author[0].firstName + " " + comment.author[0].lastName}
</Comment.Author>
<Comment.Metadata>
<div>{dayjs(comment.createdAt).fromNow()}</div>
</Comment.Metadata>
<Comment.Text style={{ whiteSpace: "pre-line" }}>
<Linkify options={linkifyOptions}>{comment.text}</Linkify>
</Comment.Text>
<Comment.Actions>
<Comment.Action onClick={() => this.handleFormToggle()}>
Reply
</Comment.Action>
<LikeComment
comment={{
commentId: comment._id,
commentText: comment.text,
likes: comment.likes,
authorId: comment.author[0]._id
}}
post={{
postId: post.postId,
photo: post.photo
}}
/>
</Comment.Actions>
{isOpen ? (
<Form reply onSubmit={() => this.handleSubmit()}>
<TextInput
maxOptions={8}
offsetY={20}
minChars={1}
value={replyText}
onRequestOptions={this.debouncedRequestOptions}
options={suggestions}
onChange={this.handleChange}
type="textarea"
name="replyText"
style={{ marginBottom: "1%" }}
/>
<Button
content="Add Reply"
labelPosition="left"
icon="edit"
primary
/>
</Form>
) : null}
</Comment.Content>
<CommentReplies
comment={{
commentId: comment._id,
//number fo replies
repliesNum: comment.replies
}}
post={{
postId: post.postId,
photo: post.photo
}}
/>
</Comment>
);
}
