ADD - Airtable sync and status sync pg

Author: MeMMa137

client/src/components/TestPage.css

@@ -24,10 +24,52 @@
   font-size: 1.1rem;
 }
 
+.test-page__sync {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0 0 24px;
+  padding: 16px;
+  border: 3px solid #162456;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.test-page__sync div {
+  display: grid;
+  gap: 4px;
+}
+
+.test-page__sync strong,
+.test-page__sync span {
+  font-size: 1rem;
+}
+
+.test-page__sync button {
+  padding: 10px 18px;
+  border: 3px solid #162456;
+  border-radius: 999px;
+  background: #ffd84d;
+  color: #162456;
+  font: inherit;
+  cursor: pointer;
+  box-shadow: 4px 4px 0 #162456;
+}
+
+.test-page__sync button:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
 .test-page__error {
   color: #b3261e;
 }
 
+.test-page__success {
+  color: #146c2e;
+}
+
 .test-page__rows {
   display: grid;
   gap: 16px;
@@ -43,3 +85,10 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.95rem;
 }
+
+@media (max-width: 600px) {
+  .test-page__sync {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}

client/src/components/TestPage.jsx

@@ -5,6 +5,10 @@ export function TestPage() {
   const [rows, setRows] = useState([]);
   const [status, setStatus] = useState("Loading test rows...");
   const [error, setError] = useState("");
+  const [syncStatus, setSyncStatus] = useState(null);
+  const [syncError, setSyncError] = useState("");
+  const [syncMessage, setSyncMessage] = useState("");
+  const [isSyncing, setIsSyncing] = useState(false);
 
   useEffect(() => {
     let isMounted = true;
@@ -31,19 +35,113 @@ export function TestPage() {
       }
     }
 
+    async function loadSyncStatus() {
+      try {
+        const response = await fetch("/api/airtable/status");
+        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 sync status.");
+        }
+
+        if (isMounted) {
+          setSyncStatus(data);
+          setSyncError("");
+        }
+      } catch (err) {
+        if (isMounted) {
+          setSyncError(err.message);
+        }
+      }
+    }
+
     loadRows();
+    loadSyncStatus();
 
     return () => {
       isMounted = false;
     };
   }, []);
 
+  async function loadRows() {
+    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.");
+    }
+
+    setRows(data.rows || []);
+  }
+
+  async function loadSyncStatus() {
+    const response = await fetch("/api/airtable/status");
+    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 sync status.");
+    }
+
+    setSyncStatus(data);
+    setSyncError("");
+    return data;
+  }
+
+  async function handleSyncNow() {
+    setIsSyncing(true);
+    setSyncError("");
+    setSyncMessage("");
+
+    try {
+      const response = await fetch("/api/airtable/sync", {
+        method: "POST",
+      });
+      const isJson = response.headers.get("content-type")?.includes("application/json");
+      const data = isJson ? await response.json() : {};
+
+      if (!response.ok) {
+        throw new Error(data.error || data.message || "Failed to sync Airtable.");
+      }
+
+      setSyncMessage("Sync finished.");
+      setSyncStatus((currentStatus) => ({
+        ...currentStatus,
+        lastSync: data,
+      }));
+      await Promise.all([loadRows(), loadSyncStatus()]);
+    } catch (err) {
+      setSyncError(err.message);
+    } finally {
+      setIsSyncing(false);
+    }
+  }
+
+  const lastSyncTime = syncStatus?.lastSync?.syncedAt
+    ? new Date(syncStatus.lastSync.syncedAt).toLocaleString()
+    : "Never synced";
+
   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>
 
+        <div className="test-page__sync">
+          <div>
+            <strong>Airtable sync</strong>
+            <span>Last update: {lastSyncTime}</span>
+          </div>
+          <button type="button" onClick={handleSyncNow} disabled={isSyncing}>
+            {isSyncing ? "Syncing..." : "Sync now"}
+          </button>
+        </div>
+
+        {syncMessage && <p className="test-page__success">{syncMessage}</p>}
+        {syncError && <p className="test-page__error">{syncError}</p>}
+
         {status && <p>{status}</p>}
         {error && <p className="test-page__error">{error}</p>}
 

package-lock.json

@@ -13,5 +13,8 @@
   },
   "devDependencies": {
     "concurrently": "^9.1.0"
+  },
+  "dependencies": {
+    "airtable": "^0.12.2"
   }
 }