Какая логика здесь должна быть?

Question

[Jedi]

После отправке данных на backend, от backend`а приходит ответ. Нужно отобразить этот ответ на 4-5 секунд. Так реализовано в Instagram. Выглядит примерно так.



Это страничка отправки email для восстановления пароля.

Вопрос первый: Как думаете, правильное ли решением будет, если я весь этот код напишу в файле компонента?

Для входа и регистрации у меня целая экосистема. Все работает через Redux.

Вопрос второй: Какая логика здесь должна быть? Каким-то образом убрать через 4-5 секунд сообщение из state?

( {this.state.message && <Alert message={this.state.message}/>} )

Как бы вы это реализовали? Сообщение появляется из нижней части страницы, а через пару секунд возвращается туда же (Исчезает).

Благодарю!

Answer 1

[hzzzzl]

в родительском элементе в стейте пусть будет { showAlert: false, alertMessage: 'blabla' }
<Alert show={this.state.showAlert} /> пусть будет всегда и по умолчанию скрытый

когда надо, то

this.setState({ showAlert: true, alertMessage: responseFromServer })
setTimeout( () => setState({ showAlert: false }), 5000 )

ну а в самом алерте пусть в зависимости он props.show добавляется класс с css-переходами итд

-
или всё то же самое через редукс, так же с таймаутом на 5 сек, после которого класс элемента меняется обратно на скрытый

Answer 2

[Антон Спирин]

Вопрос первый: Как думаете, правильное ли решением будет, если я весь этот код напишу в файле компонента?

Для входа и регистрации у меня целая экосистема. Все работает через Redux.

Лучше сделать по аналогии с остальным кодом.

Какая логика здесь должна быть? Каким-то образом убрать через 4-5 секунд сообщение из state?

setTimeout. Так же, по-хорошему, обрабатывать window.onblur и widow.onfocus. Еще надо очищать таймер в componentWillUnmount.

Сообщение появляется из нижней части страницы, а через пару секунд возвращается туда же (Исчезает).

transform, opacity, transition, @keyframes

Answer 3

[Роман Александрович]

почему бы вам вместо Alert не воспользоваться любым Toast?
https://github.com/fkhadra/react-toastify