refactor: simplify note editing logic

Author: VChet

github-user-notes.user.js

@@ -30,37 +30,39 @@
     return username;
   }
 
-  function getNote(username) {
-    return GM_getValue(`${KEY_PREFIX}${username}`, "");
-  }
-  function setNote(username, note) {
-    const key = `${KEY_PREFIX}${username}`;
-    note ? GM_setValue(key, note) : GM_deleteValue(key);
-  }
+  function addNotesBlock() {
+    if (!location.pathname.match(/^\/[^/]+\/?$/)) return;
+    if (document.querySelector(".github-user-notes")) return;
 
-  function createNotesBlock(username) {
-    const note = getNote(username);
+    const profileArea = document.querySelector(".js-profile-editable-area.d-flex.flex-column.d-md-block");
+    if (!profileArea) return;
+
+    const username = getUsername();
+    if (!username) return;
+
+    const KEY = `${KEY_PREFIX}${username}`;
+    const savedNote = GM_getValue(KEY, "");
 
     const containerEl = document.createElement("div");
     containerEl.classList.add("github-user-notes", "border-top", "color-border-muted", "pt-3", "mt-3");
 
     const titleEl = document.createElement("h2");
     titleEl.classList.add("h4", "mb-2");
     titleEl.textContent = "Personal note";
-    titleEl.hidden = !note;
+    titleEl.hidden = !savedNote;
 
     const textEl = document.createElement("div");
     textEl.style.whiteSpace = "pre-wrap";
-    textEl.textContent = note;
+    textEl.textContent = savedNote;
 
     const textareaEl = document.createElement("textarea");
     textareaEl.classList.add("form-control", "FormControl-input", "FormControl-textarea");
     textareaEl.id = "github-user-notes-textarea";
-    textareaEl.style.resize = "vertical";
-    textareaEl.style.minHeight = "2lh";
     textareaEl.maxLength = MAX_NOTE_LENGTH;
     textareaEl.placeholder = "Enter your note here…";
-    textareaEl.value = note;
+    textareaEl.value = savedNote;
+    textareaEl.style.resize = "vertical";
+    textareaEl.style.minHeight = "2lh";
     textareaEl.hidden = true;
 
     const captionEl = document.createElement("span");
@@ -71,49 +73,35 @@
     const buttonEl = document.createElement("button");
     buttonEl.type = "button";
     buttonEl.classList.add("btn", "btn-block", "mt-2");
-    buttonEl.textContent = note ? "Edit note" : "Add note";
+    buttonEl.textContent = savedNote ? "Edit note" : "Add note";
 
-    containerEl.append(titleEl, textEl, textareaEl, captionEl, buttonEl);
+    function setEditState(isEditing) {
+      const hasNote = !!textEl.textContent.trim();
+      textareaEl.hidden = !isEditing;
+      captionEl.hidden = !isEditing;
+      textEl.hidden = isEditing;
+      titleEl.hidden = isEditing || !hasNote;
+      buttonEl.textContent = isEditing ? "Save note" : hasNote ? "Edit note" : "Add note";
+    }
 
     buttonEl.addEventListener("click", () => {
       if (textareaEl.hidden) {
-        textEl.hidden = true;
-        textareaEl.hidden = false;
-        captionEl.hidden = false;
-        buttonEl.textContent = "Save note";
+        setEditState(true);
         textareaEl.focus();
         return;
       }
 
-      const note = textareaEl.value.trim();
-      setNote(username, note);
-      textareaEl.value = note;
-      textEl.textContent = note;
-      textareaEl.hidden = true;
-      captionEl.hidden = true;
-      textEl.hidden = false;
-      titleEl.hidden = !note;
-      buttonEl.textContent = note ? "Edit note" : "Add note";
+      const newNote = textareaEl.value.trim();
+      newNote ? GM_setValue(KEY, newNote) : GM_deleteValue(KEY);
+      textareaEl.value = newNote;
+      textEl.textContent = newNote;
+      setEditState(false);
     });
 
-    return containerEl;
-  }
-
-  function addNotesBlock() {
-    if (!location.pathname.match(/^\/[^/]+\/?$/)) return;
-    if (document.querySelector(".github-user-notes")) return;
-
-    const profileArea = document.querySelector(".js-profile-editable-area.d-flex.flex-column.d-md-block");
-    if (!profileArea) return;
-
-    const username = getUsername();
-    if (!username) return;
-
-    const notesBlock = createNotesBlock(username);
-    profileArea.after(notesBlock);
+    containerEl.append(titleEl, textEl, textareaEl, captionEl, buttonEl);
+    profileArea.after(containerEl);
   }
 
   addNotesBlock();
-
   document.addEventListener("turbo:load", addNotesBlock);
 })();