Add store

package.json

@@ -26,6 +26,7 @@
     "svelte-loader": "^2.13.6"
   },
   "dependencies": {
-    "sirv-cli": "^1.0.0"
+    "sirv-cli": "^1.0.0",
+    "uuid": "^8.3.2"
   }
 }

src/CarouselChild.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { onMount } from 'svelte'
+  import { generateId } from './utils/id'
+  import { store } from './store'
+
+  const id = generateId() 
+  onMount(() => {
+    store.setItem(id)
+  })
+</script>
+
+{#if id === $store.currentItemId}
+<slot></slot>
+{/if }
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+</style>

src/ImageCarousel.svelte

@@ -1,5 +1,8 @@
 <script>
+  // TODO: rename image carousel to just carousel
   import { onMount } from 'svelte'
+  import { store } from './store'
+
   /**
    * Enable Next/Previos arrows
    */
@@ -12,10 +15,11 @@
   })
 
   function handleLeftClick() {
-    // TODO: implement
+    store.prev()
   }
+  // TODO: rename to handleNextClick
   function handleRightClick() {
-    // TODO: implement
+    store.next()
   }
 </script>
 

src/store.js

@@ -0,0 +1,54 @@
+import { writable } from 'svelte/store';
+
+
+function createStore() {
+  const { subscribe, set, update } = writable({
+    items: [],
+    currentItemId: null
+  });
+
+  function setItem(id) {
+    update(store => ({
+      ...store,
+      currentItemId: id,
+      items: [
+        ...store.items,
+        id
+      ]
+    }))
+  }
+
+  function next() {
+    // TODO: move to utils functions and cover eoth tests
+    update(store => {
+      const currentItemIndex = store.items.findIndex(item => item === store.currentItemId)
+      // TODO: infinite
+      // const newCurrentItemIndex = currentItemIndex + 1 > store.items.length - 1 ? 0 : currentItemIndex + 1
+      const newCurrentItemIndex = Math.min(currentItemIndex + 1, store.items.length - 1)
+      return {
+        ...store,
+        currentItemId: store.items[newCurrentItemIndex]
+      }
+    })
+  }
+
+  function prev() {
+    update(store => {
+      const currentItemIndex = store.items.findIndex(item => item === store.currentItemId)
+      const newCurrentItemIndex = Math.max(0, currentItemIndex - 1)
+      return {
+        ...store,
+        currentItemId: store.items[newCurrentItemIndex]
+      }
+    })
+  }
+
+  return {
+    subscribe,
+    setItem,
+    next,
+    prev
+  };
+}
+
+export const store = createStore();

src/stories/ImageCarouselView.svelte

@@ -1,5 +1,6 @@
 <script>
   import ImageCarousel from '../ImageCarousel.svelte'
+  import CarouselChild from '../CarouselChild.svelte'
 
   /**
    * Enable Next/Previos arrows
@@ -8,9 +9,13 @@
 </script>
 
 <div class="main-container">
-  <ImageCarousel {arrows} >
-    <h1>Element 1</h1>
-    <h1>Element 2</h1>
+  <ImageCarousel {arrows}>
+    <CarouselChild>
+      <h1>Element 1</h1>
+    </CarouselChild>
+    <CarouselChild>
+      <h1>Element 2</h1>
+    </CarouselChild>
   </ImageCarousel>
 </div>
 

src/utils/id.js

@@ -0,0 +1,5 @@
+import { v4 as uuid } from 'uuid'
+
+export function generateId() {
+  return uuid()
+}

yarn.lock

@@ -9492,7 +9492,7 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.0.0:
+uuid@^8.0.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==