From 3b1d521341434c08409ef0f63a9fa3931da46d1b Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 25 Nov 2022 16:11:12 +0800 Subject: [PATCH 1/9] feat(Transaction): add Transaction purpose filter UI --- src/views/Me/Transactions/index.tsx | 42 +++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/src/views/Me/Transactions/index.tsx b/src/views/Me/Transactions/index.tsx index dbdbd19de6..7a7c20b8de 100644 --- a/src/views/Me/Transactions/index.tsx +++ b/src/views/Me/Transactions/index.tsx @@ -1,6 +1,6 @@ import { useQuery } from '@apollo/react-hooks' import gql from 'graphql-tag' -// import { useState } from 'react' +import { useState } from 'react' import { EmptyTransaction, @@ -9,7 +9,9 @@ import { Layout, List, Spinner, + Tabs, Transaction, + Translate, } from '~/components' import { analytics, mergeConnections } from '~/common/utils' @@ -17,7 +19,6 @@ import { analytics, mergeConnections } from '~/common/utils' // import { Currency, CurrencySwitch } from './CurrencySwitch' import styles from './styles.css' -// import { TransactionCurrency } from '@/__generated__/globalTypes' import { MeTransactions } from './__generated__/MeTransactions' const ME_TRANSACTIONS = gql` @@ -50,8 +51,20 @@ const ME_TRANSACTIONS = gql` ${Transaction.fragments.transaction} ` +export enum Purpose { + ALL = 'all', + DONATION = 'donation', + SUBSCRIPTION = 'subscriptionSplit', +} + const BaseTransactions = () => { // const [currencyType, setCurrencyType] = useState(Currency.ALL) + const [purpose, setPurpose] = useState(Purpose.ALL) + + const isALL = purpose === Purpose.ALL + const isDonaion = purpose === Purpose.DONATION + const isSubscription = purpose === Purpose.SUBSCRIPTION + const { data, loading, fetchMore, refetch } = useQuery( ME_TRANSACTIONS, { @@ -109,12 +122,25 @@ const BaseTransactions = () => { loadMore={loadMore} pullToRefresh={refetch} > - {/*
- setCurrencyType(c)} - /> -
*/} + + setPurpose(Purpose.ALL)}> + + + + setPurpose(Purpose.DONATION)} + > + + + + setPurpose(Purpose.SUBSCRIPTION)} + > + + + {edges.map(({ node, cursor }) => ( From 6fb426648700b8029c90daeef15b1ae4693e86ee Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 25 Nov 2022 16:14:05 +0800 Subject: [PATCH 2/9] feat(Transaction): add Transaction currency filter UI --- .../Me/Transactions/CurrencySwitch/index.tsx | 47 ++++++++----------- src/views/Me/Transactions/index.tsx | 29 +++++------- src/views/Me/Transactions/styles.css | 2 - 3 files changed, 32 insertions(+), 46 deletions(-) diff --git a/src/views/Me/Transactions/CurrencySwitch/index.tsx b/src/views/Me/Transactions/CurrencySwitch/index.tsx index a326520de4..1f6b32516d 100644 --- a/src/views/Me/Transactions/CurrencySwitch/index.tsx +++ b/src/views/Me/Transactions/CurrencySwitch/index.tsx @@ -1,10 +1,7 @@ -import { useContext } from 'react' - import { Button, DropdownDialog, IconArrowDown16, - LanguageContext, Menu, TextIcon, Translate, @@ -14,28 +11,11 @@ import { Z_INDEX } from '~/common/enums' export enum Currency { ALL = 'ALL', + USDT = 'USDT', HKD = 'HKD', LIKE = 'LIKE', } -const CURRENT_TEXT_MAP = { - zh_hant: { - ALL: '全部', - HKD: '港幣', - LIKE: 'LIKE', - }, - zh_hans: { - ALL: '全部', - HKD: '港币', - LIKE: 'LIKE', - }, - en: { - ALL: 'ALL', - HKD: 'HKD', - LIKE: 'LIKE', - }, -} - interface CurrencySwitchProps { currency: Currency setCurrency: (currency: Currency) => void @@ -50,7 +30,6 @@ const CurrencySwitchContent: React.FC = ({ setCurrency, isInDropdown, }) => { - const { lang } = useContext(LanguageContext) return ( setCurrency(Currency.ALL)}> @@ -59,7 +38,17 @@ const CurrencySwitchContent: React.FC = ({ size="md" weight={currency === Currency.ALL ? 'bold' : 'normal'} > - {CURRENT_TEXT_MAP[lang][Currency.ALL]} + + + + + setCurrency(Currency.USDT)}> + + {Currency.USDT} @@ -69,7 +58,7 @@ const CurrencySwitchContent: React.FC = ({ size="md" weight={currency === Currency.HKD ? 'bold' : 'normal'} > - {CURRENT_TEXT_MAP[lang][Currency.HKD]} + {Currency.HKD} @@ -79,7 +68,7 @@ const CurrencySwitchContent: React.FC = ({ size="md" weight={currency === Currency.LIKE ? 'bold' : 'normal'} > - LIKE + {Currency.LIKE} @@ -90,7 +79,6 @@ export const CurrencySwitch: React.FC = ({ currency, setCurrency, }) => { - const { lang } = useContext(LanguageContext) return ( = ({ textPlacement="left" color="grey" > - - {CURRENT_TEXT_MAP[lang][currency]} + {currency === Currency.ALL ? ( + + ) : ( + currency + )} )} diff --git a/src/views/Me/Transactions/index.tsx b/src/views/Me/Transactions/index.tsx index 7a7c20b8de..dccf120c6f 100644 --- a/src/views/Me/Transactions/index.tsx +++ b/src/views/Me/Transactions/index.tsx @@ -16,7 +16,7 @@ import { import { analytics, mergeConnections } from '~/common/utils' -// import { Currency, CurrencySwitch } from './CurrencySwitch' +import { Currency, CurrencySwitch } from './CurrencySwitch' import styles from './styles.css' import { MeTransactions } from './__generated__/MeTransactions' @@ -58,7 +58,7 @@ export enum Purpose { } const BaseTransactions = () => { - // const [currencyType, setCurrencyType] = useState(Currency.ALL) + const [currencyType, setCurrencyType] = useState(Currency.ALL) const [purpose, setPurpose] = useState(Purpose.ALL) const isALL = purpose === Purpose.ALL @@ -103,26 +103,23 @@ const BaseTransactions = () => { }) } - // let filteredEdges = edges - // if (currencyType === Currency.HKD) { - // filteredEdges = edges.filter( - // (e) => e.node.currency === TransactionCurrency.HKD - // ) - // } - - // if (currencyType === Currency.LIKE) { - // filteredEdges = edges.filter( - // (e) => e.node.currency === TransactionCurrency.LIKE - // ) - // } - return ( - + + setCurrencyType(c)} + /> + + } + > setPurpose(Purpose.ALL)}> diff --git a/src/views/Me/Transactions/styles.css b/src/views/Me/Transactions/styles.css index 4ce89544d9..8c176931d7 100644 --- a/src/views/Me/Transactions/styles.css +++ b/src/views/Me/Transactions/styles.css @@ -1,5 +1,3 @@ .CurrencySwitch { @mixin flex-center-end; - - padding: var(--spacing-base); } From 99997637a833a9336b3e436530f3df74c16fc369 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 25 Nov 2022 16:40:43 +0800 Subject: [PATCH 3/9] feat(Transaction): add currency and purpose parameters in MeTransaction GQL --- src/views/Me/Transactions/index.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/views/Me/Transactions/index.tsx b/src/views/Me/Transactions/index.tsx index dccf120c6f..1306209008 100644 --- a/src/views/Me/Transactions/index.tsx +++ b/src/views/Me/Transactions/index.tsx @@ -22,7 +22,11 @@ import styles from './styles.css' import { MeTransactions } from './__generated__/MeTransactions' const ME_TRANSACTIONS = gql` - query MeTransactions($after: String) { + query MeTransactions( + $after: String + $purpose: TransactionPurpose + $currency: TransactionCurrency + ) { viewer { id wallet { @@ -30,7 +34,11 @@ const ME_TRANSACTIONS = gql` input: { first: 20 after: $after - states: [canceled, failed, pending, succeeded] + filter: { + states: [canceled, failed, pending, succeeded] + purpose: $purpose + currency: $currency + } } ) { pageInfo { @@ -68,6 +76,10 @@ const BaseTransactions = () => { const { data, loading, fetchMore, refetch } = useQuery( ME_TRANSACTIONS, { + variables: { + currency: currencyType === Currency.ALL ? undefined : currencyType, + purpose: isALL ? undefined : purpose, + }, fetchPolicy: 'network-only', } ) @@ -93,7 +105,9 @@ const BaseTransactions = () => { location: edges.length, }) return fetchMore({ - variables: { after: pageInfo.endCursor }, + variables: { + after: pageInfo.endCursor, + }, updateQuery: (previousResult, { fetchMoreResult }) => mergeConnections({ oldData: previousResult, From 029eee7108e9dcfc807bcaa2eb6cd94660f06565 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 25 Nov 2022 17:21:31 +0800 Subject: [PATCH 4/9] feat(Transaction): revise UI --- src/views/Me/Transactions/index.tsx | 75 ++++++++++++++++------------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/src/views/Me/Transactions/index.tsx b/src/views/Me/Transactions/index.tsx index 1306209008..7c90f36009 100644 --- a/src/views/Me/Transactions/index.tsx +++ b/src/views/Me/Transactions/index.tsx @@ -65,20 +65,18 @@ export enum Purpose { SUBSCRIPTION = 'subscriptionSplit', } -const BaseTransactions = () => { - const [currencyType, setCurrencyType] = useState(Currency.ALL) - const [purpose, setPurpose] = useState(Purpose.ALL) - - const isALL = purpose === Purpose.ALL - const isDonaion = purpose === Purpose.DONATION - const isSubscription = purpose === Purpose.SUBSCRIPTION +interface BaseTransactionsProps { + currency: Currency + purpose: Purpose +} +const BaseTransactions = ({ currency, purpose }: BaseTransactionsProps) => { const { data, loading, fetchMore, refetch } = useQuery( ME_TRANSACTIONS, { variables: { - currency: currencyType === Currency.ALL ? undefined : currencyType, - purpose: isALL ? undefined : purpose, + currency: currency === Currency.ALL ? undefined : currency, + purpose: purpose === Purpose.ALL ? undefined : purpose, }, fetchPolicy: 'network-only', } @@ -123,13 +121,43 @@ const BaseTransactions = () => { loadMore={loadMore} pullToRefresh={refetch} > + + {edges.map(({ node, cursor }) => ( + + + + ))} + + + + ) +} + +const Transactions = () => { + const [currency, setCurrency] = useState(Currency.ALL) + const [purpose, setPurpose] = useState(Purpose.ALL) + + const isALL = purpose === Purpose.ALL + const isDonaion = purpose === Purpose.DONATION + const isSubscription = purpose === Purpose.SUBSCRIPTION + + return ( + + } + right={} + /> + + + setCurrencyType(c)} + currency={currency} + setCurrency={(c) => setCurrency(c)} /> } @@ -152,30 +180,9 @@ const BaseTransactions = () => { - - - {edges.map(({ node, cursor }) => ( - - - - ))} - - - + + ) } -const Transactions = () => ( - - } - right={} - /> - - - - - -) - export default Transactions From 17ef1d8e5c6e3f474782488b07de09280ab28704 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Mon, 28 Nov 2022 14:18:37 +0800 Subject: [PATCH 5/9] feat(Transaction): add empty transaction UI --- src/components/Empty/EmptyTransactionCurrency.tsx | 14 ++++++++++++++ .../Empty/EmptyTransactionSubscription.tsx | 14 ++++++++++++++ src/components/Empty/EmptyTransactionSupport.tsx | 14 ++++++++++++++ src/components/Empty/index.tsx | 3 +++ src/views/Me/Transactions/index.tsx | 15 +++++++++++++++ 5 files changed, 60 insertions(+) create mode 100644 src/components/Empty/EmptyTransactionCurrency.tsx create mode 100644 src/components/Empty/EmptyTransactionSubscription.tsx create mode 100644 src/components/Empty/EmptyTransactionSupport.tsx diff --git a/src/components/Empty/EmptyTransactionCurrency.tsx b/src/components/Empty/EmptyTransactionCurrency.tsx new file mode 100644 index 0000000000..554265c3f8 --- /dev/null +++ b/src/components/Empty/EmptyTransactionCurrency.tsx @@ -0,0 +1,14 @@ +import { Empty, IconPrice12, Translate } from '~/components' + +export const EmptyTransactionCurrency = () => ( + } + description={ + + } + /> +) diff --git a/src/components/Empty/EmptyTransactionSubscription.tsx b/src/components/Empty/EmptyTransactionSubscription.tsx new file mode 100644 index 0000000000..b8cf122c8e --- /dev/null +++ b/src/components/Empty/EmptyTransactionSubscription.tsx @@ -0,0 +1,14 @@ +import { Empty, IconWallet24, Translate } from '~/components' + +export const EmptyTransactionSubscription = () => ( + } + description={ + + } + /> +) diff --git a/src/components/Empty/EmptyTransactionSupport.tsx b/src/components/Empty/EmptyTransactionSupport.tsx new file mode 100644 index 0000000000..f41e961b66 --- /dev/null +++ b/src/components/Empty/EmptyTransactionSupport.tsx @@ -0,0 +1,14 @@ +import { Empty, IconDonate24, Translate } from '~/components' + +export const EmptyTransactionSupport = () => ( + } + description={ + + } + /> +) diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx index 05d9793397..c632026ba3 100644 --- a/src/components/Empty/index.tsx +++ b/src/components/Empty/index.tsx @@ -15,4 +15,7 @@ export * from './EmptyTag' export * from './EmptyTagArticles' export * from './EmptyWarning' export * from './EmptyTransaction' +export * from './EmptyTransactionCurrency' +export * from './EmptyTransactionSubscription' +export * from './EmptyTransactionSupport' export * from './EmptySearch' diff --git a/src/views/Me/Transactions/index.tsx b/src/views/Me/Transactions/index.tsx index 7c90f36009..dd2395051c 100644 --- a/src/views/Me/Transactions/index.tsx +++ b/src/views/Me/Transactions/index.tsx @@ -4,6 +4,9 @@ import { useState } from 'react' import { EmptyTransaction, + EmptyTransactionCurrency, + EmptyTransactionSubscription, + EmptyTransactionSupport, Head, InfiniteScroll, Layout, @@ -94,6 +97,18 @@ const BaseTransactions = ({ currency, purpose }: BaseTransactionsProps) => { const { edges, pageInfo } = data.viewer.wallet.transactions if (!edges || edges.length <= 0 || !pageInfo) { + if (currency !== Currency.ALL) { + return + } + + if (purpose === Purpose.DONATION) { + return + } + + if (purpose === Purpose.SUBSCRIPTION) { + return + } + return } From e4116310b052e092e363a91a1c9f573c24d596d5 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 1 Dec 2022 11:48:47 +0800 Subject: [PATCH 6/9] fix(Transaction): fix Subscription icon error --- src/components/Empty/EmptyTransactionSubscription.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Empty/EmptyTransactionSubscription.tsx b/src/components/Empty/EmptyTransactionSubscription.tsx index b8cf122c8e..a1fa6678a3 100644 --- a/src/components/Empty/EmptyTransactionSubscription.tsx +++ b/src/components/Empty/EmptyTransactionSubscription.tsx @@ -1,8 +1,8 @@ -import { Empty, IconWallet24, Translate } from '~/components' +import { Empty, IconCircle24, Translate } from '~/components' export const EmptyTransactionSubscription = () => ( } + icon={} description={ Date: Thu, 1 Dec 2022 11:50:59 +0800 Subject: [PATCH 7/9] fix(Transaction): fix Currency icon error --- public/static/icons/64px/price.svg | 5 +++++ src/components/Empty/EmptyTransactionCurrency.tsx | 4 ++-- src/components/Icon/IconPrice64.tsx | 5 +++++ src/components/Icon/index.tsx | 1 + 4 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 public/static/icons/64px/price.svg create mode 100644 src/components/Icon/IconPrice64.tsx diff --git a/public/static/icons/64px/price.svg b/public/static/icons/64px/price.svg new file mode 100644 index 0000000000..a85cda0be2 --- /dev/null +++ b/public/static/icons/64px/price.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Empty/EmptyTransactionCurrency.tsx b/src/components/Empty/EmptyTransactionCurrency.tsx index 554265c3f8..90da896005 100644 --- a/src/components/Empty/EmptyTransactionCurrency.tsx +++ b/src/components/Empty/EmptyTransactionCurrency.tsx @@ -1,8 +1,8 @@ -import { Empty, IconPrice12, Translate } from '~/components' +import { Empty, IconPrice64, Translate } from '~/components' export const EmptyTransactionCurrency = () => ( } + icon={} description={ Date: Thu, 1 Dec 2022 17:47:18 +0800 Subject: [PATCH 8/9] chore: restrict package.engines to 16.14-17.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 80bee3c9e8..b197509cba 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "sideEffects": false, "author": "Matters ", "engines": { - "node": ">=16.14" + "node": ">=16.14 <17.0" }, "license": "Apache-2.0", "scripts": { From 9d8706349569eeb443addac03d547b40c4f8151c Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 2 Dec 2022 15:19:39 +0800 Subject: [PATCH 9/9] chore(release): v4.12.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b197509cba..897765fd42 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matters-web", - "version": "4.11.0", + "version": "4.12.0", "description": "codebase of Matters' website", "sideEffects": false, "author": "Matters ",