forked from Kieran/snort
Merge pull request #11 from v0l/reactions
feat: add support for positive and negative reactions
This commit is contained in:
commit
456bd1b2fb
@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
|
|||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import { faHeart, faReply, faInfo, faTrash } from "@fortawesome/free-solid-svg-icons";
|
import { faHeart, faThumbsDown, faReply, faInfo, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
import Event from "../nostr/Event";
|
import Event from "../nostr/Event";
|
||||||
@ -20,12 +20,21 @@ export default function Note(props) {
|
|||||||
const dataEvent = props["data-ev"];
|
const dataEvent = props["data-ev"];
|
||||||
const reactions = props.reactions;
|
const reactions = props.reactions;
|
||||||
const deletion = props.deletion;
|
const deletion = props.deletion;
|
||||||
|
const emojiReactions = reactions?.filter(({ Content }) => Content && Content !== "+" && Content !== "-" && Content !== "❤️")
|
||||||
|
.reduce((acc, { Content }) => {
|
||||||
|
const amount = acc[Content] || 0
|
||||||
|
return {...acc, [Content]: amount + 1 }
|
||||||
|
}, {})
|
||||||
|
const likes = reactions?.filter(({ Content }) => Content === "+" || Content === "❤️").length ?? 0
|
||||||
|
const dislikes = reactions?.filter(({ Content }) => Content === "-").length ?? 0
|
||||||
const publisher = useEventPublisher();
|
const publisher = useEventPublisher();
|
||||||
const [showReply, setShowReply] = useState(false);
|
const [showReply, setShowReply] = useState(false);
|
||||||
const users = useSelector(s => s.users?.users);
|
const users = useSelector(s => s.users?.users);
|
||||||
const login = useSelector(s => s.login.publicKey);
|
const login = useSelector(s => s.login.publicKey);
|
||||||
const ev = dataEvent ?? Event.FromObject(data);
|
const ev = dataEvent ?? Event.FromObject(data);
|
||||||
const isMine = ev.PubKey === login;
|
const isMine = ev.PubKey === login;
|
||||||
|
const liked = reactions?.find(({ PubKey, Content }) => Content === "+" && PubKey === login)
|
||||||
|
const disliked = reactions?.find(({ PubKey, Content }) => Content === "-" && PubKey === login)
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
showHeader: true,
|
showHeader: true,
|
||||||
@ -34,6 +43,10 @@ export default function Note(props) {
|
|||||||
...opt
|
...opt
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function hasReacted(emoji) {
|
||||||
|
return reactions?.find(({ PubKey, Content }) => Content === emoji && PubKey === login)
|
||||||
|
}
|
||||||
|
|
||||||
const transformBody = useCallback(() => {
|
const transformBody = useCallback(() => {
|
||||||
let body = ev?.Content ?? "";
|
let body = ev?.Content ?? "";
|
||||||
|
|
||||||
@ -71,11 +84,21 @@ export default function Note(props) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function react(emoji) {
|
||||||
|
let evLike = await publisher.like(ev, emoji);
|
||||||
|
publisher.broadcast(evLike);
|
||||||
|
}
|
||||||
|
|
||||||
async function like() {
|
async function like() {
|
||||||
let evLike = await publisher.like(ev);
|
let evLike = await publisher.like(ev);
|
||||||
publisher.broadcast(evLike);
|
publisher.broadcast(evLike);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function dislike() {
|
||||||
|
let evLike = await publisher.dislike(ev);
|
||||||
|
publisher.broadcast(evLike);
|
||||||
|
}
|
||||||
|
|
||||||
async function deleteEvent() {
|
async function deleteEvent() {
|
||||||
if (window.confirm(`Are you sure you want to delete ${ev.Id.substring(0, 8)}?`)) {
|
if (window.confirm(`Are you sure you want to delete ${ev.Id.substring(0, 8)}?`)) {
|
||||||
let evDelete = await publisher.delete(ev.Id);
|
let evDelete = await publisher.delete(ev.Id);
|
||||||
@ -114,9 +137,24 @@ export default function Note(props) {
|
|||||||
<span className="pill" onClick={() => setShowReply(!showReply)}>
|
<span className="pill" onClick={() => setShowReply(!showReply)}>
|
||||||
<FontAwesomeIcon icon={faReply} />
|
<FontAwesomeIcon icon={faReply} />
|
||||||
</span>
|
</span>
|
||||||
|
{Object.keys(emojiReactions).map((emoji) => {
|
||||||
|
return (
|
||||||
|
<span className="pill" onClick={() => react(emoji)}>
|
||||||
|
<span style={{ filter: hasReacted(emoji) ? 'none' : 'grayscale(1)' }}>
|
||||||
|
{emoji}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{emojiReactions[emoji]}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
})}
|
||||||
<span className="pill" onClick={() => like()}>
|
<span className="pill" onClick={() => like()}>
|
||||||
<FontAwesomeIcon icon={faHeart} />
|
<FontAwesomeIcon color={liked ? "red" : "currentColor"} icon={faHeart} />
|
||||||
{(reactions?.length ?? 0)}
|
{likes}
|
||||||
|
</span>
|
||||||
|
<span className="pill" onClick={() => dislike()}>
|
||||||
|
<FontAwesomeIcon color={disliked ? "orange" : "currentColor"} icon={faThumbsDown} />
|
||||||
|
{dislikes}
|
||||||
</span>
|
</span>
|
||||||
<span className="pill" onClick={() => console.debug(ev)}>
|
<span className="pill" onClick={() => console.debug(ev)}>
|
||||||
<FontAwesomeIcon icon={faInfo} />
|
<FontAwesomeIcon icon={faInfo} />
|
||||||
|
@ -83,10 +83,10 @@ export default function useEventPublisher() {
|
|||||||
}
|
}
|
||||||
return await signEvent(ev);
|
return await signEvent(ev);
|
||||||
},
|
},
|
||||||
like: async (evRef) => {
|
like: async (evRef, content = "+") => {
|
||||||
let ev = Event.ForPubKey(pubKey);
|
let ev = Event.ForPubKey(pubKey);
|
||||||
ev.Kind = EventKind.Reaction;
|
ev.Kind = EventKind.Reaction;
|
||||||
ev.Content = "+";
|
ev.Content = content;
|
||||||
ev.Tags.push(new Tag(["e", evRef.Id], 0));
|
ev.Tags.push(new Tag(["e", evRef.Id], 0));
|
||||||
ev.Tags.push(new Tag(["p", evRef.PubKey], 1));
|
ev.Tags.push(new Tag(["p", evRef.PubKey], 1));
|
||||||
return await signEvent(ev);
|
return await signEvent(ev);
|
||||||
|
Loading…
Reference in New Issue
Block a user