{"id":27166017,"url":"https://github.com/viktorsvertoka/goit-typescript-hw-04","last_synced_at":"2026-02-11T00:02:00.295Z","repository":{"id":206310315,"uuid":"708540114","full_name":"ViktorSvertoka/goit-typescript-hw-04","owner":"ViktorSvertoka","description":"Homework for the course TypeScript📘","archived":false,"fork":false,"pushed_at":"2023-11-08T23:43:46.000Z","size":179,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-20T22:54:49.258Z","etag":null,"topics":["goit","goit-typescript-hw-04","html5","javascript","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ViktorSvertoka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-22T21:09:19.000Z","updated_at":"2024-11-22T20:11:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"e82707f3-5656-4259-8ba6-70cbc7c76b52","html_url":"https://github.com/ViktorSvertoka/goit-typescript-hw-04","commit_stats":null,"previous_names":["viktorsvertoka/goit-typescript-hw-04"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ViktorSvertoka/goit-typescript-hw-04","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViktorSvertoka%2Fgoit-typescript-hw-04","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViktorSvertoka%2Fgoit-typescript-hw-04/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViktorSvertoka%2Fgoit-typescript-hw-04/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViktorSvertoka%2Fgoit-typescript-hw-04/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ViktorSvertoka","download_url":"https://codeload.github.com/ViktorSvertoka/goit-typescript-hw-04/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ViktorSvertoka%2Fgoit-typescript-hw-04/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29322733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T20:44:44.282Z","status":"ssl_error","status_checked_at":"2026-02-10T20:44:43.393Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["goit","goit-typescript-hw-04","html5","javascript","typescript"],"created_at":"2025-04-09T03:37:28.750Z","updated_at":"2026-02-11T00:02:00.270Z","avatar_url":"https://github.com/ViktorSvertoka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Завдання 1\n\nУ вас є компонент React, який використовує useRef та IntersectionObserver для визначення, коли користувач переглядає кінець вмісту. Ваше завдання полягає в наступному:\n\nВстановіть правильні типи пропсів для цього компонента. У ньому є дві властивості: children і onContentEndVisible. children - це будь-який валідний React вузол, а onContentEndVisible - це функція без аргументів, що повертає void.\n\nВстановіть правильний тип useRef. Посилання endContentRef використовується для div, який міститься в кінці вмісту.\n\nВстановіть правильний тип для options (клас також може бути типом для options).\n\n```ts\nimport React, { useEffect, useRef } from \"react\";\n\n// Опишіть Props\nexport function Observer({ children, onContentEndVisible }: Props) {\n  // Вкажіть правильний тип для useRef зверніть увагу, в який DOM елемент ми його передаємо\n  const endContentRef = useRef(null);\n\n  useEffect(() =\u003e {\n    // Вкажіть правильний тип для options, підказка, клас також можна вказувати як тип\n    const options = {\n      rootMargin: \"0px\",\n      threshold: 1.0,\n      root: null,\n    };\n\n    const observer = new IntersectionObserver((entries) =\u003e {\n      entries.forEach((entry) =\u003e {\n        if (entry.intersectionRatio \u003e 0) {\n          onContentEndVisible();\n          observer.disconnect();\n        }\n      });\n    }, options);\n\n    if (endContentRef.current) {\n      observer.observe(endContentRef.current);\n    }\n\n    return () =\u003e {\n      observer.disconnect();\n    };\n  }, [onContentEndVisible]);\n\n  return (\n    \u003cdiv\u003e\n      {children}\n      \u003cdiv ref={endContentRef} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n# Завдання 2\n\nВаше завдання – додати типи для наступних елементів коду:\n\nRequestStep: Це рядковий літерал.\n\nState: Цей тип являє собою об'єкт з двома властивостями isRequestInProgress і RequestStep\n\nAction: Це тип, що представляє можливі дії, які можуть бути відправлені до редюсера.\n\nДивіться код і опишіть для нього правильні типи.\n\n```ts\nimport React, { useReducer } from \"react\";\n\nconst initialState: State = {\n  isRequestInProgress: false,\n  requestStep: \"idle\",\n};\n\nfunction requestReducer(state: State, action: Action): State {\n  switch (action.type) {\n    case \"START_REQUEST\":\n      return { ...state, isRequestInProgress: true, requestStep: \"start\" };\n    case \"PENDING_REQUEST\":\n      return { ...state, isRequestInProgress: true, requestStep: \"pending\" };\n    case \"FINISH_REQUEST\":\n      return { ...state, isRequestInProgress: false, requestStep: \"finished\" };\n    case \"RESET_REQUEST\":\n      return { ...state, isRequestInProgress: false, requestStep: \"idle\" };\n    default:\n      return state;\n  }\n}\n\nexport function RequestComponent() {\n  const [requestState, requestDispatch] = useReducer(\n    requestReducer,\n    initialState\n  );\n\n  const startRequest = () =\u003e {\n    requestDispatch({ type: \"START_REQUEST\" });\n    // Імітуємо запит до сервера\n    setTimeout(() =\u003e {\n      requestDispatch({ type: \"PENDING_REQUEST\" });\n      // Імітуємо отримання відповіді від сервера\n      setTimeout(() =\u003e {\n        requestDispatch({ type: \"FINISH_REQUEST\" });\n      }, 2000);\n    }, 2000);\n  };\n\n  const resetRequest = () =\u003e {\n    requestDispatch({ type: \"RESET_REQUEST\" });\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={startRequest}\u003eПочати запит\u003c/button\u003e\n      \u003cbutton onClick={resetRequest}\u003eСкинути запит\u003c/button\u003e\n      \u003cp\u003eСтан запиту: {requestState.requestStep}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default RequestComponent;\n```\n\n# Завдання 3\n\nВи створюєте компонент форми у React. Ви маєте поле введення, в якому ви хочете відстежити зміни. Для цього ви використовуєте обробник подій onChange. Ваше завдання – правильно типізувати подію, яка передається у цю функцію.\n\n```ts\nimport React, { useState } from \"react\";\n\nexport function FormComponent() {\n  const [value, setValue] = useState(\"\");\n\n  const handleChange = (event) =\u003e {\n    setValue(event.target.value);\n  };\n\n  return \u003cinput type=\"text\" value={value} onChange={handleChange} /\u003e;\n}\n```\n\n# Завдання 4\n\nВи вирішили застосувати до меню контекст і тепер вам потрібно його типізувати.\n\nОписати тип SelectedMenu: Це має бути об'єкт, який містить id з типом MenuIds\n\nОписати тип MenuSelected: Цей тип є об'єктом, що містить selectedMenu\n\nОписати тип MenuAction: Цей тип являє собою об'єкт з методом onSelectedMenu, який приймає об'єкт типу SelectedMenu як аргумент повертає void.\n\nОписати тип PropsProvider: Опишіть правильний тип для дітей\n\nОписати тип PropsMenu: Опишіть тип для menus, він має бути від типу Menu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviktorsvertoka%2Fgoit-typescript-hw-04","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviktorsvertoka%2Fgoit-typescript-hw-04","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviktorsvertoka%2Fgoit-typescript-hw-04/lists"}