Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Simplify comment reply form component structure
Rūdolfs Ošiņš committed 1 year ago
commit dbb52d3535c8624f242b4a2e407f43445e926139
parent 5d621461b476cda437c5f04b307a845a4df0bd9d
3 files changed +22 -14
modified src/components/CommentToggleInput.svelte
@@ -5,10 +5,7 @@
  import Border from "./Border.svelte";



  export let rid: string;
- 
  export let body: string | undefined = undefined;

  export let placeholder: string | undefined = undefined;
- 
  export let submitCaption: string | undefined = undefined;
- 
  export let inline: boolean = false;

  export let focus: boolean = false;

  export let submit: (comment: string, embeds: Embed[]) => Promise<void>;

  export let onclose: (() => void) | undefined = undefined;
@@ -32,12 +29,9 @@
  <ExtendedTextarea

    {disallowEmptyBody}

    {rid}
- 
    {inline}

    {placeholder}
- 
    {submitCaption}

    submitInProgress={state === "submit"}

    {focus}
- 
    {body}

    stylePadding="0.5rem 0.75rem"

    on:close={() => {

      if (onclose !== undefined) {
modified src/components/ExtendedTextarea.svelte
@@ -141,7 +141,7 @@
        onclick={submit}>

        <Icon name="checkmark" />

        {#if submitInProgress}
- 
          Loading...
+ 
          Saving…

        {:else}

          {submitCaption}

        {/if}
modified src/components/Thread.svelte
@@ -8,10 +8,10 @@


  import { scrollIntoView } from "@app/lib/utils";
+ 
  import Border from "./Border.svelte";

  import CommentComponent from "@app/components/Comment.svelte";
- 
  import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
+ 
  import ExtendedTextarea from "./ExtendedTextarea.svelte";

  import Icon from "@app/components/Icon.svelte";
- 
  import Border from "./Border.svelte";



  export let thread: {

    root: Comment;
@@ -47,6 +47,7 @@
  }



  let showReplyForm = false;
+ 
  let submitInProgress = false;



  $: root = thread.root;

  $: replies = thread.replies;
@@ -125,16 +126,29 @@
        {/if}

        {#if createReply && showReplyForm}

          <div id={`reply-${root.id}`} style:padding="1rem">
- 
            <CommentToggleInput
+ 
            <ExtendedTextarea

              disallowEmptyBody
+ 
              {submitInProgress}

              {rid}
- 
              focus

              inline
- 
              onclose={() => (showReplyForm = false)}

              placeholder="Reply to comment"

              submitCaption="Reply"
- 
              onexpand={toggleReply}
- 
              submit={partial(createReply, root.id)} />
+ 
              focus
+ 
              stylePadding="0.5rem 0.75rem"
+ 
              on:close={() => (showReplyForm = false)}
+ 
              on:submit={async ({ detail: { comment, embeds } }) => {
+ 
                try {
+ 
                  submitInProgress = true;
+ 
                  await createReply(
+ 
                    root.id,
+ 
                    comment,
+ 
                    Array.from(embeds.values()),
+ 
                  );
+ 
                } finally {
+ 
                  showReplyForm = false;
+ 
                  submitInProgress = false;
+ 
                }
+ 
              }} />

          </div>

        {/if}

        <div></div>