html.js

import React from 'react';
import PropTypes from 'prop-types';
import serialize from 'serialize-javascript';
import config from '../config';

/* eslint-disable react/no-danger */

const adSenseCode = `(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "${config.ads.adSenseId}",enable_page_level_ads: true})`;
const analyticsCode = `window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;ga('create','${config.analytics.googleTrackingId}','auto');ga('send','pageview')`;

class Html extends React.Component {
    static propTypes = {
        title: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired,
        keywords: PropTypes.string,
        styles: PropTypes.arrayOf(
            PropTypes.shape({
                id: PropTypes.string.isRequired,
                cssText: PropTypes.string.isRequired
            }).isRequired
        ),
        scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
        app: PropTypes.object, // eslint-disable-line
        children: PropTypes.string.isRequired
    };

    static defaultProps = {
        styles: [],
        scripts: [],
        keywords: ''
    };

    render() {
        const {title, description, styles, scripts, app, children, keywords} = this.props;
        return (
            <html className="no-js" lang="en">
                <head>
                    <meta charSet="utf-8"/>
                    <meta httpEquiv="x-ua-compatible" content="ie=edge"/>
                    <title>
                        {title}
                    </title>
                    <meta name="description" content={description}/>
                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                    <meta name="author" content="tiresizr.com"/>
                    <meta name="keywords" content={keywords}/>
                    {scripts.map(script =>
                        <link key={script} rel="preload" href={script} as="script"/>
                    )}
                    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-107513607-1"/>
                    <script
                        dangerouslySetInnerHTML={{__html: (analyticsCode || '')}}
                    />
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>
                    <script
                        dangerouslySetInnerHTML={{__html: (adSenseCode || '')}}
                    />
                    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
                    {styles.map(style =>
                        <style
                            key={style.id}
                            id={style.id}
                            dangerouslySetInnerHTML={{__html: style.cssText}}
                        />
                    )}
                </head>
                <body className="sidebar-collapse">
                    <div id="app" dangerouslySetInnerHTML={{__html: children}}/>
                    <script
                        dangerouslySetInnerHTML={{__html: `window.App=${serialize(app)}`}}
                    />
                    {scripts.map(script => <script key={script} src={script}/>)}
                </body>
            </html>
        );
    }
}

export default Html;