ADD - db test

Author: MeMMa137

client/src/App.jsx

@@ -1,5 +1,6 @@
 import { Hero } from "./components/Hero.jsx";
 import { MainPage } from "./components/MainPage.jsx";
+import { TestPage } from "./components/TestPage.jsx";
 
 export default function App() {
   const pathname = window.location.pathname.replace(/\/+$/, "") || "/";
@@ -8,5 +9,9 @@ export default function App() {
     return <MainPage />;
   }
 
+  if (pathname === "/test") {
+    return <TestPage />;
+  }
+
   return <Hero />;
 }

client/src/components/TestPage.css

@@ -0,0 +1,45 @@
+.test-page {
+  min-height: 100vh;
+  padding: 48px 20px;
+  background: #73a5ca;
+}
+
+.test-page__card {
+  width: min(900px, 100%);
+  margin: 0 auto;
+  padding: 32px;
+  border: 4px solid #162456;
+  border-radius: 24px;
+  background: #fff8d8;
+  box-shadow: 8px 8px 0 #162456;
+}
+
+.test-page__card h1 {
+  margin: 0 0 12px;
+  font-size: clamp(2rem, 6vw, 4rem);
+}
+
+.test-page__card p {
+  margin: 0 0 20px;
+  font-size: 1.1rem;
+}
+
+.test-page__error {
+  color: #b3261e;
+}
+
+.test-page__rows {
+  display: grid;
+  gap: 16px;
+}
+
+.test-page__rows pre {
+  margin: 0;
+  padding: 16px;
+  overflow-x: auto;
+  border-radius: 12px;
+  background: #162456;
+  color: #fff8d8;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.95rem;
+}

client/src/components/TestPage.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import "./TestPage.css";
+
+export function TestPage() {
+  const [rows, setRows] = useState([]);
+  const [status, setStatus] = useState("Loading test rows...");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function loadRows() {
+      try {
+        const response = await fetch("/api/test");
+        const isJson = response.headers.get("content-type")?.includes("application/json");
+        const data = isJson ? await response.json() : {};
+
+        if (!response.ok) {
+          throw new Error(data.error || "Failed to load test rows.");
+        }
+
+        if (isMounted) {
+          setRows(data.rows || []);
+          setStatus("");
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err.message);
+          setStatus("");
+        }
+      }
+    }
+
+    loadRows();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return (
+    <main className="test-page">
+      <section className="test-page__card">
+        <h1>Test Table</h1>
+        <p>Rows from the production Postgres <code>test</code> table.</p>
+
+        {status && <p>{status}</p>}
+        {error && <p className="test-page__error">{error}</p>}
+
+        {!status && !error && rows.length === 0 && <p>No rows found.</p>}
+
+        {rows.length > 0 && (
+          <div className="test-page__rows">
+            {rows.map((row, index) => (
+              <pre key={row.id ?? index}>{JSON.stringify(row, null, 2)}</pre>
+            ))}
+          </div>
+        )}
+      </section>
+    </main>
+  );
+}

server/db.js

@@ -40,3 +40,12 @@ export async function checkDatabaseConnection() {
     now: result.rows[0].now,
   };
 }
+
+export async function getTestRows() {
+  if (!pool) {
+    throw new Error("DATABASE_URL is not set.");
+  }
+
+  const result = await pool.query("select * from test");
+  return result.rows;
+}

server/index.js

@@ -2,7 +2,7 @@ import "dotenv/config";
 import express from "express";
 import path from "path";
 import { fileURLToPath } from "url";
-import { checkDatabaseConnection } from "./db.js";
+import { checkDatabaseConnection, getTestRows } from "./db.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const app = express();
@@ -69,6 +69,18 @@ if (siteLockEnabled) {
   });
 }
 
+app.get("/api/test", async (req, res) => {
+  try {
+    const rows = await getTestRows();
+    res.json({ rows });
+  } catch (error) {
+    console.error("Failed to load test rows:", error);
+    res.status(500).json({
+      error: "Failed to load test rows.",
+    });
+  }
+});
+
 if (isProd) {
   const dist = path.join(__dirname, "../client/dist");
   app.use(express.static(dist));