Help with my web application

Week 5 Web INT304 Final Project.

App.js code:

// App.js

import React from ‘react’;
import { BrowserRouter as Router, Route, Link, Routes } from ‘react-router-dom’;
import { Provider } from ‘react-redux’;
import store from ‘./redux/store’;
import EmployeeForm from ‘./components/EmployeeForm’;
import EmployeeList from ‘./components/EmployeeList’;
import { ThemeProvider, useTheme } from ‘./ThemeContext’;
import ‘./App.css’;

function HomePage() {
return (


Welcome to the Employee Management System


Use the navigation links to add or view employees.



);
}

function App() {
const { theme, toggleTheme } = useTheme();

return (

<div className={App ${theme}}>

<nav style={{ marginBottom: ‘20px’ }}>
<Link to=“/” style={{ marginRight: ‘10px’ }}>Home
<Link to=“/employees” style={{ marginRight: ‘10px’ }}>Employees
Add Employee

      {/* Theme Toggle Button */}
      <button onClick={toggleTheme} className="btn">Toggle Theme</button>


      {/* React Router v6 Routes */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/employees" element={<EmployeeList />} />
        <Route path="/add" element={<EmployeeForm />} />
      </Routes>
    </Router>
  </div>
</Provider>

);
}

export default App;

EmployeeForm.js code:

// EmployeeForm.js

import React, { useState } from ‘react’;
import { useDispatch } from ‘react-redux’;

function EmployeeForm() {
const [name, setName] = useState(‘’);
const [email, setEmail] = useState(‘’);
const [phone, setPhone] = useState(‘’);
const dispatch = useDispatch();

const handleAddEmployee = (e) => {
    e.preventDefault();


    const newEmployee = {
        employeeId: Math.floor(Math.random() * 10000),
        name,
        email,
        phone,
    };


    // Dispatch the action to add the employee
    dispatch({ type: 'ADD_EMPLOYEE', payload: newEmployee });


    // Clear form inputs after submission
    setName('');
    setEmail('');
    setPhone('');
};


return (
    <form onSubmit={handleAddEmployee}>
        <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Name"
            required
        />
        <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Email"
            required
        />
        <input
            type="tel"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
            placeholder="Phone"
            required
        />
        <button type="submit" className="btn">Add Employee</button>
    </form>
);

}

export default EmployeeForm;

EmployeeList.js code:

// EmployeeList.js

import React from ‘react’;
import { motion } from ‘framer-motion’;
import { useSelector } from ‘react-redux’;

function EmployeeList() {
const employees = useSelector((state) => state.employees);

if (employees.length === 0) {
    return <p>No employees to display.</p>;
}


return (
    <ul>
        {employees.map((employee) => (
            <motion.li
                key={employee.employeeId}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
            >
                {employee.name} - {employee.email} - {employee.phone}
            </motion.li>
        ))}
    </ul>
);

}

export default EmployeeList;

Themecontext.js code:

import React, { createContext, useContext, useState } from ‘react’;

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(‘light’);

const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};


return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
        {children}
    </ThemeContext.Provider>
);

};

export const useTheme = () => useContext(ThemeContext);

redux/store.js code:

import { createStore } from ‘redux’;
import { composeWithDevTools } from ‘redux-devtools-extension’; // Importing Redux DevTools

const initialState = {
employees:
};

const employeeReducer = (state = initialState, action) => {
switch (action.type) {
case ‘ADD_EMPLOYEE’:
return {
…state,
employees: […state.employees, action.payload],
};
default:
return state;
}
};

// Enable Redux DevTools for easier debugging
const store = createStore(employeeReducer, composeWithDevTools());

export default store;

App.css code:

/* App.css */
.App {
text-align: center;
}

/* Light Theme */
.App.light {
background-color: white;
color: black;
}

/* Dark Theme */
.App.dark {
background-color: #282c34;
color: white;
}

.btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #0056b3;
}

@media (max-width: 600px) {
.container {
flex-direction: column;
}
}

index.js code:

import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import ‘./index.css’;
import App from ‘./App’;

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<React.StrictMode>

</React.StrictMode>
);

Errors:

I am having severe trouble fixing these last two errors. From my last question, I could go from seven errors to these last two. I need some accurate and applicable assistance with this web application. I have made sure to install npm install react-router-dom@6 version 6 and npm install framer-motion. In addition to that I ran npm install react-redux, npm install react-redux redux-devtools-extension, npm cache clean --force npm start, npm install --save-dev @babel/plugin-proposal-private-property-in-object, and npm install react-router-dom react-redux redux framer-motion. And it still gave me these two errors. Please help because I do not know where to go from here. Also do I have to capitalize the store file name within my program? aka Store.js and the component Redux?