useEffect + fetch: мини-приложение на React и дорожная карта

import { useEffect, useState } from "react";

export default function App() {
  const [visits, setVisits] = useState(0);

  // стенд: через 50 мс счётчик меняется (как будто пользователь вернулся)
  useEffect(() => {
    const id = setTimeout(() => setVisits(1), 50);
    return () => clearTimeout(id);
  }, []);

  // TODO: добавьте useEffect, который ОДИН раз после первого рендера
  // выведет в консоль "Страница открыта"

  console.log("рендер", visits);

  return <p>Визитов: {visits}</p>;
}

import { useEffect, useState } from "react";

// стенд: «виртуальный пользователь» выполняет шаги по таймеру
function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

export default function App() {
  const [count, setCount] = useState(0);
  const [theme, setTheme] = useState("light");

  // стенд: счёт +1, потом смена темы, потом счёт ещё +1
  useScript([
    [40, () => setCount(1)],
    [80, () => setTheme("dark")],
    [120, () => setCount(2)],
  ]);

  // TODO: эффект, который выводит "сохраняем счёт: N"
  // и срабатывает ТОЛЬКО когда изменился count (смена темы его не касается)

  return <p className={theme}>Счёт: {count}</p>;
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

export default function App() {
  const [name, setName] = useState("Мадина");
  useScript([[50, () => setName("Фарход")]]); // стенд: имя меняется через 50 мс

  // TODO: эффект, который при каждой смене name
  // 1) ставит document.title = "Привет, " + name
  // 2) выводит console.log("заголовок:", document.title)

  return <h1>Привет, {name}!</h1>;
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

function Ticker() {
  useEffect(() => {
    let n = 0;
    const id = setInterval(() => {
      n++;
      console.log("тик", n);
    }, 100);
    // TODO: верните функцию очистки: она останавливает таймер (clearInterval)
    // и выводит "таймер остановлен"
  }, []);
  return <p>Идёт отсчёт…</p>;
}

export default function App() {
  const [show, setShow] = useState(true);
  useScript([[350, () => setShow(false)]]); // стенд: через 350 мс компонент скрывают
  return show ? <Ticker /> : <p>Скрыто</p>;
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

// «подключение к комнате чата»
function connect(room) { console.log("подключились:", room); }
function disconnect(room) { console.log("отключились:", room); }

function Chat({ room }) {
  // TODO: подключайтесь к комнате, а при смене комнаты и при закрытии чата — отключайтесь
  return <p>Комната: {room}</p>;
}

export default function App() {
  const [room, setRoom] = useState("Общий");
  const [open, setOpen] = useState(true);
  // стенд: через 50 мс — другая комната, через 100 мс — чат закрывают
  useScript([
    [50, () => setRoom("Группа JS")],
    [100, () => setOpen(false)],
  ]);
  return open ? <Chat room={room} /> : <p>Чат закрыт</p>;
}

import { useEffect, useState } from "react";

const STUDENTS = [
  { id: 1, name: "Мадина" },
  { id: 2, name: "Фарход" },
  { id: 3, name: "Нилуфар" },
];

// стенд: «сервер» отвечает через 100 мс, как настоящий fetch
function fakeFetch(url) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ok: true, status: 200, json: async () => STUDENTS }), 100);
  });
}

export default function App() {
  const [status, setStatus] = useState("loading");
  const [students, setStudents] = useState([]);

  console.log("экран:", status === "loading" ? "загрузка" : `список (${students.length})`);

  // TODO: useEffect, который один раз
  // 1) вызывает fakeFetch("/api/students")
  // 2) читает response.json()
  // 3) кладёт данные в students и ставит status "success"

  if (status === "loading") return <p>Загрузка…</p>;
  return (
    <ul>
      {students.map((s) => (
        <li key={s.id}>{s.name}</li>
      ))}
    </ul>
  );
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

const STUDENTS = [
  { id: 1, name: "Мадина" },
  { id: 2, name: "Фарход" },
  { id: 3, name: "Нилуфар" },
];

// стенд: три «адреса» — список, пустой список и сломанный сервер (500)
function fakeFetch(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (url === "/api/students") resolve({ ok: true, status: 200, json: async () => STUDENTS });
      else if (url === "/api/empty") resolve({ ok: true, status: 200, json: async () => [] });
      else resolve({ ok: false, status: 500, json: async () => ({}) });
    }, 100);
  });
}

function StudentList({ url }) {
  const [status, setStatus] = useState("loading");
  const [items, setItems] = useState([]);
  const [error, setError] = useState("");

  // TODO 1: useEffect, который грузит url и ведёт status / items / error.
  // Не забудьте проверить response.ok и указать url в зависимостях.

  // TODO 2: четыре ветки отрисовки. В каждой — свой console.log:
  //   загрузка → "экран: загрузка"
  //   ошибка   → "экран: ошибка —", error
  //   пусто    → "экран: пусто"
  //   список   → "экран: список (N)"
  return null;
}

export default function App() {
  const [url, setUrl] = useState("/api/students");
  // стенд: адрес меняется дважды. key заставляет компонент начинать с чистого листа
  useScript([
    [400, () => setUrl("/api/empty")],
    [800, () => setUrl("/api/broken")],
  ]);
  return <StudentList key={url} url={url} />;
}

import { useEffect, useState } from "react";

// стенд: сервер отвечает «404 Не найдено», но fetch это ошибкой НЕ считает
function fakeFetch(url) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ok: false, status: 404, json: async () => ({ message: "Not found" }) }), 100);
  });
}

export default function App() {
  const [courses, setCourses] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fakeFetch("/api/courses")
      .then((response) => response.json())
      .then((data) => setCourses(data))
      .catch((err) => setError(err.message));
  }, []);

  if (error) {
    console.log("экран: ошибка —", error);
    return <p>{error}</p>;
  }
  if (!courses) {
    console.log("экран: загрузка");
    return <p>Загрузка…</p>;
  }
  console.log("экран: курсов", courses.length);
  return (
    <ul>
      {courses.map((c) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

// --- стенд: профиль 1 «сервер» отдаёт долго (300 мс), профиль 2 — быстро (50 мс) ---
const NAMES = { 1: "Мадина", 2: "Фарход" };
const DELAY = { 1: 300, 2: 50 };

function fakeFetch(url, { signal } = {}) {
  const id = Number(url.split("/").pop());
  return new Promise((resolve, reject) => {
    const t = setTimeout(
      () => resolve({ ok: true, status: 200, json: async () => ({ id, name: NAMES[id] }) }),
      DELAY[id]
    );
    signal?.addEventListener("abort", () => {
      clearTimeout(t);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

// --- компонент с багом ---
function Profile({ id }) {
  const [user, setUser] = useState(null);
  console.log("id", id, "→", user ? user.name : "нет данных");

  useEffect(() => {
    fakeFetch(`/api/users/${id}`)
      .then((r) => r.json())
      .then((u) => setUser(u));
  }, [id]);

  return <p>{user ? user.name : "Загрузка…"}</p>;
}

export default function App() {
  const [id, setId] = useState(1);
  useScript([[20, () => setId(2)]]); // стенд: пользователь быстро переключился с 1 на 2
  return <Profile id={id} />;
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

// стенд: отчёт «считается» 200 мс; fakeFetch понимает signal, как настоящий fetch
function fakeFetch(url, { signal } = {}) {
  return new Promise((resolve, reject) => {
    const t = setTimeout(() => resolve({ ok: true, status: 200, json: async () => ({ rows: 42 }) }), 200);
    signal?.addEventListener("abort", () => {
      clearTimeout(t);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

function Report() {
  useEffect(() => {
    console.log("запрос начат");
    // TODO: создайте AbortController, передайте signal в fakeFetch
    // и верните cleanup, который отменяет запрос
    fakeFetch("/api/report")
      .then((r) => r.json())
      .then((data) => console.log("отчёт получен, строк:", data.rows))
      .catch((err) => {
        if (err.name === "AbortError") console.log("запрос отменён");
        else console.log("ошибка:", err.message);
      });
  }, []);
  return <p>Формируем отчёт…</p>;
}

export default function App() {
  const [show, setShow] = useState(true);
  useScript([[50, () => setShow(false)]]); // стенд: через 50 мс пользователь ушёл со страницы
  return show ? <Report /> : <p>Страница закрыта</p>;
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

function useDebounce(value, delay) {
  // TODO: храните «задержанное» значение в useState;
  // в useEffect запускайте setTimeout, а в cleanup — clearTimeout.
  // Верните задержанное значение.
}

export default function App() {
  const [query, setQuery] = useState("");
  const debounced = useDebounce(query, 100);

  // стенд: пользователь печатает «плов», делает паузу, потом печатает «ш»
  useScript([
    [40, () => setQuery("п")],
    [80, () => setQuery("пл")],
    [120, () => setQuery("пло")],
    [160, () => setQuery("плов")],
    [500, () => setQuery("ш")],
  ]);

  useEffect(() => {
    console.log(`ищем: «${debounced}»`);
  }, [debounced]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Поиск" />;
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

const STUDENTS = [
  { id: 1, name: "Мадина", city: "Душанбе" },
  { id: 2, name: "Фарход", city: "Худжанд" },
  { id: 3, name: "Нилуфар", city: "Душанбе" },
  { id: 4, name: "Рустам", city: "Бохтар" },
];

export default function App() {
  const [query, setQuery] = useState("");
  const [visible, setVisible] = useState(STUDENTS);

  // ✖ лишнее состояние и эффект: visible целиком выводится из query
  useEffect(() => {
    setVisible(STUDENTS.filter((s) => s.city.toLowerCase().includes(query.toLowerCase())));
  }, [query]);

  console.log(`рендер: запрос «${query}», найдено ${visible.length}`);

  useScript([[40, () => setQuery("ду")]]); // стенд: пользователь ввёл «ду»

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Город" />
      <ul>
        {visible.map((s) => (
          <li key={s.id}>{s.name} — {s.city}</li>
        ))}
      </ul>
    </div>
  );
}

import { useEffect, useState } from "react";

function useScript(steps) {
  useEffect(() => {
    const ids = steps.map(([ms, fn]) => setTimeout(fn, ms));
    return () => ids.forEach(clearTimeout);
  }, []);
}

// --- стенд: «сервер». Не меняйте ---
const DB = {
  js: [{ id: 1, title: "JavaScript с нуля" }, { id: 2, title: "DOM и события" }, { id: 3, title: "Асинхронность" }],
  react: [{ id: 4, title: "React: первые шаги" }, { id: 5, title: "Хуки на практике" }],
  none: [],
};
const DELAY = { js: 300, react: 50, none: 50, broken: 50 };

function fakeFetch(url, { signal } = {}) {
  const topic = new URL(url, "http://x").searchParams.get("topic");
  return new Promise((resolve, reject) => {
    const t = setTimeout(() => {
      if (topic === "broken") {
        // сервер упал: статус 500, а тело — не JSON
        resolve({
          ok: false,
          status: 500,
          json: () => Promise.reject(new SyntaxError("Unexpected token 'I'")),
        });
      } else {
        resolve({ ok: true, status: 200, json: async () => DB[topic] });
      }
    }, DELAY[topic]);
    signal?.addEventListener("abort", () => {
      clearTimeout(t);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

// --- компонент от ИИ: чините ТОЛЬКО его ---
function CourseList({ topic }) {
  const [courses, setCourses] = useState([]);

  useEffect(() => {
    fakeFetch(`/api/courses?topic=${topic}`)
      .then((response) => response.json())
      .then((data) => {
        console.log("показано:", data.map((c) => c.title).join(", "));
        setCourses(data);
      })
      .catch((err) => console.log("показано: ошибка —", err.message));
  }, [topic]);

  return (
    <ul>
      {courses.map((c) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

// --- стенд: пользователь меняет тему: js → react → none → broken ---
export default function App() {
  const [topic, setTopic] = useState("js");
  useScript([
    [20, () => setTopic("react")],
    [500, () => setTopic("none")],
    [700, () => setTopic("broken")],
  ]);
  return <CourseList topic={topic} />;
}

import { useEffect, useState } from "react";

// ---------- стенд: «сервер». Не меняйте ----------
const USERS = [
  { id: 1, name: "Мадина", city: "Душанбе" },
  { id: 2, name: "Фарход", city: "Худжанд" },
  { id: 3, name: "Нилуфар", city: "Душанбе" },
  { id: 4, name: "Рустам", city: "Бохтар" },
];
let calls = 0; // сколько раз обратились к «серверу»

function fakeFetch(url, { signal } = {}) {
  calls++;
  const q = (new URL(url, "http://x").searchParams.get("q") || "").toLowerCase();
  const list = USERS.filter((u) => (u.name + " " + u.city).toLowerCase().includes(q));
  return new Promise((resolve, reject) => {
    const t = setTimeout(() => resolve({ ok: true, status: 200, json: async () => list }), 100);
    signal?.addEventListener("abort", () => {
      clearTimeout(t);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

// ---------- хук из задачи 5.3 (уже готов) ----------
function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

// ---------- ВАШЕ приложение ----------
function UsersApp() {
  const [query, setQuery] = useState("");
  const debounced = useDebounce(query, 150);
  const [status, setStatus] = useState("loading");
  const [users, setUsers] = useState([]);
  const [error, setError] = useState("");

  // TODO 1: useEffect по [debounced]: запрос "/api/users?q=" + encodeURIComponent(debounced)
  // с AbortController, проверкой response.ok, обработкой AbortError и cleanup.

  // TODO 2: верните разметку: поле <input> (value/onChange связаны с query)
  // и под ним одну из четырёх веток: загрузка / ошибка / «Ничего не найдено» / список <li>.
  return null;
}

// ---------- стенд: «пользователь» печатает в поле. Не меняйте ----------
function typeInto(input, text) {
  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
  setter.call(input, text);
  input.dispatchEvent(new Event("input", { bubbles: true }));
}

function Harness() {
  useEffect(() => {
    const input = document.querySelector("input");
    const count = () => document.querySelectorAll("li").length;
    const ids = [
      setTimeout(() => console.log("карточек после загрузки:", count()), 300),
      setTimeout(() => typeInto(input, "д"), 400),
      setTimeout(() => typeInto(input, "ду"), 440),
      setTimeout(() => {
        console.log("карточек после поиска «ду»:", count());
        console.log("запросов к серверу:", calls);
      }, 900),
    ];
    return () => ids.forEach(clearTimeout);
  }, []);
  return null;
}

export default function App() {
  return (
    <>
      <UsersApp />
      <Harness />
    </>
  );
}