withTaskContext.js

import React, { useContext } from 'react';
import { TaskConsumer } from './TaskContext';

// This is a custom hook, a pattern where a reusable function is created that encapsulates common logic or state management, 
// allowing the logic to be easily shared between components.

// It's as a higher-order component,a pattern where a component is wrapped in another component, 
// allowing the inner component to inherit functionality from the outer component.
export function withTaskContext(Component) {
	return function WrappedComponent(props) {
		return (
		    <TaskConsumer>
		        {taskContext => <Component {...props} taskContext={taskContext} />}
		    </TaskConsumer>
		);
	};
}