HW js11 part

js/11/index.html

@@ -11,6 +11,7 @@
             <select id='goods'>
             </select>
             <input type='number' id='quantity'/>
+            <input type='number' id='money'/>
             <button id='buy'>Купить</button>
         </div>
         <script src="index.js"></script>

js/11/index.js

@@ -68,13 +68,13 @@
         }
     }
     
-    function reducer(state, {type, ШО, СКОКА}){ //объект action деструктуризируется на три переменных
+    function reducer(state, {type, ШО, СКОКА, БАБЛО}){ //объект action деструктуризируется на три переменных
         if (!state){ //начальная уборка в ларьке:
             return {
-                пиво: 100, //{count: 100, price: 30}
-                чипсы: 100,//{count: 100, price: 25}
-                сиги: 100,
-    //            касса: 0, при покупках увеличивается
+                пиво: {count: 100, price: 30},
+                чипсы: {count: 100, price: 25},
+                сиги: {count: 100, price: 50},
+                касса: 0, 
             }
         }
         if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
@@ -83,9 +83,23 @@
             //количество денег в action
             //наличие нужного количества товара.
             //и только при соблюдении этих условий обновлять state. 
-            return {
-                ...state, //берем все что было из ассортимента
-                [ШО]: state[ШО] - СКОКА //и уменьшаем то, что покупается на количество
+            if (ШО in state) {
+
+                if (state[ШО]['count'] > СКОКА) {
+                    return {                
+                        ...state, //берем все что было из ассортимента
+                        [ШО]: {count: state[ШО]['count'] - СКОКА, price: state[ШО]['price']}, //и уменьшаем то, что покупается на количество
+                        
+                    }
+                } else {
+                    return {                
+                        ...state, 
+                        [ШО]: {count: state[ШО]['count'] - state[ШО]['count'], price: state[ШО]['price']}
+                    }
+                }
+                
+            } else {
+                return state
             }
         }
         return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
@@ -102,12 +116,12 @@
         goods.append(good)
     }
     
-    const купи = (ШО, СКОКА) => ({type: 'КУПИТЬ', ШО, СКОКА})
+    const купи = (ШО, СКОКА, БАБЛО) => ({type: 'КУПИТЬ', ШО, СКОКА, БАБЛО})
     
     buy.onclick = () => {
         //достает выбранный товар и количество из DOM
     //    store.dispatch(купи(....,....))
-    let a = store.dispatch(купи(goods.value,quantity.value))
+    let a = store.dispatch(купи(goods.value,quantity.value,money.value))
 
     }
     
@@ -123,8 +137,8 @@
     function smth() {
         const h1 = document.createElement('h1')
         shop.append(h1)
-        store.subscribe(() => h1.innerText = store.getState().пиво)
-        h1.innerText = store.getState().пиво
+        store.subscribe(() => h1.innerText = store.getState().пиво.count)
+        h1.innerText = store.getState().пиво.count
     }
     smth()
     // smth()
@@ -133,20 +147,7 @@
         const table = document.createElement('table')
         shop.append(table)
         
-        let obj = store.getState()
-
-        for (const [key, value] of Object.entries(store.getState())) {
-            const tr = document.createElement('tr')
-            table.append(tr)
-            const th = document.createElement('th')
-            th.innerText = key
-            tr.append(th)
-            const td = document.createElement('td')
-            td.innerText = value
-            tr.append(td)
-        }
-        store.subscribe(() => {
-            table.innerHTML = ""
+        function renderTable() {
             for (const [key, value] of Object.entries(store.getState())) {
                 const tr = document.createElement('tr')
                 table.append(tr)
@@ -154,9 +155,18 @@
                 th.innerText = key
                 tr.append(th)
                 const td = document.createElement('td')
-                td.innerText = value
+                if (typeof value === 'object') {
+                    td.innerText = value.count
+                } else {
+                    td.innerText = value
+                }
                 tr.append(td)
             }
+        }
+        renderTable()
+        store.subscribe(() => {
+            table.innerHTML = ""
+            renderTable()
         })     
 
     }