Merge pull request #3 from AlexGottschalkSE/Callum-Transaction_History

Callum transaction history

API/server.js

@@ -160,22 +160,22 @@ app.post("/api/payment", async (req, res) => {
 
 
 app.get("/api/payments/:accountNumber", async (req, res) => {
-    const { username } = req.params;
-
-    try {
-        const userRef = db.collection("users").doc(username);
-        const paymentsSnapshot = await userRef.collection("payments").get();
-
-        if (paymentsSnapshot.empty) {
-            return res.status(404).json({ message: "No payments found for user." });
-        }
-
-        const payments = paymentsSnapshot.docs.map(doc => doc.data());
-        res.status(200).json(payments);
-    } catch (error) {
-        console.error(error);
-        res.status(500).json({ message: "Error retrieving payments" });
-    }
+  const { accountNumber } = req.params;  
+
+  try {
+      const userRef = db.collection("users").doc(accountNumber);  
+      const paymentsSnapshot = await userRef.collection("payments").get();
+
+      if (paymentsSnapshot.empty) {
+          return res.status(404).json({ message: "No payments found for this account." });
+      }
+
+      const payments = paymentsSnapshot.docs.map(doc => doc.data());
+      res.status(200).json(payments);
+  } catch (error) {
+      console.error(error);
+      res.status(500).json({ message: "Error retrieving payments" });
+  }
 });
 
 

Frontend/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",

Frontend/src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes, Link, useLocation } from "react
 import Register from "./Register";
 import Login from "./Login";
 import Dashboard from "./Dashboard";
+import History from "./History"
 import "./App.css"; 
 import Payments from "./Payment";
 function NavBar() {
@@ -11,7 +12,7 @@ function NavBar() {
     <nav className="nav-bar">
       <ul>
 
-        {location.pathname !== "/dashboard" && (location.pathname !== "/payments") && (
+        {location.pathname !== "/dashboard" && (location.pathname !== "/payments") && (location.pathname !== "/history") && (
           <>
             <li>
               <Link to="/register">Register</Link>
@@ -29,7 +30,11 @@ function NavBar() {
         <li>
         <Link to="/payments">Payments</Link> 
       </li>
+      <li>
+        <Link to="/history">History</Link> 
+      </li>
       </>
+
         )}
       </ul>
     </nav>
@@ -46,6 +51,7 @@ function App() {
           <Route path="/login" element={<Login />} />
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/payments" element={<Payments />} /> 
+          <Route path="/history" element={<History />}/>
         </Routes>
       </div>
     </Router>

Frontend/src/History.css

@@ -0,0 +1,34 @@
+.card {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    margin: auto;
+  }
+
+  .card h2 {
+    margin-bottom: 20px;
+  }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+
+  button {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }

Frontend/src/History.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import "./History.css"; 
+
+const History = () => {
+  const [transactions, setTransactions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const accountNumber = localStorage.getItem("accNo");
+
+  useEffect(() => {
+    if (accountNumber) {
+      axios
+        .get(`https://localhost:443/api/payments/${accountNumber}`)
+        .then((response) => {
+          setTransactions(response.data); 
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error("Error fetching transactions:", error);
+          setError("Error fetching transactions.");
+          setLoading(false);
+        });
+    } else {
+      setError("Account number not found.");
+      setLoading(false);
+    }
+  }, [accountNumber]);
+
+  return (
+    <div>
+      <h1>Transaction History</h1>
+      {loading && <p>Loading...</p>}
+      {error && <p>{error}</p>}
+      {!loading && !error && (
+        <table border="1" cellPadding="10" cellSpacing="0">
+          <thead>
+            <tr>
+              <th>Amount</th>
+              <th>Currency</th>
+              <th>Provider</th>
+              <th>Account Number</th>
+              <th>SWIFT Code</th>
+            </tr>
+          </thead>
+          <tbody>
+            {transactions.length > 0 ? (
+              transactions.map((transaction) => (
+                <tr key={transaction.transactionId}>
+                  <td>{transaction.amount}</td>
+                  <td>{transaction.currency}</td>
+                  <td>{transaction.provider}</td>
+                  <td>{transaction.accountNumber}</td>
+                  <td>{transaction.swiftCode}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan="6">No transactions found</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};
+
+export default History;

Frontend/src/Login.js

@@ -9,9 +9,9 @@ function Login() {
   const handleLogin = async (e) => {
     e.preventDefault();
 
-    const accountNumber = e.target[0].value;          // ID
-    const username = e.target[1].value;    // Full Name
-    const password = e.target[2].value;    // Password
+    const accountNumber = e.target[0].value;          
+    const username = e.target[1].value;    
+    const password = e.target[2].value;    
 
     const userData = {
       accountNumber,
@@ -30,7 +30,7 @@ function Login() {
       console.log(JSON.stringify(userData))
       const data = await response.json();
       if (response.ok) {
-        // Store the full name in localStorage after a successful login
+
         localStorage.setItem("accNo", accountNumber);
 
         setMessage("Login successful!");
@@ -47,9 +47,9 @@ function Login() {
     <div className="card">
       <h2>Login</h2>
       <form onSubmit={handleLogin}>
-        <input type="text" placeholder="ID" required /> {/* ID */}
-        <input type="text" placeholder="Full Name" required /> {/* Full Name */}
-        <input type="password" placeholder="Password" required /> {/* Password */}
+        <input type="text" placeholder="ID" required /> 
+        <input type="text" placeholder="Full Name" required /> 
+        <input type="password" placeholder="Password" required /> 
         <button type="submit">Login</button>
       </form>
       {message && <p>{message}</p>}

Frontend/src/Payment.js

@@ -12,7 +12,6 @@ function Payments() {
     const provider = e.target[2].value;
     const swiftCode = e.target[3].value;
 
-    // Retrieve accountNumber from localStorage
     const accountNumber = localStorage.getItem('accNo');
 
     if (!accountNumber) {
@@ -47,7 +46,7 @@ function Payments() {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "account-number": accountNumber, // Send accountNumber from localStorage as a header
+          "account-number": accountNumber, 
         },
         body: JSON.stringify(paymentData),
       });