From a47617d895edcab382e016b7af49996dc6ef8055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 2 Oct 2021 13:24:01 +0200
Subject: [PATCH] Display continents filters buttons with countries only

Hide the ones with no linked country
---
 src/components/organisms/Locations.svelte | 22 ++++++++++++++--------
 src/routes/__layout.svelte                |  6 ++++++
 src/style/organisms/_locations.scss       | 11 +++++++----
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index acd59de..3f216ba 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
+    import { getContext } from 'svelte'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
 
     export let locations: any
+
+    const { continent } = getContext('global')
+
+    // Filter continents with linked countries
+    const filteredContinents = continent.filter((cont: any) => cont.countries.length)
 </script>
 
 <div class="browse">
@@ -11,18 +17,18 @@
         <p>Browse all the cities and countries</p>
     </div>
 
-    <ul class="browse__continents" id="continents">
-        <li>
-            <Button tag="button" text="All" class="button-outline" />
-            <Button tag="button" text="Europe" class="button-outline" />
-        </li>
+    <ul class="browse__continents" role="navigation">
+        {#each filteredContinents as { name, slug }}
+            <li>
+                <Button tag="button" text={name} class="button--small" />
+            </li>
+        {/each}
     </ul>
 
-    <div class="browse__locations" id="locations_list" role="list">
-        {#each locations as location, index}
+    <div class="browse__locations" role="list">
+        {#each locations as location}
             <Location
                 location={location}
-                index={index}
             />
         {/each}
     </div>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index be94a91..efcbd60 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -50,11 +50,17 @@
                     flag {
                         id
                     }
+                    locations {
+                        slug
+                    }
                 }
 
                 continent {
                     name
                     slug
+                    countries {
+                        slug
+                    }
                 }
 
                 settings {
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 32ce9e9..7f79006 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,5 +1,5 @@
 .browse {
-    margin-top: 96px;
+    margin: 96px 0 128px;
 
     // Description
     &__description {
@@ -17,9 +17,12 @@
 
     // Continents
     &__continents {
+        display: flex;
+        justify-content: center;
         text-align: center;
 
-        button {
+        li {
+            display: block;
             margin: 0 8px;
         }
     }
@@ -28,7 +31,7 @@
     &__locations {
         width: 70%;
         max-width: 1200px;
-        margin: 88px auto 80px;
+        margin: 88px auto 0;
         padding: 0 32px;
 
         @include bp (mob-lg) {
@@ -43,7 +46,7 @@
             display: flex;
             flex-flow: row wrap;
             width: 100%;
-            margin: 104px auto 80px;
+            margin-top: 104px;
         }
 
         .location {