# Help with my web application

**URL:** <https://forum.kirupa.com/t/help-with-my-web-application/669837>\
**Category:** web dev\
**Created:** [September 26, 2024, 3:46am UTC](https://forum.kirupa.com/t/help-with-my-web-application/669837 "2024-09-26T03:46:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Towla](https://avatars.discourse-cdn.com/v4/letter/t/4bbf92/32.png) [@Towla](https://forum.kirupa.com/u/Towla)\
**Post date:** [September 26, 2024, 3:46am UTC](https://forum.kirupa.com/t/help-with-my-web-application/669837/1 "2024-09-26T03:46:09Z")

</div>

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:

 ![Screenshot 2024-09-25 204209](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/2/f/2fec7cc3ee5f8e0af39ef3c12cd77deab46823da.png)

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?

---

<div class="post-metadata">

**Author:** ![ninetytwo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ninetytwo/32/27160_2.png) [@ninetytwo](https://forum.kirupa.com/u/ninetytwo)\
**Post date:** [October 16, 2024, 12:00pm UTC](https://forum.kirupa.com/t/help-with-my-web-application/669837/3 "2024-10-16T12:00:27Z")

</div>

oh my lemme see what I can do ☹