{"id":18790731,"url":"https://github.com/dm-zhuk/goit-react-woolf-hw-05-typescript","last_synced_at":"2025-07-15T11:05:19.408Z","repository":{"id":238737211,"uuid":"784713744","full_name":"dm-zhuk/goit-react-woolf-hw-05-typescript","owner":"dm-zhuk","description":"ReactJS.Topic XV-TypeScript for React.HW05-typescript","archived":false,"fork":false,"pushed_at":"2024-05-07T22:03:15.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-21T13:57:27.077Z","etag":null,"topics":["typescript-react"],"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/dm-zhuk.png","metadata":{"files":{"readme":"README-EN.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}},"created_at":"2024-04-10T12:09:45.000Z","updated_at":"2024-05-07T22:03:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"3936bff0-2802-4e18-9772-63bfee6f4258","html_url":"https://github.com/dm-zhuk/goit-react-woolf-hw-05-typescript","commit_stats":null,"previous_names":["dm-zhuk/goit-react-woolf-hw-05-typescript"],"tags_count":0,"template":false,"template_full_name":"goitacademy/typescript-homework-module-4","purl":"pkg:github/dm-zhuk/goit-react-woolf-hw-05-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dm-zhuk%2Fgoit-react-woolf-hw-05-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dm-zhuk%2Fgoit-react-woolf-hw-05-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dm-zhuk%2Fgoit-react-woolf-hw-05-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dm-zhuk%2Fgoit-react-woolf-hw-05-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dm-zhuk","download_url":"https://codeload.github.com/dm-zhuk/goit-react-woolf-hw-05-typescript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dm-zhuk%2Fgoit-react-woolf-hw-05-typescript/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265430281,"owners_count":23763968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["typescript-react"],"created_at":"2024-11-07T21:13:29.477Z","updated_at":"2025-07-15T11:05:19.389Z","avatar_url":"https://github.com/dm-zhuk.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%2Fdm-zhuk%2Fgoit-react-woolf-hw-05-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdm-zhuk%2Fgoit-react-woolf-hw-05-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdm-zhuk%2Fgoit-react-woolf-hw-05-typescript/lists"}