Skip to content

Commit

Permalink
Merge pull request #4766 from opencollective/fix/transactions-followup
Browse files Browse the repository at this point in the history 
Followup fixes for Transactions Page
  • Loading branch information
@kewitz
kewitz committed Aug 7, 2020
2 parents 22ef32a + 2d337b7 commit 9eb2e8d
Show file tree
Hide file tree
Showing 11 changed files with 276 additions and 377 deletions.
16 changes: 0 additions & 16 deletions components/collective-page/graphql/queries.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import gql from 'graphql-tag';

import {
budgetItemExpenseFragment,
budgetItemExpenseTypeFragment,
budgetItemOrderFragment,
} from '../../budget/BudgetItemsList';

import * as fragments from './fragments';

export const collectivePageQuery = gql`
Expand Down Expand Up @@ -203,13 +197,6 @@ export const collectivePageQuery = gql`
}
}
}
transactions(limit: 3, includeExpenseTransactions: false) {
...BudgetItemOrderFragment
...BudgetItemExpenseFragment
}
expenses(limit: 3) {
...BudgetItemExpenseTypeFragment
}
updates(limit: 3, onlyPublishedUpdates: true) {
...UpdatesFields
}
Expand Down Expand Up @@ -259,9 +246,6 @@ export const collectivePageQuery = gql`
}
}
${budgetItemExpenseFragment}
${budgetItemOrderFragment}
${budgetItemExpenseTypeFragment}
${fragments.updatesFieldsFragment}
${fragments.contributorsFieldsFragment}
`;
143 changes: 59 additions & 84 deletions components/collective-page/sections/Budget.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Query } from '@apollo/react-components';
import gql from 'graphql-tag';
import { get, isEmpty, orderBy } from 'lodash';
import { useQuery } from '@apollo/react-hooks';
import { isEmpty } from 'lodash';
import { FormattedMessage, injectIntl } from 'react-intl';

import { CollectiveType } from '../../../lib/constants/collectives';
import { formatCurrency } from '../../../lib/currency-utils';
import { API_V2_CONTEXT, gqlV2 } from '../../../lib/graphql/helpers';

import BudgetItemsList, {
budgetItemExpenseFragment,
budgetItemExpenseTypeFragment,
budgetItemOrderFragment,
} from '../../budget/BudgetItemsList';
import Container from '../../Container';
import DefinedTerm, { Terms } from '../../DefinedTerm';
import { Box, Flex } from '../../Grid';
Expand All @@ -21,37 +16,34 @@ import MessageBox from '../../MessageBox';
import StyledButton from '../../StyledButton';
import StyledCard from '../../StyledCard';
import { P, Span } from '../../Text';
import { transactionsQueryCollectionFragment } from '../../transactions/graphql/fragments';
import TransactionsList from '../../transactions/TransactionsList';
import ContainerSectionContent from '../ContainerSectionContent';
import SectionTitle from '../SectionTitle';

/** Query to re-fetch transactions and expenses */
const budgetSectionQuery = gql`
query BudgetSection($slug: String!) {
Collective(slug: $slug) {
id
transactions(limit: 3, includeExpenseTransactions: false) {
...BudgetItemOrderFragment
...BudgetItemExpenseFragment
}
expenses(limit: 3) {
...BudgetItemExpenseTypeFragment
}
const budgetSectionQuery = gqlV2/* GraphQL */ `
query TransactionsSection($slug: String!, $limit: Int!) {
transactions(account: { slug: $slug }, limit: $limit) {
...TransactionsQueryCollectionFragment
}
}
${budgetItemExpenseFragment}
${budgetItemOrderFragment}
${budgetItemExpenseTypeFragment}
${transactionsQueryCollectionFragment}
`;

/**
* The budget section. Shows the expenses, the latests transactions and some statistics
* abut the global budget of the collective.
*/
const SectionBudget = ({ collective, stats }) => {
const { data } = useQuery(budgetSectionQuery, {
variables: { slug: collective.slug, limit: 3 },
context: API_V2_CONTEXT,
});
const monthlyRecurring =
(stats.activeRecurringContributions?.monthly || 0) + (stats.activeRecurringContributions?.yearly || 0) / 12;
const isFund = collective.type === CollectiveType.FUND || collective.settings?.fund === true; // Funds MVP, to refactor
const isProject = collective.type === CollectiveType.PROJECT;

return (
<ContainerSectionContent pt={[4, 5]} pb={3}>
<SectionTitle>
Expand All @@ -65,69 +57,52 @@ const SectionBudget = ({ collective, stats }) => {
/>
</P>
<Flex flexDirection={['column-reverse', null, 'row']} justifyContent="space-between" alignItems="flex-start">
<Query query={budgetSectionQuery} variables={{ slug: collective.slug }}>
{({ data }) => {
const expenses = get(data, 'Collective.expenses');
const transactions = get(data, 'Collective.transactions');
if (isEmpty(expenses) && isEmpty(transactions)) {
return (
<MessageBox type="info" withIcon maxWidth={800} fontStyle="italic" fontSize="Paragraph">
<FormattedMessage
id="SectionBudget.Empty"
defaultMessage="No transaction or expense created yet. They'll start appearing here as soon as you get your first
{isEmpty(data?.transactions) && (
<MessageBox type="info" withIcon maxWidth={800} fontStyle="italic" fontSize="Paragraph">
<FormattedMessage
id="SectionBudget.Empty"
defaultMessage="No transaction or expense created yet. They'll start appearing here as soon as you get your first
financial contributors or when someone creates an expense."
/>
</MessageBox>
);
}
/>
</MessageBox>
)}

// Merge items, filter expenses that already have a transaction as they'll already be
// included in `transactions`.
const budgetItemsUnsorted = [...transactions, ...expenses];
const budgetItems = orderBy(budgetItemsUnsorted, i => new Date(i.createdAt), ['desc']).slice(0, 3);
return (
<Container flex="10" mb={3} width="100%" maxWidth={800}>
<BudgetItemsList items={budgetItems} isCompact />
<Flex flexWrap="wrap" justifyContent="space-between" mt={3}>
<Box flex="1 1" mx={[0, 2]}>
<Link route="transactions" params={{ collectiveSlug: collective.slug }}>
<StyledButton
data-cy="view-all-transactions-btn"
my={2}
minWidth={290}
width="100%"
buttonSize="small"
fontSize="Paragraph"
>
<FormattedMessage
id="CollectivePage.SectionBudget.ViewAll"
defaultMessage="View all transactions"
/>
</StyledButton>
</Link>
</Box>
<Box flex="1 1" mx={[0, 2]}>
<Link route="expenses" params={{ collectiveSlug: collective.slug }}>
<StyledButton
data-cy="view-all-expenses-btn"
my={2}
minWidth={290}
width="100%"
buttonSize="small"
fontSize="Paragraph"
>
<FormattedMessage
id="CollectivePage.SectionBudget.ViewAllExpenses"
defaultMessage="View all expenses"
/>
</StyledButton>
</Link>
</Box>
</Flex>
</Container>
);
}}
</Query>
<Container flex="10" mb={3} width="100%" maxWidth={800}>
<TransactionsList transactions={data?.transactions?.nodes} />
<Flex flexWrap="wrap" justifyContent="space-between" mt={3}>
<Box flex="1 1" mx={[0, 2]}>
<Link route="transactions" params={{ collectiveSlug: collective.slug }}>
<StyledButton
data-cy="view-all-transactions-btn"
my={2}
minWidth={290}
width="100%"
buttonSize="small"
fontSize="Paragraph"
>
<FormattedMessage id="CollectivePage.SectionBudget.ViewAll" defaultMessage="View all transactions" />
</StyledButton>
</Link>
</Box>
<Box flex="1 1" mx={[0, 2]}>
<Link route="expenses" params={{ collectiveSlug: collective.slug }}>
<StyledButton
data-cy="view-all-expenses-btn"
my={2}
minWidth={290}
width="100%"
buttonSize="small"
fontSize="Paragraph"
>
<FormattedMessage
id="CollectivePage.SectionBudget.ViewAllExpenses"
defaultMessage="View all expenses"
/>
</StyledButton>
</Link>
</Box>
</Flex>
</Container>

<Box width="32px" flex="1" />

Expand Down

1 comment on commit 9eb2e8d

@vercel
Copy link

@vercel vercel bot commented on 9eb2e8d Aug 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.