just-paja/improtresk-web

View on GitHub
src/server/components/PageBase.jsx

Summary

Maintainability
A
35 mins
Test Coverage
import PropTypes from 'prop-types'
import React from 'react'

export const PageBase = ({
  css,
  js,
  markup,
  helmet,
  state,
  lang
}) => {
  const htmlProps = helmet.htmlAttributes.toComponent()
  return (
    <html lang={lang} {...htmlProps}>
      <head>
        <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
        <meta charSet='utf-8' />
        <meta content='width=device-width,initial-scale=1' name='viewport' />
        {helmet.title.toComponent()}
        {helmet.base.toComponent()}
        {helmet.meta.toComponent()}
        {helmet.link.toComponent()}
        {helmet.script.toComponent()}
        {css.map(asset =>
          <link key={asset} type='text/css' rel='stylesheet' href={asset} />
        )}
        {/* eslint-disable react/no-danger */}
        <script
          dangerouslySetInnerHTML={{
            __html: `window.INITIAL_STATE = ${JSON.stringify(state)};`
          }}
        />
        <script src='https://cdn.ravenjs.com/3.24.2/raven.min.js' crossOrigin='anonymous' />
      </head>
      <body>
        {/* eslint-disable react/no-danger */}
        <div id='appContent' dangerouslySetInnerHTML={{ __html: markup }} />
        {/* eslint-enable react/no-danger */}
        {js.map(asset => <script src={asset} key={asset} />)}
      </body>
    </html>
  )
}

PageBase.propTypes = {
  css: PropTypes.arrayOf(PropTypes.string),
  js: PropTypes.arrayOf(PropTypes.string),
  lang: PropTypes.string.isRequired,
  markup: PropTypes.string,
  state: PropTypes.object,
  helmet: PropTypes.shape({
    base: PropTypes.object,
    meta: PropTypes.object,
    link: PropTypes.object,
    script: PropTypes.object,
    title: PropTypes.object
  }).isRequired
}

PageBase.defaultProps = {
  css: [],
  js: [],
  markup: null,
  state: {}
}

export default PageBase