webvysor, fix backend error (#7)

* add webvisor

* remove ya metrica in dev env

* disable calc button if there is only one person

* remove unused code

* add tests

* #6 fix backend error

* fix #6

Izzy.Web/Client/package.json

@@ -29,7 +29,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "homepage" : "https://romashov.tech/izzy",
+  "homepage": "https://romashov.tech/izzy",
   "eslintConfig": {
     "extends": "react-app"
   },

Izzy.Web/Client/src/YandexMetrica.tsx

@@ -2,16 +2,23 @@ import React from 'react';
 import { YMInitializer } from 'react-yandex-metrika';
 
 function isProd(): boolean {
-    return process.env.ASPNETCORE_ENVIRONMENT === 'production'
-        || process.env.NODE_ENV === 'production';
+  return process.env.ASPNETCORE_ENVIRONMENT === 'production'
+    || process.env.NODE_ENV === 'production';
 }
 
-export const YandexMetrica = (props: any) => {
-    if (isProd()) {
-        return (
-            <YMInitializer accounts={props.accounts}/>
-        )
-    } else {
-        return (<div/>);
-    }
+interface YandexMetricaProps {
+  accounts: number[]
+}
+
+export const YandexMetrica = (props: YandexMetricaProps) => {
+  if (isProd()) {
+    return (
+      <YMInitializer 
+        accounts={props.accounts} 
+        options={{webvisor: true}} 
+      />
+    )
+  } else {
+    return (<div style={{display: 'none'}} />);
+  }
 }

Izzy.Web/Client/src/__tests__/Calculator.spec.tsx

@@ -49,11 +49,41 @@ describe('<Calculator />', () => {
     done();
   });
 
+  it ('one person in form by default', done => {
+    // Act
+    const personsCount = component.find('.person').length;
+
+    // Assert
+    expect(personsCount).toEqual(1);
+    done();
+  });
+
+  it ('calc button is disabled, if there is one person in form', done => {
+    // Arrange
+    const addButton = component.find('#calc').hostNodes();
+
+    // Act
+    addButton.simulate('click');
+    const personsAfter = component.find('.person').length
+
+    // Assert
+    expect(personsAfter).toEqual(1);
+    done();
+  });
+
   it ('outcomes are displayed after clicking on \'Рассчитать\' button', done => {
     // Act
-    component.find('#persons_form').children().find('form').simulate('submit', {
-      preventDefault: () => {} // no op
-    });
+    const addButton = component.find('#add').hostNodes();
+    addButton.simulate('click');
+
+    console.log(123)
+
+    component.find('#persons_form')
+      .children()
+      .find('form')
+      .simulate('submit', {
+        preventDefault: () => {} // no op
+      });
 
     // Assert
     moxios.wait(() => {

Izzy.Web/Client/src/components/Calculator.css

@@ -15,8 +15,9 @@
   box-sizing: border-box;
   border-radius: 2px;
   background-color: #ffffff;
+  text-align: center;
   margin-left: auto;
   margin-right: auto;
   margin-top: 4px;
-  text-align: center;
+  min-height: 560px;
 }

Izzy.Web/Client/src/components/Calculator.tsx

@@ -8,7 +8,7 @@ import './Calculator.css';
 
 function Display(props: any) {
   const {increment, people, transfers, calculate} = props;
-  if (transfers.length === 0) {
+  if ( transfers.length === 0 ) {
     return <Incomes increment={increment} people={people} calculate={calculate}/>
   } else {
     return <Outcomes transfers={transfers}/>

Izzy.Web/Client/src/components/incomes/Incomes.tsx

@@ -3,15 +3,13 @@ import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import Input from '@material-ui/core/Input';
-import { Persons } from './Persons';
-import { Person } from './../../store/model/Person';
 import { Formik, Form, Field, FieldArray, FieldProps } from 'formik';
 import './Person.css';
 import { RandomPerson } from '../../store/model/RandomPerson';
 
 export class Incomes extends Component<any, any> {
   render() {
-    const {increment, people, calculate} = this.props;
+    const {calculate} = this.props;
     return (
       <FormControl id="persons_form">
         <h1>Замиокулькас</h1>
@@ -67,7 +65,14 @@ export class Incomes extends Component<any, any> {
                         />
                       </div>
                     ))}
-                    <Button type="submit" id="calc" color="primary" >Рассчитать</Button>
+                    <Button 
+                      type="submit"
+                      id="calc"
+                      color="primary"
+                      disabled={ values.persons.length > 1 ? false : true }
+                    >
+                      Рассчитать
+                    </Button>
                   </div>
                 )}
               />

Izzy.Web/Client/src/index.tsx

@@ -5,7 +5,6 @@ import { Provider } from 'react-redux';
 import './index.css';
 import App from './App';
 import { YandexMetrica } from './YandexMetrica';
-import { YMInitializer } from 'react-yandex-metrika';
 import * as serviceWorker from './serviceWorker';
 import configureStore from './store/configureStore';
 

Izzy.Web/Client/src/store/Calculator/actions.ts

@@ -1,18 +1,28 @@
 import axios from 'axios';
-import { calculateUrl } from "./urls";
+import { calculateUrl } from './urls';
+import { Person } from './../model/Person';
 
 export const incrementCountType = 'INCREMENT_PERSON_COUNT';
 export const decrementCountType = 'DECREMENT_PERSON_COUNT';
 export const calculateType = 'CALCULATE';
 
+async function transfersFromBack(people: Person[]) {
+  try {
+    return await axios.post(calculateUrl, people); 
+  }
+  catch {
+    return { data: [] };
+  }
+}
+
 export const actionCreators = {
-    increment: () => ({ type: incrementCountType }),
-    decrement: () => ({ type: decrementCountType }),
-    calculate: (people: any) => async (dispatch: any) => {
-        const response = await axios.post(calculateUrl, people);
-        dispatch({
-            type: calculateType,
-            payload: response
-        })
-    }
+  increment: () => ({ type: incrementCountType }),
+  decrement: () => ({ type: decrementCountType }),
+  calculate: (people: Person[]) => async (dispatch: any) => {
+    const response = await transfersFromBack(people);
+    dispatch({
+      type: calculateType,
+      payload: response
+    })
+  }
 };

Izzy.Web/Controllers/CalculatorController.cs

@@ -1,19 +1,35 @@
+using System;
 using System.Collections.Generic;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
 using Izzy.Web.Model;
 
 namespace Izzy.Web.Controllers
 {
     [Route("api/[controller]")]
     public class CalculatorController : Controller
     {
+        private readonly ILogger _logger;
+
+        public CalculatorController(ILogger<CalculatorController> logger)
+        {
+            this._logger = logger;
+        }
+
         [HttpPost]
         public IActionResult Calculate([FromBody] IEnumerable<Person> persons)
         {
-            return new OkObjectResult(
-                new Receipt(persons)
-                    .Transfers()
-            );
+            if (ModelState.IsValid) {
+                return new OkObjectResult(
+                    new Receipt(persons)
+                        .Transfers()
+                );
+            } else {
+                return new BadRequestObjectResult(
+                    "Name should have string type, Roubles should have number type"
+                );
+            }
+
         }
     }
 }