Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //
- //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);
Add Comment
Please, Sign In to add comment