Better handling of react app

client/src/pages/AdminMembers.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+
+export default function AdminMembers() {
+  const [year, setYear] = useState("");
+  const [file, setFile] = useState(null);
+  const [status, setStatus] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!year) {
+      setStatus("⚠️ Please enter a year.");
+      return;
+    }
+    if (!file) {
+      setStatus("⚠️ Please select a CSV file.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("year", year);
+    formData.append("members.csv", file); // name must match the Go handler
+
+    try {
+      const resp = await fetch("/api/admin/members", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await resp.json();
+
+      if (data.success) {
+        setStatus(`✅ Uploaded!`);
+      } else {
+        setStatus(`❌ Server error: ${data.error}`);
+      }
+    } catch (err) {
+      setStatus(`❌ Network error: ${err.message}`);
+    }
+  };
+
+  return (
+    <div style={{ padding: "2rem" }}>
+      <h2>Upload Members CSV</h2>
+      <form onSubmit={handleSubmit}>
+        <div style={{ marginBottom: "1rem" }}>
+          <label htmlFor="year">Year:</label>
+           
+          <input
+            type="number"
+            id="year"
+            name="year"
+            value={year}
+            onChange={(e) => setYear(e.target.value)}
+            required
+            min="1900"
+            max="2100"
+            style={{ width: "150px", padding: "0.3rem" }}
+          />
+        </div>
+
+        <div style={{ marginBottom: "1rem" }}>
+          <label htmlFor="members.csv">CSV File:</label>
+           
+          <input
+            type="file"
+            id="members.csv"
+            name="members.csv"
+            accept=".csv"
+            onChange={(e) => setFile(e.target.files[0])}
+            required
+          />
+        </div>
+
+        <button type="submit" style={{ padding: "0.5rem 1rem" }}>
+          Upload
+        </button>
+      </form>
+
+      {status && <p style={{ marginTop: "1rem" }}>{status}</p>}
+    </div>
+  );
+}

client/src/pages/AdminMembersPage.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import MembersForm from '../components/MembersForm';
-
-function AdminMembersPage() {
-  return (
-    <div className="admin-members-page">
-      <h1>Upload Members</h1>
-      <MembersForm />
-    </div>
-  );
-}
-
-export default AdminMembersPage;

client/src/pages/Home.js

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <div style={{ padding: "2rem" }}>
+      <h1>Welcome!</h1>
+      <p>This is the landing page. Use the navigation bar to go to the admin page.</p>
+    </div>
+  );
+}