Cleaning up state flags

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>

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}

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>

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();

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";
             }
           }
         }} />