React component to display a budget summary

Question

I have following component

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { filterTransactionsByDates } from 'Utils/functions';
import {ReactComponent as BilanceIcon} from 'assets/icons/balanceDashboardIcon.svg';
import { ReactComponent as IncomeIcon } from 'assets/icons/incomeDashboardIcon.svg';
import { ReactComponent as SavingsIcon } from 'assets/icons/savingsDashboardIcon.svg';
import { ReactComponent as ExpensesIcon } from 'assets/icons/expensesDashboardIcon.svg';

import SingleSummaryField from 'components/UI/SingleSummaryField'

const Wrapper = styled.div`
    width: 96%;
    height: 100%;
    display: flex;
    flex-flow: column;
    gap: 21px;
`

const Row = styled.div`
    display: flex;
    flex-flow: row;
    gap: 21px;
`

const BudgetSummary = ({ budgetSummary }) => {
  const {expensesSum, incomesSum, balance} = budgetSummary;
  return (
    <Wrapper>
      <Row>
        <SingleSummaryField amount={balance} name="Balance">
          <BilanceIcon />
        </SingleSummaryField>
        <SingleSummaryField amount={incomesSum} name="Income">
          <IncomeIcon />
        </SingleSummaryField>
      </Row>
      <Row>
        <SingleSummaryField amount={1000} name="Savings">
          <SavingsIcon />
        </SingleSummaryField>
        <SingleSummaryField amount={0 - expensesSum} name="Expenses">
          <ExpensesIcon />
        </SingleSummaryField>
      </Row>
    </Wrapper>
  );
};

BudgetSummary.propTypes = {
  budgetSummary: PropTypes.shape({
    expensesSum: PropTypes.number.isRequired,
    incomesSum: PropTypes.number.isRequired,
    balance: PropTypes.number.isRequired,
  }),
};

const getBudgetSummary = createSelector(
  (state) => state.expenses.expenses,
  (state) => state.incomes.incomes,
  (state) => state.datesRange.datesRange,
  (expenses, incomes, datesRange) => {
    const filteredExpenses = filterTransactionsByDates(expenses, datesRange);
    const filteredIncomes = filterTransactionsByDates(incomes, datesRange);

    const expensesSum = filteredExpenses.reduce((sum, currentTransaction) => {
      return sum + currentTransaction.amount;
    },0);

    const incomesSum = filteredIncomes.reduce((sum, currentTransaction) => {
      return sum + currentTransaction.amount;
    }, 0);

    const balance = incomesSum - expensesSum;

    return {
      expensesSum: expensesSum,
      incomesSum: incomesSum,
      balance: balance,
    };
  }
)

const mapState = (state) => {
  return {
    budgetSummary: getBudgetSummary(state)
  }
}

export default connect(mapState)(BudgetSummary);

What do you think about providing data to the component ? Do you think that method which is being used right now is fine or it would be better to separate the logic to some kind of container component or maybe shall I create separate component which will handle only js operations on data ?

Answer 1

Cześć Łukasz,

I'd personally move some of the logic to the separate file. Eg. getBudgedSummary.That way, Your component will be more readable and easier to test.

btw, instead of expensesSum: expensesSum, You can simply go for expensesSum