Presentational Components of react-ssr

Home.js

import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';

import Loading from './Loading';

const Home = ({ loading, data }) => (
  <div className="home container">
    <Helmet>
      <title>FavMovies - Home</title>
    </Helmet>
    {loading ? <Loading /> : <Table movies={data} />}
  </div>
);

const Table = ({ movies }) => (
  <table className="table table-striped">
    <thead>
      <tr>
        <th>Movie</th>
        <th>Rating</th>
      </tr>
    </thead>
    <tbody>{movies.map(movie => <Row key={movie.id} {...movie} />)}</tbody>
  </table>
);

const Row = ({ id, title, rating }) => (
  <tr>
    <td>
      <Link to={`/movie/${id}`}>{title}</Link>
    </td>
    <td>{rating}</td>
  </tr>
);

export default Home;

Loading.js

import React from 'react';

const Loading = ({ size }) => <div className={size === 'lg' ? 'loading-lg' : 'loading'} />;

export default Loading;

Movie.js

import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';

import Loading from './Loading';

const Movie = ({ loading, data }) => (
  <div className="post container">
    <Helmet>
      <title>FavMovies - {loading ? 'Movie' : data.title}</title>
    </Helmet>
    {loading ? (
      <Loading />
    ) : (
      <div className="card">
        <div className="card-header">
          <div className="card-title h5">{data.title}</div>
          <div className="card-subtitle text-gray">IMDB Rating - {data.rating}</div>
        </div>
        <div className="card-body">{data.plot}</div>
        <div className="card-footer">
          <Link to="/" className="btn btn-primary">
            Back to Home
          </Link>
        </div>
      </div>
    )}
  </div>
);

export default Movie;

Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => (
  <header className="navbar container">
    <section className="navbar-section">
      <span className="navbar-brand mr-2">FavMovies</span>
    </section>
    <ul className="tab tab-block">
      <li className="tab-item">
        <Link to="/" className="active">
          Home
        </Link>
      </li>
    </ul>
  </header>
);

export default Navbar;

NoMatch.js

import React from 'react';

const NoMatch = () => <div className="route">No such route!!</div>;

export default NoMatch;