React CRUD with JSON server, local storage with Context API

npm install -g json-server
json-server --watch db.json --port 5000

//React is imported to use its functionalities.
//createContext, useReducer, and useEffect are hooks from React.
//axios is a promise-based HTTP client used for making requests to a server.
import React, { createContext, useReducer, useEffect } from 'react';
import axios from 'axios';

// Create the EmployeeContext
//EmployeeContext is created using createContext which allows sharing state across components without passing props manually at every level.
export const EmployeeContext = createContext();

// Define the initial state
const initialState = {
  employees: []
};

// Define the reducer function
const employeeReducer = (state, action) => {
  switch (action.type) {
    case 'SET_EMPLOYEES':
      return { ...state, employees: action.payload };
    case 'ADD_EMPLOYEE':
      return { ...state, employees: [...state.employees, action.payload] };
    case 'UPDATE_EMPLOYEE':
      return {
        ...state,
        employees: state.employees.map(emp => emp.id === action.payload.id ? action.payload : emp)
      };
    case 'DELETE_EMPLOYEE':
      return {
        ...state,
        employees: state.employees.filter(emp => emp.id !== action.payload)
      };
    default:
      return state;
  }
};

// Create the EmployeeProvider component
const EmployeeProvider = ({ children }) => {
  const [state, dispatch] = useReducer(employeeReducer, initialState);

  // Fetch employees from server when component mounts
  useEffect(() => {
    axios.get('http://localhost:5000/employees')
      .then(response => {
        dispatch({ type: 'SET_EMPLOYEES', payload: response.data });
      })
      .catch(error => console.log(error));
  }, []);

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

export default EmployeeProvider;

import React, { useEffect, useContext } from 'react';
import axios from 'axios';
import { useParams, useNavigate } from 'react-router-dom';
import { EmployeeContext } from '../context/EmployeeContext';

const DeleteEmployee = () => {
  const { id } = useParams();
  const { dispatch } = useContext(EmployeeContext); // Access dispatch from context
  const navigate = useNavigate();

  useEffect(() => {
    axios.delete(`http://localhost:5000/employees/${id}`)
      .then(response => {
        dispatch({ type: 'DELETE_EMPLOYEE', payload: parseInt(id) }); // Dispatch delete employee action
        navigate('/');
      })
      .catch(error => console.log(error));
  }, [id, navigate, dispatch]);

  return (
    <div className="delete-employee">
      <h2>Deleting Employee...</h2>
    </div>
  );
};

export default DeleteEmployee;