From b94bec25425501322b13b5a0a1ac90bfad95e066 Mon Sep 17 00:00:00 2001 From: MarwanElsadat <47529557+MarwanElsadat@users.noreply.github.com> Date: Thu, 17 Feb 2022 01:11:28 +0200 Subject: [PATCH] added TaskDetails to files --- .eslintcache | 2 +- src/App.js | 98 ++++++++++++++++++----------------- src/components/Task.js | 18 ++++--- src/components/TaskDetails.js | 52 +++++++++++++++++++ yarn.lock | 25 --------- 5 files changed, 114 insertions(+), 81 deletions(-) create mode 100644 src/components/TaskDetails.js diff --git a/.eslintcache b/.eslintcache index e62ab51..84a03e7 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/Users/bradtraversy/Desktop/dev/react-crash-2021/src/App.js":"1","/Users/bradtraversy/Desktop/dev/react-crash-2021/src/components/AddTask.js":"2","/Users/bradtraversy/Desktop/dev/react-crash-2021/src/components/Task.js":"3","/Users/bradtraversy/Desktop/dev/react-crash-2021/src/components/TaskDetails.js":"4"},{"size":3112,"mtime":1638644487276,"results":"5","hashOfConfig":"6"},{"size":1347,"mtime":1638631205734,"results":"7","hashOfConfig":"6"},{"size":455,"mtime":1638644496012,"results":"8","hashOfConfig":"6"},{"size":1002,"mtime":1638633759781,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"18ahndu",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/bradtraversy/Desktop/dev/react-crash-2021/src/App.js",[],"/Users/bradtraversy/Desktop/dev/react-crash-2021/src/components/AddTask.js",[],"/Users/bradtraversy/Desktop/dev/react-crash-2021/src/components/Task.js",[],"/Users/bradtraversy/Desktop/dev/react-crash-2021/src/components/TaskDetails.js",["18","19","20"],{"ruleId":"21","severity":1,"message":"22","line":2,"column":21,"nodeType":"23","messageId":"24","endLine":2,"endColumn":29},{"ruleId":"21","severity":1,"message":"25","line":8,"column":10,"nodeType":"23","messageId":"24","endLine":8,"endColumn":15},{"ruleId":"21","severity":1,"message":"26","line":8,"column":17,"nodeType":"23","messageId":"24","endLine":8,"endColumn":25},"no-unused-vars","'Navigate' is defined but never used.","Identifier","unusedVar","'error' is assigned a value but never used.","'setError' is assigned a value but never used."] \ No newline at end of file +[{"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\index.js":"1","C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\TaskDetails.js":"2","C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\AddTask.js":"3","C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\Footer.js":"4","C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\Task.js":"5","C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\App.js":"6"},{"size":517,"mtime":1645047462994,"results":"7","hashOfConfig":"8"},{"size":1133,"mtime":1645052386165,"results":"9","hashOfConfig":"8"},{"size":1405,"mtime":1645047462989,"results":"10","hashOfConfig":"8"},{"size":215,"mtime":1645047462990,"results":"11","hashOfConfig":"8"},{"size":605,"mtime":1645051792008,"results":"12","hashOfConfig":"8"},{"size":3391,"mtime":1645051762190,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"p25ow1",{"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},"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\index.js",[],"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\TaskDetails.js",[],"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\AddTask.js",[],"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\Footer.js",[],"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\components\\Task.js",[],"C:\\Users\\Marwan\\Desktop\\Learn\\React\\react-crash-2021\\src\\App.js",[]] \ No newline at end of file diff --git a/src/App.js b/src/App.js index 147e026..f19e5d1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,102 +1,103 @@ -import { useState, useEffect } from 'react' -import { BrowserRouter as Router, Route, Routes } 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, Routes } 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 TaskDetails from "./components/TaskDetails"; 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) => { - const res = await fetch('http://localhost:5000/tasks', { - method: 'POST', + const res = await fetch("http://localhost:5000/tasks", { + method: "POST", headers: { - 'Content-type': 'application/json', + "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', - }) + 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', + method: "PUT", headers: { - 'Content-type': 'application/json', + "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 && } @@ -107,17 +108,18 @@ const App = () => { onToggle={toggleReminder} /> ) : ( - 'No Tasks To Show' + "No Tasks To Show" )} } /> - } /> + } /> + } />
- ) -} + ); +}; -export default App +export default App; diff --git a/src/components/Task.js b/src/components/Task.js index e67f733..7085799 100644 --- a/src/components/Task.js +++ b/src/components/Task.js @@ -1,21 +1,25 @@ -import { FaTimes } from 'react-icons/fa' +import { FaTimes } from "react-icons/fa"; +import { Link } from "react-router-dom"; const Task = ({ task, onDelete, onToggle }) => { return (
onToggle(task.id)} >

- {task.text}{' '} + {task.text}{" "} onDelete(task.id)} />

{task.day}

+

+ View Details +

- ) -} + ); +}; -export default Task +export default Task; diff --git a/src/components/TaskDetails.js b/src/components/TaskDetails.js new file mode 100644 index 0000000..1b62053 --- /dev/null +++ b/src/components/TaskDetails.js @@ -0,0 +1,52 @@ +import { useState, useEffect } from "react"; +import { useParams, Navigate, useNavigate } from "react-router-dom"; +import Button from "./Button"; + +const TaskDetails = () => { + const [loading, setLoading] = useState(true); + const [task, setTask] = useState({}); + const [error, setError] = useState(null); + + //using params passed in the Link to + const params = useParams(); + + const navigate = useNavigate(); + + useEffect(() => { + const fetchTask = async () => { + const res = await fetch(`http://localhost:5000/tasks/${params.id}`); + const data = await res.json(); + + if (res.status === 404) { + setError("Task not found"); + navigate("/"); + } + + setTask(data); + setLoading(false); + }; + + fetchTask(); + }); + + if (error) { + return ; + } + + return loading ? ( +

loading...

+ ) : ( +
+

{task.text}

+

{task.day}

+
+ ); +}; + +export default TaskDetails; diff --git a/yarn.lock b/yarn.lock index 70ed6b4..e629f57 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2697,13 +2697,6 @@ "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz" "version" "2.2.0" -"bindings@^1.5.0": - "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==" - "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz" - "version" "1.5.0" - dependencies: - "file-uri-to-path" "1.0.0" - "bluebird@^3.5.5": "integrity" "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" "resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz" @@ -5359,19 +5352,6 @@ "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" "version" "1.0.0" -"fsevents@^1.2.7": - "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==" - "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz" - "version" "1.2.13" - dependencies: - "bindings" "^1.5.0" - "nan" "^2.12.1" - -"fsevents@^2.1.2", "fsevents@^2.1.3", "fsevents@~2.3.1": - "integrity" "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==" - "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz" - "version" "2.3.1" - "function-bind@^1.1.1": "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" @@ -7749,11 +7729,6 @@ "dns-packet" "^1.3.1" "thunky" "^1.0.2" -"nan@^2.12.1": - "integrity" "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==" - "resolved" "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz" - "version" "2.14.2" - "nanoid@^3.1.16", "nanoid@^3.1.20": "integrity" "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==" "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz"