Location page

src/routes/location/[country]/[location].svelte

@@ -0,0 +1,86 @@
+<script context="module">
+	// Svelte
+	import { api, site, locations, currentLocation } from '../../../store'
+
+	// Preload
+	export async function preload (page, session) {
+		const photos = await this.fetch(`${api.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`)
+		const photosData = await photos.json()
+
+		return {
+			photos: photosData.data
+		}
+	}
+</script>
+
+<script>
+	// Svelte
+	import { fade, slide } from 'svelte/transition'
+	import { stores } from '@sapper/app'
+	const { page } = stores()
+	export let photos
+
+	// Dependencies
+	import dayjs from 'dayjs'
+	import advancedFormat from 'dayjs/plugin/advancedFormat'
+	import relativeTime from 'dayjs/plugin/relativeTime'
+	dayjs.extend(advancedFormat)
+	dayjs.extend(relativeTime)
+
+	// Components
+	import Photo from '../../../components/Photo.svelte'
+	import SwitcherSide from '../../../components/SwitcherSide.svelte'
+
+	// Update current location
+	currentLocation.set({
+		location: $locations.find(location => location.slug === $page.params.location),
+		photos: photos
+	})
+
+	// Define things
+	const locationFull = `${$currentLocation.location.name}, ${$currentLocation.location.country.name}`
+	const dateUpdated = (photos.length) ? {
+		full: dayjs(photos[0].modified_on).format('MMM Do, YYYY'),
+		relative: dayjs().to(dayjs(photos[0].modified_on))
+	} : undefined
+	const lastUpdated = (photos.length) ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdated.full : dateUpdated.relative : undefined
+</script>
+
+<svelte:head>
+	<title>Houses Of - Beautiful houses of {locationFull}</title>
+</svelte:head>
+
+<div class="section container" in:fade out:slide>
+	<div class="nav content">
+		<SwitcherSide />
+	</div>
+
+	<div class="content">
+		<h1 class="title is-2">{locationFull}</h1>
+		{#if $currentLocation && $currentLocation.location.description}
+		<p>
+			{$site.description}<br>
+			Houses Of <a href="/choose">{$currentLocation.location.name}</a> {$currentLocation.location.description}
+		</p>
+		{/if}
+		{#if photos.length > 0}
+		<p><strong>Updated</strong> <time title="{dateUpdated && dateUpdated.full}">{lastUpdated}</time></p>
+		{/if}
+	</div>
+
+	{#if photos.length > 0}
+	<div class="columns is-multiline">
+		{#each photos as photo, index}
+		<div class="column is-one-third">
+			<Photo {photo} index={index + 1} />
+		</div>
+		{/each}
+	</div>
+	{:else}
+	<div class="message is-danger">
+		<div class="message-body">
+			<p>No photos for {locationFull}</p>
+		</div>
+	</div>
+	{/if}
+</div>

src/routes/location/[location].svelte

@@ -1,54 +0,0 @@
-<script context="module">
-	export async function preload (page, session) {
-		const location = await this.fetch('//api.housesof.localhost/how/gql?access_token=NJk0urljsdSvApUDzWxGgoO6', {
-			method: 'post',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ query: `{
-				locations (filter: { name_eq: "${page.params.location}" }) {
-					data {
-						name
-						region
-						country { name }
-						description
-					}
-				}
-			}`})
-		})
-		const photos = await this.fetch(`http://api.housesof.localhost/how/items/photos?fields=id,name,image.data,created_on&filter[location.name][rlike]=%${page.params.location}%`)
-		const locationData = await location.json()
-		const photosData = await photos.json()
-		return {
-			location: locationData.data.locations.data[0],
-			photos: photosData.data
-		}
-	}
-</script>
-
-<script>
-	import { slide } from 'svelte/transition'
-	import Photo from '../../components/Photo.svelte'
-
-	export let location
-	export let photos
-</script>
-
-<svelte:head>
-	<title>Houses Of - Beautiful houses of {location.name}, {location.country.name}</title>
-</svelte:head>
-
-<div class="section container" in:slide out:slide>
-	<div class="content">
-		<h1 class="title is-2">{location.name}, {location.country.name}</h1>
-		{#if location.description}
-		<p>Houses Of {location.name} {location.description}</p>
-		{/if}
-	</div>
-
-	<div class="columns">
-		{#each photos as photo, index (photo.id)}
-		<div class="column">
-			<Photo {photo} {location} index={index + 1} />
-		</div>
-		{/each}
-	</div>
-</div>