Add sweetalert to replace default JS confirm when editing task

Author: samuel27m

package.json

@@ -11,7 +11,8 @@
     "popper.js": "^1.14.7",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-scripts": "2.1.8"
+    "react-scripts": "2.1.8",
+    "sweetalert2": "^8.8.7"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/tasks/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import DefaultLayout from '../../layouts/Default';
 import Task from './task';
 import TaskAdd from './task/add.js';
+import Swal from 'sweetalert2/dist/sweetalert2.js';
 import './css/index.css';
 
 class Index extends Component {
@@ -49,20 +50,25 @@ class Index extends Component {
      * TODO: Use Bootstrap alerts instead of default JS window.prompt
      * @param {number} taskId 
      */
-    editTask(taskId) {
-      const name = window.prompt('Enter task name');
+    async editTask(taskId) {
+      const tasks = this.state.tasks;
 
-      /** User cancels prompt */
-      if(name === null) return;
+      const {value: taskName} = await Swal.fire({
+        title: 'Edit task',
+        input: 'text',
+        inputValue: tasks[taskId].name,
+        showCancelButton: true,
+        inputValidator: (value) => {
+          if (!value) {
+            return 'Task name cannot be empty!'
+          }
+        }
+      });
 
-      /** User sets name as empty */
-      if(name.trim() === '') {
-        alert('Task name cannot be empty');
-        return;
-      }
+      /** User clicks cancel button */
+      if(typeof(taskName) === 'undefined') return;
 
-      const tasks = this.state.tasks;
-      tasks[taskId].name = name;
+      tasks[taskId].name = taskName;
       this.setTasks(tasks);
     }
 

src/layouts/Default.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/js/bootstrap.js';
+import 'sweetalert2/dist/sweetalert2.css';
 import Header from './Header';
 
 class Default extends Component {