sb-redux.js

//
//INDEX.JS
//
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from 'components/App';
import { Provider } from 'react-redux';
import createStore from './store';

const store = createStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
//
//STORE.JS
//
import { createStore, compose } from 'redux';
import rootReducer from './reducers';

export default () =>
  createStore(
    rootReducer,
    compose(
      window.devToolsExtension
        ? window.__REDUX_DEVTOOLS_EXTENSION__()
        : f => f,
    ),
  );
//SRC
//ACTION
//farmActions.js
import { MOVE_ORDER_TO_CUSTOMER } from './farmTypes';

export const moveOrderToCustomer = order => ({
  type: MOVE_ORDER_TO_CUSTOMER,
  payload: order
});
//SRC
//ACTION
//farmTypes.js
export const MOVE_ORDER_TO_CUSTOMER = 'MOVE_ORDER_TO_CUSTOMER';
//SRC
//ACTION
//marketActions.js
import { CREATE_ORDER, MOVE_ORDER_TO_FARM } from './marketTypes';

export const createOrder = order => ({
  type: CREATE_ORDER,
  payload: order
});

export const moveOrderToFarm = order => ({
  type: MOVE_ORDER_TO_FARM,
  payload: order
});
//SRC
//ACTION
//marketTypes.js
export const CREATE_ORDER = 'CREATE_ORDER';

export const MOVE_ORDER_TO_FARM = 'MOVE_ORDER_TO_FARM';

export const DELETE_ORDER_FROM_MARKET = 'DELETE_ORDER_FROM_MARKET';

//SRC
//REDUCERS
//index.js
import { combineReducers } from 'redux';
import market from './market';
import farm from './farm';
import budget from './budget';

export default combineReducers({
  market,
  farm,
  budget,
});
//SRC
//REDUCERS
//market.js
import { CREATE_ORDER, MOVE_ORDER_TO_FARM } from 'actions/marketTypes';

export default (state = { orders: [] }, action) => {
  switch (action.type) {
    case CREATE_ORDER:
      return { ...state, orders: [...state.orders, action.payload] };
    case MOVE_ORDER_TO_FARM:
      return {
        ...state,
        orders: state.orders.filter(item => item.id !== action.payload.id)
      };
    default:
      return state;
  }
};
//SRC
//REDUCERS
//helpers.js
export const sortOrderFn = (a, b) => b.createdAt - a.createdAt;
//SRC
//REDUCERS
//farm.js
import { MOVE_ORDER_TO_CUSTOMER } from 'actions/farmTypes';
import { MOVE_ORDER_TO_FARM } from 'actions/marketTypes';

const initialState = {
  orders: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case MOVE_ORDER_TO_FARM:
      return { ...state, orders: [...state.orders, action.payload] };
    case MOVE_ORDER_TO_CUSTOMER:
      return { ...state, orders: state.orders.slice(1) };
    default:
      return state;
  }
};
//SRC
//REDUCERS
//budget.js
import { MOVE_ORDER_TO_CUSTOMER } from 'actions/farmTypes';
import { CREATE_ORDER, MOVE_ORDER_TO_FARM } from 'actions/marketTypes';

const initialState = {
  profit: 0,
  farmExpanse: 0,
  deliveryExpanse: 0,
  marketExpanse: 0
};
export default (state = initialState, action) => {
  switch (action.type) {
    case CREATE_ORDER:
      return {
        ...state,
        profit: state.profit + action.payload.price,
        marketExpanse: state.marketExpanse + 20
      };
    case MOVE_ORDER_TO_FARM:
      return { ...state, farmExpanse: state.farmExpanse + 100 };
    case MOVE_ORDER_TO_CUSTOMER:
      return { ...state, deliveryExpanse: state.deliveryExpanse + 20 };
    default:
      return state;
  }
};

//SRC
//COMPONENTS
//APP
//App.js используется вместе с index .js export { default } from './App';
import React, { Component } from 'react';
import './App.css';
import Market from '../Market';
import Farm from '../Farm';
import Budget from '../Budget';

export class App extends Component {
  render() {
    return (
      <div className="app">
        <Market />
        <Farm />
        <Budget />
      </div>
    );
  }
}
export default App;
//SRC
//COMPONENTS
//APP
//Order.js используется вместе с index .js export { default } from './Order';
import React from 'react';
import './Order.css';

const Order = ({ name, price, createdAt }) => (
  <div className="order">
    <div className="order__upper">
      <p className="p--order">Название: {name}</p>
      <p className="p--order">
        Цена: <span className="order-price">{price}</span>
      </p>
    </div>
    <div className="order__lower">
      <p className="p--order">Создан: {createdAt}</p>
    </div>
  </div>
);

export default Order;
//SRC
//COMPONENTS
//APP
//Budget.js используется вместе с index .js export { default } from './Budget';
import React from 'react';
import { connect } from 'react-redux';
import './Budget.css';

export const Budget = ({
  profit,
  farmExpanse,
  deliveryExpanse,
  marketExpanse
}) => (
  <div className="budget">
    <h2>Бюджет</h2>
    <p>
      Всего получено денег: <span className="t-profit">{profit}</span>
    </p>
    <p>
      Расходы продавцов: <span className="t-sellers">{marketExpanse}</span>
    </p>
    <p>
      Расходы на ферме: <span className="t-farm">{farmExpanse}</span>
    </p>
    <p>
      Расходы на доставку:{' '}
      <span className="t-delivery">{deliveryExpanse}</span>
    </p>
    <p>
      Итого:{' '}
      <span className="t-total">
        {profit - marketExpanse - farmExpanse - deliveryExpanse}
      </span>
    </p>
  </div>
);

const mapStateToProps = state => {
  return {
    profit: state.budget.profit,
    farmExpanse: state.budget.farmExpanse,
    deliveryExpanse: state.budget.deliveryExpanse,
    marketExpanse: state.budget.marketExpanse
  };
};

export default connect(mapStateToProps)(Budget);
//SRC
//COMPONENTS
//APP
//Farm.js используется вместе с index .js export { default } from './Farm'
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Order from '../Order';
import { moveOrderToCustomer } from 'actions/farmActions';
import './Farm.css';

export class Farm extends Component {
  render() {
    const { orders, onMoveOrderToCustomer } = this.props;
    return (
      <div className="farm">
        <h2>Производство на ферме</h2>
        <button disabled={!orders.length} onClick={onMoveOrderToCustomer}>
          Отправить урожай клиенту
        </button>
        <div>
          {orders.map(el => (
            <Order
              name={el.name}
              price={el.price}
              createdAt={el.createdAt.toLocaleString()}
              key={el.id}
            />
          ))}
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  orders: state.farm.orders
});

const mapDispatchToProps = dispatch => ({
  onMoveOrderToCustomer: () => dispatch(moveOrderToCustomer())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Farm);
//SRC
//COMPONENTS
//APP
//Market.js используется вместе с index .js export { default } from './Market'
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Order from '../Order';
import { createOrder, moveOrderToFarm } from 'actions/marketActions';
import './Market.css';

let id = 0;

const getId = () => {
  id += 1;
  return id;
};

export const vegetables = [
  'Капуста',
  'Редиска',
  'Огурцы',
  'Морковь',
  'Горох',
  'Баклажан',
  'Тыква',
  'Чеснок',
  'Лук',
  'Перец',
  'Картофель',
  'Редька'
];

const getNewOrder = () => {
  return {
    id: getId(),
    name: vegetables[Math.floor(Math.random() * vegetables.length)],
    price: 100 + Math.floor(Math.random() * 100),
    createdAt: new Date()
  };
};

class Market extends Component {
  render() {
    const { onCreateOrder, onMoveOrderToFarm, orders } = this.props;

    return (
      <div className="market">
        <h2>Новые заказы в магазине</h2>
        <button
          className="new-orders__create-button"
          onClick={() => {
            onCreateOrder(getNewOrder());
          }}
        >
          Создать заказ
        </button>
        <button
          disabled={!orders.length}
          onClick={() => {
            onMoveOrderToFarm(orders[0]);
          }}
        >
          Отправить заказ на ферму
        </button>
        <div className="order-list">
          {orders.map(el => (
            <Order
              name={el.name}
              price={el.price}
              createdAt={el.createdAt.toLocaleString()}
              key={el.id}
            />
          ))}
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  orders: state.market.orders
});

const mapDispatchToProps = dispatch => ({
  onCreateOrder: newOrder => dispatch(createOrder(newOrder)),
  onMoveOrderToFarm: newOrder => dispatch(moveOrderToFarm(newOrder))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Market);