Skip to content

Instantly share code, notes, and snippets.

@drenther drenther/Home.js
Last active Jun 17, 2018

Embed
What would you like to do?
Presentational Components of react-ssr
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;
import React from 'react';
const Loading = ({ size }) => <div className={size === 'lg' ? 'loading-lg' : 'loading'} />;
export default Loading;
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;
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;
import React from 'react';
const NoMatch = () => <div className="route">No such route!!</div>;
export default NoMatch;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.