useReducer - WIP

Module_5/Projects/employeeapp/src/App.jsx

@@ -1,17 +1,89 @@
-import { useState } from 'react'
+import { useState, useReducer } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 import EmployeeList from './components/EmployeeList/EmployeeList'
 import TeamList from './components/TeamList/TeamList'
 
+import employeesJson from "./static/employees.json";
+
 function App() {
 
+  /**
+   * ADD_TO_TEAM_LIST
+   * REMOVE_FROM_TEAM_LIST
+   * CALCULATE_AVERAGE_AGE
+   * SORT_LIST_BY_AGE
+   */
+
+  // Syntaax : const [variable, setterFunction] = useState(<init-value>)
+  // Syntax :           const [variable, setterFunction] = useReducer(<pure-fn>,<init-value>)
+  // Syntax (Fancy) :   const [masterData, dispatch] = useReducer(reducerFn, init-value);
+
+  // const masterData = {
+  //   employeeList: employeesJson,
+  //   teamList: [],
+  //   averageAge: 0
+  // }
+
+  // Action to manipulate data
+  const reducerFn = (state, action) => {
+    if (action.action === "ADD_TO_TEAM_LIST") {
+      // ToDo : Write the logic
+      console.log("Action dispatched", state, action)
+      return {
+        ...state,
+        teamList: [...state.teamList, action.payload]
+      }
+
+    } else if (action.action === "REMOVE_FROM_TEAM_LIST") {
+      // ToDo : Write the logic
+    } else if (action.action === "CALCULATE_AVERAGE_AGE") {
+      // ToDo : Write the logic
+    } else if (action.action === "SORT_LIST_BY_AGE") {
+      // ToDo : Write the logic
+    } else {
+      // ToDo: Don't do anything, let the original data be as it is
+    }
+  };
+
+  const [masterData, dispatch] = useReducer(reducerFn, {
+    employeeList: employeesJson,
+    teamList: [],
+    averageAge: 0
+  })
+
+  console.log(masterData)
   return (
     <>
       <h1>Employee App </h1>
-      <EmployeeList />
-      <TeamList />
+      <div style={{
+        display: "flex",
+        gap: "2rem"
+      }}>
+        <div style={{
+          border: "2px solid black"
+        }}>
+          <EmployeeList
+            employees={masterData.employeeList}
+            // onAddClick={onAddClick}
+            dispatch={dispatch}
+          />
+
+        </div>
+        <div style={{
+          border: "2px solid black"
+        }}>
+          <TeamList
+            dispatch={dispatch}
+            // onCalculateAverageAgeClick={onCalculateAverageAgeClick} 
+            // onSortByAgeClick={onSortByAgeClick} 
+            // onRemoveClick={onRemoveClick} 
+            employees={masterData.teamList}
+          />
+        </div>
+
+      </div>
     </>
   )
 }

Module_5/Projects/employeeapp/src/components/EmployeeList/EmployeeList.jsx

@@ -1,9 +1,19 @@
-import "EmployeeList.module.css";
-
-const EmployeeList = () => {
+const EmployeeList = (props) => {
+    // console.log(props)
     return (
         <>
             <h1>Employee List</h1>
+            {
+                props.employees.map(data => {
+                    return <div key={data.id} style={{
+                        padding: "20px",
+                        boxShadow: "4px 4px 4px grey"
+                    }}>
+                        {data.first_name} {data.last_name} - {data.age} years old
+                        <button onClick={() => props.dispatch({ type: "ADD_TO_TEAM_LIST", payload: data })}>ADD</button>
+                    </div>
+                })
+            }
         </>
     )
 };

Module_5/Projects/employeeapp/src/components/TeamList/TeamList.jsx

@@ -1,9 +1,26 @@
-import "TeamList.module.css";
 
-const TeamList = () => {
+const TeamList = (props) => {
+    // console.log(props)
     return (
         <>
             <h1>Team List</h1>
+            <div>
+                {
+                    props.employees.map(data => {
+                        return <div key={data.id} style={{
+                            padding: "20px",
+                            boxShadow: "4px 4px 4px grey"
+                        }}>
+                            {data.first_name} {data.last_name} - {data.age} years old
+                            <button onClick={() => props.dispatch({ type: "REMOVE_FROM_TEAM_LIST", payload: data })}>REMOVE</button>
+                        </div>
+                    })
+                }
+
+                Average Age : 0 <br />
+                <button onClick={() => props.dispatch({ type: "CALCULATE_AVERAGE_AGE", payload: {} })}>Calculate Average Age</button>
+                <button onClick={() => props.dispatch({ type: "SORT_LIST_BY_AGE", payload: {} })}>Sort by age</button>
+            </div>
         </>
     )
 };

Module_5/Projects/employeeapp/src/main.jsx

@@ -4,7 +4,5 @@ import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <App />
 )

Module_5/Projects/employeeapp/src/static/employees.json

@@ -0,0 +1,186 @@
+[
+    {
+        "id": 1,
+        "first_name": "Jaymee",
+        "last_name": "Imm",
+        "email": "[email protected]",
+        "gender": "Genderqueer",
+        "age": 80
+    },
+    {
+        "id": 2,
+        "first_name": "Jody",
+        "last_name": "Themann",
+        "email": "[email protected]",
+        "gender": "Agender",
+        "age": 29
+    },
+    {
+        "id": 3,
+        "first_name": "Cece",
+        "last_name": "Carlet",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 69
+    },
+    {
+        "id": 4,
+        "first_name": "Elton",
+        "last_name": "Allinson",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 31
+    },
+    {
+        "id": 5,
+        "first_name": "Garvy",
+        "last_name": "Shaddick",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 32
+    },
+    {
+        "id": 6,
+        "first_name": "Fin",
+        "last_name": "Realy",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 26
+    },
+    {
+        "id": 7,
+        "first_name": "Minnaminnie",
+        "last_name": "Fransseni",
+        "email": "[email protected]",
+        "gender": "Agender",
+        "age": 52
+    },
+    {
+        "id": 8,
+        "first_name": "Fernando",
+        "last_name": "Pagon",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 40
+    },
+    {
+        "id": 9,
+        "first_name": "Tiphanie",
+        "last_name": "Fenny",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 52
+    },
+    {
+        "id": 10,
+        "first_name": "Nerti",
+        "last_name": "Try",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 43
+    },
+    {
+        "id": 11,
+        "first_name": "Abagael",
+        "last_name": "Beadell",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 76
+    },
+    {
+        "id": 12,
+        "first_name": "Morten",
+        "last_name": "McNamee",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 38
+    },
+    {
+        "id": 13,
+        "first_name": "Domenico",
+        "last_name": "Shearman",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 66
+    },
+    {
+        "id": 14,
+        "first_name": "Rodolphe",
+        "last_name": "Bittlestone",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 33
+    },
+    {
+        "id": 15,
+        "first_name": "Merv",
+        "last_name": "Watterson",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 37
+    },
+    {
+        "id": 16,
+        "first_name": "Betty",
+        "last_name": "Simm",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 26
+    },
+    {
+        "id": 17,
+        "first_name": "Rafaellle",
+        "last_name": "Brighouse",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 43
+    },
+    {
+        "id": 18,
+        "first_name": "Sibby",
+        "last_name": "Meanwell",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 66
+    },
+    {
+        "id": 19,
+        "first_name": "Ricky",
+        "last_name": "Sissland",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 76
+    },
+    {
+        "id": 20,
+        "first_name": "Sauveur",
+        "last_name": "Hessenthaler",
+        "email": "[email protected]",
+        "gender": "Male",
+        "age": 48
+    },
+    {
+        "id": 21,
+        "first_name": "Carmela",
+        "last_name": "Bucksey",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 22
+    },
+    {
+        "id": 22,
+        "first_name": "Nydia",
+        "last_name": "Folke",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 68
+    },
+    {
+        "id": 23,
+        "first_name": "Asia",
+        "last_name": "Boake",
+        "email": "[email protected]",
+        "gender": "Female",
+        "age": 39
+    }
+]