Merge pull request #80 from agiledev-students-fall2023/update-add-exp…

…ense-api

Update add expense api and added unit tests

back-end/package.json

@@ -4,7 +4,8 @@
   "description": "The back-end of your project will live in this directory.",
   "main": "server.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha",
+    "coverage": "c8 mocha"
   },
   "author": "",
   "license": "ISC",
@@ -14,6 +15,9 @@
     "express": "^4.18.2"
   },
   "devDependencies": {
+    "chai": "^4.3.10",
+    "chai-http": "^4.4.0",
+    "mocha": "^10.2.0",
     "nodemon": "^3.0.1"
   }
 }

back-end/routes/addExpenseRoute.js

@@ -12,7 +12,8 @@ router.post("/", async (req, res) => {
           date: req.body.date,
           personPaid: req.body.personPaid,   
           peopleSplit: req.body.peopleSplit, 
-          splitMethod: req.body.splitMethod
+          splitMethod: req.body.splitMethod,
+          amountDetails: req.body.amountDetails
         },
       };
       // ... then send a response of some kind to client

back-end/test/addExpenseRoute.test.js

@@ -0,0 +1,34 @@
+const chai = require('chai');
+const chaiHttp = require('chai-http');
+const app = require('../app'); 
+const expect = chai.expect;
+
+chai.use(chaiHttp);
+
+describe('Add Expense API', () => {
+    describe('POST /add-expense', () => {
+        it('should return a success response', (done) => {
+            let postData = {
+                name: "Flights",
+                amount: 100,
+                date: "2023-11-13",
+                personPaid: "Jane",
+                peopleSplit: ["Jane", "Jack"],
+                splitMethod: "equal",
+                amountDetails: { "Jane": 50, "Jack": 50 }
+            };
+
+            chai.request(app)
+                .post('/add-expense')
+                .send(postData)
+                .end((err, res) => {
+                    expect(res).to.have.status(200);
+                    expect(res.body).to.be.a('object');
+                    expect(res.body).to.have.property('status', 'Success');
+                    expect(res.body).to.have.property('message');
+                    expect(res.body.data).to.deep.equal(postData);
+                    done();
+                });
+        });
+    });
+});

back-end/test/eventRoute.test.js

@@ -0,0 +1,25 @@
+const chai = require('chai');
+const chaiHttp = require('chai-http');
+const app = require('../app'); 
+const expect = chai.expect;
+
+chai.use(chaiHttp);
+
+describe('Event API', () => {
+    describe('GET /event', () => {
+        it('should get event details', (done) => {
+            chai.request(app)
+                .get('/event')
+                .end((err, res) => {
+                    expect(res).to.have.status(200);
+                    expect(res.body).to.be.a('object');
+                    expect(res.body).to.have.property('id');
+                    expect(res.body).to.have.property('name');
+                    expect(res.body).to.have.property('expenses');
+                    expect(res.body.expenses).to.be.a('array');
+                    expect(res.body.expenses).to.have.lengthOf(3);
+                    done();
+                });
+        });
+    });
+});

front-end/src/components/AddExpense.js

@@ -49,12 +49,20 @@ const AddExpense = props => {
         setShowModal(false); 
     };
 
+    const handleAmountsChange = (amounts) => {
+        setFormData(prevFormData => ({
+            ...prevFormData,
+            amountDetails: amounts
+        }));
+    };
+
     const handleAddExpense = async () => {
         const submissionData = {
             ...formData,
             peopleSplit: formData.peopleSplit.map(person => person.id)
         };
         try {
+            console.log(formData);
             const response = await axios.post('http://localhost:3001/add-expense', formData);
             console.log(response.data);
             navigate('/event');
@@ -186,9 +194,14 @@ const AddExpense = props => {
             </form>
             </div>
 
-            <SplitModal onMethodChange={handleMethodChange} showModal={showModal} totalAmount={formData.amount} participants={formData.peopleSplit} onClose={() => setShowModal(false)} />
-
-            <div className="space-to-scroll"></div>
+            <SplitModal 
+                onMethodChange={handleMethodChange} 
+                onAmountsChange={handleAmountsChange}
+                showModal={showModal} 
+                totalAmount={formData.amount} 
+                participants={formData.peopleSplit} 
+                onClose={() => setShowModal(false)} 
+            />
 
             <Navbar />
         </div>

front-end/src/components/SplitModal.js

@@ -1,24 +1,49 @@
-import axios from "axios"
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
 import '../styles/SplitModal.css';
 
-function SplitModal({ onMethodChange, showModal, totalAmount, participants, onClose }) {
+function SplitModal({ onMethodChange, onAmountsChange, showModal, totalAmount, participants, onClose }) {
     const [activeTab, setActiveTab] = useState('equally'); // Default to 'equally'
     const [participantPercentages, setParticipantPercentages] = useState({});
+    const [participantAmounts, setParticipantAmounts] = useState({});
 
     const handlePercentageChange = (event, participantId) => {
         const newPercentages = { ...participantPercentages, [participantId]: parseFloat(event.target.value) };
         setParticipantPercentages(newPercentages);
-      };
-
-    const handleAmountChange = (event, participant) => {
-    // Update the state to reflect the new amount for this participant
+    };
+
+    const handleAmountChange = (event, participantId) => {
+        const newAmounts = { ...participantAmounts, [participantId]: parseFloat(event.target.value) };
+        setParticipantAmounts(newAmounts);
     };
 
     const calculateAmount = (participantId, totalAmount, percentages) => {
         const percentage = percentages[participantId] || 0;
         return (totalAmount * (percentage / 100));
     };
+
+    const handleSave = () => {
+        if (activeTab === 'equally') {
+            const equalAmount = parseFloat(totalAmount) / participants.length;
+            const amounts = participants.reduce((acc, participant) => {
+                acc[participant.id] = equalAmount;
+                participantAmounts[participant.id] = equalAmount;
+                return acc;
+            }, {});
+            onAmountsChange(amounts);
+        } else if (activeTab === 'percentage') {
+            const amounts = Object.keys(participantPercentages).reduce((acc, participantId) => {
+                const amount = calculateAmount(participantId, totalAmount, participantPercentages);
+                acc[participantId] = amount;
+                participantAmounts[participantId] = amount;
+                return acc;
+            }, {});
+            onAmountsChange(amounts);
+        } else {
+            onAmountsChange(participantAmounts);
+        }
+        onMethodChange(activeTab);
+    };
+
 
     return (
       showModal && (
@@ -51,13 +76,13 @@ function SplitModal({ onMethodChange, showModal, totalAmount, participants, onCl
                     }
                     {activeTab === 'amount' && 
                         <div>
-                            $ <input type="number" onChange={(e) => handleAmountChange(e, participant)} />
+                            $ <input type="number" onChange={(e) => handleAmountChange(e, participant.id)} />
                         </div>
                     }
                 </div>
               ))}
             </div>
-            <button onClick={() => onMethodChange(activeTab)}>Save</button>
+            <button onClick={() => {handleSave();}}>Save</button>
           </div>
         </div>
       )