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,8 @@
 import { MOVE_ORDER_TO_CUSTOMER } from './farmTypes';
+
+export const moveOrderToCustomer = id => {
+  return {
+    type: MOVE_ORDER_TO_CUSTOMER,
+    payload: id
+  };
+};

src/actions/marketActions.js

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

src/components/App/App.js

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

src/components/Farm/Farm.js

@@ -1,10 +1,32 @@
 import React, { Component } from 'react';
 import './Farm.css';
+import { connect } from 'react-redux';
+import Order from 'components/Order';
+import {
+  moveOrderToCustomer
+} from 'actions/farmActions';
+
+const mapStateToProps = state => ({
+  farm: state.farm
+});
+
+const mapDispatchToProps = {
+  moveOrderToCustomer
+};
 
 export class Farm extends Component {
   render() {
-    return <div className="farm" />;
+    return (
+      <div className="farm">
+        <h2>Производство на ферме</h2>
+        <button>Отправить урожай клиенту</button>
+        <div />
+      </div>
+    );
   }
 }
 
-export default Farm;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Farm);

src/components/Market/Market.js

@@ -1,5 +1,12 @@
 import React, { Component } from 'react';
 import './Market.css';
+import { connect } from 'react-redux';
+import Order from 'components/Order';
+import {
+  createOrder,
+  moveOrderToFarm,
+  deleteOrderFromMarket
+} from 'actions/marketActions';
 
 let id = 0;
 
@@ -20,22 +27,67 @@ 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: state.market
+});
+
+const mapDispatchToProps = {
+  createOrder,
+  moveOrderToFarm,
+  deleteOrderFromMarket
+};
+
 export class Market extends Component {
   render() {
-    return <div className="market" />;
+    const { createOrder, moveOrderToFarm, deleteOrderFromMarket } = 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 &&
+              moveOrderToFarm(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/farm.js

@@ -0,0 +1 @@
+

src/reducers/market.js

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