From 0fe463e33a8662a278b5c6d94109dd4da7729a72 Mon Sep 17 00:00:00 2001
From: grinikita <nekitboy@yandex.ru>
Date: Sat, 7 Dec 2024 13:43:07 +0300
Subject: [PATCH] =?UTF-8?q?=D0=91=D0=B0=D0=B7=D0=BE=D0=B2=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D1=81=D0=B5=D1=82=D0=B5=D0=B2=D1=8B=D0=B5=20=D0=B7=D0=B0=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=81=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/container/list/index.tsx  | 41 +++++++++++++++++++++++++++++++++--
 stubs/api/index.js            | 11 +++++++++-
 stubs/api/list/data/list.json |  7 ++++++
 stubs/api/list/index.js       | 12 ++++++++++
 4 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 stubs/api/list/data/list.json
 create mode 100644 stubs/api/list/index.js

diff --git a/src/container/list/index.tsx b/src/container/list/index.tsx
index c007699..1bfa56c 100644
--- a/src/container/list/index.tsx
+++ b/src/container/list/index.tsx
@@ -1,8 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Heading from '../../components/heading';
 
 const ListPage = (): React.ReactElement => {
-  return <Heading>List Page New 2</Heading>;
+  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;
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'
+  // });
+});