47 lines
2 KiB
JavaScript
47 lines
2 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { h } from 'preact';
|
|
|
|
export const SingleListing = ({listing, onAddTag, currentUserId, onChangeCategory, onOpenModal, isOpen}) => {
|
|
const tagLinks = listing.tag_list.map(tag => (
|
|
<a href={`/listings?t=${tag}`} onClick={e => onAddTag(e, tag)} data-no-instant>{tag}</a>
|
|
));
|
|
|
|
const editButton = currentUserId === listing.user_id ? <a href={`/listings/${listing.id}/edit`} className="classified-listing-edit-button">・edit</a> : <a href={`/report-abuse?url=https://dev.to/listings/${listing.category}/${listing.slug}`}>・report abuse</a>;
|
|
|
|
const definedClass = isOpen ? 'single-classified-listing single-classified-listing--opened' : 'single-classified-listing';
|
|
|
|
const listingCard = () => {
|
|
return(
|
|
<div className={definedClass} id={`single-classified-listing-${listing.id}`}>
|
|
<div className="listing-content">
|
|
<h3>
|
|
<a href={`/listings/${listing.category}/${listing.slug}`} data-no-instant onClick={e => onOpenModal(e, listing)} data-listing-id={listing.id}>
|
|
{listing.title}
|
|
</a>
|
|
</h3>
|
|
<div className="single-classified-listing-body" dangerouslySetInnerHTML={{ __html: listing.processed_html }} />
|
|
<div className="single-classified-listing-tags">{tagLinks}</div>
|
|
<div className="single-classified-listing-author-info">
|
|
<a href={`/listings/${listing.category}`} onClick={e => onChangeCategory(e, listing.category)} data-no-instant>{listing.category}</a>
|
|
・
|
|
<a href={`/${listing.author.username}`}>{listing.author.name}</a>
|
|
{editButton}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
listingCard()
|
|
);
|
|
}
|
|
|
|
SingleListing.propTypes = {
|
|
listing: PropTypes.object.isRequired,
|
|
onAddTag: PropTypes.func.isRequired,
|
|
onOpenModal: PropTypes.func.isRequired,
|
|
onChangeCategory: PropTypes.func.isRequired,
|
|
isOpen: PropTypes.bool.isRequired,
|
|
currentUserId: PropTypes.number,
|
|
};
|