Ivan3008/homework 6 - черновик

cypress/integration/homework_spec.js

@@ -140,6 +140,7 @@ describe('Домашняя работа', () => {
   });
   describe('Сценарий создания заказа в магазине', () => {
     before(() => {
+      cy.visit('/');
       cy.get('.new-orders__create-button').click();
     });
     it('Сумма заказов отражается в строке «Всего получено денег»', () => {
@@ -178,6 +179,7 @@ describe('Домашняя работа', () => {
   });
   describe('Сценарий отправки заказа на производство на ферму', () => {
     before(() => {
+      cy.visit('/');
       cy.get('.new-orders__create-button').click();
       cy
         .get('button')
@@ -224,8 +226,9 @@ describe('Домашняя работа', () => {
       });
     });
   });
-  describe.only('Сценарий отправки заказа клиенту', () => {
+  describe('Сценарий отправки заказа клиенту', () => {
     before(() => {
+      cy.visit('/');
       cy.get('.new-orders__create-button').click();
       cy.get('.new-orders__create-button').click();
       cy.get('.new-orders__create-button').click();

src/actions/farmActions.js

@@ -1 +1,20 @@
-import { MOVE_ORDER_TO_CUSTOMER } from './farmTypes';
+import { MOVE_ORDER_TO_CUSTOMER, ADD_ORDER_TO_FARM } from './farmTypes';
+
+export const moveOrderToCustomer = id => {
+  return {
+    type: MOVE_ORDER_TO_CUSTOMER,
+    payload: id
+  };
+};
+
+export const addOrderToFarm = (id, name, price, createdAt) => {
+  return {
+    type: ADD_ORDER_TO_FARM,
+    payload: {
+      id,
+      name,
+      price,
+      createdAt
+    }
+  };
+};

src/actions/farmTypes.js

@@ -1 +1,2 @@
 export const MOVE_ORDER_TO_CUSTOMER = 'MOVE_ORDER_TO_CUSTOMER';
+export const ADD_ORDER_TO_FARM = 'ADD_ORDER_TO_FARM';

src/actions/marketActions.js

@@ -1 +1,23 @@
-import { CREATE_ORDER, MOVE_ORDER_TO_FARM } from './marketTypes';
+import {
+  CREATE_ORDER,
+  DELETE_ORDER_FROM_MARKET
+} from './marketTypes';
+
+export const createOrder = (id, name, price, createdAt) => {
+  return {
+    type: CREATE_ORDER,
+    payload: {
+      id,
+      name,
+      price,
+      createdAt
+    }
+  };
+};
+
+export const deleteOrderFromMarket = (id) => {
+  return {
+    type: DELETE_ORDER_FROM_MARKET,
+    payload: id
+  };
+};

src/actions/marketTypes.js

@@ -1,5 +1,5 @@
 export const CREATE_ORDER = 'CREATE_ORDER';
 
-export const MOVE_ORDER_TO_FARM = 'MOVE_ORDER_TO_FARM';
+//export const MOVE_ORDER_TO_FARM = 'MOVE_ORDER_TO_FARM';
 
 export const DELETE_ORDER_FROM_MARKET = 'DELETE_ORDER_FROM_MARKET';

src/components/App/App.js

@@ -6,7 +6,13 @@ import Budget from '../Budget';
 
 export class App extends Component {
   render() {
-    return <div className="app" />;
+    return(
+      <div className="app">
+        <Market />
+        <Farm />
+        <Budget />
+      </div>
+    )
   }
 }
 

src/components/Budget/Budget.js

@@ -1,6 +1,41 @@
 import React from 'react';
 import './Budget.css';
+import { connect } from 'react-redux';
+import { getBudget } from 'reducers/budget';
 
-export const Budget = () => <div className="budget" />;
+const mapStateToProps = state => ({
+  budget: getBudget(state)
+});
 
-export default Budget;
+export const Budget = props => {
+  const {
+    income,
+    sellersExpences,
+    farmExpences,
+    deliveryExpences
+  } = props.budget;
+  const total = income + (sellersExpences + farmExpences + deliveryExpences);
+  return (
+    <div className="budget">
+      <h2>Бюджет</h2>
+      <p>
+        Всего получено денег: <span className="t-profit">{income}</span>
+      </p>
+      <p>
+        Расходы продавцов: <span className="t-sellers">{sellersExpences}</span>
+      </p>
+      <p>
+        Расходы на ферме: <span className="t-farm">{farmExpences}</span>
+      </p>
+      <p>
+        Расходы на доставку:{' '}
+        <span className="t-delivery">{deliveryExpences}</span>
+      </p>
+      <p>
+        Итого: <span className="t-total">{total}</span>
+      </p>
+    </div>
+  );
+};
+
+export default connect(mapStateToProps)(Budget);

src/components/Farm/Farm.js

@@ -1,10 +1,39 @@
 import React, { Component } from 'react';
 import './Farm.css';
+import { connect } from 'react-redux';
+import Order from 'components/Order';
+import { getFarmOrders } from 'reducers/farm';
+import { moveOrderToCustomer } from 'actions/farmActions';
+
+const mapStateToProps = state => ({
+  farm: getFarmOrders(state)
+});
+
+const mapDispatchToProps = {
+  moveOrderToCustomer
+};
 
 export class Farm extends Component {
   render() {
-    return <div className="farm" />;
+    const { moveOrderToCustomer } = this.props;
+    const { farm } = this.props;
+    return (
+      <div className="farm">
+        <h2>Производство на ферме</h2>
+        <button
+          onClick={() => {
+            Object.keys(farm).length > 0 && moveOrderToCustomer(farm[0].id);
+          }}
+        >
+          Отправить урожай клиенту
+        </button>
+        <div>{farm.map(order => <Order key={order.id} {...order} />)}</div>
+      </div>
+    );
   }
 }
 
-export default Farm;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Farm);

src/components/Market/Market.js

@@ -1,5 +1,11 @@
 import React, { Component } from 'react';
 import './Market.css';
+import { connect } from 'react-redux';
+import Order from 'components/Order';
+import { createOrder, deleteOrderFromMarket } from 'actions/marketActions';
+import { addOrderToFarm } from 'actions/farmActions';
+import { getMarketOrders } from 'reducers/market';
+import { getFarmOrders } from 'reducers/farm';
 
 let id = 0;
 
@@ -20,22 +26,73 @@ 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(),
+    createdAt: new Date()
   };
 };
 
+const mapStateToProps = state => ({
+  market: getMarketOrders(state),
+  farm: getFarmOrders(state)
+});
+
+const mapDispatchToProps = {
+  createOrder,
+  deleteOrderFromMarket,
+  addOrderToFarm
+};
+
 export class Market extends Component {
   render() {
-    return <div className="market" />;
+    const { createOrder, deleteOrderFromMarket, addOrderToFarm } = this.props;
+    const { market } = this.props;
+    return (
+      <div className="market">
+        <h2>Новые заказы в магазине</h2>
+        <button
+          onClick={() => {
+            const orderData = getNewOrder();
+            createOrder(
+              orderData.id,
+              orderData.name,
+              orderData.price,
+              orderData.createdAt
+            );
+          }}
+          className="new-orders__create-button"
+        >
+          Создать заказ
+        </button>
+        <button
+          onClick={() => {
+            Object.keys(market).length > 0 &&
+              addOrderToFarm(
+                market[0].id,
+                market[0].name,
+                market[0].price,
+                market[0].createdAt
+              ) &&
+              deleteOrderFromMarket(market[0].id);
+          }}
+        >
+          Отправить заказ на ферму
+        </button>
+        <div className="order-list">
+          {market.map(order => <Order key={order.id} {...order} />)}
+        </div>
+      </div>
+    );
   }
 }
 
-export default Market;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Market);

src/components/Order/Order.js

@@ -1,8 +1,21 @@
 import React from 'react';
 import './Order.css';
 
-const Order = ({ name, price, createdAt }) => (
-  <div className="order" />
+const Order = (order) => (
+  <div className="order">
+    <div className="order__upper">
+      <p className="p--order">Название: {order.name}</p>
+      <p className="p--order">
+        Цена: <span className="order-price">{order.price}</span>
+      </p>
+    </div>
+    <div className="order__lower">
+      <p className="p--order">
+        Создан: {order.createdAt.toISOString().slice(0,10)}
+      </p>
+    </div>
+  </div>
 );
 
+
 export default Order;

src/reducers/budget.js

@@ -0,0 +1,41 @@
+import { CREATE_ORDER } from 'actions/marketTypes';
+import { ADD_ORDER_TO_FARM, MOVE_ORDER_TO_CUSTOMER } from 'actions/farmTypes';
+
+const initialState = {
+  income: 0,
+  sellersExpences: 0,
+  farmExpences: 0,
+  deliveryExpences: 0
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case CREATE_ORDER:
+      const income = state.income + action.payload.price;
+      const sellersExpences = state.sellersExpences - 20;
+      return {
+        ...state,
+        income,
+        sellersExpences
+      };
+
+    case ADD_ORDER_TO_FARM:
+      const farmExpences = state.farmExpences - 100;
+      return {
+        ...state,
+        farmExpences
+      };
+
+    case MOVE_ORDER_TO_CUSTOMER:
+      const deliveryExpences = state.deliveryExpences - 20;
+      return {
+        ...state,
+        deliveryExpences
+      };
+
+    default:
+      return state;
+  }
+};
+
+export const getBudget = state => state.budget;

src/reducers/farm.js

@@ -0,0 +1,23 @@
+import { combineReducers } from 'redux';
+import { MOVE_ORDER_TO_CUSTOMER, ADD_ORDER_TO_FARM } from 'actions/farmTypes';
+
+const orders = (state = [], action) => {
+  switch (action.type) {
+    case ADD_ORDER_TO_FARM:
+      const { payload } = action;
+      return [...state, payload];
+
+    case MOVE_ORDER_TO_CUSTOMER:
+      const id = action.payload;
+      return state.filter(order => order.id !== id);
+
+    default:
+      return state;
+  }
+};
+
+export default combineReducers({
+  orders
+});
+
+export const getFarmOrders = state => state.farm.orders;

src/reducers/market.js

@@ -0,0 +1,26 @@
+import { combineReducers } from 'redux';
+import { CREATE_ORDER, DELETE_ORDER_FROM_MARKET } from 'actions/marketTypes';
+
+const orders = (state = [], action) => {
+  switch (action.type) {
+    case CREATE_ORDER:
+      const { payload } = action;
+      return [...state, payload];
+
+    case DELETE_ORDER_FROM_MARKET:
+      const id = action.payload;
+      return state.filter(order => order.id !== id);
+
+    // case DELETE_ORDER_FROM_MARKET:
+    //   return state.filter(order => order.id !== action.payload);
+
+    default:
+      return state;
+  }
+};
+
+export default combineReducers({
+  orders
+});
+
+export const getMarketOrders = state => state.market.orders;