2020-03-09 14:49:56 +01:00
|
|
|
import React, { useEffect } from 'react';
|
2020-02-19 13:19:04 +01:00
|
|
|
import { MessageList } from '../components/message-list';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { removeOldestMessage } from '../actions/message.actions';
|
2020-02-04 17:20:39 +01:00
|
|
|
|
2020-02-19 13:19:04 +01:00
|
|
|
export default function Page({ title, messages, dispatch, children }) {
|
2020-03-09 14:49:56 +01:00
|
|
|
useEffect(() => {
|
|
|
|
document.title = title ? `${title } - PleaseWait` : 'PleaseWait';
|
|
|
|
});
|
2020-02-17 22:28:57 +01:00
|
|
|
|
2020-03-09 14:49:56 +01:00
|
|
|
useEffect(() => {
|
|
|
|
if (!Array.isArray(messages) || messages.length === 0) return;
|
2020-02-19 13:19:04 +01:00
|
|
|
|
2020-03-09 14:49:56 +01:00
|
|
|
let timeoutId = setTimeout(() => {
|
|
|
|
dispatch(removeOldestMessage());
|
|
|
|
}, 5000);
|
2020-02-19 13:19:04 +01:00
|
|
|
|
2020-03-09 14:49:56 +01:00
|
|
|
return () => clearTimeout(timeoutId);
|
|
|
|
}, [messages]);
|
2020-02-19 13:19:04 +01:00
|
|
|
|
2020-03-09 14:49:56 +01:00
|
|
|
return (
|
|
|
|
<div className="container">
|
|
|
|
<MessageList messages={messages} />
|
|
|
|
{ children }
|
|
|
|
</div>
|
|
|
|
);
|
2020-02-19 13:19:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function mapStateToProps(state) {
|
2020-03-09 14:49:56 +01:00
|
|
|
return { messages: state.messages.sortedByTimestamp };
|
2020-02-19 13:19:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const ConnectedPage = connect(mapStateToProps)(Page);
|