LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

switching the tab system

Browse source
This commit is contained in:
Anthony 2021-08-18 21:06:04 +02:00
parent f1715660f8
commit d80182f91d
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 38 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
ui/component/txoList/view.jsx
View file

@ -30,6 +30,7 @@ type Props = {
type Delta = {
dkey: string,
value: string,
tab: string
};
function TxoList(props: Props) {
@ -51,6 +52,7 @@ function TxoList(props: Props) {
const type = urlParams.get(TXO.TYPE) || TXO.ALL;
const subtype = urlParams.get(TXO.SUB_TYPE);
const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
const currency = urlParams.get('currency') || 'credits';
const currentUrlParams = {
page,
@ -58,6 +60,7 @@ function TxoList(props: Props) {
active,
type,
subtype,
currency
};
const hideStatus =
@ -119,8 +122,17 @@ function TxoList(props: Props) {
history.push(url);
}
// let currency = 'credits';
function updateUrl(delta: Delta) {
const newUrlParams = new URLSearchParams();
// if (delta.currency) {
// currency = delta.currency;
// }
// set tab name to account for wallet page tab
newUrlParams.set('tab', delta.tab);
newUrlParams.set('currency', delta.currency);
switch (delta.dkey) {
case TXO.PAGE:
if (currentUrlParams.type) {
@ -179,6 +191,10 @@ function TxoList(props: Props) {
const paramsString = JSON.stringify(params);
// tab used in the wallet section
// TODO: change the name of this eventually
const tab = 'fiat-payment-history';
useEffect(() => {
if (paramsString && updateTxoPageParams) {
const params = JSON.parse(paramsString);
@ -195,17 +211,17 @@ function TxoList(props: Props) {
<div className={'txo__radios'}>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
onClick={(e) => handleChange({ currency: 'credits', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': TXO.ACTIVE === TXO.ACTIVE,
'button-toggle--active': currency === 'credits',
})}
label={__('LBRY Credits')}
label={__('Credits')}
/>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
onClick={(e) => handleChange({ currency: 'fiat', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent',
'button-toggle--active': currency === 'fiat',
})}
label={__('USD')}
/>
@ -249,7 +265,7 @@ function TxoList(props: Props) {
</>
}
value={type || 'all'}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab })}
>
{Object.values(TXO.DROPDOWN_TYPES).map((v) => {
const stringV = String(v);
@ -268,7 +284,7 @@ function TxoList(props: Props) {
name="subtype"
label={__('Payment Type')}
value={subtype || 'all'}
onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value })}
onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab })}
>
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
const stringV = String(v);
@ -288,7 +304,7 @@ function TxoList(props: Props) {
<div className={'txo__radios'}>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE,
})}
@ -296,7 +312,7 @@ function TxoList(props: Props) {
/>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent',
})}
@ -304,7 +320,7 @@ function TxoList(props: Props) {
/>
<Button
button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all' })}
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all',
})}

21
ui/page/wallet/view.jsx
View file

@ -159,14 +159,17 @@ const WalletPage = (props: Props) => {
<>
{/* @if TARGET='web' */}
<Page>
<WalletBalance />
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('LBRY Credits')}</Tab>
<Tab>{__('Account History')}</Tab>
<Tab>{__('Payment History')}</Tab>
<Tab>{__('Balance')}</Tab>
<Tab>{__('Transactions')}</Tab>
<Tab>{__('Subscriptions')}</Tab>
<Tab>{__('Analytics')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<WalletBalance />
</TabPanel>
<TabPanel>
<div className="section card-stack">
<div className="lbc-transactions">
@ -196,11 +199,11 @@ const WalletPage = (props: Props) => {
<WalletFiatAccountHistory transactions={accountTransactionResponse} />
</div>
</TabPanel>
<TabPanel>
<div className="section card-stack">
<WalletFiatPaymentHistory transactions={customerTransactions} />
</div>
</TabPanel>
{/*<TabPanel>*/}
{/* <div className="section card-stack">*/}
{/* <WalletFiatPaymentHistory transactions={customerTransactions} />*/}
{/* </div>*/}
{/*</TabPanel>*/}
</TabPanels>
</Tabs>
</Page>