web-app/src/components/layout/PageContent/PageContent.js at 2d4c301bd01b6ef5b8a8f03ac67de8bd22dac6c4 · ReCodEx/web-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Container } from 'react-bootstrap';

import Icon from '../../icons';

const getMessage = (item, formatMessage) =>
  !item
    ? ''
    : typeof item === 'string'
      ? item
      : item.type === FormattedMessage
        ? formatMessage(item.props, item.props.values || {})
        : getMessage(item.children, formatMessage);

/**
 * Holds the main content of a page with the common structure for
 * all pages - the title, description, content.
 * The component passes the title and description to the Helmet library
 * which reflects these into the <head> section of the HTML document.
 */
const PageContent = ({ intl: { formatMessage }, title = '', windowTitle = null, icon = null, children }) => {
  return (
    <main className="app-main bg-body-tertiary pb-1">
      <Helmet title={getMessage(windowTitle || title, formatMessage)} />
      {(title || icon) && (
        <div className="app-content-header">
          <h1 className="m-0 px-3 text-body h3">
            {icon && (
              <span className="me-3 text-body-secondary">{typeof icon === 'string' ? <Icon icon={icon} /> : icon}</span>
            )}
            {title}
          </h1>
        </div>
      )}
      <div className="app-content">
        <Container fluid>{children}</Container>
      </div>
    </main>
  );
};

PageContent.propTypes = {
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  windowTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  children: PropTypes.element,
  intl: PropTypes.object.isRequired,
};

export default injectIntl(PageContent);