From c040402e9b7be54fce884487430fc81b65bf827c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=9D=D0=B5=D0=BA=D1=80?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BE=D0=B2?= <nas_box@rambler.ru>
Date: Tue, 9 Sep 2025 18:24:53 +0300
Subject: [PATCH 1/3] add useFetch

---
 src/App.jsx      | 27 ++++++++++++++++++++-------
 src/index.css    | 30 +++++++++++++++++++++++++++++-
 src/main.jsx     | 14 +++++++-------
 src/useFetch.jsx | 29 +++++++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 15 deletions(-)
 create mode 100644 src/useFetch.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 68a8840..ed255b3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,29 @@
-import { useState } from "react";
 import "./App.css";
+import { useFetch } from "./useFetch";
 
-function App() {
-  const [count, setCount] = useState(0);
+const URL = "https://jsonplaceholder.typicode.com/posts";
+
+export function App() {
+  const { data, isLoading, error, refetch } = useFetch(URL);
 
   return (
     <>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+      {error && <p>Ошибка: {error}</p>}
+      <div>
+        <button onClick={refetch}>{isLoading ? "Загрузка..." : "Обновить"}</button>
+        {data && (
+          <div class={"container"}>
+            <ul>
+              {data.map((item) => (
+                <li key={item.id}>
+                  <p>{item.title}</p>
+                  <div>{item.body}</div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
       </div>
     </>
   );
 }
-
-export default App;
diff --git a/src/index.css b/src/index.css
index 76c681d..c67629d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,7 +25,7 @@ body {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
+  border: 1px solid gray;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
@@ -33,6 +33,7 @@ button {
   background-color: #f9f9f9;
   cursor: pointer;
   transition: border-color 0.25s;
+  width: 200px;
 }
 button:hover {
   border-color: #646cff;
@@ -41,3 +42,30 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+ul {
+  list-style: none;
+}
+
+li {
+  background-color: rgb(251 248 232);
+  border-radius: 8px;
+  border: 1px gray solid;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+
+li p {
+  text-align: center;
+  font-weight: bold;
+}
+
+li div {
+  text-align: justify;
+}
+
+.container {
+  margin-right: auto;
+  text-align: center;
+  margin-left: auto;
+}
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..6d2f6cb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { App } from "./App.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);
diff --git a/src/useFetch.jsx b/src/useFetch.jsx
new file mode 100644
index 0000000..f848a93
--- /dev/null
+++ b/src/useFetch.jsx
@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useFetch(url) {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const res = await fetch(url);
+
+      const json = await res.json();
+      setData(json);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, isLoading, error, refetch: fetchData };
+}

From b8b12cf19e8373bdc2260839199f7dbb8b450a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=9D=D0=B5=D0=BA=D1=80?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BE=D0=B2?= <nas_box@rambler.ru>
Date: Tue, 30 Sep 2025 18:45:38 +0300
Subject: [PATCH 2/3] update fetch

---
 src/useFetch.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/useFetch.jsx b/src/useFetch.jsx
index f848a93..63ab818 100644
--- a/src/useFetch.jsx
+++ b/src/useFetch.jsx
@@ -11,9 +11,7 @@ export function useFetch(url) {
       setError(null);
 
       const res = await fetch(url);
-
-      const json = await res.json();
-      setData(json);
+      setData(res.json());
     } catch (e) {
       setError(e.message);
     } finally {

From d044f816adbe1476b83da41f45300c747d109962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=9D=D0=B5=D0=BA=D1=80?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BE=D0=B2?= <nas_box@rambler.ru>
Date: Wed, 1 Oct 2025 16:50:01 +0300
Subject: [PATCH 3/3] update style

---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index c67629d..8562c9e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,7 +16,7 @@
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  place-items: flex-start;
   min-width: 320px;
   min-height: 100vh;
   color: #213547;