Working data entry and removal from store'

assets/scripts/src/actions/index.js

@@ -1,22 +1,20 @@
-let initialId = 0;
-export const addItem = (value, element) => {
+export const addItemToStore = (value, element, id) => {
     return {
-        id: initialId++;
         type: 'ADD_ITEM',
         value: value,
         element: element,
-        active: true
+        id: id
     }
 }
 
-export const removeItem = (element) => {
+export const removeItemFromStore = (id) => {
     return {
         type: 'REMOVE_ITEM',
-        active: false
+        id: id,
     }
 }
 
-export const updateItem = (value, element) => {
+export const updateItemInStore = (value) => {
     return {
         type: 'UPDATE_ITEM',
         value: value

assets/scripts/src/choices.js

@@ -1,7 +1,8 @@
 'use strict';
 
 import { createStore } from 'redux';
-import choices from './reducers/index.js'
+import choices from './reducers/index.js';
+import { addItemToStore, removeItemFromStore } from './actions/index';
 import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
 
 
@@ -44,15 +45,15 @@ export class Choices {
         this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
         this.store = STORE;
 
-        console.log(this.store);
-
         this.initialised = false;
         this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
 
         // Retrieve elements
         this.element = this.options.element;
+
         // If input already has values, parse the array, otherwise create a blank array
         this.valueArray = this.element.value !== '' ? this.cleanInputValue(this.element.value) : [];
+
         // How many values in array
         this.valueCount = this.valueArray.length;
 
@@ -330,10 +331,13 @@ export class Choices {
             passedValue = passedValue + this.options.appendValue.toString();
         }
 
+        let id = this.store.getState().length + 1;
+
         // Create new list element
         let item = document.createElement('li');
         item.classList.add('choices__item');
         item.textContent = passedValue;
+        item.id = id;
 
         // Append it to list
         parent.appendChild(item);
@@ -346,6 +350,9 @@ export class Choices {
                 console.error('callbackOnAddItem: Callback is not a function');
             }
         }
+
+        this.store.dispatch(addItemToStore(passedValue, item, id));
+        console.log(this.store.getState());
     }
 
     removeItem(item) {
@@ -354,6 +361,7 @@ export class Choices {
             return;
         }
 
+        let id = item.id;
         let value = item.innerHTML;
         item.parentNode.removeChild(item);
 
@@ -365,6 +373,9 @@ export class Choices {
                 console.error('callbackOnRemoveItem: Callback is not a function');
             }
         }
+
+        this.store.dispatch(removeItemFromStore(id));
+        console.log(this.store.getState());
     }
 
     removeAll(items) {
@@ -378,8 +389,6 @@ export class Choices {
         };
     }
 
-    
-
     init() {
         if (!this.supports) console.error('init: Your browser doesn\'nt support shit');
         this.initialised = true;
@@ -551,12 +560,12 @@ export class Choices {
         element : input1,
         delimiter: ' ',
         maxItems: 5,
-        callbackOnRemoveItem: function(value) {
-            console.log(value);
-        },
-        callbackOnAddItem: function(item, value) {
-            console.log(item, value);
-        }
+        // callbackOnRemoveItem: function(value) {
+        //     console.log(value);
+        // },
+        // callbackOnAddItem: function(item, value) {
+        //     console.log(item, value);
+        // }
     });
 
     let choices2 = new Choices({

assets/scripts/src/reducers/index.js

@@ -1,33 +1,23 @@
-const choice = (state = [], action) => {
-    console.log('Choice', action);
-    switch(action.type) {
-        case 'ADD_VALUE':
-            return {
+// Array of choices
+const choices = (state = [], action) => {
+    switch (action.type) {
+        case 'ADD_ITEM':
+            // Add object to items array
+            return [...state, {
+                id: parseInt(action.id),
                 value: action.value,
                 element: action.element,
                 active: true
-            };
-        case 'REMOVE_VALUE':
-            return Object.assign({}, state, {
-                active: false
-            });
-        default:
-            return state;
-    }
-}
+            }];
+
+        case 'REMOVE_ITEM':
+            // Remove item from items array
+            return state.filter(function(item) {
+                if(item.id !== parseInt(action.id)) {
+                    return item;
+                }
+            });
 
-const choices = (state = {}, action) => {
-    console.log('Choices', action);
-    switch(action.type) {
-        case 'ADD_VALUE':
-            return [
-            ...state,
-                choice(undefined, action)
-            ]
-        case 'REMOVE_VALUE':
-            return state.map(t =>
-                choice(t, action)
-              )
         default:
             return state;
     }