From 1d9a02f92ff9f3313dd242a7336c7a94f4d9c436 Mon Sep 17 00:00:00 2001
From: TLimoges33 <125313326+TLimoges33@users.noreply.github.com>
Date: Thu, 28 Aug 2025 17:16:37 +0000
Subject: [PATCH] frontend: add Integrations UI (OAuth starter + events demo)

---
 modern/frontend/src/App.jsx          |  2 ++
 modern/frontend/src/Integrations.jsx | 39 ++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 modern/frontend/src/Integrations.jsx

diff --git a/modern/frontend/src/App.jsx b/modern/frontend/src/App.jsx
index 5a26902..4c7e150 100644
--- a/modern/frontend/src/App.jsx
+++ b/modern/frontend/src/App.jsx
@@ -1,10 +1,12 @@
 import React from 'react'
+import Integrations from './Integrations'
 
 export default function App(){
   return (
     <div style={{padding:20,fontFamily:'system-ui, sans-serif'}}>
       <h1>LifeRPG Modern</h1>
       <p>Welcome — frontend scaffold. Connect to backend at <code>/api/v1</code>.</p>
+      <Integrations />
     </div>
   )
 }
diff --git a/modern/frontend/src/Integrations.jsx b/modern/frontend/src/Integrations.jsx
new file mode 100644
index 0000000..908fa29
--- /dev/null
+++ b/modern/frontend/src/Integrations.jsx
@@ -0,0 +1,39 @@
+import React, {useState, useEffect} from 'react'
+
+const API = (path) => fetch(path, {credentials: 'include'}).then(r => r.json())
+
+export default function Integrations(){
+  const [integrations, setIntegrations] = useState([])
+  const [events, setEvents] = useState(null)
+  const [userId] = useState(1)
+
+  useEffect(()=>{
+    API(`/api/v1/users/${userId}/integrations`).then(d=>setIntegrations(d)).catch(()=>setIntegrations([]))
+  }, [userId])
+
+  function startGoogle(){
+    // Open backend OAuth URL in new window so the redirect can complete
+    window.open(`/api/v1/oauth/google/login?user_id=${userId}`, '_blank')
+  }
+
+  function fetchEvents(integrationId){
+    API(`/api/v1/integrations/${integrationId}/google/events`).then(d=>setEvents(d)).catch(e=>setEvents({error: String(e)}))
+  }
+
+  return (
+    <div style={{marginTop:20}}>
+      <h2>Integrations</h2>
+      <button onClick={startGoogle}>Connect Google Calendar</button>
+      <h3>Your Integrations</h3>
+      <ul>
+        {integrations && integrations.length ? integrations.map(i=> (
+          <li key={i.id}>
+            {i.provider} — id: {i.id} — user: {i.user_id} <button style={{marginLeft:8}} onClick={()=>fetchEvents(i.id)}>Fetch Events</button>
+          </li>
+        )): <li>No integrations</li>}
+      </ul>
+      <h3>Events</h3>
+      <pre style={{whiteSpace:'pre-wrap',background:'#f6f6f6',padding:10}}>{events? JSON.stringify(events, null, 2): 'No events fetched'}</pre>
+    </div>
+  )
+}