46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import Heading from '../../components/heading';
|
||
|
||
const ListPage = (): React.ReactElement => {
|
||
const [error, setError] = useState<string>(null);
|
||
const [data, setData] = useState<Array<{ id: number; title: string; description: string }>>();
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
const handle = async () => {
|
||
setIsLoading(true);
|
||
try {
|
||
const res = await fetch('/api/list');
|
||
const data = await res.json();
|
||
if (res.ok) {
|
||
setData(data);
|
||
} else {
|
||
setError(data.message);
|
||
}
|
||
} catch (e) {
|
||
setError(e.message);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
handle();
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<Heading>List Page New</Heading>
|
||
{isLoading && <div>Loading...</div>}
|
||
{error && <div>Произошла ошибка</div>}
|
||
{data?.map((item) => {
|
||
return (
|
||
<div key={item.id}>
|
||
{item.id}: {item.title} - {item.description}
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ListPage;
|