Imtiaz's Work

.gitignore

@@ -1,7 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+*node_modules
+package-lock.json
 /.pnp
 .pnp.js
 

package.json → employee-project/package.json

@@ -11,8 +11,10 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.0",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js → employee-project/src/App.js

@@ -3,8 +3,6 @@ import Form from './Form'
 import HomeRoute from './HomeRoute'
 import AboutRoute from './AboutRoute'
 import Employees from './Employees'
-import EmployeesByHook from './EmployeesByHook'
-import FormByHooks from './FormByHooks'
 import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
 
 function App() {
@@ -18,18 +16,16 @@ function App() {
               <div class="col-lg-8">
               <Router>
                 <div class="row">
-                    <div class="col-lg-2"><Link to="/">Home </Link></div>
-                    <div class="col-lg-2"><Link to="/about">About </Link></div>
-                    <div class="col-lg-2"><Link to="/form">Form </Link></div>
+                    <div class="col-lg-3"><Link to="/">Home </Link></div>
+                    <div class="col-lg-3"><Link to="/about">About </Link></div>
+                    <div class="col-lg-3"><Link to="/form">Form </Link></div>
                     <div class="col-lg-3"><Link to="/employees">Employees </Link></div>
-                    <div className="col-lg-4"><Link to="/EmployeesByHook"> Get Employees by Hooks </Link></div>
                 </div>
                 <br/>
                 <Route exact path="/" component={HomeRoute} />
                 <Route path="/about" component={AboutRoute} />
                 <Route path="/form" component={Form} />
                 <Route path="/employees" component={Employees} />
-                <Route path="/EmployeesByHook" component={EmployeesByHook} />
               </Router>
               </div>
 

employee-project/src/Employees.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function Form({addEmployee}){
+    const [name,setName] =  useState('');
+    const [age,setAge] =  useState('');
+    const [salary,setSalary] =  useState('');
+
+    const handleSubmit = e =>{
+    e.preventDefault();
+    if(!name) return;
+    addEmployee(name,age,salary);
+    let url="http://dummy.restapiexample.com/api/v1/create"
+    let data={'name':name,'age':age,'salary':salary}
+    fetch(url,{
+        method: 'POST',
+        headers:{
+            "Content-type":"application/json",
+            "Accept":"application/json"
+        },
+        body:JSON.stringify(data)
+    }).then((result)=>{
+        result.json().then((resp)=>{
+            alert('Employee data is submitted:' + JSON.stringify(resp)); 
+        })
+    })
+      setName('');
+      setAge('');
+      setSalary('');
+    };
+
+    return(
+            <div>
+                <div className="container">
+                    <h2 className="text-center">Add an Employee</h2>
+                    <form onSubmit={handleSubmit}>
+                    <input className="form-control" type="text" value={name}  placeholder="Enter your name" onChange = {e => setName(e.target.value)} />        
+                    <input className="form-control" type="number" value={salary}   placeholder="Enter employee salary" onChange = {e => setSalary(e.target.value)} ></input>
+                    <input className="form-control" type="number" value={age}   placeholder="Enter employee age" onChange = {e => setAge(e.target.value)} ></input>
+
+                    <button  className="btn margin-top btn-success" type="submit" >Add</button>
+                    </form>
+                </div>
+            </div>
+        )
+  }
+
+function Employees()
+{
+    const [employees, setEmployees] = useState({ data: [] });
+    const [emp,setEmp] = useState('');
+    useEffect(() => {
+        const fetchData = async () => {
+          const result = await axios(
+            'http://dummy.restapiexample.com/api/v1/employees',
+          );
+          setEmployees(result.data);
+        };
+        fetchData();
+      }, []);
+
+      const addEmployee = (name,age,salary) =>{
+        const newEmployee = [...emp,{name,salary,age}];
+        setEmp(newEmployee);
+      };
+
+        return(
+            <div class="container">
+                <Form addEmployee={addEmployee}></Form>
+                <h1 class="text-center">All Employees Data</h1>
+                <br/>
+                <table class="table">
+                    <thead>
+                        <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">employee name</th>
+                        <th scope="col">employee salary</th>
+                        <th scope="col">age</th>
+                        <th>Delete</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            employees.data ?
+                            employees.data.map((employee,index)=>
+                                <tr>
+                                <th scope="row">{index}</th>
+                                <td>{employee.employee_name}</td>
+                                <td>$ {employee.employee_salary}</td>
+                                <td>{employee.employee_age}</td>
+                                <td><button class="btn btn-danger">Delete</button></td>
+                                </tr>
+                            )
+                            :
+                            null
+                        }
+                    </tbody>
+                </table>
+
+            </div>
+        )
+}
+
+export default Employees;

employee-project/src/Form.js

@@ -0,0 +1,102 @@
+import React,{useState} from 'react'
+function Form({addEmployee}){
+    const [name,setName] =  useState('');
+    const [age,setAge] =  useState('');
+    const [salary,setSalary] =  useState('');
+
+    const handleSubmit = e =>{
+    e.preventDefault();
+      if(!name) return;
+      addEmployee(name,age,salary);
+      setName('');
+      setAge('');
+      setSalary('');
+    };
+
+  return(
+          <div>
+              <div className="container">
+                  <h2 className="text-center">Add an Employee</h2>
+                  <form onSubmit={handleSubmit}>
+                  <input className="form-control" type="text" value={name}  placeholder="Enter your name" onChange = {e => setName(e.target.value)} />        
+                  <input className="form-control" type="number" value={salary}   placeholder="Enter employee salary" onChange = {e => setSalary(e.target.value)} ></input>
+                  <input className="form-control" type="number" value={age}   placeholder="Enter employee age" onChange = {e => setAge(e.target.value)} ></input>
+
+                  <button  className="btn margin-top btn-success" type="submit" >Add</button>
+                  </form>
+              </div>
+          </div>
+      )
+}
+
+
+function Employees()
+{
+    const[employees, setEmployess] = useState([{
+        name: 'Learn about Angular Hooks',
+        salary: '4011',
+        age: '22'
+      },
+      {
+        name: 'Learn about Angular Hooks',
+        salary: '4022',
+        age: '44'
+
+      },
+      {
+        name: 'Learn about Angular Hooks',
+        salary: '40411',
+        age: '33'
+
+      }]);
+
+      const addEmployee = (name,age,salary) =>{
+        const newEmployee = [...employees,{name,salary,age}];
+        setEmployess(newEmployee);
+      };
+
+      const removeEmployee = index =>{
+        const newEmployee = [...employees];
+        newEmployee.splice(index,1);
+        setEmployess(newEmployee);
+      };
+
+
+    return(
+        <div class="container">
+            <h1 class="text-center">All Employees Data</h1>
+            <br/>
+            <table class="table">
+                <thead>
+                    <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">employee name</th>
+                    <th scope="col">employee salary</th>
+                    <th scope="col">age</th>
+                    <th>Delete</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        employees ?
+                        employees.map((employee,index)=>
+                            <tr>
+                            <th scope="row">{index}</th>
+                            <td>{employee.name}</td>
+                            <td>$ {employee.salary}</td>
+                            <td>{employee.age}</td>
+                            <td><button className="btn btn-danger" onClick={() => removeEmployee(index) } >Delete</button></td>
+                            </tr>
+                        )
+                        :
+                        null
+                    }
+                </tbody>
+            </table>
+            <Form addEmployee={addEmployee}></Form>
+        </div>
+    )
+
+}
+
+export default Employees;

employee-project/src/index.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+.margin-top{
+  margin-top: 10px;
+}

src/index.js → employee-project/src/index.js

@@ -12,6 +12,7 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA