app context

db.json

@@ -8,9 +8,15 @@
     },
     {
       "sId": 1,
-      "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
+      "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy",
       "isCompleted": false,
       "id": 2
+    },
+    {
+      "sId": 1,
+      "title": "bbb",
+      "isCompleted": true,
+      "id": 6
     }
   ]
 }
\ No newline at end of file

src/App.js

-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import "./App.css";
 import Layout from "./components/base/layout";
 import Form from "./components/top-level/form";
 import Tasks from "./components/top-level/tasks";
-import {
-  addTodo,
-  getTodo,
-  updateRemainder,
-  updateTitle,
-  deleteTodo,
-} from "./lib/api";
+import { useAppContext } from "./appcontext/index";
 
 function App() {
-  const [task, setTask] = useState([]);
-  const addtask = async (data) => {
-    const todoData = await addTodo(data);
-    setTask([...task, todoData]);
-  };
-  const gettask = async () => {
-    const todoData = await getTodo();
-    setTask(todoData);
-  };
-
-  const updateremainder = async (id) => {
-    const todoData = await updateRemainder(id);
-    setTask(
-      task.map((e) =>
-        e.id === todoData.id ? { ...e, isCompleted: todoData.isCompleted } : e
-      )
-    );
-  };
-
-  const updatetitle = async (data) => {
-    const todoData = await updateTitle(data);
-    setTask(task.map((e) => (e.id === todoData.id ? todoData : e)));
-  };
-
-  const deletetask = async (id) => {
-    await deleteTodo(id);
-    setTask(task.filter((e) => e.id !== id));
-  };
-
-  // const getTask = async () => {
-  //   const taskData = await fetch("http://192.168.1.91:5000/task");
-  //   const response = await taskData.json();
-  //   setTask(response);
-  // };
-  // const getTaskById = async (id) => {
-  //   const tasktracker = await fetch(`http://192.168.1.91:5000/task/${id}`);
-  //   const response = await tasktracker.json();
-  //   return response;
-  // };
-  // const remainder = async (id) => {
-  //   const toogle = await getTaskById(id);
-  //   const result = { ...toogle, isCompleted: !toogle.isCompleted };
-
-  //   const res = await fetch(`http://192.168.1.91:5000/task/${id}`, {
-  //     method: "PUT",
-  //     headers: { "Content-type": "application/json" },
-  //     body: JSON.stringify(result),
-  //   });
-  //   const data = await res.json();
-  //   setTask(
-  //     task.map((e) =>
-  //       e.id === data.id ? { ...e, isCompleted: data.isCompleted } : e
-  //     )
-  //   );
-  // };
-  // const editTask = async (datas) => {
-  //   console.log(datas);
-  //   const response = await fetch(`http://192.168.1.91:5000/task/${datas.id}`, {
-  //     method: "PATCH",
-  //     headers: { "Content-type": "application/json" },
-  //     body: JSON.stringify({ title: datas.title }),
-  //   });
-
-  //   const data = await response.json();
-
-  //   setTask(task.map((e) => (e.id === data.id ? data : e)));
-  // };
-
-  // const deleteTask = async (id) => {
-  //   await fetch(`http://192.168.1.91:5000/task/${id}`, {
-  //     method: "DELETE",
-  //   });
-  //   setTask(task.filter((e) => e.id !== id));
-  // };
+  const { task, addTask, updateremainder, getTask, deleteTask, updatetitle } =
+    useAppContext();
   useEffect(() => {
-    gettask();
+    getTask();
   }, []);
-
+  console.log("okpp", task);
   return (
     <div className="App">
-      <Layout count={task.filter((e) => !e.isCompleted).length}>
-        {task.length > 0 ? (
+      <Layout count={task?.filter((e) => !e.isCompleted).length}>
+        {task?.length > 0 ? (
           <Tasks
             tasklist={task}
             onEdit={updatetitle}
             remainder={updateremainder}
-            deleted={deletetask}
+            deleted={deleteTask}
           />
         ) : (
           <h3>No task</h3>
         )}
-        <Form onSubmit={addtask} />
+        <Form onSubmit={addTask} />
       </Layout>
     </div>
   );

src/appcontext/index.js

+import React, { createContext, useContext, useState } from "react";
+import {
+  addTodo,
+  getTodo,
+  getTodoById,
+  updateRemainder,
+  updateTitle,
+  deleteTodo,
+} from "../lib/api";
+export const TodoContext = createContext();
+export const useAppContext = () => useContext(TodoContext);
+export function TodoProvider({ children, ...props }) {
+  const [task, setTask] = useState([]);
+
+  //POST METHOD
+  async function addTask(data) {
+    try {
+      const taskData = await addTodo(data);
+      setTask([...task, taskData]);
+    } catch (err) {
+      console.log(err.message);
+    }
+  }
+  //PATCH METHOD
+  async function updateremainder(id) {
+    try {
+      console.log("llll", id);
+      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]);
+    } catch (err) {
+      console.log(err.message);
+    }
+  }
+
+  //GET METHOD
+  async function getTask() {
+    try {
+      const taskData = await getTodo();
+      setTask(taskData);
+    } 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) {
+    try {
+      const taskData = await deleteTodo(id);
+      setTask(taskData);
+    } catch (err) {
+      console.log(err.message);
+    }
+  }
+
+  const value = {
+    task,
+    addTask,
+    updateremainder,
+    getTask,
+    getTaskById,
+    deleteTask,
+    updatetitle,
+  };
+  return (
+    <TodoContext.Provider value={value} {...props}>
+      {children}
+    </TodoContext.Provider>
+  );
+}

src/index.js

@@ -3,11 +3,14 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { TodoProvider } from "./appcontext";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   // <React.StrictMode>
+  <TodoProvider>
     <App />
+  </TodoProvider>
   // </React.StrictMode>
 );
 

src/lib/api.js

@@ -25,7 +25,7 @@ export async function updateRemainder(id) {
       headers: { "Content-type": "application/json" },
       body: JSON.stringify(result),
     });
-    const resultData = await updateresponse.json();
+    const resultData = await getTodo();
     return resultData;
   } catch (err) {
     console.log(err.message);
@@ -38,9 +38,8 @@ export async function updateTitle(data) {
       headers: { "Content-type": "application/json" },
       body: JSON.stringify({ title: data.title }),
     });
-
-    const result = await response.json();
-    return result;
+    const resultData = await getTodo();
+    return resultData;
   } catch (err) {
     console.log(err.message);
   }
@@ -51,6 +50,7 @@ export async function getTodo() {
   try {
     const response = await fetch(url);
     const result = await response.json();
+
     return result;
   } catch (err) {
     console.log(err.message);
@@ -69,9 +69,11 @@ export async function getTodoById(id) {
 //DELETE METHOD
 export async function deleteTodo(id) {
   try {
-    return await fetch(url + `/${id}`, {
+    await fetch(url + `/${id}`, {
       method: "DELETE",
     });
+    const resultData = await getTodo();
+    return resultData;
   } catch (err) {
     console.log(err.message);
   }