FAIR SHARE 1.0.0

Add Feature Update Info

README.md

@@ -10,7 +10,7 @@
 
 - **STACK :**
 
-  - **Fair Share** : `0.8.0`
+  - **Fair Share** : `1.0.0`
   - **React** : `18.3.1`
   - **React Dom** : `18.3.1`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fair-share",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

src/components/App.js

@@ -20,14 +20,19 @@ export default function App() {
     setShowAddFriend(false);
   }
 
+  function handleSplitBill(value) {
+    setFriends((friends) => friends.map((friend) => friend.id === selectedFriend.id ? { ...friend, balance: friend.balance + value } : friend));
+    setSelectedFriend(null);
+  }
+
   return (
     <div className='app'>
       <div className='sidebar'>
         <FriendList friends={friends} selectedFriend={selectedFriend} onSelection={handleSelection} />
         {showAddFriend && <FormAddFriend onAddFriend={handleAddFriend} />}
         <Button onClick={handleShowAddFriend}>{showAddFriend ? "Close" : "Add friend"}</Button>
       </div>
-      {selectedFriend && <FormSplitBill selectedFriend={selectedFriend.name} />}
+      {selectedFriend && <FormSplitBill selectedFriend={selectedFriend} onSplitBill={handleSplitBill} />}
     </div>
   )
 }
@@ -107,21 +112,27 @@ function InputText({ children, value, setValue }) {
   )
 }
 
-function FormSplitBill({ selectedFriend }) {
+function FormSplitBill({ selectedFriend, onSplitBill }) {
   const [bill, setBill] = useState("");
   const [paidByUser, setPaidByUser] = useState("");
   const paidByFriend = bill ? bill - paidByUser : "";
   const [whoIsPaying, setWhoIsPaying] = useState("user");
 
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!bill || !paidByUser) return;
+    onSplitBill(whoIsPaying === "user" ? paidByFriend : -paidByUser);
+  }
+
   return (
-    <form className="form-split-bill">
-      <h2>Split a bill with {selectedFriend}</h2>
+    <form className="form-split-bill" onSubmit={handleSubmit}>
+      <h2>Split a bill with {selectedFriend.name}</h2>
       <label>💰 Bill value</label>
       <input type="number" value={bill} onChange={(e) => setBill(Number(e.target.value))} maxLength={10} />
       <label>🙍‍♂️ Your expense</label>
       <input type="number" value={paidByUser} onChange={(e) => setPaidByUser(Number(e.target.value) > bill ? paidByUser : Number(e.target.value))} maxLength={10} />
-      <InputReadOnly paidByFriend={paidByFriend}>👬 {selectedFriend}'s expense</InputReadOnly>
-      <InputSelect selectedFriend={selectedFriend} whoIsPaying={whoIsPaying} setWhoIsPaying={setWhoIsPaying}>🤑 Who is paying the bill</InputSelect>
+      <InputReadOnly paidByFriend={paidByFriend}>👬 {selectedFriend.name}'s expense</InputReadOnly>
+      <InputSelect selectedFriend={selectedFriend.name} whoIsPaying={whoIsPaying} setWhoIsPaying={setWhoIsPaying}>🤑 Who is paying the bill</InputSelect>
       <Button>Split bill</Button>
     </form>
   )