From 5baa251944638fe5a365a663ed64f0a985a09d12 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sun, 10 Feb 2019 16:59:50 +0100
Subject: [PATCH] more changes to import reporting through WS

---
 src/public/javascripts/dialogs/import.js | 48 +++++++++++++++---------
 src/services/import/tar.js               |  4 +-
 src/services/messaging.js                | 20 +++++++---
 src/views/dialogs/import.ejs             |  4 +-
 4 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/public/javascripts/dialogs/import.js b/src/public/javascripts/dialogs/import.js
index 29e4cb3a9..27b9629ae 100644
--- a/src/public/javascripts/dialogs/import.js
+++ b/src/public/javascripts/dialogs/import.js
@@ -10,11 +10,12 @@ const $noteTitle = $dialog.find(".note-title");
 const $fileUploadInput = $("#import-file-upload-input");
 const $importNoteCountWrapper = $("#import-note-count-wrapper");
 const $importNoteCount = $("#import-note-count");
+const $importButton = $("#import-button");
 
 async function showDialog() {
     $importNoteCountWrapper.hide();
     $importNoteCount.text('0');
-    $fileUploadInput.val('');
+    $fileUploadInput.val('').change(); // to trigger Import button disabling listener below
 
     glob.activeDialog = $dialog;
 
@@ -27,6 +28,9 @@ async function showDialog() {
 $form.submit(() => {
     const currentNode = treeService.getCurrentNode();
 
+    // disabling so that import is not triggered again.
+    $importButton.attr("disabled", "disabled");
+
     importIntoNote(currentNode.data.noteId);
 
     return false;
@@ -45,28 +49,38 @@ function importIntoNote(importNoteId) {
         contentType: false, // NEEDED, DON'T REMOVE THIS
         processData: false, // NEEDED, DON'T REMOVE THIS
     })
-        .fail((xhr, status, error) => alert('Import error: ' + xhr.responseText))
-        .done(async note => {
-            $dialog.modal('hide');
-
-            infoService.showMessage("Import finished successfully.");
-
-            await treeService.reload();
-
-            if (note) {
-                const node = await treeService.activateNote(note.noteId);
-
-                node.setExpanded(true);
-            }
-        });
+        // we actually ignore the error since it can be caused by HTTP timeout and use WS messages instead.
+        .fail((xhr, status, error) => {});
 }
 
-messagingService.subscribeToMessages(message => {
-    if (message.type === 'importNoteCount') {
+messagingService.subscribeToMessages(async message => {
+    if (message.type === 'import-note-count') {
         $importNoteCountWrapper.show();
 
         $importNoteCount.text(message.count);
     }
+    else if (message.type === 'import-finished') {
+        $dialog.modal('hide');
+
+        infoService.showMessage("Import finished successfully.");
+
+        await treeService.reload();
+
+        if (message.noteId) {
+            const node = await treeService.activateNote(message.noteId);
+
+            node.setExpanded(true);
+        }
+    }
+});
+
+$fileUploadInput.change(() => {
+    if ($fileUploadInput.val()) {
+        $importButton.removeAttr("disabled");
+    }
+    else {
+        $importButton.attr("disabled", "disabled");
+    }
 });
 
 export default {
diff --git a/src/services/import/tar.js b/src/services/import/tar.js
index bc792ccab..add0d6243 100644
--- a/src/services/import/tar.js
+++ b/src/services/import/tar.js
@@ -342,7 +342,7 @@ async function importTar(fileBuffer, importRootNote) {
             if (Date.now() - lastSentCountTs >= 1000) {
                 lastSentCountTs = Date.now();
 
-                messagingService.sendMessageToAllClients({ type: 'importNoteCount', count: importNoteCount });
+                messagingService.importNoteCount(importNoteCount);
             }
 
             next(); // ready for next entry
@@ -379,6 +379,8 @@ async function importTar(fileBuffer, importRootNote) {
                 }
             }
 
+            messagingService.importFinished(firstNote);
+
             resolve(firstNote);
         });
 
diff --git a/src/services/messaging.js b/src/services/messaging.js
index 6006e02b5..9c7f5c598 100644
--- a/src/services/messaging.js
+++ b/src/services/messaging.js
@@ -49,10 +49,6 @@ async function sendMessage(client, message) {
     }
 }
 
-async function refreshTree() {
-    await sendMessageToAllClients({ type: 'refresh-tree' });
-}
-
 async function sendMessageToAllClients(message) {
     const jsonStr = JSON.stringify(message);
 
@@ -78,8 +74,22 @@ async function sendPing(client, lastSentSyncId) {
     });
 }
 
+async function refreshTree() {
+    await sendMessageToAllClients({ type: 'refresh-tree' });
+}
+
+async function importNoteCount(count) {
+    await sendMessageToAllClients({ type: 'import-note-count', count: count });
+}
+
+async function importFinished(firstNote) {
+    await sendMessageToAllClients({ type: 'import-finished', noteId: firstNote.noteId });
+}
+
 module.exports = {
     init,
+    sendMessageToAllClients,
     refreshTree,
-    sendMessageToAllClients
+    importNoteCount,
+    importFinished
 };
\ No newline at end of file
diff --git a/src/views/dialogs/import.ejs b/src/views/dialogs/import.ejs
index ed226724d..02bdf4d0f 100644
--- a/src/views/dialogs/import.ejs
+++ b/src/views/dialogs/import.ejs
@@ -14,7 +14,7 @@
 
                         <input type="file" id="import-file-upload-input" class="form-control-file" />
 
-                        <p>File will be imported as child note(s) into <strong class="note-title"></strong>. Import file must be of supported type and have correct extension - one of <code>.html</code>, <code>.md</code>, <code>.tar</code>, <code>.enex</code>.</p>
+                        <p>Content of the file will be imported as child note(s) into <strong class="note-title"></strong>. Import file must be of supported type and have correct extension - one of <code>.html</code>, <code>.md</code>, <code>.tar</code>, <code>.enex</code>.</p>
                     </div>
 
                     <div class="form-group">
@@ -33,7 +33,7 @@
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button class="btn btn-primary">Import</button>
+                    <button class="btn btn-primary" id="import-button">Import</button>
                 </div>
             </form>
         </div>