<!DOCTYPE html>
<html>

<head>
  <title>Licznik</title>
</head>

<body>
  <div id="container">

  </div>
</body>

</html>
---

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import counter from "./reducer";
import App from "./App";
import "./index.css";

var destination = document.querySelector("#container");

// Magazyn
var store = createStore(counter);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  destination
);
---

// Reduktor
function counter(state, action) {
  if (state === undefined) {
    return { count: 0 };
  }

  var count = state.count;

  switch (action.type) {
    case "increase":
      return { count: count + 1 };
    case "decrease":
      return { count: count - 1 };
    default:
      return state;
  }
}

export default counter;
---

import { connect } from "react-redux";
import Counter from "./Counter";

// Powiązanie stanu z właściwością komponentu
function mapStateToProps(state) {
  return {
    countValue: state.count 
  };
}

// Akcje
var increaseAction = { type: "increase" };
var decreaseAction = { type: "decrease" };

// Powiązanie akcji z właściwościami komponentu
function mapDispatchToProps(dispatch) {
  return {
    increaseCount: function() {
      return dispatch(increaseAction);
    },
    decreaseCount: function() {
      return dispatch(decreaseAction);
    }
  };
}

// Komponent wyższego rzędu
var connectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

export default connectedComponent;
---

// Akcje
var increaseAction = { type: "increase" };
var decreaseAction = { type: "decrease" };

// Powiązanie akcji z właściwościami komponentu
function mapDispatchToProps(dispatch) {
  return {
    increaseCount: function() {
      return dispatch(increaseAction);
    },
    decreaseCount: function() {
      return dispatch(decreaseAction);
    }
  };
}
---

import React, { Component } from "react";

class Counter extends Component {
  render() {
    return (
      <div className="container">
        <button className="buttons"
                onClick={this.props.decreaseCount}>-</button>
        <span>{this.props.countValue}</span>
        <button className="buttons"
                onClick={this.props.increaseCount}>+</button>
      </div>
    );
  }
}

export default Counter;
---

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  background-color: #8E7C93;
}

.container {
  background-color: #FFF;
  margin: 100px;
  padding: 10px;
  border-radius: 3px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buttons {
  background-color: transparent;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 3px;
  transition: all .15s ease-in;
}

.buttons:hover:nth-child(1) {
  background-color: #F45B69;
}

.buttons:hover:nth-child(3) {
  background-color: #C0DFA1;
}
---

