2
\$\begingroup\$

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 ?

\$\endgroup\$
1
  • \$\begingroup\$ The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How do I ask a good question?. \$\endgroup\$
    – BCdotWEB
    Dec 24, 2021 at 15:45

1 Answer 1

0
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.