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> <script>
import { site } from '../store' // Svelte
import { site, currentLocation } from '../store'
</script> </script>
<!-- <pre>{JSON.stringify($site, '', 2)}</pre> -->
<footer class="footer"> <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="column columns">
<p class="column">
<div class="right"> <a href="https://instagram.com/{$site.instagram}" target="_blank">Instagram</a>
<div class="instagram"> </p>
<a href="https://instagram.com/cetrucflotte" target="_blank">Instagram</a> <p class="column">
</div> <a href="https://cetrucflotte.com" target="_blank">A project by <img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's"></a>
</p>
<div class="ctf"> </div>
<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>
</div>
</footer> </footer>

59
src/routes/_layout.svelte
View File

@@ -1,8 +1,8 @@
<script context="module"> <script context="module">
import { locations, countries, site } from '../store' import { api, site, countries, locations, currentLocation } from '../store'
export async function preload (page, segment) { 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', method: 'post',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `{ body: JSON.stringify({ query: `{
@@ -17,19 +17,24 @@
countries { countries {
data { data {
name name
slug
flag { metadata } flag { metadata }
} }
} }
locations (filter: { status_eq: "published" }) { locations (filter: { status_eq: "published" }) {
data { data {
name name
slug
region region
country { name } country { name slug }
description
} }
} }
}`}) }`})
}) })
const data = await res.json() const data = await res.json()
// Set data into store
countries.set(data.data.countries.data) countries.set(data.data.countries.data)
locations.set(data.data.locations.data) locations.set(data.data.locations.data)
site.set(data.data.site.data[0]) site.set(data.data.site.data[0])
@@ -37,50 +42,18 @@
</script> </script>
<script> <script>
// Dependencies
import '../../node_modules/bulma/css/bulma.min.css' 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> </script>
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <svelte:head>
<div class="container"> <title>Houses Of - Beautiful houses of planet Earth</title>
<div class="navbar-start"> </svelte:head>
<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>
<slot></slot> <slot></slot>
<footer class="footer"> <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>

13
src/store.js
View File

@@ -1,15 +1,18 @@
import * as fn from './functions' import { readable, writable } from 'svelte/store'
import { writable } from 'svelte/store'
/* ========================================================================== /* ==========================================================================
Site related 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) export let loaded = writable(false)
// Data // Data
export let locations = writable()
export let countries = writable()
export let site = writable() export let site = writable()
export let countries = writable()
export let locations = writable()