Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Followup fixes for Transactions Page #4766

Merged
merged 5 commits into from
Aug 7, 2020
Merged

Followup fixes for Transactions Page #4766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9175c08
refact: use new TransactionList in transaction section
kewitz Aug 5, 2020
bb8a61a
refact: use new TransactionList in budget section
kewitz Aug 5, 2020
a265072
fix: transactions search bar bug
kewitz Aug 6, 2020
ef9af01
refact: rename wrong component
kewitz Aug 6, 2020
2d337b7
test: update collective e2e test
kewitz Aug 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 0 additions & 16 deletions components/collective-page/graphql/queries.js
View file
Open in desktop
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
Open in desktop
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
Loading