https://github.com/viktorsvertoka/goit-react-woolf-hw-05-typescript
Home task for React & TS course📘
https://github.com/viktorsvertoka/goit-react-woolf-hw-05-typescript
goit goit-react-woolf-hw-05-typescript react typescript
Last synced: 3 months ago
JSON representation
Home task for React & TS course📘
- Host: GitHub
- URL: https://github.com/viktorsvertoka/goit-react-woolf-hw-05-typescript
- Owner: ViktorSvertoka
- Created: 2024-02-25T17:49:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-26T19:08:33.000Z (over 2 years ago)
- Last Synced: 2024-04-14T06:32:28.365Z (over 2 years ago)
- Topics: goit, goit-react-woolf-hw-05-typescript, react, typescript
- Language: TypeScript
- Homepage:
- Size: 188 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашне завдання по курсу React & TypeScript
### goit-react-woolf-hw-05-typescript
## Завдання 1
У вас є компонент React, який використовує useRef та IntersectionObserver для
визначення, коли користувач переглядає кінець вмісту. Ваше завдання полягає в
наступному:
Встановіть правильні типи пропсів для цього компонента. У ньому є дві
властивості: children і onContentEndVisible. children - це будь-який валідний
React вузол, а onContentEndVisible - це функція без аргументів, що повертає
void.
Встановіть правильний тип useRef. Посилання endContentRef використовується для
div, який міститься в кінці вмісту.
Встановіть правильний тип для options (клас також може бути типом для options).
```ts
import React, { useEffect, useRef } from 'react';
// Опишіть Props
export function Observer({ children, onContentEndVisible }: Props) {
// Вкажіть правильний тип для useRef зверніть увагу, в який DOM елемент ми його передаємо
const endContentRef = useRef(null);
useEffect(() => {
// Вкажіть правильний тип для options, підказка, клас також можна вказувати як тип
const options = {
rootMargin: '0px',
threshold: 1.0,
root: null,
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
onContentEndVisible();
observer.disconnect();
}
});
}, options);
if (endContentRef.current) {
observer.observe(endContentRef.current);
}
return () => {
observer.disconnect();
};
}, [onContentEndVisible]);
return (
{children}
);
}
```
## Завдання 2
Ваше завдання – додати типи для наступних елементів коду:
RequestStep: Це рядковий літерал.
State: Цей тип являє собою об'єкт з двома властивостями isRequestInProgress і
RequestStep
Action: Це тип, що представляє можливі дії, які можуть бути відправлені до
редюсера.
Дивіться код і опишіть для нього правильні типи.
```ts
import React, { useReducer } from 'react';
const initialState: State = {
isRequestInProgress: false,
requestStep: 'idle',
};
function requestReducer(state: State, action: Action): State {
switch (action.type) {
case 'START_REQUEST':
return { ...state, isRequestInProgress: true, requestStep: 'start' };
case 'PENDING_REQUEST':
return { ...state, isRequestInProgress: true, requestStep: 'pending' };
case 'FINISH_REQUEST':
return { ...state, isRequestInProgress: false, requestStep: 'finished' };
case 'RESET_REQUEST':
return { ...state, isRequestInProgress: false, requestStep: 'idle' };
default:
return state;
}
}
export function RequestComponent() {
const [requestState, requestDispatch] = useReducer(
requestReducer,
initialState,
);
const startRequest = () => {
requestDispatch({ type: 'START_REQUEST' });
// Імітуємо запит до сервера
setTimeout(() => {
requestDispatch({ type: 'PENDING_REQUEST' });
// Імітуємо отримання відповіді від сервера
setTimeout(() => {
requestDispatch({ type: 'FINISH_REQUEST' });
}, 2000);
}, 2000);
};
const resetRequest = () => {
requestDispatch({ type: 'RESET_REQUEST' });
};
return (
Почати запит
Скинути запит
Стан запиту: {requestState.requestStep}
);
}
export default RequestComponent;
```
## Завдання 3
Ви створюєте компонент форми у React. Ви маєте поле введення, в якому ви хочете
відстежити зміни. Для цього ви використовуєте обробник подій onChange. Ваше
завдання – правильно типізувати подію, яка передається у цю функцію.
```ts
import React, { useState } from 'react';
export function FormComponent() {
const [value, setValue] = useState('');
const handleChange = event => {
setValue(event.target.value);
};
return ;
}
```
## Завдання 4
Ви вирішили застосувати до меню контекст і тепер вам потрібно його типізувати.
Описати тип SelectedMenu: Це має бути об'єкт, який містить id з типом MenuIds
Описати тип MenuSelected: Цей тип є об'єктом, що містить selectedMenu
Описати тип MenuAction: Цей тип являє собою об'єкт з методом onSelectedMenu,
який приймає об'єкт типу SelectedMenu як аргумент повертає void.
Описати тип PropsProvider: Опишіть правильний тип для дітей
Описати тип PropsMenu: Опишіть тип для menus, він має бути від типу Menu
```ts
import React, { createContext, useMemo, useState, useContext } from 'react';
import noop from 'lodash/noop';
type MenuIds = 'first' | 'second' | 'last';
type Menu = { id: MenuIds; title: string };
// Додати тип Menu Selected
const MenuSelectedContext = createContext({
selectedMenu: {},
});
// Додайте тип MenuAction
const MenuActionContext = createContext({
onSelectedMenu: noop,
});
type PropsProvider = {
children; // Додати тип для children
};
function MenuProvider({ children }: PropsProvider) {
// Додати тип для SelectedMenu він повинен містити { id }
const [selectedMenu, setSelectedMenu] = useState({});
const menuContextAction = useMemo(
() => ({
onSelectedMenu: setSelectedMenu,
}),
[],
);
const menuContextSelected = useMemo(
() => ({
selectedMenu,
}),
[selectedMenu],
);
return (
{children}
);
}
type PropsMenu = {
menus; // Додайте вірний тип для меню
};
function MenuComponent({ menus }: PropsMenu) {
const { onSelectedMenu } = useContext(MenuActionContext);
const { selectedMenu } = useContext(MenuSelectedContext);
return (
<>
{menus.map(menu => (
onSelectedMenu({ id: menu.id })}>
{menu.title}{' '}
{selectedMenu.id === menu.id ? 'Selected' : 'Not selected'}
))}
>
);
}
export function ComponentApp() {
const menus: Menu[] = [
{
id: 'first',
title: 'first',
},
{
id: 'second',
title: 'second',
},
{
id: 'last',
title: 'last',
},
];
return (
);
}
```