From 4425f991c26e44a9374021caa0b50d53263f038b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 28 Dec 2019 13:16:59 +0100
Subject: [PATCH] Use GraphQL, Set current location in store

---
 src/parts/Footer.svelte   | 32 +++++++++++----------
 src/routes/_layout.svelte | 59 +++++++++++----------------------------
 src/store.js              | 13 +++++----
 3 files changed, 41 insertions(+), 63 deletions(-)

diff --git a/src/parts/Footer.svelte b/src/parts/Footer.svelte
index e495c6a..9e68882 100644
--- a/src/parts/Footer.svelte
+++ b/src/parts/Footer.svelte
@@ -1,21 +1,23 @@
 <script>
-    import { site } from '../store'
+	// Svelte
+	import { site, currentLocation } from '../store'
 </script>
 
-<!-- <pre>{JSON.stringify($site, '', 2)}</pre> -->
-
 <footer class="footer">
-    <div class="left">
+	<div class="container">
+		<div class="content columns">
+			<div class="column is-7">
+				<p><strong>Houses Of {($currentLocation) ? $currentLocation.location.name : ''}</strong></p>
+			</div>
 
-    </div>
-
-    <div class="right">
-        <div class="instagram">
-            <a href="https://instagram.com/cetrucflotte" target="_blank">Instagram</a>
-        </div>
-
-        <div class="ctf">
-            <a href="https://cetrucflotte.com" target="_blank">A project by <img src="/assets/img/logo-cetrucflotte.png" alt="Cetrucflotte" width="118" height="22"></a>
-        </div>
-    </div>
+			<div class="column columns">
+				<p class="column">
+					<a href="https://instagram.com/{$site.instagram}" target="_blank">Instagram</a>
+				</p>
+				<p class="column">
+					<a href="https://cetrucflotte.com" target="_blank">A project by <img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's"></a>
+				</p>
+			</div>
+		</div>
+	</div>
 </footer>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 8858f85..eebea8a 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,8 +1,8 @@
 <script context="module">
-	import { locations, countries, site } from '../store'
+	import { api, site, countries, locations, currentLocation } from '../store'
 
 	export async function preload (page, segment) {
-		const res = await this.fetch('http://api.housesof.localhost/how/gql?access_token=NJk0urljsdSvApUDzWxGgoO6', {
+		const res = await this.fetch(api.graphql, {
 			method: 'post',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ query: `{
@@ -17,19 +17,24 @@
 				countries {
 					data {
 						name
+						slug
 						flag { metadata }
 					}
 				}
 				locations (filter: { status_eq: "published" }) {
 					data {
 						name
+						slug
 						region
-						country { name }
+						country { name slug }
+						description
 					}
 				}
 			}`})
 		})
 		const data = await res.json()
+
+		// Set data into store
 		countries.set(data.data.countries.data)
 		locations.set(data.data.locations.data)
 		site.set(data.data.site.data[0])
@@ -37,50 +42,18 @@
 </script>
 
 <script>
+	// Dependencies
 	import '../../node_modules/bulma/css/bulma.min.css'
-	import * as fn from '../functions'
+	import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
 
-	// import SwitcherLarge from '../components/Photos.svelte'
+	// Components
+	import Footer from '../parts/Footer.svelte'
 </script>
 
-<nav class="navbar is-danger" role="navigation" aria-label="main navigation">
-	<div class="container">
-		<div class="navbar-start">
-			<div class="navbar-brand">
-				<a class="navbar-item" href="/">
-					<strong>Houses Of</strong>
-				</a>
-			</div>
-
-			<div class="navbar-item has-dropdown is-hoverable">
-				<a class="navbar-link" href="/">Locations</a>
-				<div class="navbar-dropdown">
-					{#each $locations as location}
-					<a class="navbar-item" href="/location/{fn.slug(location.name)}">{location.name}</a>
-					{/each}
-				</div>
-			</div>
-		</div>
-	</div>
-</nav>
+<svelte:head>
+	<title>Houses Of - Beautiful houses of planet Earth</title>
+</svelte:head>
 
 <slot></slot>
 
-<footer class="footer">
-	<div class="container">
-		<div class="content columns">
-			<div class="column is-7">
-				<p><strong>Houses Of</strong></p>
-			</div>
-
-			<div class="column columns">
-				<p class="column">
-					<a href="https://instagram.com/{$site.instagram}" target="_blank">Instagram</a>
-				</p>
-				<p class="column">
-					<a href="https://cetrucflotte.com" target="_blank">A project by Cetrucflotte</a>
-				</p>
-			</div>
-		</div>
-	</div>
-</footer>
+<Footer />
diff --git a/src/store.js b/src/store.js
index c22a8af..d7628f0 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,15 +1,18 @@
-import * as fn from './functions'
-import { writable } from 'svelte/store'
+import { readable, writable } from 'svelte/store'
 
 
 
 /* ==========================================================================
    Site related
 ========================================================================== */
-export let currentLocation = {}
+export const api = {
+    graphql: '//api.housesof.localhost/how/gql?access_token=NJk0urljsdSvApUDzWxGgoO6',
+    rest: '//api.housesof.localhost/how'
+}
+export let currentLocation = writable()
 export let loaded = writable(false)
 
 // Data
-export let locations = writable()
-export let countries = writable()
 export let site = writable()
+export let countries = writable()
+export let locations = writable()