From a73d9ff71c3899d375d39e4807308581ea191009 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 27 Feb 2020 23:08:13 +0100
Subject: [PATCH] Tabs to spaces and code cleaning

---
 src/molecules/Photo.svelte                    |  12 +-
 src/molecules/Switcher.svelte                 |   4 +-
 src/routes/_layout.svelte                     | 136 +++++++--------
 src/routes/choose.svelte                      |   8 +-
 src/routes/index.svelte                       | 152 ++++++++---------
 .../location/[country]/[location].svelte      |  22 ++-
 .../[country]/[location]/[photo].svelte       | 157 ++++++++----------
 7 files changed, 248 insertions(+), 243 deletions(-)

diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index a8e0b41..473a6c1 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -12,8 +12,8 @@
     dayjs.extend(advancedFormat)
 
     // Props and variables
-    export let index
     export let photo
+    export let index
     export let layout = 'list'
     let photoElement
 
@@ -22,16 +22,16 @@
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
     // Reactive variables for location informations
-    $: location = $currentLocation
-    $: imgAlt = !!location ? `${photo.name}, ${location.region}, ${location.country.name}` : 'Loading…'
-    $: photoHref = !!location ? `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` : '#'
+    const location = photo.location
+    const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
+    const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
 
 
     /*
 	** Run code on browser only
 	*/
 	onMount(() => {
-        // Parallax on photo when image has been loaded
+        // Parallax on photo when the image has been loaded
         const parallaxNumber = basicScroll.default.create({
             elem: photoElement.querySelector('.photo__image--number'),
             direct: photoElement,
@@ -57,7 +57,7 @@
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
-            <p class="style-caps">{!!location && location.region}, {!!location && location.country.name}</p>
+            <p class="style-caps">{location.region}, {location.country.name}</p>
         </div>
     </div>
 
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index f7b6538..d3fa0bc 100644
--- a/src/molecules/Switcher.svelte
+++ b/src/molecules/Switcher.svelte
@@ -1,5 +1,7 @@
 <script>
-    import { currentLocation } from '../store'
+    import {
+        currentLocation,
+    } from '../store'
 
     // Components
     import IconGlobe from '../atoms/iconGlobe'
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 54f27f3..d0b8a49 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,80 +1,86 @@
 <script context="module">
-	import { apiEndpoints, site, continents, countries, locations } from '../store'
+    import {
+        apiEndpoints,
+        site,
+        continents,
+        countries,
+        locations
+    } from '../store'
 
-	export async function preload (page, session) {
-		const request = await this.fetch(apiEndpoints.gql, {
-			method: 'post',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ query: `{
-				site {
-					data {
-						description
-						explore_globe
-						explore_list
-						instagram
-						credits_text
-						credits_list
-					}
-				}
-				continents {
-					data {
-						id
-						name
-					}
-				}
-				countries {
-					data {
-						id
-						name
-						slug
-						flag { full_url title }
-						continent { id }
-					}
-				}
-				locations (filter: { status_eq: "published" }) {
-					data {
-						id
-						name
-						slug
-						region
-						country { id }
-						description
-						coordinates
-					}
-				}
-			}`})
-		})
-		const result = await request.json()
+    export async function preload (page, session) {
+        const request = await this.fetch(apiEndpoints.gql, {
+            method: 'post',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query: `{
+                site {
+                    data {
+                        description
+                        explore_globe
+                        explore_list
+                        instagram
+                        credits_text
+                        credits_list
+                    }
+                }
+                continents {
+                    data {
+                        id
+                        name
+                    }
+                }
+                countries {
+                    data {
+                        id
+                        name
+                        slug
+                        flag { full_url title }
+                        continent { id }
+                    }
+                }
+                locations (filter: { status_eq: "published" }) {
+                    data {
+                        id
+                        name
+                        slug
+                        region
+                        country { id }
+                        description
+                        coordinates
+                    }
+                }
+            }`})
+        })
+        const result = await request.json()
 
-		// Set data into store
-		site.set(result.data.site.data[0])
-		continents.set(result.data.continents.data)
-		countries.set(result.data.countries.data)
-		locations.set(result.data.locations.data)
-	}
+        // Set data into store
+        site.set(result.data.site.data[0])
+        continents.set(result.data.continents.data)
+        countries.set(result.data.countries.data)
+        locations.set(result.data.locations.data)
+    }
 </script>
 
 <script>
-	// Manipulate countries data
-	// Replace each countrie's continent by the database
-	$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
+    // Manipulate countries data
+    // Replace each countrie's continent by the database
+    $countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
 
-	// Manipulate continents data
-	// Push each country to its continent
-	$countries.forEach(country => {
-		const continent = $continents.find(cont => cont.id === country.continent.id)
-		continent.countries = []
-		!continent.countries.includes(country) && continent.countries.push(country)
-	})
+    // Manipulate continents data
+    // Push each country to its continent
+    $countries.forEach(country => {
+        const continent = $continents.find(cont => cont.id === country.continent.id)
+        continent.countries = []
+        !continent.countries.includes(country) && continent.countries.push(country)
+    })
 
-	// Manipulate locations data
-	// Replace each location's country by the database
-	$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
+    // Manipulate locations data
+    // Replace each location's country by the database
+    $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
 </script>
 
 <!-- <style src="../style/style.scss" global></style> -->
 <style lang="scss" global>
-	@import "./style/style.scss";
+    @import "./style/style.scss";
 </style>
 
 <slot></slot>
diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte
index 0a9b88e..ac70218 100644
--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -1,8 +1,10 @@
 <script>
     import { onMount } from 'svelte'
-    import { fade, fly } from 'svelte/transition'
-    import { flip } from 'svelte/animate'
-    import { site, currentLocation, currentPhotos } from '../store'
+    import {
+        site,
+        currentLocation,
+        currentPhotos
+    } from '../store'
     import AOS from 'aos'
 
     // Components
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 3176317..2362e03 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,5 +1,7 @@
 <script context="module">
-	import { apiEndpoints } from '../store'
+	import {
+        apiEndpoints,
+    } from '../store'
 
 	// Preload data
 	export async function preload (page, session) {
@@ -7,9 +9,9 @@
         const limit = 5
 		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
         const photos = await req.json()
-		if (req.status === 200) {
-			return { photos: photos.data }
-		}
+		if (req.ok) {
+            return { photos: photos.data }
+        }
 		this.error(404, 'Not found')
 	}
 </script>
@@ -52,36 +54,36 @@
         // Scroll apparitions
         if (process.browser) {
             AOS.init()
+
+            // Parallax titles
+            const titleHouses = document.getElementById('title-houses')
+            const scrollTitleHouses = basicScroll.default.create({
+                elem: titleHouses,
+                direct: titleHouses,
+                from: 0,
+                to: window.innerHeight * 0.6,
+                props: {
+                    '--translateX': {
+                        from: '-3%',
+                        to: '-20%'
+                    }
+                }
+            }).start()
+
+            const titleWorld = document.getElementById('title-world')
+            const scrollTitleWorld = basicScroll.default.create({
+                elem: titleWorld,
+                direct: titleWorld,
+                from: document.querySelector('.explore__description').getBoundingClientRect().top,
+                to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
+                props: {
+                    '--translateX': {
+                        from: '4%',
+                        to: '-4%'
+                    }
+                }
+            }).start()
         }
-
-        // Parallax titles
-        const titleHouses = document.getElementById('title-houses')
-        const scrollTitleHouses = basicScroll.default.create({
-            elem: titleHouses,
-            direct: titleHouses,
-            from: 0,
-            to: window.innerHeight * 0.6,
-            props: {
-                '--translateX': {
-                    from: '-3%',
-                    to: '-20%'
-                }
-            }
-        }).start()
-
-        const titleWorld = document.getElementById('title-world')
-        const scrollTitleWorld = basicScroll.default.create({
-            elem: titleWorld,
-            direct: titleWorld,
-            from: document.querySelector('.explore__description').getBoundingClientRect().top,
-            to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
-            props: {
-                '--translateX': {
-                    from: '4%',
-                    to: '-4%'
-                }
-            }
-        }).start()
     })
 </script>
 
@@ -89,50 +91,48 @@
 	<title>Houses Of - Beautiful houses of planet Earth</title>
 </svelte:head>
 
-<div in:fade out:fade>
-    <section class="intro">
-        <div class="anim-mask" in:fade out:fade>
-            <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
-                <h1 class="title-massive" aria-label="Houses">
-                    {@html fn.lettersToSpan('Houses')}
-                </h1>
-            </div>
-        </div>
-
-        <div class="wrap" in:fade out:fade>
-            <div class="intro__description style-description">
-                <p>{$site.description}</p>
-
-                <Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
-                    <IconGlobeSmall width="22" color="#666" />
-                </Button>
-            </div>
-        </div>
-
-        <Carousel {photos} />
-    </section>
-
-    <section class="explore explore--homepage">
-        <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
-            <div class="anim-mask">
-                {@html fn.lettersToSpan('of')}
-            </div>
-        </div>
-
-        <div class="explore__description style-description" id="choose">
-            <p>{$site.explore_globe}</p>
-        </div>
-
-        <InteractiveGlobe />
-
-        <div class="anim-mask anim-title">
-            <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
-                {@html fn.lettersToSpan('World')}
+<section class="intro">
+    <div class="anim-mask">
+        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
+            <h1 class="title-massive" aria-label="Houses">
+                {@html fn.lettersToSpan('Houses')}
             </h1>
         </div>
+    </div>
 
-        <Locations />
-    </section>
+    <div class="wrap">
+        <div class="intro__description style-description">
+            <p>{$site.description}</p>
 
-    <Footer />
-</div>
+            <Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
+                <IconGlobeSmall width="22" color="#666" />
+            </Button>
+        </div>
+    </div>
+
+    <Carousel {photos} />
+</section>
+
+<section class="explore explore--homepage">
+    <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
+        <div class="anim-mask">
+            {@html fn.lettersToSpan('of')}
+        </div>
+    </div>
+
+    <div class="explore__description style-description" id="choose">
+        <p>{$site.explore_globe}</p>
+    </div>
+
+    <InteractiveGlobe />
+
+    <div class="anim-mask anim-title">
+        <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
+            {@html fn.lettersToSpan('World')}
+        </h1>
+    </div>
+
+    <Locations />
+</section>
+
+<Footer />
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index 64cc31c..58bc594 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -1,6 +1,11 @@
 <script context="module">
-	// Svelte
-	import { apiEndpoints, site, locations, currentLocation, currentPhotos } from '../../../store'
+	import {
+		apiEndpoints,
+		site,
+		locations,
+		currentLocation,
+		currentPhotos
+	} from '../../../store'
 	import { stores } from '@sapper/app'
 
 	// Preload data
@@ -8,7 +13,7 @@
 		// 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.status === 200) {
+		if (req.ok) {
 			return { photos: photos.data }
 		}
 		this.error(404, 'Not found')
@@ -47,10 +52,11 @@
 	currentPhotos.set(photos)
 
 	// Define dates
-	const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
-	const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
-	const dateUpdatedRelative = photos.length ? dayjs().to(dayjs(photos[0].modified_on)) : ''
-	const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : ''
+	$: 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 : ''
 
 
 	/*
@@ -156,6 +162,7 @@
 		</aside>
 	</div>
 
+	{#if photos.length}
 	<div class="photos__view wrap">
 		{#each paginatedPhotos as photo, index}
 		<Photo
@@ -192,6 +199,7 @@
 		</div>
 		{/if}
 	</section>
+	{/if}
 </section>
 
 <Footer />
diff --git a/src/routes/viewer/[country]/[location]/[photo].svelte b/src/routes/viewer/[country]/[location]/[photo].svelte
index d86a56e..d5509c5 100644
--- a/src/routes/viewer/[country]/[location]/[photo].svelte
+++ b/src/routes/viewer/[country]/[location]/[photo].svelte
@@ -1,112 +1,99 @@
 <script context="module">
-	import { apiEndpoints, locations, currentLocation } from '../../../../store'
-	import { stores } from '@sapper/app'
+    import { stores } from '@sapper/app'
+    import {
+        apiEndpoints,
+        locations,
+        currentLocation,
+        currentPhotos
+    } from '../../../../store'
 
-	// Define either to preload data or use the store
-	let preloaded
-	currentLocation.subscribe(store => preloaded = store ? store : undefined)
+    // Define either to preload data or use the store
+    let preloaded
+    currentLocation.subscribe(store => preloaded = store ? store : undefined)
 
-	// Preload data
-	export async function preload (page, session) {
-		// Load the photos if not loaded
-		if (!preloaded) {
-			const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
-			const photos = await req.json()
-			return {
-				photos: photos.data
-			}
-		}
-		// Use the store otherwise
-		else return {
-			photos: preloaded.photos
-		}
-	}
+    // Preload data
+    export async function preload (page, session) {
+        // Load the photos if not loaded
+        if (!preloaded) {
+            const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
+            const photos = await req.json()
+            return {
+                photos: photos.data
+            }
+        }
+        // Use the store otherwise
+        else return {
+            photos: preloaded.photos
+        }
+    }
 </script>
 
 <script>
-	import { onMount } from 'svelte'
-	import * as fn from '../../../../functions'
+    import { onMount } from 'svelte'
+    import * as fn from '../../../../functions'
 
-	// Dependencies
+    // Dependencies
     import dayjs from 'dayjs'
-	import advancedFormat from 'dayjs/plugin/advancedFormat'
-	dayjs.extend(advancedFormat)
+    import advancedFormat from 'dayjs/plugin/advancedFormat'
+    dayjs.extend(advancedFormat)
 
-	// Components
-	import IconGlobe from '../../../../atoms/IconGlobe'
-	import IconCross from '../../../../atoms/IconCross'
-	import Carousel from '../../../../organisms/Carousel'
+    // Components
+    import IconGlobe from '../../../../atoms/IconGlobe'
+    import IconCross from '../../../../atoms/IconCross'
+    import Carousel from '../../../../organisms/Carousel'
 
-	// Props and variables
-	const { page } = stores()
-	export let photos
-	let currentIndex
-	let indexFormated
-	let viewerPhotos
-	let windowWidth
-	let changeWindowWidth
+    // Props and variables
+    const { page } = stores()
+    export let photos
+    let currentIndex
+    let indexFormated
+    let viewerPhotos
+    let windowWidth
+    let changeWindowWidth
 
-	// Define current location
-	const location = $locations.find(loc => loc.slug === $page.params.location)
-	const locationFull = `${location.name}, ${location.country.name}`
-	$currentLocation == undefined && currentLocation.set({ location, photos })
+    // Define current location
+    const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
+    const locationFull = `${location.name}, ${location.country.name}`
 
-	// Define path
-	const path = `/viewer/${location.country.slug}/${location.slug}/`
+    // Update store current location informations
+    if (!$currentLocation) currentLocation.set(location)
+    if (!$currentPhotos) currentPhotos.set(photos)
 
-	// Set current photo, index and siblings
-	const setCurrentPhotos = () => {
-		// Define index and prev/next photos
-		currentIndex = photos.findIndex(photo => photo.slug === $page.params.photo)
-		indexFormated = (currentIndex < 10) ? '0' + (currentIndex + 1) : currentIndex + 1
-		viewerPhotos = {
-			current: photos[currentIndex],
-			// Last photo if first, otherwise index - 1
-			prev: (currentIndex === 0) ? photos[photos.length - 1] : photos[currentIndex - 1],
-			// First photo if last, otherwise index + 1
-			next: (currentIndex === photos.length - 1) ? photos[0] : photos[currentIndex + 1]
-		}
-	}
-
-	// On photo page change
-	page.subscribe(({ path, params, query }) => {
-		if (path.includes('/viewer/')) {
-			setCurrentPhotos()
-		}
-	})
+    // Define path
+    const path = `/viewer/${location.country.slug}/${location.slug}/`
 
 
-	/*
-	** Run code on browser only
-	*/
-	onMount(() => {
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
 
-	})
+    })
 </script>
 
 <svelte:head>
-	<title>Houses Of - photoName photoCountryName</title>
+    <title>Houses Of - photoName photoCountryName</title>
 </svelte:head>
 
 <svelte:window bind:innerWidth={windowWidth} />
 
 <section class="viewer">
-	<div class="viewer__top">
-		<p class="tip">Tap for fullscreen</p>
+    <div class="viewer__top">
+        <p class="tip">Tap for fullscreen</p>
 
-		<div class="buttons">
-			<a href="/choose" class="button-control button-control--dashed">
-				<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
-				<svg>
-					<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
-				</svg>
-			</a>
-			<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
-				<IconCross color="#fff" width="18" class="icon" />
-				<IconCross color="#fff" width="18" class="icon" hidden="true" />
-			</a>
-		</div>
-	</div>
+        <div class="buttons">
+            <a href="/choose" class="button-control button-control--dashed">
+                <IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
+                <svg>
+                    <circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
+                </svg>
+            </a>
+            <a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
+                <IconCross color="#fff" width="18" class="icon" />
+                <IconCross color="#fff" width="18" class="icon" hidden="true" />
+            </a>
+        </div>
+    </div>
 
-	<Carousel {photos} viewer={true} />
+    <Carousel {photos} viewer={true} />
 </section>