code changes

src/app-context/index.js

@@ -5,14 +5,14 @@ export const TodoContext = createContext();
 export const useAppContext = () => useContext(TodoContext);
 
 export function TodoProvider({ children }) {
-  const [todo, setTodo] = useState([]);
-  const [loading, setLoading] = useState(false);
+  const [todos, setTodos] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
   //POST METHOD
   async function addTodo({ title }) {
     try {
       //default isCompleted is false
       const response = await api.addTodo({ title, isCompleted: false });
-      setTodo([...todo, response]);
+      setTodos([...todos, response]);
     } catch (err) {
       toast.error(err.message);
     }
@@ -21,11 +21,10 @@ export function TodoProvider({ children }) {
   async function updateTodo({ id, title, isCompleted }) {
     try {
       const response = await api.updateTodo({ id, title, isCompleted });
-      // const index = todo.map((item) => item.id).indexOf(id);
-      // todo.splice(index, 1, { id, title, isCompleted });
-      const data = await response.json();
 
-      setTodo(todo.map((e) => (e.id === id ? data : e)));
+      const data = await response.json();
+      const result = todos.map((e) => (e.id === id ? data : e));
+      setTodos(result);
     } catch (err) {
       toast.error(err.message);
     }
@@ -35,8 +34,8 @@ export function TodoProvider({ children }) {
   async function getTodos() {
     try {
       const response = await api.getTodos();
-      setTodo(response);
-      setLoading(true);
+      setTodos(response);
+      setIsLoading(true);
       return response;
     } catch (err) {
       toast.error(err.message);
@@ -47,16 +46,16 @@ export function TodoProvider({ children }) {
   async function deleteTodo(id) {
     try {
       await api.deleteTodo(id);
-
-      setTodo(todo.filter((e) => e.id !== id));
+      const result = todos.filter((e) => e.id !== id);
+      setTodos(result);
     } catch (err) {
       toast.error(err.message);
     }
   }
 
   const value = {
-    todo,
-    loading,
+    todos,
+    isLoading,
     addTodo,
     getTodos,
     deleteTodo,

src/pages/index.js

-import React, { useState } from "react";
 import Layout from "../components/base/layout";
 import Form from "../components/top-level/form";
 import Tasks from "../components/top-level/tasks";
@@ -6,19 +5,19 @@ import { useAppContext } from "../app-context/index";
 
 import { useEffect } from "react";
 export default function Pages() {
-  const { todo, loading, addTodo, getTodos, deleteTodo, updateTodo } =
+  const { todos, isLoading, addTodo, getTodos, deleteTodo, updateTodo } =
     useAppContext();
-  console.log(loading);
+
   useEffect(() => {
     getTodos();
   }, []);
-
+  const count = todos?.filter((e) => !e.isCompleted).length;
   return (
     <>
-      {loading ? (
-        <Layout count={todo?.filter((e) => !e.isCompleted).length}>
-          {todo?.length > 0 ? (
-            <Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
+      {isLoading ? (
+        <Layout count={count}>
+          {todos?.length > 0 ? (
+            <Tasks tasks={todos} onChange={updateTodo} onDelete={deleteTodo} />
           ) : (
             <h3>No task</h3>
           )}