From 6e4b32debf33074280beede0ace8d3587b997099 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Fri, 15 Nov 2024 13:19:28 +0100
Subject: [PATCH] Add ability to edit and remove notes

---
 index.html       | 17 +++++++++++++++--
 js/components.js | 49 ++++++++++++++++++++++++++++++++++++++----------
 js/jenot.js      | 23 ++++++++++++++++++++++-
 js/store.js      |  2 +-
 style.css        |  4 ++--
 5 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 51af4e6..a6ae658 100644
--- a/index.html
+++ b/index.html
@@ -30,15 +30,28 @@
     <div id="content">
       <h1>Jenot</h1>
 
-      <note-form id="new-note">
+      <note-form mode="add" id="new-note">
         <div class="note">
           <p class="content">
           </p>
           <div class="toolbar">
+            <button class="add">➕</button>
+            <button class="tasklist-mode">☑️</button>
+            <button class="note-mode">📑</button>
+            <button class="remove">🗑️</button>
+          </div>
+        </div>
+      </note-form>
+
+      <note-form mode="edit" id="edit-note" class="hidden">
+        <div class="note">
+          <p class="content">
+          </p>
+          <div class="toolbar">
+            <button class="save">💾</button>
             <button class="tasklist-mode">☑️</button>
             <button class="note-mode">📑</button>
             <button class="remove">🗑️</button>
-            <button class="add">➕</button>
           </div>
         </div>
       </note-form>
diff --git a/js/components.js b/js/components.js
index aa599f3..b2867a2 100644
--- a/js/components.js
+++ b/js/components.js
@@ -447,11 +447,13 @@ class NoteForm extends HTMLElement {
   }
 
   connectedCallback() {
+    this.mode = this.attributes.mode.value;
     this.content = this.querySelector(".content");
     this.tasklistModeButton = this.querySelector(".tasklist-mode");
     this.noteModeButton = this.querySelector(".note-mode");
     this.removeButton = this.querySelector(".remove");
     this.addButton = this.querySelector(".add");
+    this.saveButton = this.querySelector(".save");
 
     this.tasklistModeButton.addEventListener("click", (e) => {
       e.preventDefault();
@@ -469,19 +471,40 @@ class NoteForm extends HTMLElement {
 
     this.removeButton.addEventListener("click", (e) => {
       e.preventDefault();
+      if (this.mode === "edit") {
+        this.dispatchEvent(
+          new CustomEvent("deleteNote", {
+            bubbles: true,
+            detail: this.note,
+          }),
+        );
+      }
       this.#reset();
     });
 
-    this.addButton.addEventListener("click", (e) => {
-      e.preventDefault();
-      this.dispatchEvent(
-        new CustomEvent("addNote", {
-          bubbles: true,
-          detail: this.note,
-        }),
-      );
-      this.#reset();
-    });
+    if (this.mode === "add") {
+      this.addButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.dispatchEvent(
+          new CustomEvent("addNote", {
+            bubbles: true,
+            detail: this.note,
+          }),
+        );
+        this.#reset();
+      });
+    } else {
+      this.saveButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.dispatchEvent(
+          new CustomEvent("updateNote", {
+            bubbles: true,
+            detail: this.note,
+          }),
+        );
+        this.#reset();
+      });
+    }
 
     this.addEventListener("contentChange", () => {
       this.note.content = this.content.firstChild.value;
@@ -491,6 +514,12 @@ class NoteForm extends HTMLElement {
     this.#setContent();
   }
 
+  load(note) {
+    this.note = note;
+    this.#updateUI();
+    this.#setContent();
+  }
+
   #reset() {
     this.note = {
       type: "note",
diff --git a/js/jenot.js b/js/jenot.js
index 5eec272..32bf055 100644
--- a/js/jenot.js
+++ b/js/jenot.js
@@ -5,19 +5,34 @@ import "./components.js";
 const Notes = new NoteStore("jenot-app");
 
 const newNote = document.querySelector("#new-note");
+const editNote = document.querySelector("#edit-note");
 
 Notes.addEventListener("save", render.bind(this));
 
 render();
 
 newNote.addEventListener("addNote", (e) => {
+  console.log(e.detail);
   Notes.add(e.detail);
   Notes.saveStorage();
 });
 
+editNote.addEventListener("updateNote", (e) => {
+  newNote.classList.remove("hidden");
+  editNote.classList.add("hidden");
+  Notes.update(e.detail);
+  Notes.saveStorage();
+});
+
+editNote.addEventListener("deleteNote", (e) => {
+  newNote.classList.remove("hidden");
+  editNote.classList.add("hidden");
+  Notes.remove(e.detail);
+  Notes.saveStorage();
+});
+
 function render() {
   const notes = Notes.all();
-  console.log(notes)
   const notesContainer = document.querySelector("#notes");
   notesContainer.replaceChildren();
 
@@ -47,5 +62,11 @@ function render() {
     }
 
     notesContainer.appendChild(container);
+
+    container.addEventListener("click", (e) => {
+      newNote.classList.add("hidden");
+      editNote.classList.remove("hidden");
+      editNote.load(Notes.get(container.id));
+    });
   });
 }
diff --git a/js/store.js b/js/store.js
index 5bb8208..343fcdf 100644
--- a/js/store.js
+++ b/js/store.js
@@ -30,7 +30,7 @@ export class NoteStore extends EventTarget {
   }
 
   all = () => this.notes;
-  get = () => this.notes.find((note) => note.id === id);
+  get = (id) => this.notes.find((note) => note.id === id);
   getEditedNoteId = () => this.editedNoteId;
 
   add(note) {
diff --git a/style.css b/style.css
index 8d91f6d..ae75b1f 100644
--- a/style.css
+++ b/style.css
@@ -167,13 +167,13 @@ note-form .note {
 }
 
 div#content {
-  width: 270px;
+  /* width: 270px; */
   max-width: 1200px;
   margin: 10px auto 0 auto;
 }
 
 .note {
-  max-width: 240px;
+  /* min-width: 240px; */
   background: beige;
   box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 0.8);
   padding: 4px 8px;