semantic-ui-react#Feed JavaScript Examples
The following examples show how to use
semantic-ui-react#Feed.
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: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function postLikeNotification({ _id, createdAt, sender, post }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>liked your</span>{" "}
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #2
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function commentLikeNotification({ _id, createdAt, sender, comment, post }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>liked your comment</span>{" "}
{comment[0].text} <span style={{ fontWeight: "normal" }}>on</span>{" "}
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #3
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function likeCommentReplyNotification({ _id, createdAt, sender, reply, post }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>liked your reply</span>{" "}
{reply[0].text} <span style={{ fontWeight: "normal" }}>on</span>{" "}
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #4
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function postTaggedNotification({ _id, createdAt, sender, post }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}> tagged you on</span>{" "}
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #5
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function commentTaggedNotification({ _id, createdAt, sender, post }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>mentioned you on</span>{" "}
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #6
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function addCommentNotification({ _id, createdAt, sender, comment, post }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>commented</span>{" "}
{comment[0].text} <span style={{ fontWeight: "normal" }}>on</span>{" "}
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #7
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function followNotification({ _id, createdAt, sender }) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>followed you</span>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
</Feed.Content>
</Feed.Event>
);
}
Example #8
| Source File: NotificationPopup.js From social-network with MIT License | 6 votes |
|
function commentReplyNotification({
_id,
createdAt,
post,
sender,
reply,
comment
}) {
return (
<Feed.Event key={_id}>
<Feed.Label
image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
/>
<Feed.Content>
<Feed.Summary>
<Feed.User as={Link} to={"/" + sender[0].username}>
{sender[0].username}
</Feed.User>{" "}
<span style={{ fontWeight: "normal" }}>replied</span> {reply[0].text}{" "}
<span style={{ fontWeight: "normal" }}>to</span> {comment[0].text}
<span style={{ fontWeight: "normal" }}> on </span>
<Link to={`/p/${post[0]._id}`}>post</Link>
<Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
</Feed.Summary>
<Feed.Extra images>
<Link to={`/p/${post[0]._id}`}>
<Image
rounded
src={`/images/post-images/thumbnail/${post[0].photo}`}
/>
</Link>
</Feed.Extra>
</Feed.Content>
</Feed.Event>
);
}
Example #9
| Source File: App.js From ReactCookbook-source with MIT License | 5 votes |
|
function App() {
const [author, setAuthor] = useState('')
const [text, setText] = useState('')
const [messages, setMessages] = useState([])
return (
<div className="App">
<Form>
<Form.Field>
<label htmlFor="author">Author</label>
<Input
value={author}
id="author"
onChange={(evt) => setAuthor(evt.target.value)}
/>
</Form.Field>
<Form.Field>
<label htmlFor="text">Message</label>
<TextArea
value={text}
id="text"
onChange={(evt) => setText(evt.target.value)}
/>
</Form.Field>
<Button
basic
onClick={() => {
setMessages((m) => [
{
icon: 'pencil',
date: new Date().toString(),
summary: author,
extraText: text,
},
...m,
])
setAuthor('')
setText('')
}}
>
Post
</Button>
</Form>
<Feed events={messages} />
</div>
)
}
Example #10
| Source File: NotificationPopup.js From social-network with MIT License | 5 votes |
|
NotificationPopup = ({
dispatch,
isOpen,
children,
notifications,
allNotificationsCount
}) => {
const notificationsFeed = notifications.map(notification => {
if (notification.type === "like_post") {
return postLikeNotification(notification);
} else if (notification.type === "follow") {
return followNotification(notification);
} else if (notification.type === "post_comment") {
return addCommentNotification(notification);
} else if (notification.type === "comment_reply") {
return commentReplyNotification(notification);
} else if (notification.type === "comment_tagged") {
return commentTaggedNotification(notification);
} else if (notification.type === "post_tagged") {
return postTaggedNotification(notification);
} else if (notification.type === "like_commentReply") {
return likeCommentReplyNotification(notification);
} else {
return commentLikeNotification(notification);
}
});
const fetchData = () => {
const lastId = notifications[notifications.length - 1]._id;
dispatch(
notificationActions.fetchNotifications({ initialFetch: false, lastId })
);
};
return (
<Popup
trigger={children}
on="click"
position="top center"
style={{ border: "none" }}
open={isOpen}
>
<Grid centered divided columns="equal">
<Card
id="scrollableDiv"
style={{ overflow: "auto", maxHeight: "300px" }}
>
<Card.Content>
{" "}
<InfiniteScroll
dataLength={notificationsFeed.length} //This is important field to render the next data
next={fetchData}
scrollableTarget="scrollableDiv"
hasMore={
allNotificationsCount === notifications.length ? false : true
}
loader={<h4>Loading...</h4>}
endMessage={
<Divider horizontal>
<Header as="h5">Yay! You have seen it all</Header>
</Divider>
}
>
<Feed>{notificationsFeed} </Feed>
</InfiniteScroll>
</Card.Content>
</Card>
</Grid>
</Popup>
);
}
Example #11
| 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 #12
| 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>
);
}
