Merge pull request #81 from caseytite/75-uniform-transaction-tables

75 uniform transaction tables

client/src/components/CardTransactions.jsx

@@ -1,44 +1,23 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
+import Table from "./Table";
+import "./Table.css";
 
-import "./CardTransactions.css";
 
 const CardTransactions = (props) => {
   const [transactions, setTransactions] = useState([]);
 
-  const formatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-  });
-
   useEffect(() => {
     axios
       .get(`/cards/${props.cardID}/transactions`)
       .then((response) => setTransactions(response.data));
   }, [props.cardID]);
 
-  const transactionTable = transactions.map((data) => {
-    const formattedDate = new Date(data.created_at);
-    return (
-      <tr key={data.id}>
-        <td>{formatter.format(data.amount / 100)}</td>
-        <td>{formattedDate.toDateString()}</td>
-      </tr>
-    );
-  });
   return (
-    <div className="transaction-list">
+    <section className="transaction-container">
       <h2>Transaction History</h2>
-      <table>
-        <thead>
-          <tr>
-            <th>Amount</th>
-            <th>Date</th>
-          </tr>
-        </thead>
-        <tbody>{transactionTable}</tbody>
-      </table>
-    </div>
+      <Table tableData={transactions}/>
+    </section>
   );
 };
 

client/src/components/Scanner.css

@@ -28,7 +28,7 @@
   cursor: text;
 }
 .scanner > .amounts > *:nth-child(3n-1)::before {
-  content: '$  ';
+  content: "$  ";
   vertical-align: top;
   font-size: 1.3rem;
 }
@@ -56,38 +56,3 @@
   opacity: 0.95;
   box-shadow: 0 0 10rem var(--cultured);
 }
-
-.transaction-container {
-  width: 80vw;
-  background-color: var(--cultured);
-  text-align: center;
-  align-items: center;
-  box-shadow: 0 0 5px var(--jet);
-  border: 2px solid var(--jet);
-  opacity: 0.7;
-  border-radius: 0.5rem;
-}
-
-.transaction-details {
-  display: flex;
-  justify-content: space-around;
-}
-
-.transaction-details table {
-  width: 100%;
-  padding: 0.5rem;
-}
-.transaction-details th {
-  width: 33%;
-}
-
-.transaction-details td {
-  text-align: center;
-  background-color: #ccc;
-}
-
-@media screen and (min-width: 768px) {
-  .transaction-container {
-    width: 80vw;
-  }
-}

client/src/components/Scanner.jsx

@@ -4,6 +4,8 @@ import axios from "axios";
 import QrScanner from "qr-scanner";
 import Button from "./Button";
 import "./Scanner.css";
+import Table from "./Table";
+import "./Table.css"
 
 const Scanner = (props) => {
   const previewEl = useRef(null);
@@ -26,7 +28,6 @@ const Scanner = (props) => {
       axios
         .get("/dashboard/redeem", { params: { cardID: result } })
         .then((response) => {
-          console.log(response.data);
           return response.data.error
             ? setError(response.data.error)
             : setCardAmt(response.data.balance);
@@ -67,13 +68,14 @@ const Scanner = (props) => {
         setCardID(null);
         const time = new Date(response.data.created_at);
         setDay(time.toDateString());
-        setTransaction(response.data);
+        setTransaction([response.data]);
       });
     setIsScanning(false);
     setScanBtnText("Click to Scan");
   };
 
   return (
+    <>
     <div className="scanner">
       <p>Enter the total from the sale, then scan the customer's card.</p>
       <div className="amounts" >
@@ -97,30 +99,14 @@ const Scanner = (props) => {
         className={"" + (isScanning ? "" : "hide")}
         ref={previewEl}
       ></video>
+            </div>
       {transaction && (
-        <div className="transaction-container">
-          <h3>Transaction Details</h3>
-          <div className="transaction-details">
-            <table>
-              <thead>
-                <tr>
-                  <th>ID</th>
-                  <th>Amount</th>
-                  <th>Date</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>{transaction.id}</td>
-                  <td>${(transaction.amount / 100) * -1}</td>
-                  <td>{day}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <section className="transaction-container">
+          <h2>Transaction Details</h2>
+            <Table tableData={transaction}/>
+        </section>
       )}
-    </div>
+    </>
   );
 };
 

client/src/components/Table.css

@@ -0,0 +1,25 @@
+.transaction-container {
+  display: flex;
+  flex-direction: column;
+  width: 80vw;
+  background-color: var(--cultured);
+  text-align: center;
+  align-items: center;
+  box-shadow: 0 0 5px var(--jet);
+  border: 2px solid var(--jet);
+  opacity: 0.7;
+  border-radius: 0.5rem;
+}
+
+.transaction-container h2 {
+  font-size: 20px;
+}
+
+.transaction-container th {
+  width: 33vw;
+}
+
+th,
+tr:nth-child(even) {
+  background-color: #ccc;
+}

client/src/components/Table.jsx

@@ -0,0 +1,27 @@
+import TransactionListItem from "./TransactionListItem";
+
+const Table = (props) => {
+  const rows = props.tableData.map((item) => {
+    return <TransactionListItem
+      key={item.id}
+      amount={item.amount}
+      date={item.created_at}
+      id={item.id}
+    />;
+  });
+
+  return (
+    <table className="transaction-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Amount</th>
+          <th>Time</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  );
+};
+
+export default Table;

client/src/components/TransactionListItem.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 function TransactionListItem(props) {
-  const { amount, date, storeId, id } = props;
+  const { amount, date, id } = props;
   const day = new Date(date);
   const tdate = day.toLocaleString();
 

client/src/index.js

@@ -9,7 +9,6 @@ import Landing from "./pages/landing";
 import Stores from "./pages/stores";
 import StoreDetails from "./pages/storeDetails";
 import Cards from "./pages/cards";
-import Transactions from "./pages/transactions";
 import Dashboard from "./pages/dashboard";
 import Signin from "./pages/signin";
 import Register from "./pages/register";
@@ -27,7 +26,6 @@ render(
         <Route path="stores/:id" element={<StoreDetails />} />
         <Route path="cards" element={<Cards />} />
         <Route path="cards/:id" element={<SingleGiftCard />} />
-        <Route path="transactions/:store_id/:id" element={<Transactions />} />
         <Route path="dashboard" element={<Dashboard />} />
         <Route path="signin" element={<Signin />} />
         <Route path="register" element={<Register />} />

client/src/pages/dashboard.css

@@ -11,37 +11,3 @@
   padding: 1.2rem;
   font-size: 1.2rem;
 }
-
-.transactions-table {
-  display: flex;
-  flex-direction: column;
-  width: 80%;
-  margin: auto;
-  border: 2px solid var(--jet);
-  padding: 1rem;
-  margin: 1rem auto 5rem;
-  border-radius: 0.5rem;
-  background-color: var(--cultured);
-  opacity: 0.7;
-  box-shadow: 0 0 5px var(--jet);
-}
-
-.transactions-table h2 {
-  text-align: center;
-}
-.transactions-table th {
-  text-align: left;
-  background-color: var(--cultured);
-  color: var(--jet);
-  font-weight: bold;
-}
-
-.transactions-table tr:nth-child(odd) {
-  background-color: #ccc;
-}
-
-@media screen and (min-width: 500px) {
-  .dashboard h2 {
-    font-size: 24px;
-  }
-}

client/src/pages/dashboard.jsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 import Scanner from "../components/Scanner";
-import TransactionListItem from "../components/TransactionListItem";
+// import TransactionListItem from "../components/TransactionListItem";
 import "./dashboard.css";
 import Button from "../components/Button";
+import Table from "../components/Table";
+import "../components/Table.css";
 
 const Dashboard = (props) => {
   const [storeInfo, setStoreInfo] = useState({});
@@ -32,6 +34,7 @@ const Dashboard = (props) => {
       });
     }
   };
+
 
   return (
     <div className="dashboard">
@@ -42,9 +45,10 @@ const Dashboard = (props) => {
       <Button onClick={toggleView} children="View Transaction History" />
 
       {view.transactions ? transactions.length ? (
-        <section className="transactions-table">
+        <section className="transaction-container">
           <h2>Transaction History</h2>
-          <table>
+          <Table tableData={transactions} />
+          {/* <table>
             <thead>
               <tr>
                 <th>ID</th>
@@ -63,7 +67,7 @@ const Dashboard = (props) => {
                 />
               ))}
             </tbody>
-          </table>
+          </table> */}
         </section>
       ) : (
         <h2>No transaction history</h2>