From 111d6273b33484b31d2c7cb5bbe5a38143790304 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Thu, 25 Jan 2024 00:00:00 +0000
Subject: [PATCH] feat(PRPage): add compose replies

to both the pr other events posted in respose to the root pr event
---
 src/lib/components/events/Compose.svelte      | 32 ++++++++
 src/lib/components/events/EventWrapper.svelte | 47 +++++++++++-
 src/lib/kinds.ts                              |  2 +
 src/lib/wrappers/Compose.svelte               | 76 +++++++++++++++++++
 src/lib/wrappers/EventCard.svelte             |  6 +-
 5 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/events/Compose.svelte
 create mode 100644 src/lib/wrappers/Compose.svelte

diff --git a/src/lib/components/events/Compose.svelte b/src/lib/components/events/Compose.svelte
new file mode 100644
index 0000000..d3e5b02
--- /dev/null
+++ b/src/lib/components/events/Compose.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import ParsedContent from "./content/ParsedContent.svelte";
+    export let sendReply: (content: string) => void = (content: string) => {};
+    export let submitting = false;
+    let submit = () => {
+        sendReply(content);
+    };
+    let content = "";
+</script>
+
+<div class="">
+    <textarea
+        disabled={submitting}
+        bind:value={content}
+        class="textarea textarea-primary w-full"
+        placeholder="reply..."
+    ></textarea>
+    <div class="flex">
+        <div class="flex-auto"></div>
+        <button
+            on:click={submit}
+            disabled={submitting}
+            class="btn btn-primary align-bottom mt-2 btn-sm align-right"
+        >
+            {#if submitting}
+                Sending
+            {:else}
+                Send
+            {/if}
+        </button>
+    </div>
+</div>
diff --git a/src/lib/components/events/EventWrapper.svelte b/src/lib/components/events/EventWrapper.svelte
index c50ecc7..9ae48fa 100644
--- a/src/lib/components/events/EventWrapper.svelte
+++ b/src/lib/components/events/EventWrapper.svelte
@@ -3,9 +3,15 @@
     import UserHeader from "../users/UserHeader.svelte";
     import type { User } from "../users/type";
     import { defaults as user_defaults } from "../users/type";
+    import Compose from "$lib/wrappers/Compose.svelte";
+    import { logged_in_user } from "$lib/stores/users";
 
     export let author: User = { ...user_defaults };
     export let created_at: number | undefined;
+    export let event_id = "";
+    export let logged_in = $logged_in_user;
+    let show_compose = false;
+
     let created_at_ago = "";
     $: created_at_ago = created_at ? dayjs(created_at * 1000).fromNow() : "";
 </script>
@@ -15,9 +21,48 @@
         <div class="flex-auto">
             <UserHeader user={author} />
         </div>
-        <div class="text-xs mt-3">{created_at_ago}</div>
+        {#if !show_compose}
+            <div class="mt-1 mb-1 aling-middle">
+                <span class="text-xs mb-1">{created_at_ago}</span>
+                {#if logged_in}
+                    <button
+                        on:click={() => {
+                            show_compose = true;
+                        }}
+                        class="btn btn-xs"
+                        ><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            ><path
+                                fill="currentColor"
+                                d="M6.78 1.97a.75.75 0 0 1 0 1.06L3.81 6h6.44A4.75 4.75 0 0 1 15 10.75v2.5a.75.75 0 0 1-1.5 0v-2.5a3.25 3.25 0 0 0-3.25-3.25H3.81l2.97 2.97a.749.749 0 0 1-.326 1.275a.749.749 0 0 1-.734-.215L1.47 7.28a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0"
+                            /></svg
+                        ></button
+                    >
+                {/if}
+            </div>
+        {/if}
     </div>
     <div class="ml-11">
         <slot />
+        {#if show_compose}
+            <div class="">
+                <div class="flex">
+                    <div class="flex-auto"></div>
+                    <button
+                        on:click={() => {
+                            show_compose = false;
+                        }}
+                        class="btn btn-sm btn-circle btn-ghost right-2 top-2"
+                        >✕</button
+                    >
+                </div>
+                <div class="">
+                    <Compose reply_to_event_id={event_id} />
+                </div>
+            </div>
+        {/if}
     </div>
 </div>
diff --git a/src/lib/kinds.ts b/src/lib/kinds.ts
index 724183e..23f3122 100644
--- a/src/lib/kinds.ts
+++ b/src/lib/kinds.ts
@@ -1,3 +1,5 @@
+export let reply_kind = 1;
+
 export let pr_status_kind = 19851985;
 
 export let repo_kind = 30317;
diff --git a/src/lib/wrappers/Compose.svelte b/src/lib/wrappers/Compose.svelte
new file mode 100644
index 0000000..fc6dde7
--- /dev/null
+++ b/src/lib/wrappers/Compose.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { ndk } from "$lib/stores/ndk";
+    import { NDKEvent, NDKRelaySet, type NDKTag } from "@nostr-dev-kit/ndk";
+    import { reply_kind } from "$lib/kinds";
+    import { getUserRelays, logged_in_user } from "$lib/stores/users";
+    import { selected_repo } from "$lib/stores/repo";
+    import Compose from "$lib/components/events/Compose.svelte";
+    import { selected_pr_full } from "$lib/stores/PR";
+
+    export let reply_to_event_id = "";
+
+    let repo_id: string;
+    let pr_id: string;
+
+    let submitting = false;
+    let submitted = false;
+    let edit_mode = false;
+    $: {
+        repo_id = $selected_repo.repo_id;
+        pr_id = $selected_pr_full.summary.id;
+
+        edit_mode =
+            $logged_in_user !== undefined &&
+            repo_id.length > 0 &&
+            pr_id.length > 0 &&
+            !submitted;
+    }
+
+    async function sendReply(content: string) {
+        if (!$logged_in_user) return;
+        let event = new NDKEvent(ndk);
+        event.kind = reply_kind;
+        event.tags.push(["e", pr_id, "root"]);
+        if (reply_to_event_id.length > 0) {
+            event.tags.push(["e", pr_id, "reply"]);
+        }
+        event.tags.push(["r", `r-${repo_id}`]);
+        event.content = content;
+        submitting = true;
+        let relays = [...$selected_repo.relays];
+        try {
+            event.sign();
+        } catch {
+            alert("failed to sign event");
+        }
+        try {
+            let user_relays = await getUserRelays($logged_in_user.hexpubkey);
+            relays = [
+                ...relays,
+                ...(user_relays.ndk_relays
+                    ? user_relays.ndk_relays.writeRelayUrls
+                    : []),
+                // TODO: pr event pubkey relays
+            ];
+        } catch {
+            alert("failed to get user relays");
+        }
+        try {
+            let res = await event.publish(
+                NDKRelaySet.fromRelayUrls(relays, ndk),
+            );
+            submitting = false;
+            submitted = true;
+            setTimeout(() => {
+                submitted = false;
+            }, 5000);
+        } catch {}
+    }
+</script>
+
+{#if edit_mode}
+    <Compose {sendReply} {submitting} />
+{/if}
+{#if submitted}
+    <div>sent!</div>
+{/if}
diff --git a/src/lib/wrappers/EventCard.svelte b/src/lib/wrappers/EventCard.svelte
index 15abc23..f105dcb 100644
--- a/src/lib/wrappers/EventCard.svelte
+++ b/src/lib/wrappers/EventCard.svelte
@@ -22,7 +22,11 @@
     });
 </script>
 
-<EventWrapper author={$author} created_at={event.created_at}>
+<EventWrapper
+    author={$author}
+    created_at={event.created_at}
+    event_id={event.id}
+>
     {#if event.kind == patch_kind}
         <Kind317 content={event.content} tags={event.tags} />
     {:else if event.kind === pr_status_kind}