update api changes

db.json

 {
   "task": [
     {
-      "sId": 1,
       "title": "rhrhrhrytyty",
       "isCompleted": true,
       "id": 1
     },
     {
-      "sId": 1,
       "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy",
       "isCompleted": false,
       "id": 2
+    },
+    {
+      "title": "hello",
+      "isCompleted": false,
+      "id": 3
     }
   ]
 }
\ No newline at end of file

src/App.js

@@ -3,29 +3,23 @@ import "./App.css";
 import Layout from "./components/base/layout";
 import Form from "./components/top-level/form";
 import Tasks from "./components/top-level/tasks";
-import { useAppContext } from "./appcontext/index";
+import { useAppContext } from "./app-context/index";
 
 function App() {
-  const { task, addTask, updateremainder, getTask, deleteTask, updatetitle } =
-    useAppContext();
+  const { todo, addTodo, getTodos, deleteTodo, updateTodo } = useAppContext();
   useEffect(() => {
-    getTask();
+    getTodos();
   }, []);
 
   return (
     <div className="App">
-      <Layout count={task?.filter((e) => !e.isCompleted).length}>
-        {task?.length > 0 ? (
-          <Tasks
-            tasklist={task}
-            onEdit={updatetitle}
-            remainder={updateremainder}
-            deleted={deleteTask}
-          />
+      <Layout count={todo?.filter((e) => !e.isCompleted).length}>
+        {todo?.length > 0 ? (
+          <Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
         ) : (
           <h3>No task</h3>
         )}
-        <Form onSubmit={addTask} />
+        <Form onSubmit={addTodo} />
       </Layout>
     </div>
   );

src/appcontext/index.js → src/app-context/index.js

 import React, { createContext, useContext, useState } from "react";
-import {
-  addTodo,
-  getTodo,
-  getTodoById,
-  updateRemainder,
-  updateTitle,
-  deleteTodo,
-} from "../lib/api";
+import * as api from "../lib/api";
 export const TodoContext = createContext();
 export const useAppContext = () => useContext(TodoContext);
 export function TodoProvider({ children }) {
-  const [task, setTask] = useState([]);
+  const [todo, setTodo] = useState([]);
 
   //POST METHOD
-  async function addTask(data) {
+  async function addTodo({ title }) {
     try {
-      const taskData = await addTodo(data);
-      setTask([...task, taskData]);
+      //default isCompleted is false
+      const response = await api.addTodo({ title, isCompleted: false });
+      setTodo([...todo, response]);
     } catch (err) {
       console.log(err.message);
     }
   }
-  //PATCH METHOD
-  async function updateremainder(id) {
+  //UPDATE METHOD
+  async function updateTodo(item) {
     try {
-      const response = await updateRemainder(id);
-
-      setTask(response);
-    } catch (err) {
-      console.log(err.message);
-    }
-  }
-  async function updatetitle(data) {
-    try {
-      const result = await updateTitle(data);
-      setTask([...task, result]);
+      const response = await api.updateTodo(item);
+      setTodo(response);
     } catch (err) {
       console.log(err.message);
     }
   }
 
   //GET METHOD
-  async function getTask() {
+  async function getTodos() {
     try {
-      const taskData = await getTodo();
-      setTask(taskData);
+      const response = await api.getTodos();
+      setTodo(response);
     } catch (err) {
       console.log(err.message);
     }
   }
 
-  async function getTaskById(id) {
-    try {
-      const response = await getTodoById(id);
-      setTask(response);
-    } catch (err) {
-      console.log(err.message);
-    }
-  }
   //DELETE METHOD
-  async function deleteTask(id) {
+  async function deleteTodo(id) {
     try {
-      const taskData = await deleteTodo(id);
-      setTask(taskData);
+      const response = await api.deleteTodo(id);
+      setTodo(response);
     } catch (err) {
       console.log(err.message);
     }
   }
 
   const value = {
-    task,
-    addTask,
-    updateremainder,
-    getTask,
-    getTaskById,
-    deleteTask,
-    updatetitle,
+    todo,
+    addTodo,
+    getTodos,
+    deleteTodo,
+    updateTodo,
   };
   return <TodoContext.Provider value={value}>{children}</TodoContext.Provider>;
 }

src/components/top-level/form/index.js

@@ -5,15 +5,9 @@ import "./form.css";
 
 function Form({ onSubmit }) {
   const [title, setTitle] = useState("");
-  let [count, setCount] = useState(0);
   const handleSubmit = (e) => {
     e.preventDefault();
-    let len = count + 1;
-    setCount(len);
-    const data = JSON.parse(
-      JSON.stringify({ sId: len, title, isCompleted: false })
-    );
-    onSubmit(data);
+    onSubmit({ title });
     //setTitle("");
   };
 

src/components/top-level/task/index.js

@@ -9,7 +9,7 @@ import {
   useCallback,
 } from "react";
 
-function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
+function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const [debouncetitle, setDebounceTitle] = useState(title);
   const [ischeck, setIsCheck] = useState(isCompleted);
   const textarea_ref = useRef(null);
@@ -25,7 +25,7 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
   };
   const handleChange = useCallback(() => {
     setIsCheck(!ischeck);
-    onChange({ id, isCompleted: ischeck ? true : false });
+    onChange({ id, isCompleted: !ischeck });
   }, [ischeck]);
 
   const handleContent = (e) => {
@@ -41,7 +41,7 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
   useEffect(() => {
     const handler = setTimeout(() => {
       if (textarea_ref.current.value != title) {
-        onEdit({ id, title: debouncetitle });
+        onChange({ id, title: debouncetitle });
       }
     }, 2000);
 
@@ -65,11 +65,11 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
 
         <textarea
           ref={textarea_ref}
-          className={`${isCompleted ? "strike-through" : ""}`}
+          className={`${ischeck ? "strike-through" : ""}`}
           contentEditable={true}
           value={debouncetitle}
           onChange={handleContent}
-          disabled={isCompleted}
+          disabled={ischeck}
         ></textarea>
       </div>
       <FaTimesCircle className="fa-close" onClick={handleDelete} />

src/components/top-level/tasks/index.js

 import "./tasks.css";
 import Task from "../task";
 
-function Tasks({ tasklist, deleted, remainder, onEdit }) {
-  const handleChange = (id) => {
-    remainder(id);
-  };
-
+function Tasks({ tasks, onDelete, onChange }) {
   return (
     <div className="tasklist">
-      {tasklist.length > 0 &&
-        tasklist.map(({ id, title, isCompleted }) => (
+      {tasks.length > 0 &&
+        tasks.map(({ id, title, isCompleted }) => (
           <Task
             key={id}
             id={id}
             title={title}
             isCompleted={isCompleted}
-            onEdit={onEdit}
-            onChange={() => handleChange(id)}
-            onDelete={() => deleted(id)}
+            onChange={onChange}
+            onDelete={() => onDelete(id)}
           />
         ))}
     </div>

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { TodoProvider } from "./appcontext";
+import { TodoProvider } from "./app-context";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

src/lib/api.js

 const url = "http://192.168.1.91:5000/task";
 
 //POST METHOD
-export async function addTodo(data) {
+export async function addTodo(todo) {
   try {
     const response = await fetch(url, {
       method: "POST",
       headers: { "Content-type": "application/json" },
-      body: JSON.stringify(data),
+      body: JSON.stringify(todo),
     });
-    const result = await response.json();
-    return result;
+    return response.json();
   } catch (err) {
     console.log(err.message);
   }
 }
 //PATCH METHOD
-export async function updateRemainder(id) {
+export async function updateTodo({ id, ...todo }) {
   try {
-    const response = await getTodoById(id);
-    const result = { ...response, isCompleted: !response.isCompleted };
-
-    const updateresponse = await fetch(url + `/${id}`, {
-      method: "PUT",
-      headers: { "Content-type": "application/json" },
-      body: JSON.stringify(result),
-    });
-    const resultData = await getTodo();
-    return resultData;
-  } catch (err) {
-    console.log(err.message);
-  }
-}
-export async function updateTitle(data) {
-  try {
-    const response = await fetch(url + `/${data.id}`, {
+    await fetch(url + `/${id}`, {
       method: "PATCH",
       headers: { "Content-type": "application/json" },
-      body: JSON.stringify({ title: data.title }),
+      body: JSON.stringify({ ...todo }),
     });
-    const resultData = await getTodo();
-    return resultData;
+    const response = await getTodos();
+    return response;
   } catch (err) {
     console.log(err.message);
   }
 }
 
 //GET METHOD
-export async function getTodo() {
+export async function getTodos() {
   try {
-    const response = await fetch(url);
-    const result = await response.json();
-
-    return result;
+    return await fetch(url).then((data) => data.json());
   } catch (err) {
     console.log(err.message);
   }
 }
 
-export async function getTodoById(id) {
-  try {
-    const response = await fetch(url + `/${id}`);
-    const result = await response.json();
-    return result;
-  } catch (err) {
-    console.log(err.message);
-  }
-}
 //DELETE METHOD
 export async function deleteTodo(id) {
   try {
     await fetch(url + `/${id}`, {
       method: "DELETE",
     });
-    const resultData = await getTodo();
-    return resultData;
+    const response = await getTodos();
+    return response;
   } catch (err) {
     console.log(err.message);
   }