Skip to content

added TaskDetails to files #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added TaskDetails to files #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintcache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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."]
[{"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",[]]
98 changes: 50 additions & 48 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Router>
<div className='container'>
<div className="container">
<Header
onAdd={() => setShowAddTask(!showAddTask)}
showAdd={showAddTask}
/>
<Routes>
<Route
path='/'
path="/"
element={
<>
{showAddTask && <AddTask onAdd={addTask} />}
Expand All @@ -107,17 +108,18 @@ const App = () => {
onToggle={toggleReminder}
/>
) : (
'No Tasks To Show'
"No Tasks To Show"
)}
</>
}
/>
<Route path='/about' element={<About />} />
<Route path="/about" element={<About />} />
<Route path="/tasks/:id" element={<TaskDetails />} />
</Routes>
<Footer />
</div>
</Router>
)
}
);
};

export default App
export default App;
18 changes: 11 additions & 7 deletions src/components/Task.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div
className={`task ${task.reminder && 'reminder'}`}
className={`task ${task.reminder && "reminder"}`}
onDoubleClick={() => onToggle(task.id)}
>
<h3>
{task.text}{' '}
{task.text}{" "}
<FaTimes
style={{ color: 'red', cursor: 'pointer' }}
style={{ color: "red", cursor: "pointer" }}
onClick={() => onDelete(task.id)}
/>
</h3>
<p>{task.day}</p>
<p>
<Link to={`/tasks/${task.id}`}>View Details</Link>
</p>
</div>
)
}
);
};

export default Task
export default Task;
52 changes: 52 additions & 0 deletions src/components/TaskDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <Navigate to="/" />;
}

return loading ? (
<h3>loading...</h3>
) : (
<div>
<h3>{task.text}</h3>
<h3>{task.day}</h3>
<Button
onClick={() => {
navigate(-1);
}}
text="Go Back"
/>
</div>
);
};

export default TaskDetails;
25 changes: 0 additions & 25 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down