Allow saving edited words

src/js/setupListeners.js

@@ -1,6 +1,6 @@
 import {showSection} from './displayToggles';
 import { renderWords, renderWordOptions, destroyWordOptions, renderEditForm } from './render';
-import { validateWord, addWord } from './wordManagement';
+import { validateWord, addWord, confirmEditWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
 import { openEditModal, save, saveAndClose } from './dictionaryManagement';
@@ -190,8 +190,8 @@ export function setupWordEditFormButtons() {
   const saveChangesButtons = document.getElementsByClassName('edit-save-changes');
   const cancelChangesButtons = document.getElementsByClassName('edit-cancel');
   Array.from(saveChangesButtons).forEach(button => {
-    button.removeEventListener('click', renderEditForm);
-    button.addEventListener('click', renderEditForm);
+    button.removeEventListener('click', confirmEditWord);
+    button.addEventListener('click', confirmEditWord);
   });
   Array.from(cancelChangesButtons).forEach(button => {
     button.removeEventListener('click', renderWords);

src/js/wordManagement.js

@@ -1,6 +1,7 @@
 import { renderWords } from "./render";
 import { wordExists } from "./utilities";
 import removeDiacritics from "./StackOverflow/removeDiacritics";
+import { removeTags } from "../helpers";
 
 export function validateWord(word, wordId = false) {
   const errorElementId = wordId === false ? 'wordErrorMessage' : 'wordErrorMessage_' + wordId,
@@ -18,7 +19,9 @@ export function validateWord(word, wordId = false) {
   if (!allowDuplicates) {
     const foundDuplicate = wordExists(word.name, true);
     if (foundDuplicate !== false) {
-      errorMessage += `<p class="bold red">"<a href="#${foundDuplicate}">${word.name}</a>" already exists, and "Allow Duplicates" is turned off.${!caseSensitive ? ' <em>(Case sensitivity is turned also off)</em>' : ''}</p>`;
+      if (wordId !== false && foundDuplicate !== wordId) {
+        errorMessage += `<p class="bold red">"<a href="#${foundDuplicate}">${word.name}</a>" already exists, and "Prevent Duplicate Words" is turned on.${!caseSensitive ? ' <em>(Case sensitivity is turned off)</em>' : ''}</p>`;
+      }
     }
   }
 
@@ -26,11 +29,10 @@ export function validateWord(word, wordId = false) {
   return errorMessage === '';
 }
 
-export function addWord(word, render = true) {
+export function sortWords(render) {
   const { sortByDefinition } = window.currentDictionary.settings;
   const sortBy = sortByDefinition ? 'simpleDefinition' : 'name';
 
-  window.currentDictionary.words.push(word);
   window.currentDictionary.words.sort((wordA, wordB) => {
     if (removeDiacritics(wordA[sortBy]).toLowerCase() === removeDiacritics(wordB[sortBy]).toLowerCase()) return 0;
     return removeDiacritics(wordA[sortBy]).toLowerCase() > removeDiacritics(wordB[sortBy]).toLowerCase() ? 1 : -1;
@@ -40,3 +42,44 @@ export function addWord(word, render = true) {
     renderWords();
   }
 }
+
+export function addWord(word, render = true) {
+  window.currentDictionary.words.push(word);
+  sortWords(render);
+}
+
+export function updateWord(word, wordId) {
+  const wordIndex = window.currentDictionary.words.findIndex(word => word.wordId === wordId);
+
+  if (wordIndex < 0) {
+    console.error('Could not find word to update');
+  } else {
+    window.currentDictionary.words[wordIndex] = word;
+    sortWords(true);
+  }
+}
+
+export function confirmEditWord() {
+  const button = this;
+  const wordId = parseInt(button.id.replace('editWordButton_', ''));
+  const name = document.getElementById('wordName_' + wordId).value,
+    pronunciation = document.getElementById('wordPronunciation_' + wordId).value,
+    partOfSpeech = document.getElementById('wordPartOfSpeech_' + wordId).value,
+    definition = document.getElementById('wordDefinition_' + wordId).value,
+    details = document.getElementById('wordDetails_' + wordId).value;
+
+  const word = {
+    name: removeTags(name).trim(),
+    pronunciation: removeTags(pronunciation).trim(),
+    partOfSpeech: removeTags(partOfSpeech).trim(),
+    simpleDefinition: removeTags(definition).trim(),
+    longDefinition: removeTags(details).trim(),
+    wordId,
+  };
+
+  if (validateWord(word, wordId)) {
+    if (confirm(`Are you sure you want save changes to ${word.name}?`)) {
+      updateWord(word, wordId);
+    }
+  }
+}