File size: 1,610 Bytes
cce8120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import React, { useEffect, useState } from 'react';
import TestList from './components/TestList';
import TestForm from './components/TestForm';
import { fetchTests, createTest, updateTest, deleteTest } from './api';
function App() {
const [tests, setTests] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const loadTests = async () => {
try {
setLoading(true);
const data = await fetchTests();
setTests(data);
} catch (e) {
setError(e.message);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadTests();
}, []);
const handleCreate = async (newTest) => {
try {
const created = await createTest(newTest);
setTests((prev) => [...prev, created]);
} catch (e) {
setError(e.message);
}
};
const handleUpdate = async (id, updates) => {
try {
const updated = await updateTest(id, updates);
setTests((prev) => prev.map((t) => (t.id === id ? updated : t)));
} catch (e) {
setError(e.message);
}
};
const handleDelete = async (id) => {
try {
await deleteTest(id);
setTests((prev) => prev.filter((t) => t.id !== id));
} catch (e) {
setError(e.message);
}
};
return (
<div style={{ padding: '2rem' }}>
<h1>Test Items</h1>
{error && <p style={{ color: 'red' }}>{error}</p>}
<TestForm onCreate={handleCreate} />
{loading ? <p>Loading...</p> : <TestList tests={tests} onUpdate={handleUpdate} onDelete={handleDelete} />}
</div>
);
}
export default App;
|