From 205fc814bcbce027d3b76140cd2b671b4577f3bd Mon Sep 17 00:00:00 2001 From: Sebastian Martinez Date: Wed, 12 Jul 2023 11:23:40 +0200 Subject: [PATCH] Bring reactions to comments and issues Signed-off-by: Sebastian Martinez --- src/components/Comment.svelte | 27 ++++++++++++++++++++++++ src/components/Thread.svelte | 2 ++ src/views/projects/Cob/Revision.svelte | 3 +++ src/views/projects/Issue.svelte | 29 ++++++++++++++++++++++++++ tests/e2e/project.spec.ts | 4 ++-- tests/e2e/project/commits.spec.ts | 6 ++++-- tests/support/fixtures.ts | 24 +++++++++++++++++++++ 7 files changed, 91 insertions(+), 4 deletions(-) diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte index bbb5c7fde..f66528138 100644 --- a/src/components/Comment.svelte +++ b/src/components/Comment.svelte @@ -3,6 +3,7 @@ import Authorship from "@app/components/Authorship.svelte"; import Button from "@app/components/Button.svelte"; + import Chip from "@app/components/Chip.svelte"; import Icon from "@app/components/Icon.svelte"; import Markdown from "@app/components/Markdown.svelte"; import Textarea from "@app/components/Textarea.svelte"; @@ -14,12 +15,18 @@ export let authorAliasColor: AuthorAliasColor = "--color-foreground-5"; export let timestamp: number; export let body: string; + export let reactions: [string, string][]; export let showReplyIcon: boolean = false; export let action: "create" | "view" = "view"; export let caption = "commented"; export let rawPath: string; const dispatch = createEventDispatcher<{ toggleReply: null }>(); + + $: groupedReactions = reactions?.reduce( + (acc, [nid, emoji]) => acc.set(emoji, [...(acc.get(emoji) ?? []), nid]), + new Map(), + );
@@ -84,5 +99,17 @@ {:else} {/if} + {#if groupedReactions.size > 0} +
+ {#each groupedReactions as [reaction, nids], key} + +
+ {reaction} + {nids.length} +
+ + {/each} +
+ {/if}
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte index 1b093faa1..449853683 100644 --- a/src/components/Thread.svelte +++ b/src/components/Thread.svelte @@ -77,6 +77,7 @@ id={root.id} authorId={root.author.id} authorAlias={root.author.alias} + reactions={root.reactions} timestamp={root.timestamp} body={root.body} showReplyIcon={Boolean($httpdStore.state === "authenticated")} @@ -90,6 +91,7 @@ authorId={reply.author.id} authorAlias={reply.author.alias} caption="replied" + reactions={reply.reactions} timestamp={reply.timestamp} body={reply.body} /> diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte index eec40b421..f6af2718a 100644 --- a/src/views/projects/Cob/Revision.svelte +++ b/src/views/projects/Cob/Revision.svelte @@ -378,11 +378,14 @@ class:comment-review={review.verdict === null} class:positive-review={review.verdict === "accept"} class:negative-review={review.verdict === "reject"}> + acc.set(emoji, [...(acc.get(emoji) ?? []), nid]), + new Map(), + ); + let action: "edit" | "view"; $: action = $httpdStore.state === "authenticated" && utils.isLocal(baseUrl.hostname) @@ -267,6 +273,17 @@ padding-left: 1rem; margin-left: 1rem; } + .reactions { + display: inline-flex; + gap: 0.5rem; + margin-top: 1rem; + user-select: none; + } + .reaction { + display: inline-flex; + flex-direction: row; + gap: 0.5rem; + } .actions { display: flex; @@ -334,6 +351,18 @@ + {#if issue.discussion[0].reactions} +
+ {#each groupedReactions as [reaction, nids], key} + +
+ {reaction} + {nids.length} +
+ + {/each} +
+ {/if}
opened by { await expect(page.getByTitle("Change peer")).toHaveText( `did:key:${aliceRemote.substring(8).substring(0, 6)}…${aliceRemote.slice( -6, - )} (radicle) delegate`, + )} (alice) delegate`, ); await expect( page.locator( @@ -339,7 +339,7 @@ test("peer and branch switching", async ({ page }) => { await expect(page.getByTitle("Change peer")).toHaveText( `did:key:${bobRemote.substring(8).substring(0, 6)}…${bobRemote.slice( -6, - )}`, + )} (bob)`, ); await expect(page.getByTitle("Change peer")).not.toHaveText("delegate"); diff --git a/tests/e2e/project/commits.spec.ts b/tests/e2e/project/commits.spec.ts index e75828d85..381daab4f 100644 --- a/tests/e2e/project/commits.spec.ts +++ b/tests/e2e/project/commits.spec.ts @@ -20,7 +20,7 @@ test("peer and branch switching", async ({ page }) => { await expect(page.getByTitle("Change peer")).toHaveText( ` did:key:${aliceRemote .substring(8) - .substring(0, 6)}…${aliceRemote.slice(-6)} (radicle) delegate`, + .substring(0, 6)}…${aliceRemote.slice(-6)} (alice) delegate`, ); await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible(); @@ -122,7 +122,9 @@ test("relative timestamps", async ({ page }) => { await page.getByTitle("Change peer").click(); await page.getByText(bobRemote).click(); await expect(page.getByTitle("Change peer")).toHaveText( - `did:key:${bobRemote.substring(8).substring(0, 6)}…${bobRemote.slice(-6)}`, + `did:key:${bobRemote.substring(8).substring(0, 6)}…${bobRemote.slice( + -6, + )} (bob)`, ); const latestCommit = page.locator(".teaser").first(); await expect(latestCommit).toContainText("Bob Belcher committed now"); diff --git a/tests/support/fixtures.ts b/tests/support/fixtures.ts index a4db3fbd8..5b6f0b677 100644 --- a/tests/support/fixtures.ts +++ b/tests/support/fixtures.ts @@ -370,6 +370,18 @@ export async function createCobsFixture(peer: RadiclePeer) { ["bug", "feature-request"], { cwd: projectFolder }, ); + await peer.rad( + ["issue", "react", issueOne, "--emoji", "👍", "--to", issueOne], + { + cwd: projectFolder, + }, + ); + await peer.rad( + ["issue", "react", issueOne, "--emoji", "🎉", "--to", issueOne], + { + cwd: projectFolder, + }, + ); await peer.rad( ["assign", issueOne, "--to", `did:key:${peer.nodeId}`], createOptions(projectFolder, 1), @@ -384,6 +396,12 @@ export async function createCobsFixture(peer: RadiclePeer) { createOptions(projectFolder, 2), ); await peer.rad( + ["issue", "react", issueOne, "--emoji", "🙏", "--to", commentIssueOne], + { + cwd: projectFolder, + }, + ); + const { stdout: replyIssueOne } = await peer.rad( [ "comment", issueOne, @@ -394,6 +412,12 @@ export async function createCobsFixture(peer: RadiclePeer) { ], createOptions(projectFolder, 3), ); + await peer.rad( + ["issue", "react", issueOne, "--emoji", "🚀", "--to", replyIssueOne], + { + cwd: projectFolder, + }, + ); await peer.rad( [ "comment",