use decoderef and put token into useeffect + change the styling

back-end/routes/addEventMemberRoute.js

@@ -4,30 +4,6 @@ const {User} = require("../models/User.js")
 const Event = require("../models/Event.js");
 const {body, validationResult} = require("express-validator")
 
-// Hardcoded user data to simulate a database
-
-/*
-let friendData = [{
-    "id":"507f1f77bcf86cd799439011",
-    "name":"Gaby Coupar",
-    "avatar":"https://robohash.org/temporererumomnis.png?size=50x50\u0026set=set1",
-    "phone":"435-715-2899",
-    "email":"[email protected]"
-  }, {
-    "id": "507f1f77bcf86cd799439012",
-    "name": "Andy Gaber",
-    "avatar": "https://robohash.org/quaeetcorrupti.png?size=50x50&set=set1",
-    "phone":"425-712-2309",
-    "email":"[email protected]"
-  }]
-  
-// Endpoint to get user data after search
-router.get('/friend', (req, res) => {
-    res.json(friendData);
-});
-*/
-
-
 router.get('/friendsList/:userId', async (req, res) => {
   try {
     //fetch all data
@@ -48,67 +24,4 @@ router.get('/friendsList/:userId', async (req, res) => {
   }
 });
 
-
-/*
-router.get('/friends/:userId', async (req, res) => {
-  try {
-    const userId = req.params.userId;
-    console.log('Fetching user with ID:', userId);
-
-    const user = await User.findById(userId).populate('friends');
-    console.log('User:', user);
-
-    if (!user) {
-      console.log('User not found');
-      return res.status(404).json({ message: 'User not found' });
-    }
-
-    res.json(user.friends);
-  } catch (error) {
-    console.error('Error:', error);
-    res.status(500).json({ message: 'Server error', error: error.message });
-  }
-});
-
-
-router.post('/events/:eventId/participants', async (req, res) => {
-  try {
-      const { eventId } = req.params;
-      const { memberId } = req.body;
-
-      // Find the event and add the new member
-      const event = await Event.findById(eventId);
-      const user = await User.findById(userId)
-
-      if (!event) {
-        return res.status(404).json({ message: 'Event not found' });
-      }
-      if(!user){
-        return res.status(404).json({ message: 'User not found'})
-      }
-
-      // Check if member is already in the participants list
-      if (event.participants.includes(memberId)) {
-          return res.status(400).json({ message: 'Member already in the event' });
-      }
-
-      // Validate if the memberId is in the user's friend list
-      const isFriend = user.friends.some(friend => friend._id.toString() === memberId);
-
-      if (!isFriend) {
-          return res.status(400).json({ message: 'Member is not in the user\'s friend list' });
-      }
-
-      // Add the member to the participants list
-      event.participants.push(memberId);
-      await event.save();
-
-      res.json({message: 'Member added successfully', event});
-  } catch (error) {
-      console.error(error);
-      res.status(500).json({ message: 'Server error' });
-  }
-});
-*/
-
 module.exports = router;

front-end/src/components/Event.js

@@ -180,8 +180,11 @@ const Event = (props) => {
                     <div>{item.expense.name}</div>
                   </Link>
                 </div>
-                <div className="amount">{item.settlement.toFixed(2) === "0.00" ? 
-                <span className="settled"> Settled </span>: `$${item.settlement.toFixed(2)}`}</div>
+                <div className={`amount ${item.settlement < 0 ? 'negative' : 'positive'}`}>
+                    {item.settlement.toFixed(2) === "0.00" ? 
+                    <span className="settled">Settled</span> : 
+                    `$${item.settlement.toFixed(2)}`}
+                </div>
               </div>
             ))}
         </section>

front-end/src/components/Events.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import '../styles/Events.css';
 import Navbar from "./Navbar";
 import { Link } from "react-router-dom";
@@ -14,6 +14,7 @@ function Events({ isDarkMode }) {
     const [amountOwed, setAmountOwed] = useState(0);
     const [amountOwedBy, setAmountOwedBy] = useState(0);
     const [searchTerm, setSearchTerm] = useState("");
+    const decodeRef = useRef(null);
     //const[showFilter, setShowFilter] = useState(false);
     //const[selectedFilter, setSelectedFilter] = useState('all');
     //const[filteredEvents, setFilteredEvents] = useState([]);
@@ -43,21 +44,18 @@ function Events({ isDarkMode }) {
         };
     }, [isDarkMode]);
 
-    const token = localStorage.getItem("token");
-    const decode = jwtDecode(token);
-
-    useEffect(()=>{
+
         //fetch mock data about a user's events list
         async function dataFetch(){ 
             try{
-                if (!decode.id) {
+                if (!decodeRef.current.id) {
                     console.error("No current user found in local storage.");
                     return;
                 } else {
-                    console.log(decode.id);
+                    console.log(decodeRef.current.id);
                 }
                 //requesting data from the mock API endpoint
-                const response = await axios.get(`http://localhost:3001/events/for/${decode.id}`);
+                const response = await axios.get(`http://localhost:3001/events/for/${decodeRef.current.id}`);
                 console.log(response)
                 //return the data
                 setEventData(response.data)
@@ -66,14 +64,13 @@ function Events({ isDarkMode }) {
                 console.error("There was an error fetching the data:", error);
             }
         }
-        dataFetch();
-    },[]);
+
 
-    useEffect(() => {
-        console.log(decode.id)
+
+        //console.log(decodeRef.current.id)
         const fetchSettlements = async () => {
             try {
-                const response = await axios.get(`http://localhost:3001/settlement/from/${decode.id}`);
+                const response = await axios.get(`http://localhost:3001/settlement/from/${decodeRef.current.id}`);
                 console.log("Settlements:", response.data);
                 setSettlements(response.data);
                 // Process and use the fetched settlements here
@@ -82,9 +79,20 @@ function Events({ isDarkMode }) {
             }
         };
 
-        fetchSettlements();
 
+
+    useEffect(() => {
+        const token = localStorage.getItem("token");
+        if (token) {
+            decodeRef.current = jwtDecode(token);
+        }
+        // Fetch data related to the decoded user
+        if (decodeRef.current && decodeRef.current.id) {
+            dataFetch();
+            fetchSettlements();
+        }
     }, []);
+
 
     function calculateAmounts(expenses, currentUserId) {
         let amountOwed = 0; // Amount the current user owes to others
@@ -106,13 +114,13 @@ function Events({ isDarkMode }) {
 
     useEffect(() => {
         if (settlements.length > 0) {
-            const { amountOwed, amountOwedBy } = calculateAmounts(settlements, decode.id);
+            const { amountOwed, amountOwedBy } = calculateAmounts(settlements, decodeRef.current.id);
             setAmountOwed(amountOwed);
             setAmountOwedBy(amountOwedBy);
             // Now you can use amountOwed and amountOwedBy in your component
             console.log(`Amount Owed: ${amountOwed}, Amount Owed By: ${amountOwedBy}`);
         }
-    }, [settlements, decode.id]);
+    }, [settlements]);
 
     function EventClick(eventId){
         console.log(`Event ${eventId} was clicked`)

front-end/src/components/Expense.jsx

@@ -87,18 +87,9 @@ function Expense({ isDarkMode }) {
     let filteredExpenses = [];
 
     if (expensesData.paidBy._id === userId) {
-      filteredExpenses = expensesData.splitDetails
-        .filter((split) => split.user._id !== userId)
-        .map((split) => ({ ...split, displayName: split.user.username }));
+      filteredExpenses = expensesData.splitDetails.filter(split => split.user._id !== userId).map(split => ({ ...split, displayName: split.user.username, amount: split.settlement.amount}));
     } else {
-      filteredExpenses = expensesData.splitDetails
-        .filter(
-          (split) => split.user._id === userId && expensesData.paidBy !== userId
-        )
-        .map((split) => ({
-          ...split,
-          displayName: expensesData.paidBy.username,
-        }));
+      filteredExpenses = expensesData.splitDetails.filter(split => split.user._id === userId && expensesData.paidBy !== userId).map(split => ({ ...split, displayName: expensesData.paidBy.username, amount: -split.settlement.amount}));;
     }
     return filteredExpenses;
   };
@@ -148,13 +139,7 @@ function Expense({ isDarkMode }) {
                   <div className="expense-item" key={split.settlement._id}>
                     <span>{split.displayName}</span>
                     <span
-                      className={
-                        parseFloat(split.settlement.amount) > 0
-                          ? "positive"
-                          : "negative"
-                      }
-                    >
-                      {split.settlement.amount.toFixed(2)}
+                      className={parseFloat(split.amount) > 0 ? 'positive' : 'negative'}>{split.amount.toFixed(2)}
                     </span>
                     <div className="checkbox">
                       <input

front-end/src/styles/Event.css

@@ -30,6 +30,14 @@ header {
     @apply inline-block m-auto mr-4;
 }
 
+.negative {
+    color: red;
+}
+
+.positive {
+    color: green;
+}
+
 .settled{
     @apply text-green-500
 }