feat: update API endpoint handling in frontend components for activities, leaderboard, teams, users, and workouts

octofit-tracker/frontend/src/components/Activities.jsx

@@ -4,9 +4,12 @@ function Activities() {
   const [activities, setActivities] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
+  const endpoint = import.meta.env.VITE_CODESPACE_NAME
+    ? `https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/activities/`
+    : '/api/activities/'
 
   useEffect(() => {
-    fetch('/api/activities/')
+    fetch(endpoint)
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         return res.json()
@@ -19,7 +22,7 @@ function Activities() {
         setError(err.message)
         setLoading(false)
       })
-  }, [])
+  }, [endpoint])
 
   if (loading) return <p>Loading activities…</p>
   if (error) return <p className="text-danger">Error: {error}</p>

octofit-tracker/frontend/src/components/Leaderboard.jsx

@@ -4,9 +4,12 @@ function Leaderboard() {
   const [leaderboards, setLeaderboards] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
+  const endpoint = import.meta.env.VITE_CODESPACE_NAME
+    ? `https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/leaderboard/`
+    : '/api/leaderboard/'
 
   useEffect(() => {
-    fetch('/api/leaderboard/')
+    fetch(endpoint)
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         return res.json()
@@ -19,7 +22,7 @@ function Leaderboard() {
         setError(err.message)
         setLoading(false)
       })
-  }, [])
+  }, [endpoint])
 
   if (loading) return <p>Loading leaderboard…</p>
   if (error) return <p className="text-danger">Error: {error}</p>

octofit-tracker/frontend/src/components/Teams.jsx

@@ -4,9 +4,12 @@ function Teams() {
   const [teams, setTeams] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
+  const endpoint = import.meta.env.VITE_CODESPACE_NAME
+    ? `https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/teams/`
+    : '/api/teams/'
 
   useEffect(() => {
-    fetch('/api/teams/')
+    fetch(endpoint)
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         return res.json()
@@ -19,7 +22,7 @@ function Teams() {
         setError(err.message)
         setLoading(false)
       })
-  }, [])
+  }, [endpoint])
 
   if (loading) return <p>Loading teams…</p>
   if (error) return <p className="text-danger">Error: {error}</p>

octofit-tracker/frontend/src/components/Users.jsx

@@ -4,9 +4,12 @@ function Users() {
   const [users, setUsers] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
+  const endpoint = import.meta.env.VITE_CODESPACE_NAME
+    ? `https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/users/`
+    : '/api/users/'
 
   useEffect(() => {
-    fetch('/api/users/')
+    fetch(endpoint)
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         return res.json()
@@ -19,7 +22,7 @@ function Users() {
         setError(err.message)
         setLoading(false)
       })
-  }, [])
+  }, [endpoint])
 
   if (loading) return <p>Loading users…</p>
   if (error) return <p className="text-danger">Error: {error}</p>

octofit-tracker/frontend/src/components/Workouts.jsx

@@ -4,9 +4,12 @@ function Workouts() {
   const [workouts, setWorkouts] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
+  const endpoint = import.meta.env.VITE_CODESPACE_NAME
+    ? `https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/workouts/`
+    : '/api/workouts/'
 
   useEffect(() => {
-    fetch('/api/workouts/')
+    fetch(endpoint)
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         return res.json()
@@ -19,7 +22,7 @@ function Workouts() {
         setError(err.message)
         setLoading(false)
       })
-  }, [])
+  }, [endpoint])
 
   if (loading) return <p>Loading workouts…</p>
   if (error) return <p className="text-danger">Error: {error}</p>