>();
+ 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 (
+ <>
+ List Page New
+ {isLoading && Loading...
}
+ {error && Произошла ошибка
}
+ {data?.map((item) => {
+ return (
+
+ {item.id}: {item.title} - {item.description}
+
+ );
+ })}
+ >
+ );
};
export default ListPage;
diff --git a/stubs/api/index.js b/stubs/api/index.js
index d2cd565..9ada2bf 100644
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@@ -1,3 +1,12 @@
const router = require('express').Router();
-
+const listRouter = require('./list');
module.exports = router;
+
+const delay =
+ (ms = 1000) =>
+ (req, res, next) => {
+ setTimeout(next, ms);
+ };
+
+router.use(delay());
+router.use('/list', listRouter);
diff --git a/stubs/api/list/data/list.json b/stubs/api/list/data/list.json
new file mode 100644
index 0000000..25aa45d
--- /dev/null
+++ b/stubs/api/list/data/list.json
@@ -0,0 +1,7 @@
+[
+ { "id": 1, "title": "title", "description": "description" },
+ { "id": 2, "title": "title", "description": "description" },
+ { "id": 3, "title": "title", "description": "description" },
+ { "id": 4, "title": "title", "description": "description" },
+ { "id": 5, "title": "title", "description": "description" }
+]
\ No newline at end of file
diff --git a/stubs/api/list/index.js b/stubs/api/list/index.js
new file mode 100644
index 0000000..3cd65c8
--- /dev/null
+++ b/stubs/api/list/index.js
@@ -0,0 +1,12 @@
+const router = require('express').Router();
+
+module.exports = router;
+
+const data = require('./data/list.json');
+
+router.get('/', (req, res) => {
+ res.send(data);
+ // res.status(500).send({
+ // message: 'Internal server error'
+ // });
+});