Js.Homework/hw-12/main.js

// Larek

function createStore(reducer){
    let state       = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
    let cbs         = []                     //массив подписчиков
    
    const getState  = () => state            //функция, возвращающая переменную из замыкания
    const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
                             () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
                             
    const dispatch  = action => { 
        const newState = reducer(state, action) //пробуем запустить редьюсер
        if (newState !== state){ //проверяем, смог ли редьюсер обработать action
            state = newState //если смог, то обновляем state 
            for (let cb of cbs)  cb() //и запускаем подписчиков
        }
    }
    
    return {
        getState, //добавление функции getState в результирующий объект
        dispatch,
        subscribe //добавление subscribe в объект
    }
}

function reducer(state, {type, name, sum, money}){ //объект action деструктуризируется
    if (!state){ //начальная уборка в ларьке:
        return {
            cash : 0,
            beer: {
                amount : 110,
                price : 20,
            },
            cheaps: { 
                amount : 40,
                price : 33,
            },
            cigarets: {
                amount : 20,
                price : 70,
            },
        }
    }
    if (type === 'КУПИТИ'){ //если тип action - КУПИТЬ, то:
       if( (sum > state[name].amount) || (money < ( sum * state[name].price))){ 
        return state                
       }
      
        return {
            ...state, //берем все что было из ассортимента
            [name]: {amount: state[name].amount - sum, price: state[name].price },
            cash : state.cash + (+money)
        }
    }

   
    return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
}

const store = createStore(reducer)
const unsubscribe = store.subscribe(() => console.log(store.getState()))

let products = Object.keys(store.getState()).slice(1)



function update (){
    document.getElementById('section').remove()
    let section = document.createElement('section')
    section.id = "section"
    document.body.append(section)

    let select= document.createElement("select")
    select.id = "mySelect"
    document.getElementById('section').append(select)

    for(let i = 0;i<products.length;i++){

        let option = document.createElement("option")
        option.value = products[i]
        option.innerText = `${products[i]} : ${store.getState()[products[i]].amount} шт ${store.getState()[products[i]].price} uah` 
        select.append(option)
    }

    let spanAmount = document.createElement('span')
    spanAmount.innerText = "Скока хоч купить?"

    let inputAmount = document.createElement('input')
    inputAmount.type = `number`

    let spanMoney = document.createElement('span')
    spanMoney.innerText = "Скока мані є?"

    let inputMoney = document.createElement('input')
    inputAmount.type = `number`

    let button = document.createElement('button')
    button.id = "myButton"
    button.innerText = "КУПИТИ"

    let spanCash = document.createElement('span')
    spanCash.innerText = `КАСА : ${store.getState().cash}`

    document.getElementById('section').append(spanAmount,inputAmount,spanMoney,
    inputMoney,button,spanCash)



    const actionBuy = (name,sum,money) =>({type:'КУПИТИ',name,sum,money})

   
    document.getElementById('myButton').addEventListener("click", ()=>{
        store.dispatch(actionBuy(select.value,+inputAmount.value,+inputMoney.value))
        update()
    } )  
    

}

update()