From 1db9217cd08031cf06ef349d247844320335ef74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 2 Mar 2020 22:27:39 +0100
Subject: [PATCH] Use a component for the pagination

Make the component and the page communicate with events to add more photos
---
 src/organisms/Pagination.svelte               |  67 ++++
 .../location/[country]/[location].svelte      | 332 +++++++++---------
 2 files changed, 224 insertions(+), 175 deletions(-)
 create mode 100644 src/organisms/Pagination.svelte

diff --git a/src/organisms/Pagination.svelte b/src/organisms/Pagination.svelte
new file mode 100644
index 0000000..5bc3bc8
--- /dev/null
+++ b/src/organisms/Pagination.svelte
@@ -0,0 +1,67 @@
+<script>
+    import { onMount, createEventDispatcher } from 'svelte'
+    import { currentLocation } from '../store'
+    const dispatch = createEventDispatcher()
+
+    // Props
+    export let photos
+    export let paginatedPhotos
+    export let photosPerPage
+
+    // Variables
+    let currentIndex = photosPerPage
+    const pagesTotal = Math.ceil(photos.length / photosPerPage)
+    const pagesArray = Array.from({ length: pagesTotal }, (v, k) => k + 1).reverse()
+    let pageTranslate = 100 - (100 / pagesTotal)
+
+    // Add more photos to the loop
+    const displayMorePhotos = () => {
+        if (currentIndex < photos.length) {
+            // Display the X next hidden photos
+            const photosToAppend = photos.filter(photo => photo.hidden === true).splice(0, photosPerPage)
+            photosToAppend.forEach(photo => photo.hidden = false)
+
+            // Merge new photos to show to the existing ones
+            dispatch('updatePagination', {
+                paginatedPhotos: [...paginatedPhotos, ...photosToAppend]
+            })
+
+            // Increment current index
+            currentIndex = currentIndex + photosPerPage
+
+            // Animate the pagination
+            pageTranslate = pageTranslate - (100 / pagesTotal)
+        } else {
+            currentIndex = photos.length
+        }
+    }
+</script>
+
+<section class="pagination">
+    {#if photos.length && currentIndex <= photos.length}
+    <div class="pagination__page" class:disabled={currentIndex === photos.length}
+        on:click={displayMorePhotos}
+        on:mouseenter={() => pageTranslate = pageTranslate - (100 / pagesTotal) * 0.666}
+        on:mouseleave={() => pageTranslate = pageTranslate + (100 / pagesTotal) * 0.666}
+    >
+        <div class="pagination__info">page</div>
+        <div class="pagination__numbers">
+            <div class="scroll" style="transform: translateY(-{pageTranslate}%);">
+                {#each pagesArray as page}
+                <span>{page}</span>
+                {/each}
+            </div>
+        </div>
+        /{pagesTotal}
+    </div>
+    <p class="pagination__caption style-caps">See more photos</p>
+
+    {:else}
+    {#if $currentLocation}
+    <div class="pagination__message">
+        <h3>That's all folks!</h3>
+        <p class="pagination__caption style-caps">Come back later to check out <br>new photos of {$currentLocation.name}</p>
+    </div>
+    {/if}
+    {/if}
+</section>
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index 94c68c8..8302f64 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -1,212 +1,194 @@
 <script context="module">
-	import {
-		apiEndpoints,
-		site,
-		locations,
-		currentLocation,
-		currentPhotos
-	} from '../../../store'
-	import { stores } from '@sapper/app'
+    import {
+        apiEndpoints,
+        site,
+        locations,
+        currentLocation,
+        currentPhotos
+    } from '../../../store'
+    import { stores } from '@sapper/app'
 
-	// Preload data
-	export async function preload (page, session) {
-		// Load photos
-		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
-		const photos = await req.json()
-		if (req.ok) {
-			return { photos: photos.data }
-		}
-		this.error(404, 'Not found')
-	}
+    // Preload data
+    export async function preload (page, session) {
+        // Load photos
+        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
+        console.log(req.headers.host)
+        const photos = await req.json()
+        if (req.ok) {
+            return { photos: photos.data }
+        }
+        this.error(404, 'Not found')
+    }
 </script>
 
 <script>
-	import { onMount } from 'svelte'
-	const { page } = stores()
+    import { onMount } from 'svelte'
+    import * as fn from '../../../functions'
+    const { page } = stores()
 
-	// Dependencies
-	import AOS from 'aos'
-	import 'lazysizes'
-	import dayjs from 'dayjs'
-	import advancedFormat from 'dayjs/plugin/advancedFormat'
-	import relativeTime from 'dayjs/plugin/relativeTime'
-	dayjs.extend(advancedFormat)
-	dayjs.extend(relativeTime)
+    // Dependencies
+    import AOS from 'aos'
+    import 'lazysizes'
+    import dayjs from 'dayjs'
+    import advancedFormat from 'dayjs/plugin/advancedFormat'
+    import relativeTime from 'dayjs/plugin/relativeTime'
+    dayjs.extend(advancedFormat)
+    dayjs.extend(relativeTime)
 
-	// Components
-	import IconGlobe from '../../../atoms/IconGlobe'
-	import IconGlobeSmall from '../../../atoms/IconGlobeSmall'
-	import LinkChange from '../../../atoms/LinkChange'
-	import ToggleLayout from '../../../atoms/ToggleLayout'
-	import Photo from '../../../molecules/Photo'
-	import Switcher from '../../../molecules/Switcher'
-	import Footer from '../../../organisms/Footer'
+    // Components
+    import IconGlobe from '../../../atoms/IconGlobe'
+    import IconGlobeSmall from '../../../atoms/IconGlobeSmall'
+    import LinkChange from '../../../atoms/LinkChange'
+    import ToggleLayout from '../../../atoms/ToggleLayout'
+    import Photo from '../../../molecules/Photo'
+    import Switcher from '../../../molecules/Switcher'
+    import Pagination from '../../../organisms/Pagination'
+    import Footer from '../../../organisms/Footer'
+    import SocialMetas from '../../../utils/SocialMetas'
 
-	// Props and variables
-	export let photos
-	let layoutSetting
+    // Props and variables
+    export let photos
+    let layoutSetting
 
-	// Update current location
-	const location = $locations.find(loc => loc.slug === $page.params.location)
-	currentLocation.set(location)
-	currentPhotos.set(photos)
+    // Update current location
+    const location = $locations.find(loc => loc.slug === $page.params.location)
+    currentLocation.set(location)
+    currentPhotos.set(photos)
 
-	// Define dates
-	$: latestPhoto = photos[0]
-	$: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
-	$: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
-	$: dateUpdatedRelative = latestPhoto ?dayjs().to(dayjs(latestPhoto.modified_on)) : ''
-	$: lastUpdated = latestPhoto ? (dayjs(latestPhoto.modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelatives : ''
+    // Define dates
+    $: latestPhoto = photos[0]
+    $: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
+    $: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
+    $: dateUpdatedRelative = latestPhoto ?dayjs().to(dayjs(latestPhoto.modified_on)) : ''
+    $: lastUpdated = latestPhoto ? (dayjs(latestPhoto.modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelatives : ''
 
 
-	/*
-	** Pagination
-	*/
-	let photosPerPage = 2 // 12
-	let currentIndex = photosPerPage
-	const pagesTotal = Math.ceil(photos.length / photosPerPage)
-	const pages = Array.from({ length: pagesTotal }, (v, k) => k + 1).reverse()
-	let pageTranslate = 100 - (100 / pagesTotal)
+    /*
+    ** Pagination
+    */
+    let photosPerPage = 2 // 12
+    let currentIndex = photosPerPage
 
-	// Hide photos by default
-	photos.forEach((photo, index) => photo.hidden = (index + 1 > photosPerPage) ? true : false)
-	let paginatedPhotos = photos.filter(photo => photo.hidden === false)
+    // Hide photos by default
+    photos.forEach((photo, index) => photo.hidden = (index + 1 > photosPerPage) ? true : false)
+    let paginatedPhotos = photos.filter(photo => photo.hidden === false)
 
-	// Add more photos to the loop
-	const displayMorePhotos = () => {
-		if (currentIndex < photos.length) {
-			// Display the X next hidden photos
-			const photosToAppend = photos.filter(photo => photo.hidden === true).splice(0, photosPerPage)
-			photosToAppend.forEach(photo => photo.hidden = false)
-
-			// Merge new photos to show to the existing ones
-			paginatedPhotos = [...paginatedPhotos, ...photosToAppend]
-
-			// Increment current index
-			currentIndex = currentIndex + photosPerPage
-
-			// Animate the pagination
-			pageTranslate = pageTranslate - (100 / pagesTotal)
-		} else {
-			currentIndex = photos.length
-		}
-	}
+    // Update pagination event from Pagination component
+    const updatePagination = event => paginatedPhotos = event.detail.paginatedPhotos
 
 
-	/*
-	** Run code on browser only
-	*/
-	onMount(() => {
-		// Get layout setting from storage
-		layoutSetting = localStorage.getItem('photosLayout')
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Get layout setting from storage
+        layoutSetting = localStorage.getItem('photosLayout')
+
+        if (process.browser) {
+            // Scroll apparitions
+            AOS.init()
+        }
+    })
 
-		if (process.browser) {
-			// Scroll apparitions
-			AOS.init()
-		}
-	})
 </script>
 
 <svelte:head>
-	<title>Houses Of - Beautiful houses of {location.name}, {location.country.name}</title>
+    <title>Houses Of – Beautiful houses of {location.name}, {location.country.name}</title>
+    <meta name="description" content="Houses Of {location.name} {location.description}">
+    <SocialMetas
+        url="https://housesof.world/location/{location.country.slug}/{location.slug}"
+        title="Houses Of – Beautiful houses of {location.name}, {location.country.name}"
+        description="Houses Of {location.name} {location.description}"
+        image={latestPhoto ? fn.getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
+    />
 </svelte:head>
 
 <section class="place">
-	<div class="place__title">
-		<h1 class="title-location title-location--big">
-			<span class="top">Houses <em>of</em></span>
-			<span class="bottom">{location.name}</span>
-		</h1>
+    <div class="place__title">
+        <h1 class="title-location title-location--big">
+            <span class="top">Houses <em>of</em></span>
+            <span class="bottom">{location.name}</span>
+        </h1>
 
-		<a href="/choose" class="button-control button-control--big button-control--dashed">
-			<span class="center">
-				<IconGlobe width="44" color="#fff" />
-				<span>Change</span>
-			</span>
-			<svg>
-				<circle cx="50%" cy="50%" r="43%" />
-			</svg>
-		</a>
-	</div>
+        <a href="/choose" class="button-control button-control--big button-control--dashed">
+            <span class="center">
+                <IconGlobe width="44" color="#fff" />
+                <span>Change</span>
+            </span>
+            <svg>
+                <circle cx="50%" cy="50%" r="43%" />
+            </svg>
+        </a>
+    </div>
 
-	<div class="place__wrap wrap">
-		<div class="place__description">
-			<div class="wrapper">
-				<p>{$site.description}</p>
-				<p>
-					Houses Of
-					<LinkChange href="/choose" text={location.name}>
-						<IconGlobeSmall width="14" color="#999" />
-					</LinkChange>
-					{location.description}
-				</p>
-				<p class="updated style-caps">
-					<strong>Updated</strong>
-					<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
-				</p>
+    <div class="place__wrap wrap">
+        <div class="place__description">
+            <div class="wrapper">
+                <p>{$site.description}</p>
+                {#if location.description}
+                <p>
+                    Houses Of
+                    <LinkChange href="/choose" text={location.name}>
+                        <IconGlobeSmall width="14" color="#999" />
+                    </LinkChange>
+                    {location.description}
+                </p>
+                {/if}
 
-				<ToggleLayout />
-			</div>
-		</div>
-	</div>
+                {#if photos.length}
+                <p class="updated style-caps">
+                    <strong>Updated</strong>
+                    <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
+                </p>
 
-	<div class="place__illustration">
-		<div class="place__illustration--left side"></div>
-		<div class="place__illustration--center"></div>
-		<div class="place__illustration--right side"></div>
-	</div>
+                <ToggleLayout />
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    <div class="place__illustration">
+        <div class="place__illustration--left side"></div>
+        <div class="place__illustration--center"></div>
+        <div class="place__illustration--right side"></div>
+    </div>
 </section>
 
 <section class="photos photos--{layoutSetting || 'list'}">
-	<div class="photos__sidewrap wrap">
-		<aside class="photos__side">
-			<Switcher type="switcher--side" />
+    <div class="photos__sidewrap wrap">
+        <aside class="photos__side">
+            <Switcher type="switcher--side" />
 
-			<p class="updated style-caps">
-				<strong>Updated</strong>
-				<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
-			</p>
-		</aside>
-	</div>
+            {#if photos.length}
+            <p class="updated style-caps">
+                <strong>Updated</strong>
+                <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
+            </p>
+            {/if}
+        </aside>
+    </div>
 
-	{#if photos.length}
-	<div class="photos__view wrap">
-		{#each paginatedPhotos as photo, index}
-		<Photo
-			photo={photo}
-			layout={layoutSetting}
-			index={photos.length - (photos.indexOf(photo))}
-		/>
-		{/each}
-	</div>
+    {#if photos.length}
+    <div class="photos__view wrap">
+        {#each paginatedPhotos as photo, index}
+        <Photo
+            photo={photo}
+            index={photos.length - photos.indexOf(photo)}
+            layout={layoutSetting}
+        />
+        {/each}
+    </div>
 
-	<section class="pagination">
-		{#if photos.length && currentIndex <= photos.length}
-		<div class="pagination__page" class:disabled={currentIndex === photos.length}
-			on:click={displayMorePhotos}
-			on:mouseenter={() => pageTranslate = pageTranslate - ((100 / pagesTotal) * 0.666)}
-			on:mouseleave={() => pageTranslate = pageTranslate + ((100 / pagesTotal) * 0.666)}
-		>
-			<div class="pagination__info">page</div>
-			<div class="pagination__numbers">
-				<div class="scroll" style="transform: translateY(-{pageTranslate}%);">
-					{#each pages as page}
-					<span>{page}</span>
-					{/each}
-				</div>
-			</div>
-			/{pagesTotal}
-		</div>
-		<p class="pagination__caption style-caps">See more photos</p>
+    <Pagination
+        {photos} {paginatedPhotos} {photosPerPage}
+        on:updatePagination={updatePagination}
+    />
 
-		{:else}
-		<div class="pagination__message">
-			<h3>That's all folks!</h3>
-			<p class="pagination__caption style-caps">Come back later to check out <br>new photos of {location.name}</p>
-		</div>
-		{/if}
-	</section>
-	{/if}
+    {:else}
+    <div class="wrap" style="padding-top: 20vw; padding-bottom: 20vw;">
+        <p style="text-align: center; color: #333;">No photo for {location.name}</p>
+    </div>
+    {/if}
 </section>
 
 <Footer />