React Integration

1// vite.config.js
2export default defineConfig({
3  plugins: [react()],
4  server: { proxy: { '/api': 'http://localhost:3000' } },
5});

1// ── src/api/client.js ──
2const BASE_URL = import.meta.env.VITE_API_URL ?? '';         // '' → same origin (Vite proxy in dev)
3

4export class ApiError extends Error {
5  constructor(status, problem) {
6    super(problem.detail ?? problem.error ?? 'Request failed');
7    this.status = status;
8    this.errors = problem.errors ?? [];
9  }
10}
11

12export async function api(path, { method = 'GET', body, signal } = {}) {
13  const res = await fetch(BASE_URL + path, {
14    method,
15    signal,
16    credentials: 'include',                                   // send the httpOnly auth cookie
17    headers: body ? { 'Content-Type': 'application/json' } : undefined,
18    body: body ? JSON.stringify(body) : undefined,
19  });
20  if (res.status === 401) {
21    window.location.assign('/login?returnTo=' + encodeURIComponent(window.location.pathname));
22    throw new ApiError(401, { detail: 'Please sign in again' });
23  }
24  const data = res.status === 204 ? null : await res.json();
25  if (!res.ok) throw new ApiError(res.status, data ?? {});
26  return data;
27}
28

29export const getCourses = (level, signal) => api(`/api/v1/courses?level=${level}`, { signal });
30export const enroll = courseId => api(`/api/v1/courses/${courseId}/enrollments`, { method: 'POST' });
31

32// ── src/CoursesPage.jsx ──
33import { useEffect, useState } from 'react';
34

35export default function CoursesPage() {
36  const [level, setLevel] = useState('beginner');
37  const [state, setState] = useState({ status: 'loading', courses: [], error: null });
38  const [message, setMessage] = useState('');
39

40  useEffect(() => {
41    const controller = new AbortController();
42    setState(s => ({ ...s, status: 'loading' }));
43    getCourses(level, controller.signal)
44      .then(result => setState({ status: 'ready', courses: result.data, error: null }))
45      .catch(err => { if (err.name !== 'AbortError') setState({ status: 'error', courses: [], error: err.message }); });
46    return () => controller.abort();                          // cancel if level changes or the page unmounts
47  }, [level]);
48

49  async function handleEnroll(course) {
50    try {
51      await enroll(course.id);
52      setMessage(`You are enrolled in ${course.title}`);
53    } catch (err) {
54      setMessage(err.status === 409 ? 'You are already enrolled' : err.message);
55    }
56  }
57

58  return (
59    <section>
60      <h1>Courses</h1>
61      <select value={level} onChange={e => setLevel(e.target.value)}>
62        <option value="beginner">Beginner</option>
63        <option value="intermediate">Intermediate</option>
64        <option value="advanced">Advanced</option>
65      </select>
66      {message && <p role="status">{message}</p>}
67

68      {state.status === 'loading' && <p>Loading courses…</p>}
69      {state.status === 'error' && <p role="alert">Could not load courses: {state.error}</p>}
70      {state.status === 'ready' && state.courses.length === 0 && <p>No {level} courses yet.</p>}
71      {state.status === 'ready' && (
72        <ul>
73          {state.courses.map(course => (
74            <li key={course.id}>
75              {course.title} — ₹{course.price}
76              <button onClick={() => handleEnroll(course)}>Enroll</button>
77            </li>
78          ))}
79        </ul>
80      )}
81    </section>
82  );
83}

The page shows “Loading courses…”, then the beginner courses from the API. Switching the level cancels the previous request and loads the new list. Clicking Enroll shows “You are enrolled in …”, or “You are already enrolled” for a 409. If the session has expired, the API answers 401 and the user is sent to /login?returnTo=/courses.