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 />
    </>
  );
}