Add a badge on locations for new photos
- The last updated date is taken from the latest photo of each location (without any other API call, just some data manipulation) - Manipulation of data in the preload request instead of the code
This commit is contained in:
@@ -1,19 +1,30 @@
|
||||
<script>
|
||||
import { dateOlderThan } from 'utils/functions'
|
||||
// Components
|
||||
import Badge from 'atoms/Badge'
|
||||
|
||||
// Props
|
||||
export let location
|
||||
|
||||
// Variables
|
||||
const { name, slug, country } = location
|
||||
const { name, slug, country, last_updated } = location
|
||||
const timeLimit = 7 * 24 * 60 * 60 * 1000 // d*h*m*s*ms = 1 week
|
||||
</script>
|
||||
|
||||
<div class="location" role="listitem">
|
||||
<a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
|
||||
<img src={country.flag.full_url} alt="Flag of {country.name}">
|
||||
|
||||
<div class="anim-mask mask-city">
|
||||
<h3 class="location__city">{name}</h3>
|
||||
</div>
|
||||
|
||||
<div class="anim-mask mask-country">
|
||||
<p class="location__country style-caps">{country.name}</p>
|
||||
</div>
|
||||
|
||||
{#if dateOlderThan(last_updated, timeLimit)}
|
||||
<Badge size="small" text="new" />
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user