homework/11/src/App.js

// общие правила

// * влияние на store (изменение state) происходит через store.dispatch(какой-то экшон криейтор(какие-то параметры))
// * отображение состояния state на экране происходит через store.subscribe(какая-то ваша функция, которая делает 
// store.getState() и меняет DOM)

// Менять код createStore не надо

// Задачи

// * сделать отображение всего того, что есть в ларьке (можете хоть витрину нарисовать, если интересно) с количествами;
// * сделать select для выбора товара и input type='number' для выбора количества и кнопку "купить", которая посылает action
// в store используя actionCreator для создания action
// * добавить в reducer проверку на уход в минус, что бы нельзя было продать то, чего нет в должном количестве.
// * добавить в state цену каждого товара и поле касса. Для этого вместо структуры вида beer: 100 используйте beer: 
// КАКОЙ-ТО ОБЪЕКТ С КОЛИЧЕСТВОМ И СТОИМОСТЬЮ ОДНОЙ ЕДИНИЦЫ. В action добавьте поле "бабло". 
// Всё это пишется в reducer, не забудьте проверки что бабла хватает.
// * добавьте в интерфейс поле для денег.

function reducer(state, { type, obj, amount }) {

    if (!state) {
        return {
            beer: { number: 100, price: 5 },
            chips: { number: 50, price: 3 },
            smoke: { number: 50, price: 7 },
            cash: { cashbox: 0, mycash: 100 }
        }
    }
    if (type === 'BUY') {
        if ((state[obj].number) >= 0 && state.cash.mycash - state[obj].price * amount >= 0) {
            if ((amount >= 0)) {
                return {
                    ...state,
                    [obj]: { ...state[obj], number: state[obj].number - amount },
                    cash: {
                        mycash: state.cash.mycash - state[obj].price * amount,
                        cashbox: state.cash.cashbox + state[obj].price * amount
                    }
                }
            }
            if (amount < 0){
                return{
                    ...state, cashbox: state.cashbox * 0
                }
            }
        }
    }
    return state
}

function createStore(reducer) {
    let state = reducer(undefined, {})
    let cbs = []

    const getState = () => state
    const subscribe = cb => (cbs.push(cb),
        () => cbs = cbs.filter(c => c !== cb))

    const dispatch = action => {
        const newState = reducer(state, action)
        if (newState !== state) {
            state = newState
            for (let cb of cbs) cb()
        }
    }

    return {
        getState,
        dispatch,
        subscribe
    }
}

const store = createStore(reducer)
console.log(store.getState())

let productN = document.getElementById("product");
let numberN = document.getElementById("number");
let buttonN = document.getElementById("button");

let pivoN = document.getElementById("pivo").innerHTML = store.getState().beer.number
let chipsN = document.getElementById("chips").innerHTML = store.getState().chips.number
let sigiN = document.getElementById("sigi").innerHTML = store.getState().smoke.number

let pivoM = document.getElementById("pivoK").innerHTML = store.getState().beer.price + '$'
let chipsM = document.getElementById("chipsK").innerHTML = store.getState().chips.price + '$'
let sigiM = document.getElementById("sigiK").innerHTML = store.getState().smoke.price + '$'

let kassaN = document.getElementById("kassa").innerHTML = store.getState().cash.cashbox + '$'
let moneyN = document.getElementById("money").innerHTML = store.getState().cash.mycash + '$'

buttonN.onclick = () => {
    store.dispatch({ type: 'BUY', obj: productN.value, amount: numberN.value })
    let pivoN = document.getElementById("pivo").innerHTML = store.getState().beer.number
    let chipsN = document.getElementById("chips").innerHTML = store.getState().chips.number
    let sigiN = document.getElementById("sigi").innerHTML = store.getState().smoke.number
    let kassaN = document.getElementById("kassa").innerHTML = store.getState().cash.cashbox + '$'
    let moneyN = document.getElementById("money").innerHTML = store.getState().cash.mycash + '$'
}