Ejercicio entidad bancaria 2.0

Vamos a modificar el ejercicio anterior para añadir la siguiente funcionalidad:

En lugar de tener una variable donde se sumen las entradas y salidas tendremos sendos arrays de objetos donde guardaremos un objeto con la cantidad que hemos sacado y el momento en el que lo hemos hecho.

Al comprobar los límites de retirada o de ingreso lo haremos con respecto a las últimas 24 horas (para las pruebas podemos utilizar un intervalo menor)

En el tema de los ingresos que van a depósito pasadas esas 24 horas se añaden a la cuenta eliminándose de la lista.

Además de todo esto tendremos una lista con las 20 últimas operaciones que se mostrarán por pantalla.

Ejercicio React-Redux: Cuenta Bancaria

Vamos a hacer un ejercicio que simule una cuenta bancaria. Tendrá los siguientes elementos:

Saldo: 5.324,6 €

Cantidad: (input text)

Botones: |Hacer ingreso| |Sacar dinero|

El usuario puede poner una cantidad y si le da hacer ingreso se incrementa el saldo y si le da a sacar dinero se resta.

Con las siguientes condiciones:

Si el ingreso es mayor de 1000 € se suman solo 1000 € y el resto estará pendiente de ingreso (y lo mostraremos en el saldo al lado en color verde)

Si intentamos sacar más dinero del que hay en la cuenta se mostrará ‘Saldo insuficiente’.

Si sacamos dinero la cantidad se queda guardada y si queremos sacar más de 1000 € en una o varias operaciones nos saldrá un mensaje ‘Límite superado’

Los Diez Mandamientos del egoless programming

1. Entiende y acepta que cometerás errores. 
La cuestión es encontrarlos pronto, antes de que lleguen a producción. Afortunadamente, salvo para los pocos que desarrollan software de guiado de misiles, los fallos tienen raramente consecuencias fatales en nuestra industria, así que podemos, y deberíamos, aprender, reírnos, y seguir adelante.

2. Tú no eres tu código.
Recuerda que el objetivo de una revisión es encontrar problemas, y se encontrarán problemas. No te lo tomes personalmente cuando un error tuyo se descubra.

3. No importa cuánto “karate” sepas, siempre alguien sabrá más.
Esa persona puede enseñarte algunos movimientos nuevos si se lo pides. Busca y acepta información de otros, especialmente cuando piensas que no es necesario.

4. No reescribas código sin consultarlo antes.
Hay una fina línea de separación entre “corregir código” y “reescribir código”. Conoce la diferencia y realiza los cambios en el marco de una revisión de código, y no actuando como un justiciero solitario.

5. Trata a los que saben menos que tú con respeto, educación y paciencia.
La gente no técnica que trata con desarrolladores de forma frecuente casi siempre tienen la opinión de que en el mejor de los casos somos divas, y en el peor, llorones. No refuerces este estereotipo con ira e impaciencia.

6. La única constante en el mundo es el cambio.
Permanece abierto a ello y acéptalo con una sonrisa. Mira cada cambio a tus requisitos, plataforma o herramientas como un reto, no como un inconveniente contra el que hay que luchar.

7. La única autoridad real deriva del conocimiento, no de la posición.
El conocimiento genera autoridad, y la autoridad engendra respeto. Así que si quieres ser respetado en un entorno egoless, cultiva el conocimiento.

8. Lucha por lo que crees, pero acepta la derrota con deportividad.
Entiende que a veces tus ideas serán ignoradas. Incluso si resulta que estabas en lo cierto, no seas vengativo o digas “te lo dije” más de un par de veces, ni hagas de tu difunta idea una mártir o un grito de guerra.

9. No seas “ese tío de la habitación”.
No seas ese tío programando en una oficina oscura que emerge sólo para comprar coca-cola. Ese tío está fuera de la vista, del tacto, fuera de control y no tiene cabida en un entorno abierto y colaborativo.

10. Critica el código y no a la gente.
Sé amable con el desarrollador pero no con el código. Haz comentarios relacionados con los estándares locales, especificaciones de la aplicación, incrementos de rendimiento, etc.

Tutoriales react y redux

Conceptos de Redux (puros)

https://code.tutsplus.com/es/tutorials/getting-started-with-redux-why-redux–cms-30349

Ejemplo de app de contactos (incompleta):

https://code.tutsplus.com/es/tutorials/getting-started-with-redux-learn-by-example–cms-30350

Un ejemplo extenso:

https://www.valentinog.com/blog/redux/

Otro tutorial sencillo:

https://daveceddia.com/redux-tutorial/

Página oficial:

https://react-redux.js.org/introduction/quick-start

Crear proyecto con React y Redux

npx create-react-app redux-counter

cd redux-counter

npm install –save redux react-redux

Creamos Counter.js:

import React from 'react';

class Counter extends React.Component {
  state = { count: 0 }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  decrement = () => {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.state.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

export default Counter;

Después de modificarlo:

import React from 'react';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

    
class Counter extends React.Component {
  //state = { count: 0 }

  increment = () => {
   this.props.dispatch({ type: "INCREMENT" });
  }

  decrement = () => {
  this.props.dispatch({ type: "DECREMENT" });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

export default connect(mapStateToProps)(Counter);

App

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Counter from './Counter';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const initialState = {
  count: 0
};
function reducer(state = initialState, action) {
  console.log('reducer', state, action);
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    case 'RESET':
      return {
        count: 0
      };
    default:
      return state;
  }
}
const store = createStore(reducer);

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;