WIP

src/organisms/Locations.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-    import Shuffle from 'shufflejs'
+    // import Shuffle from 'shufflejs'
 </script>
 
 <script>
@@ -8,15 +8,38 @@
     // import { zoomFadeIn, zoomFadeOut } from '../animations'
 
     // Components
+    import Button from '../atoms/Button'
     import Location from '../molecules/Location'
 
-    // Define continents to show
+    // Variables
+    let filterLocations
     let continentsToShow = []
+
+    // Define continents to show
     $continents.forEach(cont => !!cont.countries && continentsToShow.push(cont))
 
-    // Create the filterable list of locations
-    let filterLocations
+   // On click on continents
+   const toggleContinents = (event, continent) => {
+       // Change the filter
+       // filterLocations.filter(continent)
+
+       // Change active classes
+       document.querySelectorAll('#continents button').forEach(button => {
+           if (!continent) {
+               button.classList.remove('disabled')
+           } else {
+               button.classList.add('disabled')
+               event.currentTarget.querySelector('button').classList.remove('disabled')
+           }
+       })
+   }
+
+
+    /*
+    ** Run code on browser only
+    */
     onMount(() => {
+        // Create the filterable list of locations
         // filterLocations = new Shuffle(document.getElementById('continents'), {
         //     itemSelector: '.location',
         //     // sizer: '#locations_list',
@@ -25,36 +48,22 @@
         // })
     })
 
-    // // On click on continents
-    const toggleContinents = (event, continent = '') => {
-        // Change the filter
-        // filterLocations.filter(continent.id)
-
-        // Change active classes
-        const continents = document.querySelectorAll('#continents a')
-        if (!continent) {
-            continents.forEach(cont => cont.classList.remove('disabled'))
-        } else {
-            continents.forEach(cont => cont.classList.add('disabled'))
-            event.currentTarget.classList.remove('disabled')
-        }
-    }
 </script>
 
 <div class="browse wrap">
-    <div class="description">
+    <div class="browse__description style-description">
         <p>Browse all the cities and countries</p>
     </div>
 
     <ul class="browse__continents" id="continents">
-        <li>
-            <button class="button-outline" on:click|preventDefault={e => toggleContinents(e)}>All</button>
+        {#if continentsToShow.length > 1}
+        <li on:click={e => toggleContinents(e)}>
+            <Button type="button" className="button-outline" text="All" />
         </li>
+        {/if}
         {#each continentsToShow as continent}
-        <li>
-            <button class="button-outline" on:click|preventDefault={e => toggleContinents(e, continent)}>
-                <span>{continent.name}</span>
-            </button>
+        <li on:click={e => toggleContinents(e, continent.id)}>
+            <Button type="button" className="button-outline" text={continent.name} />
         </li>
         {/each}
     </ul>