React + ASP.NET Core API Project

1const res = await fetch(`${API}/api/products`, { headers: { Authorization: `Bearer ${token}` } });
2if (res.status === 400) { const problem = await res.json(); setErrors(problem.errors); }

1// src/api.ts
2const API = import.meta.env.VITE_API_URL ?? 'https://localhost:7046';
3let accessToken: string | null = null;
4

5export interface Product { id: number; name: string; price: number }
6export type FieldErrors = Record<string, string[]>;
7

8export class ApiError extends Error {
9  constructor(public status: number, message: string, public errors: FieldErrors = {}) { super(message); }
10}
11

12async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
13  const res = await fetch(`${API}${path}`, {
14    ...init,
15    headers: {
16      'Content-Type': 'application/json',
17      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
18      ...init.headers,
19    },
20  });
21  if (res.status === 204) return undefined as T;
22  const body = await res.json().catch(() => ({}));
23  if (!res.ok) throw new ApiError(res.status, body.title ?? res.statusText, body.errors ?? {});
24  return body as T;
25}
26

27export async function login(email: string, password: string) {
28  const result = await request<{ accessToken: string }>('/api/auth/login', { method: 'POST', body: JSON.stringify({ email, password }) });
29  accessToken = result.accessToken;                       // kept in memory, not localStorage
30}
31export const getProducts = () => request<Product[]>('/api/products');
32export const createProduct = (input: { name: string; price: number }) =>
33  request<Product>('/api/products', { method: 'POST', body: JSON.stringify(input) });
34

35// src/ProductsPage.tsx
36import { useEffect, useState, type FormEvent } from 'react';
37import { ApiError, createProduct, getProducts, type FieldErrors, type Product } from './api';
38

39export default function ProductsPage({ onUnauthorized }: { onUnauthorized: () => void }) {
40  const [products, setProducts] = useState<Product[] | null>(null);
41  const [loadError, setLoadError] = useState('');
42  const [errors, setErrors] = useState<FieldErrors>({});
43  const [saving, setSaving] = useState(false);
44

45  useEffect(() => {
46    getProducts()
47      .then(setProducts)
48      .catch((err: unknown) => {
49        if (err instanceof ApiError && err.status === 401) onUnauthorized();
50        else setLoadError('Could not load products. Please try again.');
51      });
52  }, [onUnauthorized]);
53

54  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
55    event.preventDefault();
56    const form = new FormData(event.currentTarget);
57    const formElement = event.currentTarget;
58    setSaving(true);
59    setErrors({});
60    try {
61      const created = await createProduct({ name: String(form.get('name')), price: Number(form.get('price')) });
62      setProducts(list => [...(list ?? []), created]);
63      formElement.reset();
64    } catch (err) {
65      if (err instanceof ApiError && err.status === 400) setErrors(err.errors);   // server validation → fields
66      else if (err instanceof ApiError && err.status === 401) onUnauthorized();
67      else setErrors({ '': ['Something went wrong. Please try again.'] });
68    } finally {
69      setSaving(false);
70    }
71  }
72

73  if (loadError) return <p role="alert">{loadError}</p>;
74  if (!products) return <p>Loading products…</p>;
75

76  return (
77    <main>
78      <h1>Products</h1>
79      <ul>{products.map(p => <li key={p.id}>{p.name} — ₹{p.price}</li>)}</ul>
80

81      <form onSubmit={handleSubmit} noValidate>
82        <label>Name <input name="name" /></label>
83        {errors.Name?.map(m => <small key={m} className="error">{m}</small>)}
84        <label>Price <input name="price" type="number" step="0.01" /></label>
85        {errors.Price?.map(m => <small key={m} className="error">{m}</small>)}
86        {errors['']?.map(m => <p key={m} role="alert">{m}</p>)}
87        <button disabled={saving}>{saving ? 'Saving…' : 'Add product'}</button>
88      </form>
89    </main>
90  );
91}

With the API running, the page shows “Loading products…”, then the list. Submitting an empty name and price 0 shows “The Name field is required.” and “The field Price must be between 0.01 and 1000000.” under the inputs — the API’s own validation messages. A valid product appears in the list immediately; an expired token sends the user back to the login screen.