EmmanuelObua

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import ThemeProvider from 'react-bootstrap/ThemeProvider';

import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));

EmmanuelObua

import React, { useState, Fragment } from 'react';
import { Container, Row, Col } from 'react-bootstrap';

import { TaskProvider } from './components/TaskContext';
import { withTaskContext } from './components/withTaskContext';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';

function App() {

EmmanuelObua

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) {

EmmanuelObua

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

function TaskList() {
	
	// Here we are actually distructing the tasks and dispatch methods from the TaskConsumer which has the 
	// taskContext object.
	return (
		<TaskConsumer>
		    {({ tasks, dispatch }) => (

EmmanuelObua

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { TaskConsumer } from './TaskContext';

/*This is a component that controls the input elements within the forms on subsequent user input, 
 * i.e, every state mutation will have an associated handler function.
 */
function TaskForm() {

	/*This is a title state to store the user input for submission*/

EmmanuelObua

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':

EmmanuelObua

npm i react-bootstrap bootstrap uuid

EmmanuelObua

npx create-react-app my-app

EmmanuelObua

composer require ldtalent/pwa-laravel

EmmanuelObua

<?php

namespace LdTalent\Pwa\Commands;

use Illuminate\Support\Facades\File;
use Illuminate\Console\Command;

class PublishPwaAssets extends Command
{