Add delete dictionary from server with switching

src/js/account/dictionaryManagement.js

@@ -2,15 +2,16 @@ import { clearDictionary, saveDictionary } from "../dictionaryManagement";
 import { uploadWholeDictionary, performSync } from "./sync";
 import { request } from "./helpers";
 import { saveToken } from "./utilities";
-import { addMessage } from "../utilities";
+import { addMessage, hideAllModals } from "../utilities";
 import { renderAll } from "../render";
+import { renderDeletedDictionaryChangeModal, renderChangeDictionaryOptions } from "./render";
 
 export function createNewDictionary() {
   clearDictionary();
   saveDictionary();
   renderAll();
   uploadWholeDictionary(true);
-  document.getElementById('settingsModal').style.display = 'none';
+  hideAllModals();
   addMessage('New Dictionary Created!');
 }
 
@@ -23,7 +24,7 @@ export function changeDictionary(dictionary) {
     }, successData => {
       saveToken(successData.token);
       performSync(successData.dictionary);
-      document.getElementById('settingsModal').style.display = 'none';
+      hideAllModals();
     }, error => {
       console.error(error);
       addMessage(error, undefined, 'error');
@@ -36,3 +37,14 @@ export function updateCurrentChangeDictionaryOption() {
   document.getElementById('accountSettingsChangeDictionary')
     .querySelector(`option[value=${window.currentDictionary.externalID}]`).innerText = label;
 }
+
+export function deleteDictionary(deletedId) {
+  request({
+    action: 'delete-current-dictionary',
+  }, successful => {
+    if (successful) {
+      renderChangeDictionaryOptions();
+      renderDeletedDictionaryChangeModal(deletedId);
+    }
+  })
+}

src/js/account/index.js

@@ -10,7 +10,7 @@ import {
 } from './sync';
 import { saveDeletedWordLocally } from './utilities';
 import { addMessage } from '../utilities';
-import { updateCurrentChangeDictionaryOption } from './dictionaryManagement';
+import { updateCurrentChangeDictionaryOption, deleteDictionary } from './dictionaryManagement';
 
 export function showLoginForm() {
   renderLoginForm();
@@ -65,4 +65,8 @@ export function deleteWord(wordId) {
 
 export function updateChangeDictionaryOption() {
   updateCurrentChangeDictionaryOption();
+}
+
+export function deleteCurrentDictionary(deletedId) {
+  deleteDictionary(deletedId);
 }

src/js/account/render.js

@@ -1,4 +1,4 @@
-import { setupLoginModal, setupChangeDictionary, setupCreateNewDictionary } from "./setupListeners";
+import { setupLoginModal, setupChangeDictionary, setupCreateNewDictionary, setupDeletedDictionaryChangeModal } from "./setupListeners";
 import { request } from "./helpers";
 
 export function renderLoginForm() {
@@ -98,4 +98,33 @@ export function renderChangeDictionaryOptions() {
     changeDictionarySelect.value = window.currentDictionary.externalID;
     setupChangeDictionary();
   }, error => console.error(error));
+}
+
+export function renderDeletedDictionaryChangeModal(deletedId) {
+  const changeDictionarySelect = document.getElementById('accountSettingsChangeDictionary');
+  const lazyFilterOptions = changeDictionarySelect.querySelectorAll(`option:not([value="${deletedId}"])`);
+  const lazyFilter = document.createElement('select');
+  lazyFilter.innerHTML = '<option></option>';
+  lazyFilterOptions.forEach(option => {
+    lazyFilter.appendChild(option);
+  });
+  const otherDictionariesHTML = lazyFilter.innerHTML;
+  const modal = document.createElement('section');
+  modal.classList.add('modal');
+  modal.innerHTML = `<div class="modal-background"></div>
+  <div class="modal-content">
+    <section class="info-modal">
+      <h2>Dictionary Deleted</h2>
+      ${lazyFilterOptions.length < 1 ? ''
+      : `<label>Select dictionary to load<br>
+        <select id="selectDictionaryToLoad">${otherDictionariesHTML}</select>
+      </label>
+      <p>OR</p>`}
+      <p><a class="button" id="createNewDictionaryAfterDelete">Create a New Dictionary</a></p>
+    </section>
+  </div>`;
+
+  document.body.appendChild(modal);
+
+  setupDeletedDictionaryChangeModal();
 }

src/js/account/setupListeners.js

@@ -28,3 +28,11 @@ export function setupChangeDictionary() {
 export function setupCreateNewDictionary() {
   document.getElementById('accountSettingsCreateNewDictionary').addEventListener('click', createNewDictionary);
 }
+
+export function setupDeletedDictionaryChangeModal() {
+  const selectDictionaryToLoad = document.getElementById('selectDictionaryToLoad')
+  if (selectDictionaryToLoad) {
+    selectDictionaryToLoad.addEventListener('change', changeDictionary);
+  }
+  document.getElementById('createNewDictionaryAfterDelete').addEventListener('click', createNewDictionary);
+}

src/js/account/sync.js

@@ -64,6 +64,7 @@ export function performSync(remoteDictionary) {
         syncWords(remoteDictionary.words, remoteDictionary.deletedWords).then(success => {
           if (success) {
             renderAll();
+            document.getElementById('accountSettingsChangeDictionary').value = window.currentDictionary.externalID;
           } else {
             console.error('word sync failed');
           }

src/js/dictionaryManagement.js

@@ -104,10 +104,17 @@ export function clearDictionary() {
 }
 
 export function deleteDictionary() {
+  const deletedId = window.currentDictionary.externalID;
   clearDictionary();
   saveDictionary();
   addMessage('Dictionary Deleted!');
   renderAll();
+
+  if (hasToken()) {
+    import('./account/index.js').then(account => {
+      account.deleteCurrentDictionary(deletedId);
+    });
+  }
 }
 
 export function confirmDeleteDictionary() {

src/php/api/Dictionary.php

@@ -65,6 +65,15 @@ VALUES ($new_id, ?, ?, ?, ?)";
     return false;
   }
 
+  public function deleteDictionary ($user, $dictionary) {
+    $update_query = 'DELETE FROM dictionaries WHERE id=? AND user=?';
+    $update = $this->db->query($update_query, array($dictionary, $user));
+    if ($update->rowCount() > 0) {
+      return true;
+    }
+    return false;
+  }
+
   public function getAllNames ($user) {
     $query = "SELECT id, name, specification FROM dictionaries WHERE user=$user";
     $results = $this->db->query($query)->fetchAll();

src/php/api/User.php

@@ -205,6 +205,19 @@ VALUES (?, ?, ?, ?, ?)';
     return false;
   }
 
+  public function deleteCurrentDictionary ($token) {
+    $user_data = $this->token->decode($token);
+    if ($user_data !== false) {
+      $user = $user_data->id;
+      $dictionary = $user_data->dictionary;
+      $deleted = $this->dictionary->deleteDictionary($user, $dictionary);
+      if ($deleted) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   public function updateCurrentDictionaryDetails ($token, $dictionary_details) {
     $user_data = $this->token->decode($token);
     if ($user_data !== false) {

src/php/api/index.php

@@ -244,6 +244,26 @@ switch ($action) {
       'error' => true,
     ), 400);
   }
+  case 'delete-current-dictionary': {
+    if ($token !== false) {
+      $user = new User();
+      $dictionary_deleted = $user->deleteCurrentDictionary($token);
+      if ($dictionary_deleted !== false) {
+        return Response::json(array(
+          'data' => $dictionary_deleted,
+          'error' => false,
+        ), 200);
+      }
+      return Response::json(array(
+        'data' => 'Could not delete dictionary: invalid token',
+        'error' => true,
+      ), 401);
+    }
+    return Response::json(array(
+      'data' => 'Could not delete dictionary: no token provided',
+      'error' => true,
+    ), 400);
+  }
   case 'set-dictionary-details': {
     if ($token !== false && isset($request['details'])) {
       $user = new User();