TaskContext.js

import React, {createContext, useContext, useReducer} from 'react'

const TaskContext = createContext();

// a reducer for tasks with the crud operations for the tasks
function taskReducer(state,action) {
	switch(action.type) {
		case 'ADD_TASK':
			return [...state, action.payload];
		case 'UPDATE_TASK':
			return state.map(task => task.id === action.payload.id ? { ...task, ...action.payload } : task);
		case 'DELETE_TASK':
			return state.filter(task => task.id !== action.payload);
		default:
			return state;
	}
}

// This is a feature that allows data to be passed through the component tree without having 
// to pass props down manually at every level.

export function TaskProvider({ children }) {

	// Here we are passing the reducer and an empty array to store the lists of tasks to the useReducer hook.
	const [tasks, dispatch] = useReducer(taskReducer, []);

	return (
	    <TaskContext.Provider value={{ tasks, dispatch }}>
	      	{children}
	    </TaskContext.Provider>
	);
}

/*TaskConsumer is a component that uses the Context API's Consumer pattern to
 *access the value provided by the TaskContext context
 *
 *The Consumer pattern is one of the ways to consume values from a context. 
 *It allows components to access the context value without needing to be nested within the context provider.
 */

export function TaskConsumer({ children }) {
	const taskContext = useContext(TaskContext);
	return children(taskContext);
}