145. Converting Notes App: Part IV

Author: Max Kelly

Diff for: notes-app/node_modules/.cache/uglifyjs-webpack-plugin/content-v2/sha512/44/ab/3c001212f37e885e63cf9f7da6f928e33954f683e56f561bb794761241227d18d4b2c95898ffb4677338ae9948fd4008b14cea8650e08cea23f00b4b6f24

@@ -1 +1,40 @@
-console.log('edit.js')
+import { initializedEditPage, generateLastEdited } from './views'
+import { updateNote, removeNote } from './notes'
+
+const titleElement = document.querySelector("#note-title");
+const bodyElement = document.querySelector("#note-body");
+const dateElement = document.querySelector("#edited");
+const removeElement = document.querySelector("#remove-note");
+const noteId = location.hash.substring(1);
+
+initializedEditPage(noteId)
+
+
+// This saves the title of the note.
+titleElement.addEventListener("input", e => {
+    const note = updateNote(noteId, {
+        title: e.target.value
+    })
+    dateElement.textContent = generateLastEdited(note.updatedAt)
+});
+
+// This saves the body of the note.
+bodyElement.addEventListener("input", e => {
+    const note = updateNote(noteId, {
+        body: e.target.value
+    })
+    dateElement.textContent = generateLastEdited(note.updatedAt);
+});
+
+// This removes the note and redirects the user back the /index.html
+removeElement.addEventListener("click", e => {
+    removeNote(noteId);
+    location.assign("/index.html");
+});
+
+// The below code lets the console listen and any changes made in the window will update across other windows.
+window.addEventListener("storage", e => {
+    if (e.key === "notes") {
+        initializedEditPage(noteId)
+    }
+});

Diff for: notes-app/node_modules/.cache/uglifyjs-webpack-plugin/content-v2/sha512/b8/43/93d6a793e636dce7ae92379e690015bd9384aff80628ccbde77da99bc7fa550c069845a3515665a303957d9f06222d655c367299fa4d652721ffdaa5c2b9

@@ -1,18 +1,31 @@
-import { getNotes, createNote, removeNote, updateNote } from './notes.js'
-import { getFilters, setFilters } from './filters.js'
+import { createNote } from './notes.js'
+import { setFilters } from './filters.js'
+import { renderNotes } from './views'
 
-// console.log(getNotes())
-// createNote()
-//removeNote("s");
-// updateNote("7e114e26-2e28-4bc6-8afa-c277fd6f1fd6", {
-//     title: 'Max is awesome',
-//     body: 'This is the body'
-// });
-// console.log(getNotes());
+renderNotes(); // This calls the function before the user interacts with the page.
 
-console.log(getFilters())
-setFilters({
-    searchText: 'Office',
-    sortBy: 'byCreated'
-})
-console.log(getFilters())
+document.querySelector("#create-button").addEventListener("click", e => {
+    const id = createNote()
+    location.assign(`/edit.html#${id}`); // Makes it so if the button is clicked they're redirected.
+});
+
+document.querySelector("#search-text").addEventListener("input", e => {
+    setFilters({
+        searchText: e.target.value
+    })
+    renderNotes();
+}); // This calls when the user interacts with the function.
+
+document.querySelector("#filter-by").addEventListener("change", e => { 
+    setFilters({
+        sortBy: e.target.value
+    })
+    renderNotes();
+});
+
+// This makes it so if the title was changed on the edit note page it will update the note page while tab is open
+window.addEventListener("storage", e => {
+    if (e.key === "notes") {
+        renderNotes();
+    }
+}); 

Diff for: notes-app/node_modules/.cache/uglifyjs-webpack-plugin/index-v5/49/7e/0fa652999ef4ddc6a3f1063c36e5a54a9dc3b302b7012fcb6b5fb25f1233

@@ -42,6 +42,7 @@ const createNote = () => {
         dateLastEdited: timeStamp
     });
     saveNotes()
+    return id
 }
 
 // Remove a note from the list 
@@ -112,6 +113,7 @@ const updateNote = (id, updates) => {
     }
 
     saveNotes()
+    return note
 }
 
 

Diff for: notes-app/node_modules/.cache/uglifyjs-webpack-plugin/index-v5/87/e4/42957236f21c042cadcb0e8e3e7ed9ae62ef17dca6315ed41c3d0e8504bc

@@ -0,0 +1,87 @@
+import moment from 'moment'
+import { getFilters } from './filters'
+import { sortNotes, getNotes } from './notes'
+
+// Generate the DOM Structure for a note
+const generateNoteDOM = note => {
+  const noteEl = document.createElement("a");
+  const textEl = document.createElement("p"); // this makes it so the text is now an anchor tag linking them to edit.html
+  const button = document.createElement("button");
+  const statusEl = document.createElement("p");
+
+  // Setup the remove note button
+  button.textContent = "X";
+  noteEl.appendChild(button);
+  button.addEventListener("click", function(e) {
+    removeNote(note.id);
+    saveNotes(notes);
+    renderNotes(notes, filters);
+  });
+
+  // Setup the note title text
+  if (note.title.length > 0) {
+    textEl.textContent = note.title;
+  } else {
+    textEl.textContent = "Unnamed note";
+  }
+  textEl.classList.add('list-item__title')
+  noteEl.appendChild(textEl);
+
+  // Setup the link
+  noteEl.setAttribute("href", `/edit.html#${note.id}`); // This changes the text to be a anchor tag linking them to edit.html and attaches the note id onto the href
+  noteEl.classList.add('list-item') // classList.add - adds a class list to a javascript 
+  
+  // Setup the status message
+  statusEl.textContent = generateLastEdited(note.updatedAt)
+  statusEl.classList.add('list-item__subtitle')
+  noteEl.appendChild(statusEl)
+  return noteEl;
+};
+
+// Render application notes 
+// The below code takes all of the notes and filters to which one is relevant
+const renderNotes = () => {
+    const notesEl = document.querySelector("#notes");
+    const filters = getFilters()
+    const notes = sortNotes(filters.sortBy)
+    const filteredNotes = notes.filter( (note) => note.title.toLowerCase().includes(filters.searchText.toLowerCase()));
+
+    notesEl.innerHTML = ''
+
+    if (filteredNotes.length > 0) {
+        filteredNotes.forEach(note => {
+          const noteEl = generateNoteDOM(note); // This pulls code from notes-function.js
+          notesEl.appendChild(noteEl)
+        });
+    } else {
+        const emptyMessage = document.createElement('p')
+        emptyMessage.textContent = 'No notes to display'
+        emptyMessage.classList.add('empty-message')
+        notesEl.appendChild(emptyMessage)
+    }
+};
+
+const initializedEditPage = (noteId) => {
+    const titleElement = document.querySelector("#note-title");
+    const bodyElement = document.querySelector("#note-body");
+    const dateElement = document.querySelector("#edited");
+    const notes = getNotes();
+    const note = notes.find(note => note.id === noteId);
+
+    // If there is no note run the code
+    if (!note) {
+        location.assign(`/index.html`);
+    }
+
+    titleElement.value = note.title;
+    bodyElement.value = note.body;
+    dateElement.textContent = generateLastEdited(notes.updatedAt); // Records the last edited note
+};
+
+// Generate the last edited message
+const generateLastEdited = timeStamp => {
+    return `Last Edited: ${moment(timeStamp).fromNow()}`;
+};
+
+export { generateNoteDOM, renderNotes, generateLastEdited, initializedEditPage }; 
+