From ca044349cac7434560f2646bc4ea4c27f5783d47 Mon Sep 17 00:00:00 2001
From: Rosyid Haryadi <rosyid_haryadi@protonmail.com>
Date: Sat, 30 Sep 2023 18:29:36 +0700
Subject: cursed state management

---
 src/App.jsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

(limited to 'src/App.jsx')

diff --git a/src/App.jsx b/src/App.jsx
index da2bbc7..8a487e0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,9 +4,11 @@ import Entry from "./Entry.jsx";
 import {Button, Container, Typography} from "@mui/material";
 import dayjs from "dayjs";
 import SalaryInput from "./SalaryInput.jsx";
+import Result from "./Result.jsx";
 
 
 function App() {
+    const [baseSalary, setBaseSalary] = useState(0);
     const [listEntry, setListEntry] = useState(
         [
             {id: 0, date: dayjs(), start: dayjs(), finish: dayjs()},
@@ -24,6 +26,20 @@ function App() {
         return lastEntry.id;
     }
 
+    const handleEntryChange = (entry, updatedAttr) => {
+        const updatedEntryList = listEntry.map((entryOnList) => {
+            if (entryOnList.id === entry.id) {
+                return {...entryOnList, [updatedAttr]: entry[updatedAttr]}
+            }
+            return entryOnList;
+        });
+        setListEntry(updatedEntryList);
+    }
+
+    const handleBaseSalaryChange = (baseSalaryInput) => {
+        setBaseSalary(baseSalaryInput);
+    }
+
     const addToList = () => {
         const newEntry = {
             id: getLastId() + 1,
@@ -43,19 +59,22 @@ function App() {
     return (
         <Container>
             <Typography variant='h3' align='center'>Overtime Calculator</Typography>
-            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini? 🤑🤑</Typography>
+            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini?
+                🤑🤑</Typography>
             <ul>
                 <li style={{listStyle: 'none', margin: '20px 0'}}>
-                    <SalaryInput/>
+                    <SalaryInput handleBaseSalaryChange={handleBaseSalaryChange}/>
                 </li>
                 {listEntry.map((entry) => {
                     return (
                         <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
                             <li style={{listStyle: 'none'}} key={entry.id}>
                                 <Entry
+                                    propId={entry.id}
                                     propDate={entry.date}
                                     propStart={entry.start}
                                     propFinish={entry.finish}
+                                    handleEntryChange={handleEntryChange}
                                 />
                             </li>
                             <Button
@@ -75,6 +94,7 @@ function App() {
                     )
                 })}
             </ul>
+            <Result listEntry={listEntry} baseSalary={baseSalary}/>
         </Container>
     )
 }
-- 
cgit v1.2.3-70-g09d2

