react-logo/frontend/src/pages/page.js

import React, { useEffect } from 'react'
import { MessageList } from '../components/message-list';
import { connect } from 'react-redux';
import { removeOldestMessage } from '../actions/message.actions';

export default function Page({ title, messages, dispatch, children }) {
  useEffect(() => {
    document.title = title ? `${title } - PleaseWait` : 'PleaseWait';
  });

  useEffect(() => {
    if (!Array.isArray(messages) || messages.length === 0) return;

    let timeoutId = setTimeout(() => {
      dispatch(removeOldestMessage());
    }, 5000);

    return () => clearTimeout(timeoutId);
  }, [messages])

  return (
    <div className="container">
      <MessageList messages={messages} />
      { children }
    </div>
  );
}

function mapStateToProps(state) {
  return { messages: state.messages.sortedByTimestamp };
}

export const ConnectedPage = connect(mapStateToProps)(Page);