display if note is liked by logged in user and submit reaction

lumina/components/ReactionButton.tsx

@@ -5,6 +5,7 @@ import {
     getEventHash,
     getPublicKey,
     finalizeEvent,
+    nip19,
 } from "nostr-tools";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,74 +20,108 @@ import {
 } from "@/components/ui/drawer"
 import { ReloadIcon } from "@radix-ui/react-icons";
 import ReactionButtonReactionList from "./ReactionButtonReactionList";
+import { FormEvent } from "react";
+import { createHash } from "crypto";
+import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
 
 export default function ReactionButton({ event }: { event: any }) {
+    const { publish } = useNostr();
+
+    const loginType = typeof window !== 'undefined' ? window.localStorage.getItem('loginType') : null;
+    const pubkey = typeof window !== 'undefined' ? window.localStorage.getItem('pubkey') : null;
+
     const { events, isLoading } = useNostrEvents({
         filter: {
-            // since: dateToUnix(now.current), // all new events from now
-            // since: 0,
-            // limit: 100,
             '#e': [event.id],
             kinds: [7],
         },
     });
 
-    // filter out all events that also have another e tag with another id
-    // this will filter out likes that are made on comments and not on the note itself
+    let eventLiked = false;
+    let eventLikedEvent = null;
+    for(event of events) {
+        console.log(event.pubkey)
+        if(event.pubkey == pubkey ) {
+            eventLiked = true;
+            eventLikedEvent = event;
+            break;
+        }
+    }
+    if(eventLiked) {
+        console.log("EVENT LIKED!")
+        // if(eventLikedEvent.content === '💜' || eventLikedEvent.content === '+') {
+        document.getElementById("heartReactionButton")?.classList.add("bg-purple-400");
+        document.getElementById("upReactionButton")?.classList.remove("bg-purple-400");
+        document.getElementById("downReactionButton")?.classList.remove("bg-purple-400");
+        // }
+        document.getElementById("reactionButton")?.classList.add("bg-blue-500");
+    }
+
     const filteredEvents = events.filter((event) => { return event.tags.filter((tag) => { return tag[0] === '#e' && tag[1] !== event.id }).length === 0 });
 
-    // const { publish } = useNostr();
+    async function onSubmit(content: string) {
+        const createdAt = Math.floor(Date.now() / 1000);
 
-    // const onPost = async () => {
-    //     const privKey = prompt("Paste your private key:");
+        var tags: [[String, any]] = event.tags.filter((tag: [string]) => tag.length >= 2 && (tag[0] == "e" || tag[0] == "p"));
+        tags.push(["e", event.id]);
+        tags.push(["p", event.pubkey]);
+        tags.push(["k", event.kind]);
 
-    //     if (!privKey) {
-    //         alert("no private key provided");
-    //         return;
-    //     }
-
-    //     const message = prompt("Enter the message you want to send:");
-
-    //     if (!message) {
-    //         alert("no message provided");
-    //         return;
-    //     }
-
-    //     const event: NostrEvent = {
-    //         content: message,
-    //         kind: 1,
-    //         tags: [],
-    //         created_at: dateToUnix(),
-    //         pubkey: getPublicKey(privKey),
-    //         id: "",
-    //         sig: ""
-    //     };
-
-    //     event.id = getEventHash(event);
-    //     event.sig = getSignature(event, privKey);
-
-    //     publish(event);
-    // };
+        let noteEvent = {
+          kind: 7,
+          content: content,
+          tags: tags,
+          created_at: createdAt,
+        };
+    
+        let signedEvent: NostrEvent | null = null;
+    
+        if (loginType === 'extension') {
+          signedEvent = await window.nostr.signEvent(noteEvent);
+        } else if (loginType === 'amber') {
+          alert('Signing with Amber is not implemented yet, sorry!');
+        } else if (loginType === 'raw_nsec') {
+          if (typeof window !== 'undefined') {
+            let nsecStr = null;
+            nsecStr = window.localStorage.getItem('nsec');
+            if (nsecStr != null) {
+              signedEvent = finalizeEvent(noteEvent, hexToBytes(nsecStr));
+            }
+          }
+        }
+    
+        if (signedEvent) {
+          console.log("final Event: ")
+          console.log(signedEvent)
+          publish(signedEvent);
+        }
+    
+        if (signedEvent != null) {
+            if(content === "💜") {
+                document.getElementById("heartReactionButton")?.classList.add("bg-purple-100");
+                document.getElementById("upReactionButton")?.classList.remove("bg-purple-100");
+                document.getElementById("downReactionButton")?.classList.remove("bg-purple-100");
+            }
+        }
+      }
 
     return (
         <Drawer>
             <DrawerTrigger>
-                {/* <Button variant="default" onClick={onPost}>{events.length} Reactions</Button> */}
                 {isLoading ? (
-                    <Button variant="default"><ReloadIcon className="mr-2 h-4 w-4 animate-spin" /> 💜</Button>
+                    <Button id="reactionButton" variant="default"><ReloadIcon className="mr-2 h-4 w-4 animate-spin" /> 💜</Button>
                 ) : (
-                    <Button variant="default">{filteredEvents.length} 💜</Button>
+                    <Button id="reactionButton" variant="default">{filteredEvents.length} 💜</Button>
                 )}
             </DrawerTrigger>
             <DrawerContent>
                 <DrawerHeader>
                     <DrawerTitle>Reactions</DrawerTitle>
                 </DrawerHeader>
-                {/* TODO: Create Reaction Event on Click */}
                 <div className="px-4 grid grid-cols-3">
-                    <Button variant={"outline"} className="mx-1" disabled>💜</Button>
-                    <Button variant={"outline"} className="mx-1" disabled>👍</Button>
-                    <Button variant={"outline"} className="mx-1" disabled>👎</Button>
+                    <Button id="heartReactionButton" variant={"outline"} className="mx-1" onClick={() => onSubmit("💜")}>💜</Button>
+                    <Button id='upReactionButton' variant={"outline"} className="mx-1" onClick={() => onSubmit("👍")}>👍</Button>
+                    <Button id='downReactionButton' variant={"outline"} className="mx-1" onClick={() => onSubmit("👎")}>👎</Button>
                 </div>
                 <hr className="my-4" />
                 <ReactionButtonReactionList filteredEvents={filteredEvents} />
@@ -97,7 +132,5 @@ export default function ReactionButton({ event }: { event: any }) {
                 </DrawerFooter>
             </DrawerContent>
         </Drawer>
-
-        // <Button variant="default" onClick={onPost}>{events.length} Reactions</Button>
     );
 }

lumina/components/ReactionButtonReactionListItem.tsx

@@ -24,7 +24,7 @@ export default function ReactionButtonReactionListItem({ event }: { event: Nostr
     const profileImageSrc = userData?.picture || "https://robohash.org/" + pubkey;
     const content = event.content;
 
-    console.log("event", event.content);
+    // console.log("event", event.content);
 
     return (
         <Link href={hrefProfile}>