Add lesson 32

AndreyOsipuk · AndreyOsipuk · commit e3ca927359b8 · 2025-09-29T18:49:23.000+03:00
diff --git a/lessons/lesson32/code/package.json b/lessons/lesson32/code/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "react-typescript",
+  "version": "1.0.0",
+  "description": "React and TypeScript example starter project",
+  "keywords": [
+    "typescript",
+    "react",
+    "starter"
+  ],
+  "main": "src/index.tsx",
+  "dependencies": {
+    "loader-utils": "3.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-scripts": "5.0.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/dom": "10.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.38",
+    "@types/react-dom": "18.2.15",
+    "typescript": "4.4.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/lessons/lesson32/code/public/index.html b/lessons/lesson32/code/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/lessons/lesson32/code/src/App.tsx b/lessons/lesson32/code/src/App.tsx
@@ -0,0 +1,10 @@
+import "./styles.css";
+
+export default function App() {
+  return (
+    <div className="App">
+      <h1>Hello CodeSandbox</h1>
+      <h2>Start editing to see some magic happen!</h2>
+    </div>
+  );
+}
diff --git a/lessons/lesson32/code/src/hooks/useDebounce.test.tsx b/lessons/lesson32/code/src/hooks/useDebounce.test.tsx
@@ -0,0 +1,48 @@
+import { renderHook, act } from "@testing-library/react";
+import { useDebounce } from "./useDebounce";
+
+// Используем фейковые таймеры Jest для управления временем в тестах
+jest.useFakeTimers();
+
+describe("useDebounce", () => {
+  it("должен возвращать начальное значение немедленно", () => {
+    const { result } = renderHook(() => useDebounce("initial", 500));
+    expect(result.current).toBe("initial");
+  });
+
+  it("не должен обновлять значение до истечения задержки", () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      {
+        initialProps: { value: "a", delay: 500 },
+      }
+    );
+
+    rerender({ value: "b", delay: 500 });
+
+    expect(result.current).toBe("a");
+
+    act(() => {
+      jest.advanceTimersByTime(499);
+    });
+
+    expect(result.current).toBe("a");
+  });
+
+  it("должен обновить значение после истечения задержки", () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      {
+        initialProps: { value: "a", delay: 500 },
+      }
+    );
+
+    rerender({ value: "b", delay: 500 });
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(result.current).toBe("b");
+  });
+});
diff --git a/lessons/lesson32/code/src/hooks/useDebounce.tsx b/lessons/lesson32/code/src/hooks/useDebounce.tsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Хук, который возвращает значение с задержкой.
+ * @param {*} value - Значение, которое нужно "отложить".
+ * @param {number} delay - Задержка в миллисекундах.
+ * @returns {*} - "Отложенное" значение.
+ */
+export function useDebounce(value, delay) {
+  // TODO: Реализуйте хук.
+  // 1. Создайте состояние `debouncedValue` для хранения "отложенного" значения.
+  // 2. Используйте `useEffect` для установки таймера (`setTimeout`).
+  //    - Эффект должен срабатывать, когда `value` или `delay` изменяются.
+  //    - Внутри таймера, по истечении `delay`, обновите `debouncedValue` на текущее `value`.
+  // 3. Не забудьте про функцию очистки в `useEffect`! Она должна отменять предыдущий
+  //    таймер (`clearTimeout`), если `value` изменилось до того, как таймер сработал.
+  // 4. Верните `debouncedValue`.
+
+  // Заглушка
+  return value;
+}
diff --git a/lessons/lesson32/code/src/hooks/useDocumentTitle.test.tsx b/lessons/lesson32/code/src/hooks/useDocumentTitle.test.tsx
@@ -0,0 +1,38 @@
+import { renderHook } from "@testing-library/react";
+import { useDocumentTitle } from "./useDocumentTitle";
+
+describe("useDocumentTitle", () => {
+  const originalTitle = document.title;
+
+  afterEach(() => {
+    document.title = originalTitle;
+  });
+
+  it("должен устанавливать заголовок документа", () => {
+    renderHook(() => useDocumentTitle("Новый заголовок"));
+    expect(document.title).toBe("Новый заголовок");
+  });
+
+  it("должен обновлять заголовок документа при изменении", () => {
+    const { rerender } = renderHook(({ title }) => useDocumentTitle(title), {
+      initialProps: { title: "Первый заголовок" },
+    });
+
+    expect(document.title).toBe("Первый заголовок");
+
+    rerender({ title: "Второй заголовок" });
+    expect(document.title).toBe("Второй заголовок");
+  });
+
+  it("должен (опционально) восстанавливать исходный заголовок при размонтировании", () => {
+    const { unmount } = renderHook(() =>
+      useDocumentTitle("Временный заголовок")
+    );
+
+    expect(document.title).toBe("Временный заголовок");
+
+    unmount();
+
+    expect(document.title).toBe(originalTitle);
+  });
+});
diff --git a/lessons/lesson32/code/src/hooks/useDocumentTitle.tsx b/lessons/lesson32/code/src/hooks/useDocumentTitle.tsx
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+
+/**
+ * Хук для динамического изменения заголовка документа (вкладки браузера).
+ * @param {string} title - Новый заголовок.
+ */
+export function useDocumentTitle(title) {
+  // TODO: Реализуйте хук.
+  // 1. Используйте `useEffect` для обновления `document.title`.
+  //    - Эффект должен применяться каждый раз, когда изменяется `title`.
+  // 2. (Опционально, для лучшей практики) Добавьте функцию очистки,
+  //    которая будет возвращать исходный заголовок документа,
+  //    когда компонент, использующий хук, размонтируется.
+}
diff --git a/lessons/lesson32/code/src/hooks/useInput.test.tsx b/lessons/lesson32/code/src/hooks/useInput.test.tsx
@@ -0,0 +1,20 @@
+import { renderHook, act } from "@testing-library/react";
+import { useInput } from "./useInput";
+
+describe("useInput", () => {
+  it("должен устанавливать начальное значение", () => {
+    const { result } = renderHook(() => useInput("начальное значение"));
+    expect(result.current.value).toBe("начальное значение");
+  });
+
+  it("должен обновлять значение при вызове onChange", () => {
+    const { result } = renderHook(() => useInput(""));
+
+    // act() гарантирует, что все обновления состояния будут обработаны
+    act(() => {
+      result.current.onChange({ target: { value: "новое значение" } });
+    });
+
+    expect(result.current.value).toBe("новое значение");
+  });
+});
diff --git a/lessons/lesson32/code/src/hooks/useInput.tsx b/lessons/lesson32/code/src/hooks/useInput.tsx
@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+/**
+ * @param {string} initialValue - Начальное значение поля.
+ * @returns {{value: string, onChange: function}} - Объект со значением и обработчиком.
+ */
+export function useInput(initialValue = "") {
+  // TODO: Реализуйте хук.
+  // 1. Создайте состояние для хранения значения поля с помощью useState.
+  // 2. Создайте функцию-обработчик onChange, которая будет обновлять это состояние, получая значение из event.target.value.
+  // 3. Верните объект, содержащий текущее значение (value) и обработчик (onChange).
+}
diff --git a/lessons/lesson32/code/src/hooks/useLocalStorage.test.tsx b/lessons/lesson32/code/src/hooks/useLocalStorage.test.tsx
@@ -0,0 +1,36 @@
+import { renderHook, act } from "@testing-library/react";
+import { useLocalStorage } from "./useLocalStorage";
+
+const TEST_KEY = "test-key";
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe("useLocalStorage", () => {
+  it("должен возвращать initialValue, если в localStorage пусто", () => {
+    const { result } = renderHook(() => useLocalStorage(TEST_KEY, "default"));
+    expect(result.current[0]).toBe("default");
+  });
+
+  it("должен читать существующее значение из localStorage", () => {
+    window.localStorage.setItem(TEST_KEY, JSON.stringify("stored value"));
+
+    const { result } = renderHook(() => useLocalStorage(TEST_KEY, "default"));
+    expect(result.current[0]).toBe("stored value");
+  });
+
+  it("должен обновлять значение и записывать его в localStorage", () => {
+    const { result } = renderHook(() => useLocalStorage(TEST_KEY, ""));
+
+    act(() => {
+      const setValue = result.current[1];
+      setValue("new value");
+    });
+
+    expect(result.current[0]).toBe("new value");
+
+    const storedValue = window.localStorage.getItem(TEST_KEY);
+    expect(JSON.parse(storedValue)).toBe("new value");
+  });
+});
diff --git a/lessons/lesson32/code/src/hooks/useLocalStorage.tsx b/lessons/lesson32/code/src/hooks/useLocalStorage.tsx
@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+/**
+ * @param {string} key - Ключ для хранения в localStorage.
+ * @param {*} initialValue - Начальное значение.
+ * @returns {[*, function]} - Массив, аналогичный результату useState.
+ */
+export function useLocalStorage(key, initialValue) {
+  // TODO: Реализуйте хук.
+  // 1. В useState используйте функцию для ленивой инициализации, чтобы чтение из localStorage происходило только один раз.
+  //    - Внутри этой функции попробуйте прочитать значение из localStorage по ключу (`window.localStorage.getItem(key)`).
+  //    - Если там что-то есть, используйте `JSON.parse()` для этого значения и верните его.
+  //    - Если там пусто или произошла ошибка (используйте try...catch), верните `initialValue`.
+  // 2. Используйте `useEffect` для сохранения нового значения в localStorage при его изменении.
+  //    - Эффект должен срабатывать каждый раз, когда меняется `key` или `value`.
+  //    - Внутри эффекта используйте `JSON.stringify()` для сохранения значения в localStorage.
+  // 3. Верните массив `[value, setValue]`, как это делает `useState`.
+}
diff --git a/lessons/lesson32/code/src/index.tsx b/lessons/lesson32/code/src/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const rootElement = document.getElementById("root")!;
+const root = ReactDOM.createRoot(rootElement);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/lessons/lesson32/code/src/styles.css b/lessons/lesson32/code/src/styles.css
@@ -0,0 +1,4 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}
diff --git a/lessons/lesson32/code/tsconfig.json b/lessons/lesson32/code/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "es2015"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/lessons/lesson32/lesson.md b/lessons/lesson32/lesson.md
