From 59f287af2b36b5bfce6a26cb65c19361c6a57ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 29 Mar 2020 19:49:01 +0200
Subject: [PATCH] Optimize some components

- Use binding of this over `document.querySelector` calls
- Use else if over a chained else and if condition
---
 src/atoms/Counter.svelte        |  6 ++++--
 src/atoms/ToggleLayout.svelte   | 14 +++++++-------
 src/organisms/Pagination.svelte |  4 +---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/atoms/Counter.svelte b/src/atoms/Counter.svelte
index 4595a08..3edb8fe 100644
--- a/src/atoms/Counter.svelte
+++ b/src/atoms/Counter.svelte
@@ -6,12 +6,14 @@
     export let className = null
 
     // Variables
+    let counter
+    const numbers = [...Array(10).keys()]
+
+    // Reactive variables depending on currentIndex
     $: actualIndex = currentIndex + 1
     $: amount = String(actualIndex).length
     $: index = (actualIndex < 10) ? String(actualIndex).padStart(2, '0') : String(actualIndex)
     $: digits = index.split('')
-    let counter
-    const numbers = [...Array(10).keys()]
 
 
     /*
diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte
index 154915b..593e250 100644
--- a/src/atoms/ToggleLayout.svelte
+++ b/src/atoms/ToggleLayout.svelte
@@ -2,6 +2,7 @@
     import { onMount } from 'svelte'
 
     // Variables
+    let toggleEl
     let toggleLayout
     let layoutSetting
 
@@ -17,17 +18,16 @@
         const layoutGridClass = 'photos--grid'
         const layoutListClass = 'photos--list'
         const grid = document.querySelector('.photos')
-        const toggle = document.querySelector('.toggle')
-        const pill = toggle.querySelector('.pill')
+        const pill = toggleEl.querySelector('.pill')
 
         // Change active pill
         const toggleAnimate = (elem, pill, toggle) => {
             pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
-            pill.style.left = Math.round(elem.getBoundingClientRect().left - toggle.getBoundingClientRect().left) + 'px'
+            pill.style.left = Math.round(elem.getBoundingClientRect().left - toggleEl.getBoundingClientRect().left) + 'px'
         }
 
         // Init of first option
-        toggleAnimate(document.querySelector(`.toggle [data-layout="${layoutSetting}"]`), pill, toggle)
+        toggleAnimate(toggleEl.querySelector(`[data-layout="${layoutSetting}"]`), pill, toggleEl)
 
         // Toggle layout
         toggleLayout = event => {
@@ -48,10 +48,10 @@
             }
 
             // Animate the active pill
-            toggleAnimate(clicked, pill, toggle)
+            toggleAnimate(clicked, pill, toggleEl)
 
             // Add/Remove active classes
-            document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active'))
+            toggleEl.querySelectorAll('button').forEach(button => button.classList.remove('active'))
             clicked.classList.add('active')
 
             // Remember this setting
@@ -60,7 +60,7 @@
     })
 </script>
 
-<div class="toggle">
+<div class="toggle" bind:this={toggleEl}>
     <button data-layout="list" class:active={layoutSetting === 'list'} on:click={toggleLayout}>
         <svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
             <g class="anim">
diff --git a/src/organisms/Pagination.svelte b/src/organisms/Pagination.svelte
index b36eeb5..286cde0 100644
--- a/src/organisms/Pagination.svelte
+++ b/src/organisms/Pagination.svelte
@@ -54,12 +54,10 @@
     </div>
     <p class="pagination__caption style-caps">See more photos</p>
 
-    {:else}
-    {#if $currentLocation}
+    {:else if $currentLocation}
     <div class="pagination__message">
         <h3>That's all folks!</h3>
         <p class="pagination__caption style-caps">Come back later to check out <br>new photos of {$currentLocation.name}</p>
     </div>
     {/if}
-    {/if}
 </section>