shakacode/react-webpack-rails-tutorial

View on GitHub
client/app/bundles/comments/layout/Layout.jsx

Summary

Maintainability
A
1 hr
Test Coverage
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { NavLink as Link } from 'react-router-dom';

/* eslint-disable react/prefer-stateless-function */
export default class Layout extends Component {
  /* eslint-disable react/no-unescaped-entities */
  render() {
    const { children } = this.props;
    return (
      <section className="prose max-w-none prose-a:text-sky-700 prose-li:my-0">
        <header>
          <ul>
            <li>
              <Link end to="/" className={({ isActive }) => (isActive ? ' activated' : '')}>
                Comments (Root URL)
              </Link>
            </li>
            <li>
              <Link to="/react-router" className={({ isActive }) => (isActive ? ' activated' : '')}>
                Test React Router ('/react-router')
              </Link>
            </li>
            <li>
              <Link to="/react-router/redirect" className={({ isActive }) => (isActive ? ' activated' : '')}>
                Test Redirect (url to '/react-router/redirect' which goes to root '/')
              </Link>
            </li>
          </ul>
        </header>
        {children}
      </section>
    );
  }
}

Layout.propTypes = {
  children: PropTypes.oneOfType([PropTypes.object]).isRequired,
};