From 92d7ee043ae770ee3eac146933e0cfc936a1ca3d Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 22 Jan 2021 20:20:17 +0300
Subject: [PATCH] Use subscription

---
 src/Arrow/Arrow.svelte                 |  1 +
 src/ImageCarousel/ImageCarousel.svelte | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/Arrow/Arrow.svelte b/src/Arrow/Arrow.svelte
index 3138e8a..e3d28ac 100644
--- a/src/Arrow/Arrow.svelte
+++ b/src/Arrow/Arrow.svelte
@@ -29,6 +29,7 @@
     align-items: center;
     justify-content: center;
     transition: opacity 100ms ease;
+    cursor: pointer;
   }
   .circle:hover {
     opacity: 0.9;
diff --git a/src/ImageCarousel/ImageCarousel.svelte b/src/ImageCarousel/ImageCarousel.svelte
index 4dd7f9c..9e60f14 100644
--- a/src/ImageCarousel/ImageCarousel.svelte
+++ b/src/ImageCarousel/ImageCarousel.svelte
@@ -1,8 +1,7 @@
 <script>
   // TODO: rename image carousel to just carousel
   // TODO: subscribe on mount and unsubscribe on destroy to
-  // $store.currentPageIndex to avoid multiple subscriptions
-  import { onMount } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
   import { store } from '../store'
   import {
     getPageIndex,
@@ -59,12 +58,17 @@
    */
   export let dots = true
 
+  let currentPageIndex = 0 
   let pagesCount = 0
   let pageWidth = 0
   let offset
   let contentContainerElement
   let innerContentContainerElement
 
+  const unsubscribe = store.subscribe(value => {
+    currentPageIndex = value.currentPageIndex
+  })
+
   function applySlideSizes() {
     const children = innerContentContainerElement.children
     pageWidth = contentContainerElement.clientWidth
@@ -113,12 +117,16 @@
     }
   })
 
+  onDestroy(() => {
+    unsubscribe()
+  })
+
   function handlePageChange(event) {
     showPage(event.detail)
   }
 
   function applyOffset() {
-    offset = -$store.currentPageIndex * pageWidth
+    offset = -currentPageIndex * pageWidth
   }
 
   function showPage(pageIndex) {
@@ -169,13 +177,13 @@
   {#if dots}
     <slot
       name="dots"
-      currentPageIndex={$store.currentPageIndex}
+      currentPageIndex={currentPageIndex}
       {pagesCount}
       {showPage}
     >
       <Dots
         {pagesCount}
-        currentPageIndex={$store.currentPageIndex}
+        currentPageIndex={currentPageIndex}
         on:pageChange={handlePageChange}
       ></Dots>
     </slot>