flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use GraphQL, Set current location in store

Browse Source
This commit is contained in:
Félix Péault
2019-12-28 13:16:59 +01:00
parent ff17ee6167
commit 4425f991c2
3 changed files with 41 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/parts/Footer.svelte
View File

@@ -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>

59
src/routes/_layout.svelte
View File

@@ -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 />

13
src/store.js
View File

@@ -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()