From e4c1946be40a9880478e9d339b79529b36947605 Mon Sep 17 00:00:00 2001 From: tanjan-sj Date: Mon, 4 Oct 2021 13:44:40 +0600 Subject: [PATCH] added modal feature for adding tasks --- .eslintcache | 2 +- package-lock.json | 14 +++--- package.json | 1 + src/App.js | 90 +++++++++++++++++++++------------------ src/components/Modal.js | 87 +++++++++++++++++++++++++++++++++++++ src/components/Modal.scss | 84 ++++++++++++++++++++++++++++++++++++ 6 files changed, 230 insertions(+), 48 deletions(-) create mode 100644 src/components/Modal.js create mode 100644 src/components/Modal.scss diff --git a/.eslintcache b/.eslintcache index 85cbde9..9dae0dc 100644 --- a/.eslintcache +++ b/.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",[]] \ No newline at end of file +[{"/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",[]] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 256860b..f666aa6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3198,8 +3198,7 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "optional": true + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, "bindings": { "version": "1.5.0", @@ -3696,7 +3695,6 @@ "version": "3.5.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", - "optional": true, "requires": { "anymatch": "~3.1.1", "braces": "~3.0.2", @@ -7531,7 +7529,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "optional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -12086,7 +12083,6 @@ "version": "3.5.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", - "optional": true, "requires": { "picomatch": "^2.2.1" } @@ -12803,6 +12799,14 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz", "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==" }, + "sass": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.42.1.tgz", + "integrity": "sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0" + } + }, "sass-loader": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz", diff --git a/package.json b/package.json index 50e5414..4d54d50 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index 17f8a82..12cfa89 100644 --- a/src/App.js +++ b/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,32 +43,32 @@ 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', @@ -76,30 +76,36 @@ const App = () => { '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 ( -
+
setShowAddTask(!showAddTask)} showAdd={showAddTask} /> ( <> - {showAddTask && } + {showAddTask && ( + setShowAddTask(!showAddTask)} + onAdd={addTask} + /> + )} {tasks.length > 0 ? ( { )} /> - +
- ) -} + ); +}; -export default App +export default App; diff --git a/src/components/Modal.js b/src/components/Modal.js new file mode 100644 index 0000000..939bcc8 --- /dev/null +++ b/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 ? ( +
+
e.stopPropagation()}> +
+

Add Task

+ close()} + style={{ cursor: 'pointer' }} + /> +
+ {/*
This is modal content
*/} +
+
+ + setText(e.target.value)} + style={{ backgroundColor: '#f4f4f4' }} + /> +
+
+ + setDay(e.target.value)} + style={{ backgroundColor: '#f4f4f4' }} + /> +
+
+ + setReminder(e.currentTarget.checked)} + style={{ backgroundColor: 'mistyrose' }} + /> +
+ +
+
+
+ ) : null} + + ); +}; + +export default Modal; diff --git a/src/components/Modal.scss b/src/components/Modal.scss new file mode 100644 index 0000000..fc1e389 --- /dev/null +++ b/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); + } + } + } + } + } \ No newline at end of file