update selected props

Author: zttonly

frameworks/keyed/san-store/src/App.js

@@ -35,7 +35,7 @@ class AppComponent extends Component {
         </div>
         <table class="table table-hover table-striped test-data" on-click="handleClick($event)">
             <tbody>
-                <tr s-for="item in rows trackBy item.id" class="{{selected === item.id ? 'danger':''}}">
+                <tr s-for="item in rows trackBy item.id" class="{{item.selected ? 'danger':''}}">
                     <td class="col-md-1">{{item.id}}</td>
                     <td class="col-md-4">
                         <a data-action="select" data-id="{{item.id}}">{{item.label}}</a>
@@ -87,8 +87,7 @@ class AppComponent extends Component {
 
 export default connectSan(
     {
-        rows: 'rows',
-        selected: 'selected'
+        rows: 'rows'
     },
     {
         run: 'run',

frameworks/keyed/san-store/src/store.js

@@ -8,59 +8,70 @@ const C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown',
 const N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza',
     'mouse', 'keyboard'];
 
-const random = max => Math.round(Math.random() * 1000) % max;
+function random(max) {
+    return Math.round(Math.random() * 1000) % max;
+}
 
 let nextId = 1;
 function buildData(count = 1000) {
     const data = [];
     for (let i = 0; i < count; i++) {
         data.push({
             id: nextId++,
-            label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`
+            label: A[random(A.length)] + " " + C[random(C.length)] + " " + N[random(N.length)],
+            selected: false
         });
     }
     return data;
 }
 
 const store = new Store({
     initData: {
-        rows: [],
-        selected: 0
+        rows: []
     },
 
     actions: {
-        setSelected(id) {
-            return builder().set('selected', id);
+        setSelected(id, {getState, dispatch}) {
+            const rows = getState('rows');
+            const newData = rows.slice(0);
+
+            rows.forEach((el, i) => {
+                if (el.selected) {
+                    newData[i] = {...rows[i], selected: false}
+                }
+                if (el.id === id) {
+                    newData[i] = {...rows[i], selected: true}
+                }
+            });
+            return builder().set('rows', newData);
         },
-        run(n, {dispatch}) {
-            dispatch('setSelected', 0);
+        run(n) {
             return builder().set('rows', buildData(n));
         },
         add(n, {getState}) {
             const rows = getState('rows');
             return builder().set('rows', rows.concat(buildData(n)));
         },
         update(n, {getState}) {
-            const newData = getState('rows').slice();
+            const newData = getState('rows').slice(0);
             for (let i = 0; i < newData.length; i += 10) {
                 const r = newData[i];
                 newData[i] = {id: r.id, label: r.label + ' !!!'};
             }
             return builder().set('rows', newData);
         },
-        clear(n, {dispatch}) {
-            dispatch('setSelected', 0);
+        clear(n) {
             return builder().set('rows', []);
         },
         remove(id, {getState}) {
-            const newData = getState('rows').slice();
+            const newData = getState('rows').slice(0);
             const idx = newData.findIndex(d => d.id === id);
 
             newData.splice(idx, 1);
             return builder().set('rows', newData);
         },
         swapRows(n, {getState}) {
-            const newData = getState('rows').slice();
+            const newData = getState('rows').slice(0);
             if (newData.length > 998) {
                 const tmp = newData[1];
                 newData[1] = newData[998];