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

refactor to only change based on the delta

Browse source
This commit is contained in:
Anthony 2021-08-20 19:31:38 +02:00
parent 9722270403
commit 68697baaf4
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
1 changed files with 34 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,11 +42,8 @@ type Props = {
}; };
type Delta = { type Delta = {
dkey?: string, changedParameterKey: string,
value?: string, value: string,
tab?: string,
currency?: string,
fiatType?: string
}; };
function TxoList(props: Props) { function TxoList(props: Props) {
@ -146,6 +143,7 @@ function TxoList(props: Props) {
const hideStatus = const hideStatus =
type === TXO.SENT || (currentUrlParams.type === TXO.RECEIVED && currentUrlParams.subtype !== TXO.TIP); type === TXO.SENT || (currentUrlParams.type === TXO.RECEIVED && currentUrlParams.subtype !== TXO.TIP);
// this is for sdk params
const params = {}; const params = {};
if (currentUrlParams.type) { if (currentUrlParams.type) {
if (currentUrlParams.type === TXO.ALL) { if (currentUrlParams.type === TXO.ALL) {
@ -202,34 +200,10 @@ function TxoList(props: Props) {
history.push(url); history.push(url);
} }
function updateUrl(delta: Delta) { function updateUrl(delta: Delta) {
const newUrlParams = new URLSearchParams(); const newUrlParams = new URLSearchParams();
// fix for flow, maybe there is a better way? switch (delta.changedParameterKey) {
if (!delta.value) {
delta.value = '';
}
const existingFiatType = newUrlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM;
if (delta.tab) {
// set tab name to account for wallet page tab
newUrlParams.set(QUERY_NAME_TAB, delta.tab);
}
// only update currency if it's being changed
if (delta.currency) {
newUrlParams.set(QUERY_NAME_CURRENCY, delta.currency);
}
if (delta.fiatType) {
newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.fiatType);
} else {
newUrlParams.set(QUERY_NAME_FIAT_TYPE, existingFiatType);
}
switch (delta.dkey) {
case TXO.PAGE: case TXO.PAGE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
newUrlParams.set(TXO.TYPE, currentUrlParams.type); newUrlParams.set(TXO.TYPE, currentUrlParams.type);
@ -241,6 +215,8 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, currentUrlParams.active); newUrlParams.set(TXO.ACTIVE, currentUrlParams.active);
} }
newUrlParams.set(TXO.PAGE, delta.value); newUrlParams.set(TXO.PAGE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.TYPE: case TXO.TYPE:
newUrlParams.set(TXO.TYPE, delta.value); newUrlParams.set(TXO.TYPE, delta.value);
@ -259,6 +235,8 @@ function TxoList(props: Props) {
} }
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.SUB_TYPE: case TXO.SUB_TYPE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -268,6 +246,8 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.SUB_TYPE, delta.value); newUrlParams.set(TXO.SUB_TYPE, delta.value);
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.ACTIVE: case TXO.ACTIVE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -279,6 +259,20 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, delta.value); newUrlParams.set(TXO.ACTIVE, delta.value);
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
// toggling the currency type (lbc/fiat)
case QUERY_NAME_CURRENCY:
newUrlParams.set(QUERY_NAME_CURRENCY, delta.value);
newUrlParams.set(QUERY_NAME_FIAT_TYPE, currentUrlParams.fiatType);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
break;
// toggling the fiat type (incoming/outgoing)
case QUERY_NAME_FIAT_TYPE:
newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
} }
@ -303,7 +297,7 @@ function TxoList(props: Props) {
<div className={'txo__radios'}> <div className={'txo__radios'}>
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ currency: 'credits', tab })} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'credits' })}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'credits', 'button-toggle--active': currency === 'credits',
})} })}
@ -311,7 +305,7 @@ function TxoList(props: Props) {
/> />
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ currency: 'fiat', tab })} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'fiat' })}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'fiat', 'button-toggle--active': currency === 'fiat',
})} })}
@ -340,7 +334,7 @@ function TxoList(props: Props) {
</> </>
} }
value={type || 'all'} value={type || 'all'}
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab })} onChange={(e) => handleChange({ changedParameterKey: 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);
@ -359,7 +353,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, tab })} onChange={(e) => handleChange({ changedParameterKey: 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);
@ -379,7 +373,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', tab })} onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE, 'button-toggle--active': active === TXO.ACTIVE,
})} })}
@ -387,7 +381,7 @@ function TxoList(props: Props) {
/> />
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab })} onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent', 'button-toggle--active': active === 'spent',
})} })}
@ -395,7 +389,7 @@ function TxoList(props: Props) {
/> />
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab })} onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all', 'button-toggle--active': active === 'all',
})} })}
@ -405,6 +399,7 @@ function TxoList(props: Props) {
</fieldset-section> </fieldset-section>
</div> </div>
)} )}
{/* TODO: use card-between to display this properly */}
<div className="card__actions--inline" style={{marginLeft: '181px'}}> <div className="card__actions--inline" style={{marginLeft: '181px'}}>
{!isFetchingTransactions && transactionsFile === null && ( {!isFetchingTransactions && transactionsFile === null && (
<label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label> <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
@ -439,7 +434,7 @@ function TxoList(props: Props) {
{/* incoming transactions button */} {/* incoming transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming'})}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': fiatType === 'incoming', 'button-toggle--active': fiatType === 'incoming',
})} })}
@ -448,7 +443,7 @@ function TxoList(props: Props) {
{/* incoming transactions button */} {/* incoming transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })} onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing'})}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': fiatType === 'outgoing', 'button-toggle--active': fiatType === 'outgoing',
})} })}