1188e84 Cleaning up state flags — radicle-explorer

modified src/components/Comment.svelte

@@ -29,8 +29,7 @@

   //  TODO: Remove flag once `radicle-httpd` fixes embed editing
   export let disableEdit: boolean = false;
   let editInProgress = false;
   let submitInProgress = false;
   let state: "read" | "edit" | "submit" = "read";
   export let editComment:
     | ((body: string, embeds: Embed[]) => Promise<void>)

@@ -126,11 +125,9 @@

       <NodeId nodeId={authorId} alias={authorAlias} />
       {caption}
       <div class="header-right">
         {#if id && editComment && !editInProgress && !disableEdit}
         {#if id && editComment && state === "read" && !disableEdit}
           <div class="edit-buttons">
             <IconButton
               title="edit comment"
               on:click={() => (editInProgress = true)}>
             <IconButton title="edit comment" on:click={() => (state = "edit")}>
               <IconSmall name={"edit"} />
             </IconButton>
           </div>

@@ -143,26 +140,26 @@

   </div>
   <div class="card-body">
     {#if editComment && editInProgress}
     {#if editComment && state !== "read"}
       {@const editComment_ = editComment}
       <ExtendedTextarea
         {body}
         {enableAttachments}
         {submitInProgress}
         submitInProgress={state === "submit"}
         submitCaption="Save"
         placeholder="Leave your comment"
         on:submit={async ({ detail: { comment, embeds } }) => {
           submitInProgress = true;
           state = "submit";
           try {
             await editComment_(comment, embeds);
           } finally {
             submitInProgress = false;
             state = "read";
           }
         }}
         on:close={async () => {
           body = body;
           await tick();
           editInProgress = false;
           state = "read";
         }} />
     {:else if body.trim() === ""}
       <span class="txt-missing">No description</span>

modified src/components/CommentToggleInput.svelte

@@ -11,8 +11,7 @@

   export let focus: boolean = false;
   export let submit: (comment: string, embeds: Embed[]) => Promise<void>;
   let submitInProgress: boolean = false;
   let active: boolean = false;
   let state: "collapsed" | "expanded" | "submit" = "collapsed";
 </script>
 <style>

@@ -30,23 +29,22 @@

   }
 </style>
 {#if active}
 {#if state !== "collapsed"}
   <ExtendedTextarea
     {inline}
     {placeholder}
     {submitCaption}
     {submitInProgress}
     submitInProgress={state === "submit"}
     {focus}
     {body}
     {enableAttachments}
     on:close={() => (active = false)}
     on:close={() => (state = "collapsed")}
     on:submit={async ({ detail: { comment, embeds } }) => {
       try {
         submitInProgress = true;
         state = "submit";
         await submit(comment, embeds);
       } finally {
         submitInProgress = false;
         active = false;
         state = "collapsed";
       }
     }} />
 {:else}

@@ -55,7 +53,7 @@

     class="inactive"
     role="button"
     tabindex="0"
     on:click={() => (active = true)}>
     on:click={() => (state = "expanded")}>
     {placeholder}
   </div>
 {/if}

modified src/views/projects/Cob/CobHeader.svelte

@@ -16,17 +16,17 @@

   async function handleTitleEdit() {
     if (editTitle) {
       mode = "readOnly";
       editingTitle = true;
       submitNewTitle = true;
       try {
         await editTitle(title);
       } finally {
         editingTitle = false;
         submitNewTitle = false;
       }
     }
   }
   const oldTitle = title;
   let editingTitle = false;
   let submitNewTitle = false;
 </script>
 <style>

@@ -98,13 +98,13 @@

         {#if mode === "readWrite"}
           <IconButton
             title="save title"
             loading={editingTitle}
             loading={submitNewTitle}
             on:click={handleTitleEdit}>
             <IconSmall name={"checkmark"} />
           </IconButton>
           <IconButton
             title="dismiss changes"
             loading={editingTitle}
             loading={submitNewTitle}
             on:click={() => {
               title = oldTitle;
               mode = "readOnly";

@@ -114,7 +114,7 @@

         {:else}
           <IconButton
             title="edit title"
             loading={editingTitle}
             loading={submitNewTitle}
             on:click={() => (mode = "readWrite")}>
             <IconSmall name={"edit"} />
           </IconButton>

modified src/views/projects/Issue.svelte

@@ -343,9 +343,6 @@

     }
   }
   const issueDescription = issue.discussion[0];
   let editingIssueDescription = false;
   $: embeds = issue.discussion.reduce(
     (acc, comment) => {
       acc[comment.id] = comment.embeds;

@@ -358,8 +355,8 @@

   $: threads = issue.discussion
     .filter(
       comment =>
         (comment.id !== issueDescription.id && !comment.replyTo) ||
         comment.replyTo === issueDescription.id,
         (comment.id !== issue.discussion[0].id && !comment.replyTo) ||
         comment.replyTo === issue.discussion[0].id,
     )
     .map(thread => {
       return {

@@ -374,9 +371,11 @@

       ? $httpdStore.session
       : undefined;
   let editingAssignees = false;
   let editingLabels = false;
   let saveDescriptionInProgress = false;
   type State = "read" | "edit" | "submit";
   let assigneeState: State = "read";
   let labelState: State = "read";
   let descriptionState: State = "read";
 </script>
 <style>

@@ -467,21 +466,21 @@

           {/if}
         </svelte:fragment>
         <div slot="description">
           {#if session && editingIssueDescription}
           {#if session && descriptionState !== "read"}
             <ExtendedTextarea
               enableAttachments
               body={issue.discussion[0].body}
               submitCaption="Save"
               submitInProgress={saveDescriptionInProgress}
               submitInProgress={descriptionState === "submit"}
               placeholder="Leave a description"
               on:close={() => (editingIssueDescription = false)}
               on:close={() => (descriptionState = "read")}
               on:submit={async ({ detail: { comment, embeds } }) => {
                 if (session) {
                   try {
                     saveDescriptionInProgress = true;
                     descriptionState = "submit";
                     await editComment(session.id, issue.id, comment, embeds);
                   } finally {
                     saveDescriptionInProgress = false;
                     descriptionState = "read";
                   }
                 }
               }} />

@@ -497,8 +496,8 @@

               {#if session}
                 <IconButton
                   title="edit description"
                   on:click={() => (editingIssueDescription = true)}>
                   <IconSmall name={"edit"} />
                   on:click={() => (descriptionState = "edit")}>
                   <IconSmall name="edit" />
                 </IconButton>
               {/if}
             </div>

@@ -563,14 +562,14 @@

       <AssigneeInput
         locallyAuthenticated={Boolean(session)}
         assignees={issue.assignees}
         submitInProgress={editingAssignees}
         submitInProgress={assigneeState === "submit"}
         on:save={async ({ detail: newAssignees }) => {
           if (session) {
             editingAssignees = true;
             assigneeState = "submit";
             try {
               await saveAssignees(session.id, newAssignees);
             } finally {
               editingAssignees = false;
               assigneeState = "read";
             }
           }
           await refreshIssue();

@@ -578,14 +577,14 @@

       <LabelInput
         locallyAuthenticated={Boolean(session)}
         labels={issue.labels}
         submitInProgress={editingLabels}
         submitInProgress={labelState === "submit"}
         on:save={async ({ detail: newLabels }) => {
           if (session) {
             editingLabels = true;
             labelState = "submit";
             try {
               await saveLabels(session.id, newLabels);
             } finally {
               editingLabels = false;
               labelState = "read";
             }
           }
           await refreshIssue();

modified src/views/projects/Patch.svelte

@@ -476,8 +476,11 @@

     return patchReviews;
   }
   let editingDescription = false;
   let editingLabels = false;
   type State = "read" | "submit" | "edit";
   let descriptionState: State = "read";
   let labelState: State = "read";
   let revisionId: string;
   $: if (view.name === "diff") {
     revisionId = patch.revisions[patch.revisions.length - 1].id;

@@ -667,20 +670,20 @@

         </svelte:fragment>
         <svelte:fragment slot="description">
           <div class="revision-description">
             {#if session && editingDescription}
             {#if session && descriptionState !== "read"}
               <ExtendedTextarea
                 body={newDescription}
                 submitCaption="Save"
                 submitInProgress={editingDescription}
                 submitInProgress={descriptionState === "submit"}
                 placeholder="Leave your description"
                 on:close={() => (editingDescription = false)}
                 on:close={() => (descriptionState = "read")}
                 on:submit={async ({ detail: { comment } }) => {
                   editingDescription = true;
                   descriptionState = "submit";
                   if (session) {
                     try {
                       await editDescription(session.id, comment);
                     } finally {
                       editingDescription = false;
                       descriptionState = "read";
                     }
                   }
                 }} />

@@ -695,11 +698,11 @@

             {:else}
               <span class="txt-missing">No description available</span>
             {/if}
             {#if session && !editingDescription}
             {#if session && descriptionState === "read"}
               <div class="edit-buttons">
                 <IconButton
                   title="edit description"
                   on:click={() => (editingDescription = true)}>
                   on:click={() => (descriptionState = "edit")}>
                   <IconSmall name={"edit"} />
                 </IconButton>
               </div>

@@ -931,15 +934,15 @@

       </div>
       <LabelInput
         locallyAuthenticated={Boolean(session)}
         submitInProgress={editingLabels}
         submitInProgress={labelState === "submit"}
         labels={patch.labels}
         on:save={async ({ detail: newLabels }) => {
           if (session) {
             editingLabels = true;
             labelState = "submit";
             try {
               await saveLabels(session.id, newLabels);
             } finally {
               editingLabels = false;
               labelState = "read";
             }
           }
         }} />