Requisito 8

Pedroicn · Sep 1, 2022 · bfa6200 · bfa6200
1 parent 01fd750
commit bfa6200
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/src/components/Table.js b/src/components/Table.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { atualizaDespesas } from '../redux/actions';
 
 class Table extends Component {
   renderizaCambio = (expense) => {
@@ -13,9 +14,15 @@ class Table extends Component {
     return convercao.toFixed(2);
   };
 
+  deleteExpense = (id) => {
+    const { expenses, dispatch } = this.props;
+    const deleteExpense = expenses.filter((expense) => expense.id !== id);
+    console.log(deleteExpense);
+    dispatch(atualizaDespesas(deleteExpense));
+  };
+
   render() {
     const { expenses } = this.props;
-    console.log(expenses);
     return (
       <section>
         <caption>
@@ -47,6 +54,20 @@ class Table extends Component {
                   <td>{ this.renderizaCambio(expense) }</td>
                   <td>{ this.renderizaConvercao(expense) }</td>
                   <td>Real</td>
+                  <td>
+                    <button
+                      type="button"
+                    >
+                      Editar
+                    </button>
+                    <button
+                      data-testid="delete-btn"
+                      type="button"
+                      onClick={ () => this.deleteExpense(expense.id) }
+                    >
+                      Excluir
+                    </button>
+                  </td>
                 </tr>
               ))
             }
@@ -63,6 +84,7 @@ const mapStateToProps = (state) => ({
 
 Table.propTypes = {
   expenses: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  dispatch: PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps)(Table);
diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js
@@ -5,7 +5,7 @@ export const GET_USER_INFORMATION = 'GET_USER_INFORMATION';
 export const GET_CURRENCIES_SUCCESS = 'GET_CURRENCIES_SUCCESS';
 export const GET_CURRENCIES_FAILURE = 'GET_CURRENCIES_FAILURE';
 export const GET_EXPENSES = 'GET_EXPENSES';
-// export const GET_SUM = 'GET_SUM';
+export const ATUALIZA_DESPESA = 'ATUALIZA_DESPESA';
 
 export const getUserAction = (payload) => ({
   type: GET_USER_INFORMATION,
@@ -17,9 +17,10 @@ export const getExpensesData = (payload) => ({
   payload,
 });
 
-// export const getCurrencies = () => ({
-//   type: GET_CURRENCIES,
-// });
+export const atualizaDespesas = (payload) => ({
+  type: ATUALIZA_DESPESA,
+  payload,
+});
 
 export const getCurrenciesSuccess = (payload) => ({
   type: GET_CURRENCIES_SUCCESS,

diff --git a/src/redux/reducers/wallet.js b/src/redux/reducers/wallet.js
@@ -1,6 +1,7 @@
 // Esse reducer será responsável por tratar o todas as informações relacionadas as despesas
 // novo commit
 import {
+  ATUALIZA_DESPESA,
   GET_EXPENSES,
   GET_CURRENCIES_FAILURE,
   GET_CURRENCIES_SUCCESS } from '../actions';
@@ -27,12 +28,11 @@ const wallet = (state = INITIAL_STATE, action) => {
       ...state,
       expenses: [...state.expenses, action.payload],
     };
-  // case GET_SUM:
-  //   return {
-  //     ...state,
-  //     sum: state.expenses.map((item) => item.value),
-  //     // .reduce((a, b) => Number(a) + Number(b)),
-  //   };
+  case ATUALIZA_DESPESA:
+    return {
+      ...state,
+      expenses: action.payload,
+    };
   case GET_CURRENCIES_FAILURE:
     return {
       ...state,