From 1b1d5d7274c8cf9dc7f5b0fca32c0214fe7e371d Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 21 Jan 2021 12:41:37 +0300
Subject: [PATCH] Fix children width, init state after reload

---
 src/ImageCarousel.svelte             | 11 +++++--
 src/store.js                         | 36 +++++++++++++++++------
 src/stories/ImageCarouselView.svelte | 43 +++++++++++++---------------
 3 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte
index 7ead97f..cfa6e64 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel.svelte
@@ -1,8 +1,11 @@
 <script>
   // TODO: rename image carousel to just carousel
+  // TODO: seems CarouselChild component can be removed
   import { onMount } from 'svelte'
   import { store } from './store'
 
+  console.log('init')
+
   /**
    * Enable Next/Prev arrows
    */
@@ -18,6 +21,9 @@
   let children
   let w = 0
   onMount(() => {
+    store.reset() // to init after hot reload
+    console.log('mounted!')
+    store.setCurrentItemIndex(0) // to init index after hot reload, check one more time
     children = innerContentContainerElement.children
     console.log('children', children.length)
     w = contentContainerElement.clientWidth
@@ -33,7 +39,7 @@
   }
   function handleNextClick() {
     store.next({ infinite })
-    console.log('currentItemId', $store.currentItemId)
+    console.log('children.length', children.length, $store.currentItemIndex)
     offset = -$store.currentItemIndex * children[$store.currentItemIndex].clientWidth
     console.log('offset', offset, children[$store.currentItemIndex].clientWidth)
   }
@@ -80,7 +86,8 @@
     overflow: hidden;
   }
   .content-container > div {
-    display: flex;
+    width: 100%;
+    display: flex; /* to put child elements in one row */
     transition: transform 1s ease-in-out;
     background-color: chocolate;
   }
diff --git a/src/store.js b/src/store.js
index 44e3f4d..34b72da 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,20 +2,27 @@ import { writable } from 'svelte/store';
 import { v4 as uuid } from 'uuid'
 import { getNextItemIndexFn, getPrevItemIndexFn } from './utils/item-index'
 
+// TODO: try to split writable store items
+// or try to use immer
+
+const initState = {
+  items: [],
+  currentItemId: null,
+  currentItemIndex: null,
+  action: 'next'
+}
 
 function createStore() {
-  const { subscribe, set, update } = writable({
-    items: [],
-    currentItemId: null,
-    currentItemIndex: null,
-    action: 'next'
-  });
+  const { subscribe, set, update } = writable(initState);
+
+  function reset() {
+    set(initState)
+  }
 
   function setItem(id = uuid()) {
     update(store => ({
       ...store,
-      currentItemId: id,
-      currentItemIndex: 0, // store.items.length - 1, TODO: use as a param
+      currentItemId: id, // TODO: seems is not used at all, can be removed
       items: [
         ...store.items,
         id
@@ -23,6 +30,13 @@ function createStore() {
     }))
   }
 
+  function setCurrentItemIndex(index) {
+    update(store => ({
+      ...store,
+      currentItemIndex: index,
+    }))
+  }
+
   function removeItem(id) {
     update(store => ({
       ...store,
@@ -33,7 +47,9 @@ function createStore() {
   function next({ infinite }) {
     update(store => {
       const currentItemIndex = store.currentItemIndex // store.items.findIndex(item => item === store.currentItemId)
+      console.log('next old currentItemIndex', currentItemIndex)
       const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, store.items)
+      // console.log('newCurrentItemIndex', newCurrentItemIndex)
       return {
         ...store,
         currentItemId: store.items[newCurrentItemIndex],
@@ -61,7 +77,9 @@ function createStore() {
     setItem,
     removeItem,
     next,
-    prev
+    prev,
+    setCurrentItemIndex,
+    reset
   };
 }
 
diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte
index 913f49b..907a1e0 100644
--- a/src/stories/ImageCarouselView.svelte
+++ b/src/stories/ImageCarouselView.svelte
@@ -18,28 +18,24 @@
     {arrows}
     {infinite}
   >
- 
-      <div
-        class="child-content-container"
-        style="background-color: green;"
-      >
-        <h1>Element 1</h1>
-      </div>
-
-      <div
-        class="child-content-container"
-        style="background-color: yellow;"
-      >
-        <h1>Element 2</h1>
-      </div>
-
-      <div
-        class="child-content-container"
-        style="background-color: blue;"
-      >
-        <h1>Element 3</h1>
-      </div>
-
+    <div
+      class="child-content-container"
+      style="background-color: green;"
+    >
+      <h1>Element 1</h1>
+    </div>
+    <div
+      class="child-content-container"
+      style="background-color: yellow;"
+    >
+      <h1>Element 2</h1>
+    </div>
+    <div
+      class="child-content-container"
+      style="background-color: blue;"
+    >
+      <h1>Element 3</h1>
+    </div>
   </ImageCarousel>
 </div>
 
@@ -49,8 +45,9 @@
     width: 100%;
   }
   .child-content-container {
-    width: 500px;
+    min-width: 100%;
     height: 100px;
+    display: flex;
     align-items: center;
     justify-content: center;
   }