Complete CRUD Project

1import { useEffect, useState } from 'react';
2

3// ── api.js — swap this fake for fetch calls to your backend ──
4const db = new Map([[1, { id: 1, name: 'Pen', price: 20 }], [2, { id: 2, name: 'Notebook', price: 60 }]]);
5let nextId = 3;
6const delay = (value, ms = 300) => new Promise(r => setTimeout(() => r(value), ms));
7const api = {
8  list: () => delay([...db.values()]),
9  create: p => { const item = { ...p, id: nextId++ }; db.set(item.id, item); return delay(item); },
10  update: p => { db.set(p.id, p); return delay(p); },
11  remove: id => (id === 999 ? Promise.reject(new Error('Server refused')) : delay(db.delete(id))),
12};
13

14// ── ProductForm — used for both create and edit ──
15function ProductForm({ initial, onSave, onCancel }) {
16  const [values, setValues] = useState(initial ?? { name: '', price: '' });
17  const [error, setError] = useState('');
18

19  function handleSubmit(e) {
20    e.preventDefault();
21    const price = Number(values.price);
22    if (values.name.trim().length < 2) return setError('Name must have at least 2 characters.');
23    if (!(price > 0)) return setError('Price must be greater than 0.');
24    onSave({ ...values, name: values.name.trim(), price });
25  }
26

27  return (
28    <form onSubmit={handleSubmit}>
29      <input value={values.name} onChange={e => setValues({ ...values, name: e.target.value })} aria-label="Name" placeholder="Name" />
30      <input value={values.price} onChange={e => setValues({ ...values, price: e.target.value })} aria-label="Price" placeholder="Price" type="number" />
31      <button>{initial ? 'Update' : 'Add'}</button>
32      {onCancel && <button type="button" onClick={onCancel}>Cancel</button>}
33      {error && <p role="alert">{error}</p>}
34    </form>
35  );
36}
37

38// ── ProductTable ──
39function ProductTable({ products, onEdit, onDelete }) {
40  if (products.length === 0) return <p>No products match.</p>;
41  return (
42    <table>
43      <thead><tr><th>Name</th><th>Price</th><th /></tr></thead>
44      <tbody>
45        {products.map(p => (
46          <tr key={p.id}>
47            <td>{p.name}</td>
48            <td>₹{p.price}</td>
49            <td>
50              <button onClick={() => onEdit(p)}>Edit</button>
51              <button onClick={() => onDelete(p)}>Delete</button>
52            </td>
53          </tr>
54        ))}
55      </tbody>
56    </table>
57  );
58}
59

60// ── ProductsPage — owns the state ──
61export default function ProductsPage() {
62  const [products, setProducts] = useState([]);
63  const [status, setStatus] = useState('loading');
64  const [error, setError] = useState('');
65  const [editing, setEditing] = useState(null);
66  const [query, setQuery] = useState('');
67

68  useEffect(() => {
69    api.list().then(list => { setProducts(list); setStatus('ready'); }).catch(() => setStatus('error'));
70  }, []);
71

72  async function handleCreate(product) {
73    const created = await api.create(product);
74    setProducts(list => [...list, created]);
75  }
76

77  async function handleUpdate(product) {
78    const saved = await api.update(product);
79    setProducts(list => list.map(p => (p.id === saved.id ? saved : p)));
80    setEditing(null);
81  }
82

83  async function handleDelete(product) {
84    if (!window.confirm(`Delete ${product.name}?`)) return;
85    const previous = products;
86    setProducts(list => list.filter(p => p.id !== product.id));   // optimistic
87    try {
88      await api.remove(product.id);
89    } catch {
90      setProducts(previous);                                         // roll back
91      setError(`Could not delete ${product.name}.`);
92    }
93  }
94

95  if (status === 'loading') return <p>Loading products…</p>;
96  if (status === 'error') return <p role="alert">Could not load products.</p>;
97

98  const visible = products.filter(p => p.name.toLowerCase().includes(query.toLowerCase()));
99

100  return (
101    <main>
102      <h1>Products ({products.length})</h1>
103      <input value={query} onChange={e => setQuery(e.target.value)} aria-label="Search" placeholder="Search" />
104      {error && <p role="alert">{error}</p>}
105      <ProductTable products={visible} onEdit={setEditing} onDelete={handleDelete} />
106      <h2>{editing ? `Edit ${editing.name}` : 'Add a product'}</h2>
107      <ProductForm
108        key={editing?.id ?? 'new'}                 // fresh form state for each product
109        initial={editing}
110        onSave={editing ? handleUpdate : handleCreate}
111        onCancel={editing ? () => setEditing(null) : null}
112      />
113    </main>
114  );
115}

“Loading products…” appears briefly, then a table with Pen and Notebook. Adding “Bag” at 650 appends a row. Clicking Edit fills the form (“Edit Pen”); Update saves and returns to “Add a product”. Delete asks for confirmation and removes the row instantly; if the server refused, the row would come back with an error message. The search box filters the table as you type.