WIP React > Svelte

Put most of the developed design into Svelte

src/routes/_layout.svelte

@@ -1,8 +1,8 @@
 <script context="module">
-	import { api, site, continents, countries, locations, currentLocation } from '../store'
+	import { apiEndpoints, site, continents, countries, locations } from '../store'
 
-	export async function preload (page, segment) {
-		const res = await this.fetch(api.graphql, {
+	export async function preload (page, session) {
+		const request = await this.fetch(apiEndpoints.gql, {
 			method: 'post',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ query: `{
@@ -25,11 +25,8 @@
 						id
 						name
 						slug
-						continent { id name }
-						flag {
-							full_url
-							title
-						}
+						flag { full_url title }
+						continent { id }
 					}
 				}
 				locations (filter: { status_eq: "published" }) {
@@ -38,55 +35,42 @@
 						name
 						slug
 						region
-						country {
-							name slug
-							flag {
-								full_url
-								title
-							}
-							continent { id name }
-						}
+						country { id }
 						description
 					}
 				}
 			}`})
 		})
-		const data = await res.json()
+		const result = await request.json()
 
 		// Set data into store
-		continents.set(data.data.continents.data)
-		countries.set(data.data.countries.data)
-		locations.set(data.data.locations.data)
-		site.set(data.data.site.data[0])
+		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>
-	// Styles
-	// import '../../node_modules/bulma/css/bulma.min.css'
-	// import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
-
-	// Components
-	import Footer from '../parts/Footer.svelte'
+	// 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(c => c.id === country.continent.id)
+		const continent = $continents.find(cont => cont.id === country.continent.id)
 		continent.countries = []
-		if (!continent.countries.includes(country)) {
-			continent.countries.push(country)
-		}
+		!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))
 </script>
 
-<svelte:head>
-	<title>Houses Of - Beautiful houses of planet Earth</title>
-</svelte:head>
-
 <style lang="scss" global>
-	@import '../style/style.scss';
+	@import "style/style.scss";
 </style>
 
 <slot></slot>
-
-<Footer />