From 9175c0851d21df6b8edcebdb067a4305f2c807c5 Mon Sep 17 00:00:00 2001
From: Leo Kewitz
Date: Wed, 5 Aug 2020 20:15:42 +0000
Subject: [PATCH 1/5] refact: use new TransactionList in transaction section
---
.../collective-page/sections/Transactions.js | 275 +++++++-----------
components/transactions/graphql/fragments.js | 84 ++++++
pages/transactions.js | 81 +-----
3 files changed, 188 insertions(+), 252 deletions(-)
create mode 100644 components/transactions/graphql/fragments.js
diff --git a/components/collective-page/sections/Transactions.js b/components/collective-page/sections/Transactions.js
index b52dfe73b31..c4b7a55a7ae 100644
--- a/components/collective-page/sections/Transactions.js
+++ b/components/collective-page/sections/Transactions.js
@@ -1,23 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from '@apollo/react-hoc';
-import gql from 'graphql-tag';
-import { orderBy } from 'lodash';
-import memoizeOne from 'memoize-one';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { API_V2_CONTEXT, gqlV2 } from '../../../lib/graphql/helpers';
+
import { Dimensions } from '../_constants';
-import BudgetItemsList, {
- budgetItemExpenseFragment,
- budgetItemExpenseTypeFragment,
- budgetItemOrderFragment,
-} from '../../budget/BudgetItemsList';
import { Box } from '../../Grid';
import Link from '../../Link';
import LoadingPlaceholder from '../../LoadingPlaceholder';
import MessageBox from '../../MessageBox';
import StyledButton from '../../StyledButton';
import StyledFilters from '../../StyledFilters';
+import { transactionsQueryCollectionFragment } from '../../transactions/graphql/fragments';
+import TransactionsList from '../../transactions/TransactionsList';
import ContainerSectionContent from '../ContainerSectionContent';
import SectionTitle from '../SectionTitle';
@@ -39,181 +35,112 @@ const I18nFilters = defineMessages({
},
});
-class SectionTransactions extends React.Component {
- static propTypes = {
- /** Collective */
- collective: PropTypes.shape({
- id: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- slug: PropTypes.string.isRequired,
- currency: PropTypes.string.isRequired,
- platformFeePercent: PropTypes.number,
- }).isRequired,
-
- /** Wether user is admin of `collective` */
- isAdmin: PropTypes.bool,
-
- /** Wether user is root user */
- isRoot: PropTypes.bool,
-
- /** @ignore from withData */
- data: PropTypes.shape({
- loading: PropTypes.bool,
- refetch: PropTypes.func,
- /** Expenses paid + refunds */
- contributions: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.number.isRequired,
- amount: PropTypes.number.isRequired,
- createdAt: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- description: PropTypes.string,
- fromcollective: PropTypes.shape({
- id: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- slug: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- imageUrl: PropTypes.string,
- isIncognito: PropTypes.bool,
- }),
- usingVirtualCardFromCollective: PropTypes.shape({
- id: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- slug: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- }),
- }),
- ),
- /** Financial contributions */
- expenses: PropTypes.shape({
- entries: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.number.isRequired,
- amount: PropTypes.number.isRequired,
- description: PropTypes.string.isRequired,
- createdAt: PropTypes.string.isRequired,
- transaction: PropTypes.shape({
- id: PropTypes.number,
- }),
- fromCollective: PropTypes.shape({
- id: PropTypes.number,
- slug: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- imageUrl: PropTypes.string,
- isIncognito: PropTypes.bool,
- }).isRequired,
- }),
- ),
- }),
- }),
-
- /** @ignore from injectIntl */
- intl: PropTypes.object,
- };
-
- state = { filter: FILTERS.ALL };
-
- componentDidUpdate(oldProps) {
- // If users just logged in (or logged out), refetch the data so we can get the transactions
- // `uuid` that will make it possible for them to download the expenses.
- const hadAccess = oldProps.isAdmin || oldProps.isRoot;
- const hasAccess = this.props.isAdmin || this.props.isRoot;
- if (hadAccess !== hasAccess) {
- this.props.data.refetch();
- }
+const SectionTransactions = props => {
+ const [filter, setFilter] = React.useState(FILTERS.ALL);
+ React.useEffect(() => {
+ props.data.refetch();
+ }, [props.data, props.isAdmin, props.isRoot]);
+ React.useEffect(() => {
+ const hasExpense = filter === FILTERS.EXPENSES || undefined;
+ const hasOrder = filter === FILTERS.CONTRIBUTIONS || undefined;
+ props.data.refetch({ slug: props.collective.slug, limit: NB_DISPLAYED, hasExpense, hasOrder });
+ }, [filter, props.collective.slug, props.data]);
+
+ const { data, intl, collective } = props;
+ const showFilters = data?.transactions?.length !== 0;
+
+ if (!data?.transactions?.nodes?.length) {
+ return (
+
+
+
+
+
+
+
+
+ );
}
- getBudgetItems = memoizeOne((contributions, expenses, filter) => {
- if (filter === FILTERS.EXPENSES) {
- return expenses;
- } else if (filter === FILTERS.CONTRIBUTIONS) {
- return contributions;
- } else {
- return orderBy([...contributions, ...expenses], t => new Date(t.createdAt), ['desc']).slice(0, NB_DISPLAYED);
- }
- });
-
- render() {
- const { data, intl, collective, isAdmin, isRoot } = this.props;
- const { filter } = this.state;
- let showFilters = true;
-
- if (!data || data.loading) {
- return ;
- }
-
- const contributions = data.contributions || [];
- const expenses = (data.expenses && data.expenses.entries) || [];
- if (contributions.length === 0 && expenses.length === 0) {
- return (
-
-
-
-
-
-
-
-
- );
- } else if (contributions.length === 0 || expenses.length === 0) {
- showFilters = false;
- }
-
- const budgetItems = this.getBudgetItems(contributions, expenses, filter);
- return (
-
-
-
-
-
-
- {showFilters && (
-
- this.setState({ filter })}
- getLabel={filter => intl.formatMessage(I18nFilters[filter])}
- minButtonWidth={180}
- px={Dimensions.PADDING_X}
- />
-
+ return (
+
+
+
+
+
+
+ {showFilters && (
+
+ intl.formatMessage(I18nFilters[filter])}
+ minButtonWidth={180}
+ px={Dimensions.PADDING_X}
+ />
+
+ )}
+
+
+ {data.loading ? (
+
+ ) : (
+
)}
+
+
+ →
+
+
+
+
+ );
+};
+
+SectionTransactions.propTypes = {
+ /** Collective */
+ collective: PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ slug: PropTypes.string.isRequired,
+ currency: PropTypes.string.isRequired,
+ platformFeePercent: PropTypes.number,
+ }).isRequired,
+
+ /** Wether user is admin of `collective` */
+ isAdmin: PropTypes.bool,
+
+ /** Wether user is root user */
+ isRoot: PropTypes.bool,
+
+ /** @ignore from withData */
+ data: PropTypes.shape({
+ loading: PropTypes.bool,
+ refetch: PropTypes.func,
+ transactions: PropTypes.arrayOf(PropTypes.object),
+ }),
-
-
-
-
- →
-
-
-
-
- );
- }
-}
+ /** @ignore from injectIntl */
+ intl: PropTypes.object,
+};
-const transactionsSectionQuery = gql`
- query TransactionsSection($id: Int!, $nbDisplayed: Int!) {
- contributions: allTransactions(CollectiveId: $id, includeExpenseTransactions: false, limit: $nbDisplayed) {
- ...BudgetItemExpenseFragment
- ...BudgetItemOrderFragment
- }
- expenses(FromCollectiveId: $id, limit: $nbDisplayed) {
- entries: expenses {
- ...BudgetItemExpenseTypeFragment
- }
+const transactionsQuery = gqlV2/* GraphQL */ `
+ query Transactions($slug: String!, $limit: Int!, $hasOrder: Boolean, $hasExpense: Boolean) {
+ transactions(account: { slug: $slug }, limit: $limit, hasOrder: $hasOrder, hasExpense: $hasExpense) {
+ ...TransactionsQueryCollectionFragment
}
}
- ${budgetItemExpenseFragment}
- ${budgetItemOrderFragment}
- ${budgetItemExpenseTypeFragment}
+ ${transactionsQueryCollectionFragment}
`;
-const addTransactionsSectionData = graphql(transactionsSectionQuery, {
- options: props => ({
- variables: { id: props.collective.id, nbDisplayed: NB_DISPLAYED },
- }),
+const addTransactionsSectionData = graphql(transactionsQuery, {
+ options: props => {
+ return {
+ variables: { slug: props.collective.slug, limit: NB_DISPLAYED },
+ context: API_V2_CONTEXT,
+ };
+ },
});
export default React.memo(injectIntl(addTransactionsSectionData(SectionTransactions)));
diff --git a/components/transactions/graphql/fragments.js b/components/transactions/graphql/fragments.js
new file mode 100644
index 00000000000..7910dc8cde3
--- /dev/null
+++ b/components/transactions/graphql/fragments.js
@@ -0,0 +1,84 @@
+import { gqlV2 } from '../../../lib/graphql/helpers';
+
+export const transactionsQueryCollectionFragment = gqlV2/* GraphQL */ `
+ fragment TransactionsQueryCollectionFragment on TransactionCollection {
+ totalCount
+ offset
+ limit
+ nodes {
+ id
+ uuid
+ amount {
+ currency
+ valueInCents
+ }
+ netAmount {
+ currency
+ valueInCents
+ }
+ platformFee {
+ currency
+ valueInCents
+ }
+ paymentProcessorFee {
+ currency
+ valueInCents
+ }
+ hostFee {
+ currency
+ valueInCents
+ }
+ type
+ description
+ createdAt
+ isRefunded
+ toAccount {
+ id
+ name
+ slug
+ type
+ imageUrl
+ ... on Collective {
+ host {
+ name
+ slug
+ type
+ }
+ }
+ }
+ fromAccount {
+ id
+ name
+ slug
+ type
+ imageUrl
+ }
+ paymentMethod {
+ type
+ }
+ order {
+ id
+ status
+ }
+ expense {
+ id
+ status
+ tags
+ type
+ legacyId
+ comments {
+ totalCount
+ }
+ payoutMethod {
+ type
+ }
+ account {
+ slug
+ }
+ createdByAccount {
+ slug
+ }
+ }
+ }
+ }
+`;
diff --git a/pages/transactions.js b/pages/transactions.js
index b350a172e51..a1f0d8eec9c 100644
--- a/pages/transactions.js
+++ b/pages/transactions.js
@@ -29,6 +29,7 @@ import Pagination from '../components/Pagination';
import SearchBar from '../components/SearchBar';
import StyledHr from '../components/StyledHr';
import { H1 } from '../components/Text';
+import { transactionsQueryCollectionFragment } from '../components/transactions/graphql/fragments';
import TransactionsDownloadCSV from '../components/transactions/TransactionsDownloadCSV';
import TransactionsDownloadInvoices from '../components/transactions/TransactionsDownloadInvoices';
import TransactionsFilters from '../components/transactions/TransactionsFilters';
@@ -56,86 +57,10 @@ const transactionsQuery = gqlV2/* GraphQL */ `
dateFrom: $dateFrom
searchTerm: $searchTerm
) {
- totalCount
- offset
- limit
- nodes {
- id
- uuid
- amount {
- currency
- valueInCents
- }
- netAmount {
- currency
- valueInCents
- }
- platformFee {
- currency
- valueInCents
- }
- paymentProcessorFee {
- currency
- valueInCents
- }
- hostFee {
- currency
- valueInCents
- }
- type
- description
- createdAt
- isRefunded
- toAccount {
- id
- name
- slug
- type
- imageUrl
- ... on Collective {
- host {
- name
- slug
- type
- }
- }
- }
- fromAccount {
- id
- name
- slug
- type
- imageUrl
- }
- paymentMethod {
- type
- }
- order {
- id
- status
- }
- expense {
- id
- status
- tags
- type
- legacyId
- comments {
- totalCount
- }
- payoutMethod {
- type
- }
- account {
- slug
- }
- createdByAccount {
- slug
- }
- }
- }
+ ...TransactionsQueryCollectionFragment
}
}
+ ${transactionsQueryCollectionFragment}
`;
const TransactionPageWrapper = styled.div`
From bb8a61ae001054e32b73fc64c8098c2c08588a91 Mon Sep 17 00:00:00 2001
From: Leo Kewitz
Date: Wed, 5 Aug 2020 17:27:35 -0300
Subject: [PATCH 2/5] refact: use new TransactionList in budget section
---
components/collective-page/graphql/queries.js | 16 --
components/collective-page/sections/Budget.js | 143 ++++++++----------
.../collective-page/sections/Transactions.js | 47 +++---
lib/graphql/schemaV2.graphql | 12 +-
4 files changed, 91 insertions(+), 127 deletions(-)
diff --git a/components/collective-page/graphql/queries.js b/components/collective-page/graphql/queries.js
index ee56ebd2fbe..739597c486e 100644
--- a/components/collective-page/graphql/queries.js
+++ b/components/collective-page/graphql/queries.js
@@ -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`
@@ -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
}
@@ -259,9 +246,6 @@ export const collectivePageQuery = gql`
}
}
- ${budgetItemExpenseFragment}
- ${budgetItemOrderFragment}
- ${budgetItemExpenseTypeFragment}
${fragments.updatesFieldsFragment}
${fragments.contributorsFieldsFragment}
`;
diff --git a/components/collective-page/sections/Budget.js b/components/collective-page/sections/Budget.js
index 3c15e419802..04c10a7327e 100644
--- a/components/collective-page/sections/Budget.js
+++ b/components/collective-page/sections/Budget.js
@@ -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';
@@ -21,26 +16,18 @@ 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}
`;
/**
@@ -48,10 +35,15 @@ const budgetSectionQuery = gql`
* 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 (
@@ -65,69 +57,52 @@ const SectionBudget = ({ collective, stats }) => {
/>
-
- {({ data }) => {
- const expenses = get(data, 'Collective.expenses');
- const transactions = get(data, 'Collective.transactions');
- if (isEmpty(expenses) && isEmpty(transactions)) {
- return (
-
-
+
-
- );
- }
+ />
+
+ )}
- // 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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/collective-page/sections/Transactions.js b/components/collective-page/sections/Transactions.js
index c4b7a55a7ae..13074a97a06 100644
--- a/components/collective-page/sections/Transactions.js
+++ b/components/collective-page/sections/Transactions.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { graphql } from '@apollo/react-hoc';
+import { useQuery } from '@apollo/react-hooks';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { API_V2_CONTEXT, gqlV2 } from '../../../lib/graphql/helpers';
@@ -35,18 +35,31 @@ const I18nFilters = defineMessages({
},
});
+const transactionsSectionQuery = gqlV2/* GraphQL */ `
+ query TransactionsSection($slug: String!, $limit: Int!, $hasOrder: Boolean, $hasExpense: Boolean) {
+ transactions(account: { slug: $slug }, limit: $limit, hasOrder: $hasOrder, hasExpense: $hasExpense) {
+ ...TransactionsQueryCollectionFragment
+ }
+ }
+ ${transactionsQueryCollectionFragment}
+`;
+
const SectionTransactions = props => {
+ const { data, refetch, loading } = useQuery(transactionsSectionQuery, {
+ variables: { slug: props.collective.slug, limit: NB_DISPLAYED },
+ context: API_V2_CONTEXT,
+ });
const [filter, setFilter] = React.useState(FILTERS.ALL);
React.useEffect(() => {
- props.data.refetch();
- }, [props.data, props.isAdmin, props.isRoot]);
+ refetch();
+ }, [props.isAdmin, props.isRoot, refetch]);
React.useEffect(() => {
const hasExpense = filter === FILTERS.EXPENSES || undefined;
const hasOrder = filter === FILTERS.CONTRIBUTIONS || undefined;
- props.data.refetch({ slug: props.collective.slug, limit: NB_DISPLAYED, hasExpense, hasOrder });
- }, [filter, props.collective.slug, props.data]);
+ refetch({ slug: props.collective.slug, limit: NB_DISPLAYED, hasExpense, hasOrder });
+ }, [filter, props.collective.slug, refetch]);
- const { data, intl, collective } = props;
+ const { intl, collective } = props;
const showFilters = data?.transactions?.length !== 0;
if (!data?.transactions?.nodes?.length) {
@@ -83,7 +96,7 @@ const SectionTransactions = props => {
)}
- {data.loading ? (
+ {loading ? (
) : (
@@ -125,22 +138,4 @@ SectionTransactions.propTypes = {
intl: PropTypes.object,
};
-const transactionsQuery = gqlV2/* GraphQL */ `
- query Transactions($slug: String!, $limit: Int!, $hasOrder: Boolean, $hasExpense: Boolean) {
- transactions(account: { slug: $slug }, limit: $limit, hasOrder: $hasOrder, hasExpense: $hasExpense) {
- ...TransactionsQueryCollectionFragment
- }
- }
- ${transactionsQueryCollectionFragment}
-`;
-
-const addTransactionsSectionData = graphql(transactionsQuery, {
- options: props => {
- return {
- variables: { slug: props.collective.slug, limit: NB_DISPLAYED },
- context: API_V2_CONTEXT,
- };
- },
-});
-
-export default React.memo(injectIntl(addTransactionsSectionData(SectionTransactions)));
+export default React.memo(injectIntl(SectionTransactions));
diff --git a/lib/graphql/schemaV2.graphql b/lib/graphql/schemaV2.graphql
index 132ae8aeb44..7d529562b72 100644
--- a/lib/graphql/schemaV2.graphql
+++ b/lib/graphql/schemaV2.graphql
@@ -1,5 +1,5 @@
# source: http://localhost:3060/graphql/v2
-# timestamp: Tue Aug 04 2020 10:43:42 GMT-0300 (Brasilia Standard Time)
+# timestamp: Wed Aug 05 2020 16:44:39 GMT-0300 (Brasilia Standard Time)
"""
Account interface shared by all kind of accounts (Bot, Collective, Event, User, Organization)
@@ -5130,6 +5130,16 @@ type Query {
The term to search
"""
searchTerm: String
+
+ """
+ Transaction is attached to Expense
+ """
+ hasExpense: Boolean
+
+ """
+ Transaction is attached to Order
+ """
+ hasOrder: Boolean
): TransactionCollection
loggedInAccount: Account
}
From a26507212cb4b460d26f64c54325cae4c3babee3 Mon Sep 17 00:00:00 2001
From: Leo Kewitz
Date: Thu, 6 Aug 2020 21:19:00 +0000
Subject: [PATCH 3/5] fix: transactions search bar bug
---
pages/transactions.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/pages/transactions.js b/pages/transactions.js
index a1f0d8eec9c..c225effca99 100644
--- a/pages/transactions.js
+++ b/pages/transactions.js
@@ -171,7 +171,9 @@ class TransactionsPage extends React.Component {
Router.pushRoute('transactions', { ...query, searchTerm, offset: null })}
+ onSubmit={searchTerm =>
+ Router.pushRoute('transactions', { ...query, searchTerm, offset: null, collectiveSlug: slug })
+ }
/>
From ef9af01d816d473342787f377ee08412a43432e7 Mon Sep 17 00:00:00 2001
From: Leo Kewitz
Date: Thu, 6 Aug 2020 21:19:36 +0000
Subject: [PATCH 4/5] refact: rename wrong component
---
components/transactions/TransactionsDownloadInvoices.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/components/transactions/TransactionsDownloadInvoices.js b/components/transactions/TransactionsDownloadInvoices.js
index bd8aa718043..da1c285cf9b 100644
--- a/components/transactions/TransactionsDownloadInvoices.js
+++ b/components/transactions/TransactionsDownloadInvoices.js
@@ -96,7 +96,7 @@ const makeYearlyOptions = invoices => {
.reverse();
};
-const TransactionsDownloadCSV = ({ collective }) => {
+const TransactionsDownloadInvoices = ({ collective }) => {
const [interval, setInterval] = React.useState('monthly');
const [year, setYear] = React.useState();
const { data, loading } = useQuery(invoicesQuery, {
@@ -169,7 +169,7 @@ const TransactionsDownloadCSV = ({ collective }) => {
);
};
-TransactionsDownloadCSV.propTypes = {
+TransactionsDownloadInvoices.propTypes = {
onChange: PropTypes.func,
filters: PropTypes.object,
collective: PropTypes.shape({
@@ -179,4 +179,4 @@ TransactionsDownloadCSV.propTypes = {
}).isRequired,
};
-export default TransactionsDownloadCSV;
+export default TransactionsDownloadInvoices;
From 2d337b783e5dbec28b05d10d038b19b74b00b7d6 Mon Sep 17 00:00:00 2001
From: Leo Kewitz
Date: Thu, 6 Aug 2020 22:16:06 -0300
Subject: [PATCH 5/5] test: update collective e2e test
---
components/transactions/TransactionItem.js | 2 +-
test/cypress/integration/04-collective.test.js | 6 +++---
test/cypress/integration/05-user.test.js | 16 ++++++++++------
test/cypress/integration/06-host.test.js | 7 -------
4 files changed, 14 insertions(+), 17 deletions(-)
diff --git a/components/transactions/TransactionItem.js b/components/transactions/TransactionItem.js
index 6d48e4603e6..81179dacacd 100644
--- a/components/transactions/TransactionItem.js
+++ b/components/transactions/TransactionItem.js
@@ -65,7 +65,7 @@ const TransactionItem = transaction => {
: netAmount;
return (
- -
+
-
diff --git a/test/cypress/integration/04-collective.test.js b/test/cypress/integration/04-collective.test.js
index 3556735e602..637c2b23c57 100644
--- a/test/cypress/integration/04-collective.test.js
+++ b/test/cypress/integration/04-collective.test.js
@@ -183,11 +183,11 @@ describe('Collective page with euro currency', () => {
describe('Budget section', () => {
it('Shows latest transactions with amount and type (credit/debit)', () => {
scrollToSection(Sections.BUDGET);
- cy.get('[data-cy="budget-item"] [data-cy=transaction-amount]')
+ cy.get('[data-cy="transaction-item"] [data-cy=transaction-amount]')
.first()
.within($firstTransactionAmount => {
- cy.get('[data-cy=transaction-sign]').should('have.text', '-');
- cy.wrap($firstTransactionAmount).contains('€242.00');
+ cy.get('[data-cy=transaction-sign]').should('have.text', '+');
+ cy.wrap($firstTransactionAmount).contains('€10.00');
});
});
diff --git a/test/cypress/integration/05-user.test.js b/test/cypress/integration/05-user.test.js
index 85a2912ee52..261891bc711 100644
--- a/test/cypress/integration/05-user.test.js
+++ b/test/cypress/integration/05-user.test.js
@@ -43,18 +43,22 @@ describe('New users profiles', () => {
});
it('Show transactions with all info and links', () => {
- cy.get('[data-cy="budget-item"]:first a[href="/brusselstogether"]').should('exist');
- cy.get('[data-cy="budget-item"]')
+ cy.get('[data-cy="transaction-item"]:first a[href="/brusselstogether"]').should('exist');
+ cy.get('[data-cy="transaction-item"]')
.first()
.get('[data-cy=transaction-description]')
.contains('monthly recurring subscription');
- cy.get('[data-cy="budget-item"]')
+ cy.get('[data-cy="transaction-item"]')
.first()
.get('[data-cy=transaction-details] > span[data-cy=transaction-date]')
.contains('11/30/2017');
- cy.get('[data-cy="budget-item"]').first().get('[data-cy=transaction-amount] > span').eq(0).contains('-');
- cy.get('[data-cy="budget-item"]').first().get('[data-cy=transaction-amount] > span').eq(1).contains('€10.00');
- cy.get('[data-cy="budget-item"]').first().get('[data-cy=transaction-amount] > span').eq(2).contains('EUR');
+ cy.get('[data-cy="transaction-item"]').first().get('[data-cy=transaction-amount] > span').eq(0).contains('-');
+ cy.get('[data-cy="transaction-item"]')
+ .first()
+ .get('[data-cy=transaction-amount] > span')
+ .eq(1)
+ .contains('€10.00');
+ cy.get('[data-cy="transaction-item"]').first().get('[data-cy=transaction-amount] > span').eq(2).contains('EUR');
});
});
});
diff --git a/test/cypress/integration/06-host.test.js b/test/cypress/integration/06-host.test.js
index 5670eece776..1963d942730 100644
--- a/test/cypress/integration/06-host.test.js
+++ b/test/cypress/integration/06-host.test.js
@@ -23,11 +23,4 @@ describe('New host page', () => {
cy.contains('[data-cy=contributors-grid]', /(pia mancini|Xavier Damma|Open Source Host User)/);
});
});
-
- describe('Transactions section', () => {
- // The rest of the transactions section tests are in `05-user.test.js`
- it("Has no filters (because hosts don't create expenses)", () => {
- cy.contains('[data-cy~="filter-button"]', 'Expenses').should('not.exist');
- });
- });
});