TaskListContext

TaskListContext.js

import React, { createContext, useState, useEffect } from 'react'
import uuid from 'uuid'

export const TaskListContext = createContext()

const TaskListContextProvider = props => {
  const initialState = JSON.parse(localStorage.getItem('tasks')) || []

  const [tasks, setTasks] = useState(initialState)
  const [filteredTasks, setFilteredTasks] = useState(initialState)

  const [editItem, setEditItem] = useState(null)

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks))
}, [tasks])

  // Add tasks
  const addTask = title => {
    const newId = uuid();
    setTasks([...tasks, { title, id: newId, complete: false }])
    setFilteredTasks([...filteredTasks, { title, id: newId, complete: false }])
  }

  // Remove tasks
  const removeTask = id => {
    setTasks(tasks.filter(task => task.id !== id));
    setFilteredTasks(filteredTasks.filter(task => task.id !== id));
  }

  const completedList = () => {
    const array = tasks.filter(task => task.complete === true)

    setFilteredTasks(array)
  }

  const incompleteList = () => {
    console.log(tasks)
    const array = tasks.filter(task => task.complete === false)

    setFilteredTasks(array)
  }

  const allTasks = () => {
    setFilteredTasks(tasks)
  }

  // Find task
  const findItem = id => {
    // não modificado
    const item = tasks.find(task => task.id === id)
    setEditItem(item)
  }

  // Edit task
  const editTask = (title, id) => {
    // não modificado
    const newTasks = tasks.map(task => (task.id === id ? { title, id } : task))

    setTasks(newTasks)
    setEditItem(null)
  }

  const setStatusTask = (id, status) => {
    setTasks(tasks.map(task => task.id === id ? { ...task, complete: status } : task))
    setFilteredTasks(filteredTasks.map(task => task.id === id ? { ...task, complete: status } : task))
  }

  return (
    <TaskListContext.Provider
      value={{
        tasks,
        filteredTasks,
        addTask,
        removeTask,
        completedList,
        incompleteList,
        allTasks,
        findItem,
        editTask,
        setStatusTask,
        editItem
      }}
    >
      {props.children}
    </TaskListContext.Provider>
  )
}

export default TaskListContextProvider

Tasks.js

import React, { useContext } from "react";
import { TaskListContext } from "../../contexts/TaskListContext";
import Task from "../Task";

const TaskList = () => {
  const { filteredTasks } = useContext(TaskListContext);

  return (
    <div>
      {filteredTasks.length ? (
        <ul className="list">
          {filteredTasks.map(task => {
            return <Task task={task} key={task.id} />;
          })}
        </ul>
      ) : (
        <div className="no-tasks">No Tasks</div>
      )}
    </div>
  );
};

export default TaskList;