Fix functionality to clear mockup image. Functional

Author: Shanon Lee

src-electron/electron-main.js

@@ -63,6 +63,12 @@ ipcMain.handle("uploadImage", async (event, arg) => {
   return result;
 })
 
+// Handle dialogs for clearing a mockup image 
+ipcMain.handle("clearImage", async (event, arg) => {
+  const result = await dialog.showMessageBox(arg);
+  return result;
+})
+
 
 // ************** Slack OAuth functions **********************
 // Sends request to Slack for User's information,

src/components/home_sidebar_items/UploadImage.vue

@@ -67,13 +67,23 @@ export default {
     },
     // removes mockup image
     removeImage () {
-      const res = clearImageDialog()
-      // console.log('REMOVEIMAGE: remove is ', res )
-      if (res === 0) {
-        this.clearImage({ route: this.activeRoute })
-        this.source = this.imagePath[this.activeRoute]
-      }
+      const responsePromise = clearImageDialog()
+
+      responsePromise
+        .then(res => {
+          // res will have format: { response: 0, checkboxChecked: false }
+          // res.response will be 0 if user chose 'Yes'
+          // res.response will be 1 if user chose 'Cancel'
+          if (res.response === 0) {
+            this.clearImage({ route: this.activeRoute })
+            this.source = this.imagePath[this.activeRoute]
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
     },
+
     // imports image on browser
     // currently images aren't able to be stored on browser
     async importMockupBrowser () {

src/utils/clearImage.util.js

@@ -1,15 +1,24 @@
-const { dialog } = require('electron').remote
-
+// const { dialog } = require('electron').remote
+const { ipcRenderer } = window;
 /**
  * Fires the Electron dialog box to show an alert to confirm clear image
  */
 
-const clearImageDialog = () => {
+const clearImageDialog = async () => {
   const options = {
     buttons: ['Yes', 'Cancel'],
     message: 'Do you want to clear image?'
   }
-  return dialog.showMessageBox(options)
+  // return dialog.showMessageBox(options)
+  const helper = await ipcRenderer.invoke('clearImage', options)
+    .then(res => {
+      console.log('Res from clear image util: ')
+      console.log(res)
+      return res;
+    })
+    .catch(err => console.log(err))
+  
+  return helper;
 }
 
 export default clearImageDialog

src/utils/uploadImage.util.js

@@ -21,17 +21,16 @@ const options = {
 
 // Used in uploadImage.vue
 const uploadImage = async () => {
-  const x = await ipcRenderer.invoke('uploadImage', options)
+  const helper = await ipcRenderer.invoke('uploadImage', options)
     .then(res => {
-      console.log('upload image util: ' + res.filePaths[0]);
       return res.filePaths[0]
     })
     .catch(err => {
       console.log(err);
       return err;
     })
 
-    return x;
+    return helper;
 }
 
 export default uploadImage