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

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

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