feat: now possible to add transactions

.env

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=http://localhost:2500
+API_URL=http://localhost:2500

app/components/AddTransaction.tsx

@@ -0,0 +1,62 @@
+import { useRef } from "react";
+
+
+export default function AddTransaction() {
+    const API_URL = "http://localhost:2500";
+    const tier = useRef<HTMLSelectElement>(null);
+    const enchantment = useRef<HTMLSelectElement>(null);
+    const silver = useRef<HTMLInputElement>(null);
+    const type = useRef<HTMLInputElement>(null);
+
+    const submit = () => {
+      console.log("submit");
+      fetch(`${API_URL}/transactions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          tier: Number(tier.current?.value),
+          enchantment: Number(enchantment.current?.value),
+          silver: Number(silver.current?.value),
+          type: type.current?.value,
+        }),
+      }).then((response) => {
+        if (response.ok) {
+          console.log("Transaction added");
+        } else {
+          console.error("Error adding transaction");
+        }
+      });
+    };
+
+    return (
+    <div>
+      <p>Add Transaction</p>
+      <label>Tier</label>
+      <select name="tier" ref={tier}>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+      </select>
+      <label>Enchantment</label>
+      <select name="enchantment" ref={enchantment}>
+        <option value="0">0</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+      </select>
+      <label>Silver</label>
+      <input type="number" name="silver" ref={silver} />
+      <label>Type</label>
+      <input type="text" name="type" ref={type} />
+      <button type="submit" onClick={submit}>Add Transaction</button>
+    </div>
+  );
+}

app/routes/home.tsx

@@ -1,9 +1,55 @@
 import type { Route } from "./+types/home";
+import { useEffect, useState } from "react";
+import "../../config.json";
+import AddTransaction from "~/components/AddTransaction";
+
+const API_URL = "http://localhost:2500";
+type transaction = { id: number; tier: number; enchantment: number, type: string; silver: number; timestamp: number };
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: "Albion Online Transaction Tracker" }];
 }
 
 export default function Home() {
-  return <></>;
+  return (
+    <>
+      <AddTransaction />
+      <TransactionTable />
+    </>
+  );
+}
+
+function TransactionTable() {
+  const [transactions, setTransactions] = useState<transaction[]>([]);
+
+  useEffect(() => {
+    fetch(`${API_URL}/transactions`)
+      .then((response) => response.json())
+      .then((data) => {console.log(data); setTransactions(data);});
+  }, [API_URL]);
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>Tier</th>
+            <th>Type</th>
+            <th>Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          {transactions.map((transaction) => (
+            <tr key={transaction.id}>
+              <td>{new Date(transaction.timestamp*1000).toLocaleDateString()} {new Date(transaction.timestamp*1000).toLocaleTimeString()}</td>
+              <td>{transaction.tier}.{transaction.enchantment}</td>
+              <td>{transaction.type}</td>
+              <td>{transaction.silver}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
 }

config.json

@@ -0,0 +1,3 @@
+{
+  "API_URL": "http://localhost:2500"
+}