78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { h } from 'preact';
|
|
import ListingDate from './rowElements/listingDate';
|
|
import Tags from './rowElements/tags';
|
|
import Location from './rowElements/location';
|
|
import ActionButtons from './rowElements/actionButtons';
|
|
|
|
export const ListingRow = ({ listing }) => {
|
|
const bumpedAt = listing.bumped_at ? listing.bumped_at.toString() : null;
|
|
const isExpired =
|
|
bumpedAt && !listing.published
|
|
? (Date.now() - new Date(bumpedAt).getTime()) / (1000 * 60 * 60 * 24) > 30
|
|
: false;
|
|
const isDraft = bumpedAt ? !isExpired && !listing.published : true;
|
|
const listingUrl = listing.published
|
|
? `${listing.category}/${listing.slug}`
|
|
: `${listing.id}/edit`;
|
|
|
|
const expiryDate = listing.expires_at
|
|
? new Date(listing.expires_at.toString()).toLocaleDateString('default', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
})
|
|
: '';
|
|
|
|
const listingExpiry = expiryDate !== '' ? ` | Expires on: ${expiryDate}` : '';
|
|
|
|
return (
|
|
<div
|
|
className={`dashboard-listing-row ${isDraft ? 'draft' : ''} ${
|
|
isExpired ? 'expired' : ''
|
|
}`}
|
|
data-listing-id={listing.id}
|
|
>
|
|
{listing.organization_id && (
|
|
<span className="listing-org">{listing.author.name}</span>
|
|
)}
|
|
<a href={listingUrl}>
|
|
<h2>{listing.title + (isExpired ? ' (expired)' : '')}</h2>
|
|
</a>
|
|
<ListingDate
|
|
bumpedAt={listing.bumped_at}
|
|
updatedAt={listing.updated_at}
|
|
/>
|
|
{listingExpiry}
|
|
{listing.location && <Location location={listing.location} />}
|
|
<span className="dashboard-listing-category">
|
|
<a href={`/listings/${listing.category}`}>{listing.category}</a>
|
|
</span>
|
|
<Tags tagList={listing.tag_list} />
|
|
<ActionButtons
|
|
isDraft={isDraft}
|
|
listingUrl={`${listing.category}/${listing.slug}`}
|
|
editUrl={`/listings/${listing.id}/edit`}
|
|
deleteConfirmUrl={`/listings/${listing.category}/${listing.slug}/delete_confirm`}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ListingRow.propTypes = {
|
|
listing: PropTypes.PropTypes.shape({
|
|
title: PropTypes.string.isRequired,
|
|
tag_list: PropTypes.arrayOf(PropTypes.string),
|
|
created_at: PropTypes.instanceOf(Date),
|
|
bumped_at: PropTypes.instanceOf(Date),
|
|
updated_at: PropTypes.instanceOf(Date),
|
|
category: PropTypes.string.isRequired,
|
|
id: PropTypes.number.isRequired,
|
|
user_id: PropTypes.number.isRequired,
|
|
slug: PropTypes.string.isRequired,
|
|
organization_id: PropTypes.number,
|
|
location: PropTypes.string,
|
|
expires_at: PropTypes.bool,
|
|
published: PropTypes.bool.isRequired,
|
|
author: PropTypes.object,
|
|
}).isRequired,
|
|
};
|