month-12/step-1_first submition #17
Conversation
There was a problem hiding this comment.
Здравствуйте. (Нужно развернуть общий комментарий ↓)
Посмотрите на гитхабе все комментарии к коду (нужно прокрутить вниз страницу там)
Работа проделана огромная:
- Отлично типизировали проект
- Хорошо сделаны классы
- Хорошо сделали визуализацию
но есть некоторые недочеты:
- Файл
app.test.jsнужно удалить, так как он не относится к проекту app.cssнужно сделать модулемapp.module.css, а в компоненте использовать модульные классы, а не строки- Скрин https://disk.yandex.ru/i/c8HlsB5JTPvH-A По заданию все кнопки сабмита должны быть неактивными, если в инпуте ничего нет или в нем невалидные данные.
- Скрин https://disk.yandex.ru/i/jVb-l7YwJ0fXLg При невалидном индексе кнопки удаления/добавления по индексу активны. Нужно определять максимально возможный индекс по длине массива минус 1 и не давать указать индекс меньше нуля
- Все события обработчиков нужно правильно типизировать. Это легко сделать. Для
onChangeесть типChangeEvent<HTMLInputElement>, а дляonSubmitестьFormEvent<HTMLFormElement>в библиотекеreact. Для обычных функций есть типSyntheticEventдля их событий. ТипResponseдля ответа от сервера, типKeyboardEventдля событий клавиатуры, типRoutePropsдля рутов
Исправьте, пожалуйста, недочеты и работа будет принята. Пожалуйста, проверьте работоспособность проекта и наличие возможных ошибок в консоли браузера (кнопка F12) перед отправкой на ревью.
Напоминаю, что работа может быть принята только после исправления всех критических замечаний Нужно исправить.
Удачного рефакторинга кода.
src/components/string/string.tsx
Outdated
| const [stringData, setStringData] = | ||
| useState({ string: '', changing: [] as number[] }) | ||
|
|
||
| function onInputChange(e: FormEvent<HTMLInputElement>) { |
There was a problem hiding this comment.
Можно лучше
Можно сделать универсальный кастомный хук для контроля любого количества инпутов в любых формах:
export function useForm(inputValues={}) {
const [values, setValues] = useState(inputValues);
const handleChange = (event) => {
const {value, name} = event.target;
setValues({...values, [name]: value});
};
return {values, handleChange, setValues};
}Этот код помещают в отдельный файл useForm.js в папке hooks и импортируют функцию туда, где нужно контролировать инпуты
И Вам не нужно будет теперь вручную создавать функции обработки инпутов и т д. Все будет в одной строчке кода:
const {values, handleChange, setValues} = useForm({});
src/components/string/string.tsx
Outdated
| const [stringData, setStringData] = | ||
| useState({ string: '', changing: [] as number[] }) | ||
|
|
||
| function onInputChange(e: FormEvent<HTMLInputElement>) { |
There was a problem hiding this comment.
Все события обработчиков нужно правильно типизировать. Это легко сделать. Для onChange есть тип ChangeEvent<HTMLInputElement>, а для onSubmit есть FormEvent<HTMLFormElement> в библиотеке react. Для обычных функций есть тип SyntheticEvent для их событий. Тип Response для ответа от сервера, тип KeyboardEvent для событий клавиатуры, тип RouteProps для рутов
Есть небольшая хитрость: можно всегда проверить, какой тип у функции или события. Для этого нужно навести мышкой на атрибут onChange, onSubmit, onClick и тд. Там высветится типизация того, что принимают эти атрибуты.
|
|
||
| function onInputChange(e: FormEvent<HTMLInputElement>) { | ||
| e.preventDefault(); | ||
| setValue({ ...form, string: (e.target as HTMLInputElement).value }); |
There was a problem hiding this comment.
(e.target as HTMLInputElement)
Это не нужно будет, когда типизируете правильно событие через ChangeEvent
| import { bubbleSort, randomArr, selectionSort } from "./sorting"; | ||
| import { ElementStates } from "../../types/element-states"; | ||
|
|
||
| export type randomArrayType = { |
There was a problem hiding this comment.
Кастомные типы typescript принято называть в PascalCase (с большой буквы)
| state: ElementStates | ||
| } | ||
|
|
||
| type propsType = { |
There was a problem hiding this comment.
Кастомные типы typescript принято называть в PascalCase (с большой буквы)
No description provided.