added modal feature for adding tasks

.eslintcache

@@ -1 +1 @@
-[{"/Users/bradtraversy/dev/react-task-tracker/src/reportWebVitals.js":"1","/Users/bradtraversy/dev/react-task-tracker/src/App.js":"2","/Users/bradtraversy/dev/react-task-tracker/src/components/Header.js":"3","/Users/bradtraversy/dev/react-task-tracker/src/components/Button.js":"4","/Users/bradtraversy/dev/react-task-tracker/src/components/Tasks.js":"5","/Users/bradtraversy/dev/react-task-tracker/src/components/Task.js":"6","/Users/bradtraversy/dev/react-task-tracker/src/components/AddTask.js":"7","/Users/bradtraversy/dev/react-task-tracker/src/index.js":"8","/Users/bradtraversy/dev/react-task-tracker/src/components/About.js":"9","/Users/bradtraversy/dev/react-task-tracker/src/components/Footer.js":"10"},{"size":362,"mtime":1610825138835,"results":"11","hashOfConfig":"12"},{"size":2889,"mtime":1610833718586,"results":"13","hashOfConfig":"12"},{"size":700,"mtime":1610833877186,"results":"14","hashOfConfig":"12"},{"size":408,"mtime":1610827157046,"results":"15","hashOfConfig":"12"},{"size":259,"mtime":1610832243637,"results":"16","hashOfConfig":"12"},{"size":459,"mtime":1610829440832,"results":"17","hashOfConfig":"12"},{"size":1347,"mtime":1610830658166,"results":"18","hashOfConfig":"12"},{"size":500,"mtime":1610825138835,"results":"19","hashOfConfig":"12"},{"size":186,"mtime":1610833772371,"results":"20","hashOfConfig":"12"},{"size":203,"mtime":1610833786616,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1lhui7b",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/bradtraversy/dev/react-task-tracker/src/reportWebVitals.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/App.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/Header.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/Button.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/Tasks.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/Task.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/AddTask.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/index.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/About.js",[],"/Users/bradtraversy/dev/react-task-tracker/src/components/Footer.js",[]]
+[{"/home/jannat/Documents/React_Projects/react-crash-2021/src/index.js":"1","/home/jannat/Documents/React_Projects/react-crash-2021/src/components/About.js":"2","/home/jannat/Documents/React_Projects/react-crash-2021/src/components/Tasks.js":"3","/home/jannat/Documents/React_Projects/react-crash-2021/src/App.js":"4","/home/jannat/Documents/React_Projects/react-crash-2021/src/components/Header.js":"5","/home/jannat/Documents/React_Projects/react-crash-2021/src/components/Modal.js":"6"},{"size":500,"mtime":1633332274431,"results":"7","hashOfConfig":"8"},{"size":186,"mtime":1633332274431,"results":"9","hashOfConfig":"8"},{"size":259,"mtime":1633332274431,"results":"10","hashOfConfig":"8"},{"size":3257,"mtime":1633332900494,"results":"11","hashOfConfig":"8"},{"size":700,"mtime":1633332274431,"results":"12","hashOfConfig":"8"},{"size":2611,"mtime":1633333050433,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1l82918",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/jannat/Documents/React_Projects/react-crash-2021/src/index.js",[],"/home/jannat/Documents/React_Projects/react-crash-2021/src/components/About.js",[],"/home/jannat/Documents/React_Projects/react-crash-2021/src/components/Tasks.js",[],"/home/jannat/Documents/React_Projects/react-crash-2021/src/App.js",[],"/home/jannat/Documents/React_Projects/react-crash-2021/src/components/Header.js",[],"/home/jannat/Documents/React_Projects/react-crash-2021/src/components/Modal.js",[]]

package.json

@@ -12,6 +12,7 @@
     "react-icons": "^4.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "sass": "^1.42.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -1,39 +1,39 @@
-import { useState, useEffect } from 'react'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
-import Header from './components/Header'
-import Footer from './components/Footer'
-import Tasks from './components/Tasks'
-import AddTask from './components/AddTask'
-import About from './components/About'
+import { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import Tasks from './components/Tasks';
+import Modal from './components/Modal';
+import About from './components/About';
 
 const App = () => {
-  const [showAddTask, setShowAddTask] = useState(false)
-  const [tasks, setTasks] = useState([])
+  const [showAddTask, setShowAddTask] = useState(false);
+  const [tasks, setTasks] = useState([]);
 
   useEffect(() => {
     const getTasks = async () => {
-      const tasksFromServer = await fetchTasks()
-      setTasks(tasksFromServer)
-    }
+      const tasksFromServer = await fetchTasks();
+      setTasks(tasksFromServer);
+    };
 
-    getTasks()
-  }, [])
+    getTasks();
+  }, []);
 
   // Fetch Tasks
   const fetchTasks = async () => {
-    const res = await fetch('http://localhost:5000/tasks')
-    const data = await res.json()
+    const res = await fetch('http://localhost:5000/tasks');
+    const data = await res.json();
 
-    return data
-  }
+    return data;
+  };
 
   // Fetch Task
   const fetchTask = async (id) => {
-    const res = await fetch(`http://localhost:5000/tasks/${id}`)
-    const data = await res.json()
+    const res = await fetch(`http://localhost:5000/tasks/${id}`);
+    const data = await res.json();
 
-    return data
-  }
+    return data;
+  };
 
   // Add Task
   const addTask = async (task) => {
@@ -43,63 +43,69 @@ const App = () => {
         'Content-type': 'application/json',
       },
       body: JSON.stringify(task),
-    })
+    });
 
-    const data = await res.json()
+    const data = await res.json();
 
-    setTasks([...tasks, data])
+    setTasks([...tasks, data]);
 
     // const id = Math.floor(Math.random() * 10000) + 1
     // const newTask = { id, ...task }
     // setTasks([...tasks, newTask])
-  }
+  };
 
   // Delete Task
   const deleteTask = async (id) => {
     const res = await fetch(`http://localhost:5000/tasks/${id}`, {
       method: 'DELETE',
-    })
+    });
     //We should control the response status to decide if we will change the state or not.
     res.status === 200
       ? setTasks(tasks.filter((task) => task.id !== id))
-      : alert('Error Deleting This Task')
-  }
+      : alert('Error Deleting This Task');
+  };
 
   // Toggle Reminder
   const toggleReminder = async (id) => {
-    const taskToToggle = await fetchTask(id)
-    const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder }
+    const taskToToggle = await fetchTask(id);
+    const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder };
 
     const res = await fetch(`http://localhost:5000/tasks/${id}`, {
       method: 'PUT',
       headers: {
         'Content-type': 'application/json',
       },
       body: JSON.stringify(updTask),
-    })
+    });
 
-    const data = await res.json()
+    const data = await res.json();
 
     setTasks(
       tasks.map((task) =>
         task.id === id ? { ...task, reminder: data.reminder } : task
       )
-    )
-  }
+    );
+  };
 
   return (
     <Router>
-      <div className='container'>
+      <div className="container">
         <Header
           onAdd={() => setShowAddTask(!showAddTask)}
           showAdd={showAddTask}
         />
         <Route
-          path='/'
+          path="/"
           exact
           render={(props) => (
             <>
-              {showAddTask && <AddTask onAdd={addTask} />}
+              {showAddTask && (
+                <Modal
+                  show={showAddTask}
+                  close={() => setShowAddTask(!showAddTask)}
+                  onAdd={addTask}
+                />
+              )}
               {tasks.length > 0 ? (
                 <Tasks
                   tasks={tasks}
@@ -112,11 +118,11 @@ const App = () => {
             </>
           )}
         />
-        <Route path='/about' component={About} />
+        <Route path="/about" component={About} />
         <Footer />
       </div>
     </Router>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/components/Modal.js

@@ -0,0 +1,87 @@
+// import Close from './times-solid.svg';
+import { FaTimes } from 'react-icons/fa';
+import './Modal.scss';
+import { useState } from 'react';
+
+const Modal = ({ show, close, onAdd }) => {
+  const [text, setText] = useState('');
+  const [day, setDay] = useState('');
+  const [reminder, setReminder] = useState(false);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    if (!text) {
+      alert('please put text');
+      return;
+    }
+
+    onAdd({ text, day, reminder });
+
+    setText('');
+    setDay('');
+    setReminder(false);
+
+    close();
+  };
+  return (
+    <>
+      {show ? (
+        <div className="modalContainer">
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <header className="modal_header">
+              <h2 className="modal_header-title">Add Task</h2>
+              <FaTimes
+                className="close"
+                onClick={() => close()}
+                style={{ cursor: 'pointer' }}
+              />
+            </header>
+            {/* <main className="modal_content">This is modal content</main> */}
+            <form className="add-form" onSubmit={onSubmit}>
+              <div className="form-control">
+                <label>Task</label>
+                <input
+                  type="text"
+                  placeholder="Add Task"
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                  style={{ backgroundColor: '#f4f4f4' }}
+                />
+              </div>
+              <div className="form-control">
+                <label>Day</label>
+                <input
+                  type="text"
+                  placeholder="Day"
+                  value={day}
+                  onChange={(e) => setDay(e.target.value)}
+                  style={{ backgroundColor: '#f4f4f4' }}
+                />
+              </div>
+              <div className="form-control form-control-check">
+                <label>Reminder</label>
+                <input
+                  type="checkbox"
+                  placeholder="Set Reminder"
+                  value={reminder}
+                  checked={reminder}
+                  onChange={(e) => setReminder(e.currentTarget.checked)}
+                  style={{ backgroundColor: 'mistyrose' }}
+                />
+              </div>
+              <input
+                type="submit"
+                value="Save Task"
+                className="btn btn-block"
+                style={{ backgroundColor: 'lightslategray' }}
+              />
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default Modal;

src/components/Modal.scss

@@ -0,0 +1,84 @@
+.modalContainer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba($color: #000000, $alpha: 0.35);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .modal {
+      width: 30vw;
+      height: auto;
+      background-color: #fff;
+      padding: 2rem;
+      border-radius: 20px;
+
+      background-color: rgba(255, 255, 255, 0.35);
+      backdrop-filter: blur(5px);
+      box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
+
+      &_header {
+        position: relative;
+        border-bottom: 1px solid #dddddd;
+        &-title {
+          text-align: center;
+        }
+
+        .close {
+          position: absolute;
+          top: 0;
+          right: 0;
+          background: transparent;
+
+          img {
+            width: 1rem;
+            height: auto;
+            transition: all 0.3s;
+          }
+          &:hover {
+            img {
+              transform: scale(1.1);
+            }
+          }
+        }
+      }
+
+      &_content {
+        border-bottom: 1px solid #dddddd;
+        padding: 2rem 0;
+      }
+
+      &_footer {
+        padding: 2rem 0;
+        padding-bottom: 0;
+
+        button {
+          float: right;
+          padding: 0.5rem;
+
+          border-radius: 8px;
+        }
+        .modal-close {
+          background-color: transparent;
+          font-weight: 600;
+
+          &:hover {
+            color: rgba(54, 67, 72, 0.8);
+          }
+        }
+        .submit {
+          margin-right: 1rem;
+          background-color: #364348;
+          color: #fff;
+
+          &:hover {
+            background-color: rgba(54, 67, 72, 0.8);
+          }
+        }
+      }
+    }
+  }