Refactored.

This commit is contained in:
2019-05-17 21:59:14 +02:00
parent 665b77fb4e
commit 7825ae2727
4 changed files with 147 additions and 106 deletions

View File

@@ -2,85 +2,105 @@
const React = require('react');
const moment = require('moment');
const PropTypes = require('prop-types');
const Layout = require('./layout.jsx');
class Home extends React.Component {
render() {
return (
<Layout>
<ul className="scenes">
{this.props.releases.map(release => (
<li key={release.id} className="scene">
<span
className="scene-banner"
const Home = ({ releases }) => (
<Layout>
<ul className="scenes">
{releases.map(release => (
<li key={release.id} className="scene">
<span
className="scene-banner"
>
<span className="scene-details">
<a
href={`/site/${release.site.id}`}
className="scene-site site-link"
title={release.network.name}
>
<span className="scene-details">
<a
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>
</span>
<a
href={release.url}
target="_blank"
rel="noopener noreferrer"
className="scene-date"
>
{moment(release.date).format('MMM D, YYYY')}
</a>
</span>
<img
src={`/${release.site.id}/${release.id}/0.jpg`}
className="scene-thumbnail"
/>
</span>
<img
src={`/${release.site.id}/${release.id}/0.jpg`}
alt={release.id}
className="scene-thumbnail"
/>
</span>
<div className="scene-info">
<a
href={`/item/${release.id}`}
target="_blank"
rel="noopener noreferrer"
className="scene-row scene-link"
><h2 className="scene-title">{release.title}</h2></a>
<div className="scene-info">
<a
href={`/item/${release.id}`}
target="_blank"
rel="noopener noreferrer"
className="scene-row scene-link"
>
<h2 className="scene-title">{release.title}</h2>
</a>
<span className="scene-row">
<ul className="scene-actors nolist">{release.actors.map(actor =>
<li
key={actor.id}
className="scene-actor"
<span className="scene-row">
<ul className="scene-actors nolist">
{release.actors.map(actor => (
<li
key={actor.id}
className="scene-actor"
>
<a
href={`/actor/${actor.id}`}
className="actor-link"
>
<a
href={`/actor/${actor.id}`}
className="actor-link"
>{actor.name}</a>
</li>
)}</ul>
</span>
{actor.name}
</a>
</li>
))}
</ul>
</span>
<span
title={release.tags.map(tag => tag.tag).join(', ')}
className="scene-row"
>
<ul className="scene-tags nolist">{release.tags.map(tag =>
<li
key={tag.tag}
className="scene-tag"
<span
title={release.tags.map(tag => tag.tag).join(', ')}
className="scene-row"
>
<ul className="scene-tags nolist">
{release.tags.map(tag => (
<li
key={tag.tag}
className="scene-tag"
>
<a
href={`/tag/${tag.tag}`}
className="tag-link"
>
<a
href={`/tag/${tag.tag}`}
className="tag-link"
>{tag.tag}</a>
</li>
)}</ul>
</span>
</div>
</li>
))}
</ul>
</Layout>
);
}
}
{tag.tag}
</a>
</li>
))}
</ul>
</span>
</div>
</li>
))}
</ul>
</Layout>
);
Home.propTypes = {
releases: PropTypes.arrayOf(PropTypes.object),
};
Home.defaultProps = {
releases: [],
};
module.exports = Home;

View File

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