homework/HW11 Redux/script.js

const select = document.getElementById("select");
const input = document.getElementById("input");
const btn = document.getElementById("btn");
const cash = document.querySelector(".cashbox");
const bablo = document.getElementById("bablo");
const cashier = document.getElementById("cashier")

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

function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
  //объект action деструктуризируется на три переменных
  if (!state) {
    //начальная уборка в ларьке:
    return {
      stock: {
        пиво: {
          price: 20,
          amount: 100,
        },
        чипсы: {
          price: 25,
          amount: 100,
        },
        сиги: {
          price: 50,
          amount: 100,
        },
      },
      cashbox: 0,
    };
    //
  }
  if (type === "КУПИТЬ") {
    //если тип action - КУПИТЬ, то:
    return {
      ...state, //берем все что было из ассортимента
      stock: {
          ...state.stock,
          [ШО]: {
            price: state.stock[ШО].price,
            amount: state.stock[ШО].amount - СКОКА,

      }
      
      
      }, //и уменьшаем то, что покупается на количество
    cashbox: state.cashbox + БАБЛО,


    };
  }

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

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 в объект
  };
}
let html = "";
for (let key in store.getState().stock) {
  html += `<option>${key}</option>`;
}
select.innerHTML = html;

btn.addEventListener("click", buy);
input.addEventListener("input", counter );
select.addEventListener("click", counter)

function buy(e) {
    if(bablo.value >= (input.value * store.getState().stock[select.value].price) ){
  store.dispatch({
    type: "КУПИТЬ",
    ШО: select.value,
    СКОКА: input.value,
    БАБЛО: Number(bablo.value),
  });
  console.log(store);
  bablo.value = "";
}else{
    alert("Не хватает бабла");
}
}
function updateCashbox(){
    cash.innerText = `КАССА : ${store.getState().cashbox}`
}
function counter( ){
    cashier.innerText = ` К ОПЛАТЕ : ${ (input.value * store.getState().stock[select.value].price)}`

}