Refactored.

assets/views/home.jsx

@@ -2,15 +2,14 @@
 
 const React = require('react');
 const moment = require('moment');
+const PropTypes = require('prop-types');
 
 const Layout = require('./layout.jsx');
 
-class Home extends React.Component {
+const Home = ({ releases }) => (
-    render() {
-        return (
     <Layout>
         <ul className="scenes">
-                    {this.props.releases.map(release => (
+            {releases.map(release => (
                 <li key={release.id} className="scene">
                     <span
                         className="scene-banner"
@@ -20,18 +19,23 @@ class Home extends React.Component {
                                 href={`/site/${release.site.id}`}
                                 className="scene-site site-link"
                                 title={release.network.name}
-                                    >{release.site.name}</a>
+                            >
+                                {release.site.name}
+                            </a>
 
                             <a
                                 href={release.url}
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 className="scene-date"
-                                    >{moment(release.date).format('YYYY-MM-DD')}</a>
+                            >
+                                {moment(release.date).format('MMM D, YYYY')}
+                            </a>
                         </span>
 
                         <img
                             src={`/${release.site.id}/${release.id}/0.jpg`}
+                            alt={release.id}
                             className="scene-thumbnail"
                         />
                     </span>
@@ -42,10 +46,13 @@ class Home extends React.Component {
                             target="_blank"
                             rel="noopener noreferrer"
                             className="scene-row scene-link"
-                                ><h2 className="scene-title">{release.title}</h2></a>
+                        >
+                            <h2 className="scene-title">{release.title}</h2>
+                        </a>
 
                         <span className="scene-row">
-                                    <ul className="scene-actors nolist">{release.actors.map(actor =>
+                            <ul className="scene-actors nolist">
+                                {release.actors.map(actor => (
                                     <li
                                         key={actor.id}
                                         className="scene-actor"
@@ -53,16 +60,20 @@ class Home extends React.Component {
                                         <a
                                             href={`/actor/${actor.id}`}
                                             className="actor-link"
-                                            >{actor.name}</a>
+                                        >
+                                            {actor.name}
+                                        </a>
                                     </li>
-                                    )}</ul>
+                                ))}
+                            </ul>
                         </span>
 
                         <span
                             title={release.tags.map(tag => tag.tag).join(', ')}
                             className="scene-row"
                         >
-                                    <ul className="scene-tags nolist">{release.tags.map(tag =>
+                            <ul className="scene-tags nolist">
+                                {release.tags.map(tag => (
                                     <li
                                         key={tag.tag}
                                         className="scene-tag"
@@ -70,9 +81,12 @@ class Home extends React.Component {
                                         <a
                                             href={`/tag/${tag.tag}`}
                                             className="tag-link"
-                                            >{tag.tag}</a>
+                                        >
+                                            {tag.tag}
+                                        </a>
                                     </li>
-                                    )}</ul>
+                                ))}
+                            </ul>
                         </span>
                     </div>
                 </li>
@@ -80,7 +94,13 @@ class Home extends React.Component {
         </ul>
     </Layout>
 );
-    }
+
-}
+Home.propTypes = {
+    releases: PropTypes.arrayOf(PropTypes.object),
+};
+
+Home.defaultProps = {
+    releases: [],
+};
 
 module.exports = Home;

assets/views/layout.jsx

@@ -1,23 +1,30 @@
 'use strict';
 
 const React = require('react');
+const PropTypes = require('prop-types');
 
-class Layout extends React.Component {
+const Layout = ({ children }) => (
-    render() {
-        return (
     <html lang="en">
         <head>
-                    <title>Traxxx</title>
+            <title>Porn Radar</title>
 
             <link href="/css/style.css" rel="stylesheet" />
         </head>
 
         <body>
-                    {this.props.children}
+            <header>
+                <h1>Porn Radar</h1>
+            </header>
+
+            <div className="content">
+                {children}
+            </div>
         </body>
     </html>
 );
-    }
+
-}
+Layout.propTypes = {
+    children: PropTypes.node.isRequired,
+};
 
 module.exports = Layout;

package.json

@@ -56,6 +56,7 @@
         "neo-blessed": "^0.2.0",
         "opn": "^5.4.0",
         "pg": "^7.9.0",
+        "prop-types": "^15.7.2",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "sqlite3": "^4.0.6",

public/css/style.css

@@ -25,12 +25,33 @@ body {
     flex-direction: column;
     box-sizing: border-box;
     padding: 0 0 .5rem 0;;
+    border-radius: .25rem;
     margin: .5rem;
-    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+    overflow: hidden;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
 }
 
 .scene-banner {
     position: relative;
+    margin: 0 0 .5rem 0;
+}
+
+.scene-thumbnail {
+    width: 100%;
+    height: 200px;
+    display: block;
+    background-position: center;
+    background-size: cover;
+    object-fit: cover;
+}
+
+.scene-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 .5rem;
+    margin: 0 0 .25rem 0;
 }
 
 .scene-details {
@@ -41,20 +62,21 @@ body {
     position: absolute;
 }
 
-.scene-thumbnail {
+.scene-site,
-    width: 100%;
+.scene-date {
-    height: 200px;
+    color: #fff;
-    object-fit: cover;
+    background: rgba(0, 0, 0, .5);
-    background-position: center;
+    font-size: .8rem;
-    background-size: cover;
+    padding: .25rem;
+    text-decoration: none;
 }
 
-.scene-row {
+.scene-site {
-    display: flex;
+    border-radius: 0 0 .25rem 0;
-    justify-content: space-between;
+}
-    align-items: center;
+
-    box-sizing: border-box;
+.scene-date {
-    padding: .1rem .5rem;
+    border-radius: 0 0 0 .25rem;
 }
 
 .scene-info {
@@ -75,15 +97,6 @@ body {
     line-height: 1.5rem;
 }
 
-.scene-site,
-.scene-date {
-    color: #fff;
-    background: rgba(0, 0, 0, .5);
-    font-size: .8rem;
-    padding: .25rem;
-    text-decoration: none;
-}
-
 .scene-network {
     color: #555;
     margin: 0 .25rem 0 0;