Тестовое задание

• Дано сломанное приложение: https://codesandbox.io/p/sandbox/testovoe-zadanie-forked-jwmrk
• Мое исправленное приложение: https://codesandbox.io/p/sandbox/testovoe-zadanie-forked-rrr73v?workspaceId=ws_H9rA1zRPyv95ese4YS7gsr

Что и как делал

В первую очередь нужно исправить два бага в Root.tsx, чтобы модалка начала открываться:

1. Метод toggle мутирует состояние напрямую, React не отслеживает такие изменения, поэтому ничего не происходит. Правильно было бы так: this.setState({ opened })
2. Метод invite мутирует массив invites напрямую: invites.push(name). Для того, чтобы не нарушать приницип иммутабельности нужно использовать спред-оператор:

this.setState((prevState) => ({
    invites: [...prevState.invites, name],
}));

Рефакторинг Root.tsx

1. Переписываем классовый компонент на функциональный.
2. Вместо привязки контекста c помощью bind используем более привычный для функциональных компонентов -- замыкание (оборачиваем в стрелочную функцию), чтобы сделать тоже самое. Метод invite не меняется, поэтому это безопасно

Рефакторинг Invites.tsx

1. event: any меняем на event: React.ChangeEvent<HTMLInputElement>.
2. по мелочи

Рефакторинг Modal.tsx

1. Переделываем классовый компонент в функциональный
2. Изббавляемся от ненужного стейта getDerivedStateFromProps, у нас есть пропс, который показывает открыта модалка или нет
3. Добавляем свойство unmountOnExit в CSSTransition.
4. Немного стилей
5. Типизируем чилдрены

Рефакторинг Close.tsx

1. Меняем курсор мыши при наведении на крестик, чтобы показать, что кликабельная

Что еще можно было бы улучшить?

1. Клик вне формы может закрывать модалку
2. Представим, что приложение будет развиваться, и нужно будет придется редактировать/удалаять приглашения, в этом случае понадобится генерировать айдишники для приглашений, хранить в стейте и использовать при рендере в списке