add emoji reactions

src/element/Note.js

@@ -20,7 +20,12 @@ export default function Note(props) {
     const dataEvent = props["data-ev"];
     const reactions = props.reactions;
     const deletion = props.deletion;
-    const likes = reactions?.filter(({ Content }) => Content === "+" || Content === "🤙").length ?? 0
+    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 [showReply, setShowReply] = useState(false);
@@ -28,8 +33,8 @@ export default function Note(props) {
     const login = useSelector(s => s.login.publicKey);
     const ev = dataEvent ?? Event.FromObject(data);
     const isMine = ev.PubKey === login;
-    const liked = reactions?.find(({ PubKey, Content }) => Content === "+" || Content === "🤙" && PubKey === login)
-    const disliked = reactions?.find(({ PubKey, Content }) => Content === "+" && PubKey === login)
+    const liked = reactions?.find(({ PubKey, Content }) => Content === "+" && PubKey === login)
+    const disliked = reactions?.find(({ PubKey, Content }) => Content === "-" && PubKey === login)
 
     const options = {
         showHeader: true,
@@ -38,6 +43,10 @@ export default function Note(props) {
         ...opt
     };
 
+    function hasReacted(emoji) {
+      return reactions?.find(({ PubKey, Content }) => Content === emoji && PubKey === login)
+    }
+
     const transformBody = useCallback(() => {
         let body = ev?.Content ?? "";
 
@@ -76,6 +85,11 @@ export default function Note(props) {
         )
     }
 
+    async function react(emoji) {
+        let evLike = await publisher.like(ev, emoji);
+        publisher.broadcast(evLike);
+    }
+
     async function like() {
         let evLike = await publisher.like(ev);
         publisher.broadcast(evLike);
@@ -124,6 +138,17 @@ export default function Note(props) {
                     <span className="pill" onClick={() => setShowReply(!showReply)}>
                         <FontAwesomeIcon icon={faReply} />
                     </span>
+                    {Object.keys(emojiReactions).map((emoji) => {
+                      return (
+                          <span className="pill" onClick={() => react(emoji)}>
+                            <span style={{ filter: hasReacted(emoji) ? 'none' : 'grayscale(1)' }}>
+                                {emoji}
+                            </span>
+                            &nbsp;
+                            {emojiReactions[emoji]}
+                          </span>
+                      )
+                    })}
                     <span className="pill" onClick={() => like()}>
                         <FontAwesomeIcon color={liked ? "red" : "currentColor"} icon={faHeart} /> &nbsp;
                         {likes}

src/feed/EventPublisher.js

@@ -83,10 +83,10 @@ export default function useEventPublisher() {
             }
             return await signEvent(ev);
         },
-        like: async (evRef) => {
+        like: async (evRef, content = "+") => {
             let ev = Event.ForPubKey(pubKey);
             ev.Kind = EventKind.Reaction;
-            ev.Content = "+";
+            ev.Content = content;
             ev.Tags.push(new Tag(["e", evRef.Id], 0));
             ev.Tags.push(new Tag(["p", evRef.PubKey], 1));
             return await signEvent(ev);