From d4ce2097180fe1785b57b42fc6b507eef17a594b Mon Sep 17 00:00:00 2001 From: mdrizwan81 <94437619+mdrizwan81@users.noreply.github.com> Date: Thu, 14 Jul 2022 15:52:05 +0500 Subject: [PATCH] Implimented Edit task functionality --- package.json | 2 +- src/App.js | 139 ++++++++++++++++++++++++-------------- src/components/AddTask.js | 70 +++++++++++-------- src/components/Task.js | 28 +++++--- src/components/Tasks.js | 18 +++-- 5 files changed, 163 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index 032ee4e..4dde54c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "react-dom": "^17.0.1", "react-icons": "^4.1.0", "react-router-dom": "^6.0.2", - "react-scripts": "4.0.1", + "react-scripts": "^4.0.1", "web-vitals": "^0.2.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index 147e026..4253752 100644 --- a/src/App.js +++ b/src/App.js @@ -1,123 +1,164 @@ -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"; const App = () => { - const [showAddTask, setShowAddTask] = useState(false) - const [tasks, setTasks] = useState([]) + const [showAddTask, setShowAddTask] = useState(false); + const [tasks, setTasks] = useState([]); + const [taskToEdit, setTaskToEdit] = useState([]); //this task(text, day, reminder) will be sent to AddTask.js form for updation + const [taskToEditId, setTaskToEditId] = useState(""); //this id will be used by editTask function which saves the updated task to db.json 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]) - } + }; + + //Get the task to edit... + const getTasktoEdit = async (id) => { + setShowAddTask(true); + + let arr = [...tasks]; + arr = arr.filter((task) => task.id === id); + setTaskToEdit([...arr]); //this task(text, day, reminder) will be sent to AddTask.js form for updation + setTaskToEditId(id); //this id will be used by editTask function which saves the updated task to db.json + }; + + //Edit Task + const editTask = async (task) => { + const res = await fetch(`http://localhost:5000/tasks/${taskToEditId}`, { + method: "PUT", + headers: { + "Content-type": "application/json", + }, + body: JSON.stringify(task), + }); + + const data = await res.json(); + + setTasks( + tasks.map((task) => + task.id === taskToEditId ? { ...task, ...data } : task + ) + ); + + setTaskToEdit([]); //empty the array after editing + }; // 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 && } + {showAddTask && ( + + )} {tasks.length > 0 ? ( ) : ( - 'No Tasks To Show' + "No Tasks To Show" )} } /> - } /> + } />
- ) -} + ); +}; -export default App +export default App; diff --git a/src/components/AddTask.js b/src/components/AddTask.js index fb3dab6..fc93f21 100644 --- a/src/components/AddTask.js +++ b/src/components/AddTask.js @@ -1,58 +1,74 @@ -import { useState } from 'react' +import { useEffect, useState } from "react"; -const AddTask = ({ onAdd }) => { - const [text, setText] = useState('') - const [day, setDay] = useState('') - const [reminder, setReminder] = useState(false) +const AddTask = ({ onAdd, onEdit, taskToEdit }) => { + const [taskId, setTaskId] = useState(""); + const [text, setText] = useState(""); + const [day, setDay] = useState(""); + const [reminder, setReminder] = useState(false); + + useEffect(() => { + console.log("use effect"); + taskToEdit.map( + (task) => ( + setTaskId(task.id), + setText(task.text), + setDay(task.day), + setReminder(task.reminder) + ) + ); + }, [taskToEdit]); const onSubmit = (e) => { - e.preventDefault() + e.preventDefault(); if (!text) { - alert('Please add a task') - return + alert("Please add a task"); + return; } - onAdd({ text, day, reminder }) + if (taskToEdit.length !== 0) { + onEdit({ taskId, text, day, reminder }); + } else { + onAdd({ text, day, reminder }); + } - setText('') - setDay('') - setReminder(false) - } + setText(""); + setDay(""); + setReminder(false); + }; return ( -
-
+ +
setText(e.target.value)} />
-
+
setDay(e.target.value)} />
-
+
setReminder(e.currentTarget.checked)} />
- - + - ) -} + ); +}; -export default AddTask +export default AddTask; diff --git a/src/components/Task.js b/src/components/Task.js index e67f733..5b3000c 100644 --- a/src/components/Task.js +++ b/src/components/Task.js @@ -1,21 +1,27 @@ -import { FaTimes } from 'react-icons/fa' +import { FaEdit, FaTimes } from "react-icons/fa"; -const Task = ({ task, onDelete, onToggle }) => { +const Task = ({ task, onDelete, onToggle, onEditId }) => { return (
onToggle(task.id)} >

- {task.text}{' '} - onDelete(task.id)} - /> + {task.text}{" "} +
+ onDelete(task.id)} + style={{ color: "red", cursor: "pointer", marginRight: 30 }} + /> + onEditId(task.id)} + style={{ color: "green", cursor: "pointer" }} + /> +

{task.day}

- ) -} + ); +}; -export default Task +export default Task; diff --git a/src/components/Tasks.js b/src/components/Tasks.js index 7f67a1d..5ed6e15 100644 --- a/src/components/Tasks.js +++ b/src/components/Tasks.js @@ -1,13 +1,19 @@ -import Task from './Task' +import Task from "./Task"; -const Tasks = ({ tasks, onDelete, onToggle }) => { +const Tasks = ({ tasks, onDelete, onToggle, onEditId }) => { return ( <> {tasks.map((task, index) => ( - + ))} - ) -} + ); +}; -export default Tasks +export default Tasks;