Базовые сетевые запросы

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;