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?
