From 86e3e8593a83d5484c15d59b002c61252e519112 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 27 Aug 2021 13:07:16 +0800
Subject: [PATCH] Lint/prettier to reduce delta in next PR.

This is mainly to make the next PR's delta readable. Seems like lint/prettier is being bypassed in the commit hook.
---
 ui/component/txoList/view.jsx                 | 259 +++++++++---------
 .../walletFiatAccountHistory/view.jsx         |  77 +++---
 ui/component/walletFiatBalance/view.jsx       |  71 +++--
 .../walletFiatPaymentHistory/view.jsx         | 103 +++----
 4 files changed, 273 insertions(+), 237 deletions(-)

diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index 3c1a574b5..f88dcdc1c 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -86,7 +86,7 @@ function TxoList(props: Props) {
 
   // calculate account transactions section
   React.useEffect(() => {
-    (async function() {
+    (async function () {
       try {
         const accountTransactionResponse = await getAccountTransactions();
 
@@ -109,7 +109,7 @@ function TxoList(props: Props) {
 
   // populate customer payment data
   React.useEffect(() => {
-    (async function() {
+    (async function () {
       try {
         // get card payments customer has made
         let customerTransactionResponse = await getPaymentHistory();
@@ -122,7 +122,11 @@ function TxoList(props: Props) {
         }
 
         // TODO: remove this once pagination is implemented
-        if (customerTransactionResponse && customerTransactionResponse.length && customerTransactionResponse.length > 25) {
+        if (
+          customerTransactionResponse &&
+          customerTransactionResponse.length &&
+          customerTransactionResponse.length > 25
+        ) {
           customerTransactionResponse.length = 25;
         }
 
@@ -312,9 +316,10 @@ function TxoList(props: Props) {
   return (
     <Card
       title={
-        <><div className="table__header-text txo__table_header">{__(`Transactions`)}</div>
+        <>
+          <div className="table__header-text txo__table_header">{__(`Transactions`)}</div>
           <div className="txo__radios_container">
-            <fieldset-section style={{display: 'inline'}} className="txo__radios_fieldset">
+            <fieldset-section style={{ display: 'inline' }} className="txo__radios_fieldset">
               {/* toggle between LBC and fiat buttons */}
               <div className={'txo__radios'}>
                 {/* toggle to LBC */}
@@ -339,49 +344,30 @@ function TxoList(props: Props) {
             </fieldset-section>
           </div>
         </>
-
       }
       isBodyList
-      body={currency === 'credits'
-        ? <div>
-          {/* LBC transactions section */}
-          <div className="card__body-actions">
-            <div className="card__actions card__actions--between">
-              <div className="card__actions--inline">
-                <div>
-                  {/* LBC transaction type dropdown */}
-                  <FormField
-                    type="select"
-                    name="type"
-                    label={
-                      <>
-                        {__('Type')}
-                        <HelpLink href="https://lbry.com/faq/transaction-types" />
-                      </>
-                    }
-                    value={type || 'all'}
-                    onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
-                  >
-                    {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
-                      const stringV = String(v);
-                      return (
-                        <option key={stringV} value={stringV}>
-                          {stringV && __(toCapitalCase(stringV))}
-                        </option>
-                      );
-                    })}
-                  </FormField>
-                </div>
-                {(type === TXO.SENT || type === TXO.RECEIVED) && (
+      body={
+        currency === 'credits' ? (
+          <div>
+            {/* LBC transactions section */}
+            <div className="card__body-actions">
+              <div className="card__actions card__actions--between">
+                <div className="card__actions--inline">
                   <div>
+                    {/* LBC transaction type dropdown */}
                     <FormField
                       type="select"
-                      name="subtype"
-                      label={__('Payment Type')}
-                      value={subtype || 'all'}
-                      onChange={(e) => handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab })}
+                      name="type"
+                      label={
+                        <>
+                          {__('Type')}
+                          <HelpLink href="https://lbry.com/faq/transaction-types" />
+                        </>
+                      }
+                      value={type || 'all'}
+                      onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
                     >
-                      {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
+                      {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
                         const stringV = String(v);
                         return (
                           <option key={stringV} value={stringV}>
@@ -391,108 +377,135 @@ function TxoList(props: Props) {
                       })}
                     </FormField>
                   </div>
-                )}
-                {!hideStatus && (
+                  {(type === TXO.SENT || type === TXO.RECEIVED) && (
+                    <div>
+                      <FormField
+                        type="select"
+                        name="subtype"
+                        label={__('Payment Type')}
+                        value={subtype || 'all'}
+                        onChange={(e) =>
+                          handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab })
+                        }
+                      >
+                        {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
+                          const stringV = String(v);
+                          return (
+                            <option key={stringV} value={stringV}>
+                              {stringV && __(toCapitalCase(stringV))}
+                            </option>
+                          );
+                        })}
+                      </FormField>
+                    </div>
+                  )}
+                  {!hideStatus && (
+                    <div>
+                      <fieldset-section>
+                        <label>{__('Status')}</label>
+                        <div className={'txo__radios'}>
+                          {/* active transactions button */}
+                          <Button
+                            button="alt"
+                            onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
+                            className={classnames(`button-toggle`, {
+                              'button-toggle--active': active === TXO.ACTIVE,
+                            })}
+                            label={__('Active')}
+                          />
+                          {/* historical transactions button */}
+                          <Button
+                            button="alt"
+                            onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
+                            className={classnames(`button-toggle`, {
+                              'button-toggle--active': active === 'spent',
+                            })}
+                            label={__('Historical')}
+                          />
+                          {/* all transactions button */}
+                          <Button
+                            button="alt"
+                            onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
+                            className={classnames(`button-toggle`, {
+                              'button-toggle--active': active === 'all',
+                            })}
+                            label={__('All')}
+                          />
+                        </div>
+                      </fieldset-section>
+                    </div>
+                  )}
+                </div>
+
+                {/* export and refresh buttons */}
+                <div className="card__actions--inline">
+                  {!isFetchingTransactions && transactionsFile === null && (
+                    <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
+                  )}
+                  <div className="txo__export">
+                    <FileExporter
+                      data={transactionsFile}
+                      label={__('Export')}
+                      tooltip={__('Fetch transaction data for export')}
+                      defaultFileName={'transactions-history.csv'}
+                      onFetch={() => fetchTransactions()}
+                      progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
+                    />
+                  </div>
+                  <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
+                </div>
+              </div>
+            </div>
+            {/* listing of the lbc transactions */}
+            <TransactionListTable txos={txoPage} />
+            <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
+          </div>
+        ) : (
+          <div>
+            {/* FIAT SECTION ( toggle buttons and transactions) */}
+            <div className="section card-stack">
+              <div className="card__body-actions">
+                <div className="card__actions">
                   <div>
                     <fieldset-section>
-                      <label>{__('Status')}</label>
+                      <label>{__('Type')}</label>
                       <div className={'txo__radios'}>
-                        {/* active transactions button */}
+                        {/* incoming transactions button */}
                         <Button
                           button="alt"
-                          onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
+                          onClick={(e) =>
+                            handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming' })
+                          }
                           className={classnames(`button-toggle`, {
-                            'button-toggle--active': active === TXO.ACTIVE,
+                            'button-toggle--active': fiatType === 'incoming',
                           })}
-                          label={__('Active')}
+                          label={__('Incoming')}
                         />
-                        {/* historical transactions button */}
+                        {/* incoming transactions button */}
                         <Button
                           button="alt"
-                          onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
+                          onClick={(e) =>
+                            handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing' })
+                          }
                           className={classnames(`button-toggle`, {
-                            'button-toggle--active': active === 'spent',
+                            'button-toggle--active': fiatType === 'outgoing',
                           })}
-                          label={__('Historical')}
-                        />
-                        {/* all transactions button */}
-                        <Button
-                          button="alt"
-                          onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
-                          className={classnames(`button-toggle`, {
-                            'button-toggle--active': active === 'all',
-                          })}
-                          label={__('All')}
+                          label={__('Outgoing')}
                         />
                       </div>
                     </fieldset-section>
                   </div>
-                )}
-              </div>
-              {/* export and refresh buttons */}
-              <div className="card__actions--inline">
-                {!isFetchingTransactions && transactionsFile === null && (
-                  <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
-                )}
-                <div className="txo__export">
-                  <FileExporter
-                    data={transactionsFile}
-                    label={__('Export')}
-                    tooltip={__('Fetch transaction data for export')}
-                    defaultFileName={'transactions-history.csv'}
-                    onFetch={() => fetchTransactions()}
-                    progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
-                  />
-                </div>
-                <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
-              </div>
-            </div>
-          </div>
-          {/* listing of the lbc transactions */}
-          <TransactionListTable txos={txoPage} />
-          <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
-        </div>
-        : <div>
-        {/* FIAT SECTION ( toggle buttons and transactions) */}
-          <div className="section card-stack">
-            <div className="card__body-actions">
-              <div className="card__actions">
-                <div>
-                  <fieldset-section>
-                    <label>{__('Type')}</label>
-                    <div className={'txo__radios'}>
-                      {/* incoming transactions button */}
-                      <Button
-                        button="alt"
-                        onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming'})}
-                        className={classnames(`button-toggle`, {
-                          'button-toggle--active': fiatType === 'incoming',
-                        })}
-                        label={__('Incoming')}
-                      />
-                      {/* incoming transactions button */}
-                      <Button
-                        button="alt"
-                        onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing'})}
-                        className={classnames(`button-toggle`, {
-                          'button-toggle--active': fiatType === 'outgoing',
-                        })}
-                        label={__('Outgoing')}
-                      />
-                    </div>
-                  </fieldset-section>
                 </div>
               </div>
+              {/* listing of the transactions */}
+              {fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} />}
+              {fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} />}
+              {/* TODO: have to finish pagination */}
+              {/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
             </div>
-            {/* listing of the transactions */}
-            { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} /> }
-            { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} /> }
-            {/* TODO: have to finish pagination */}
-            {/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
           </div>
-        </div>
+        )
       }
-
     />
   );
 }
diff --git a/ui/component/walletFiatAccountHistory/view.jsx b/ui/component/walletFiatAccountHistory/view.jsx
index 7e9b688c9..4f5fe1991 100644
--- a/ui/component/walletFiatAccountHistory/view.jsx
+++ b/ui/component/walletFiatAccountHistory/view.jsx
@@ -28,52 +28,49 @@ const WalletBalance = (props: Props) => {
     <div className="table__wrapper">
       <table className="table table--transactions">
         <thead>
-        <tr>
-          <th className="date-header">{__('Date')}</th>
-          <th>{<>{__('Receiving Channel Name')}</>}</th>
-          <th>{__('Tip Location')}</th>
-          <th>{__('Amount (USD)')} </th>
-          <th>{__('Processing Fee')}</th>
-          <th>{__('Odysee Fee')}</th>
-          <th>{__('Received Amount')}</th>
-        </tr>
+          <tr>
+            <th className="date-header">{__('Date')}</th>
+            <th>{<>{__('Receiving Channel Name')}</>}</th>
+            <th>{__('Tip Location')}</th>
+            <th>{__('Amount (USD)')} </th>
+            <th>{__('Processing Fee')}</th>
+            <th>{__('Odysee Fee')}</th>
+            <th>{__('Received Amount')}</th>
+          </tr>
         </thead>
         <tbody>
-        {accountTransactions &&
-        accountTransactions.map((transaction) => (
-          <tr key={transaction.name + transaction.created_at}>
-            <td>{moment(transaction.created_at).format('LLL')}</td>
-            <td>
-              <Button
-                className=""
-                navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                label={transaction.channel_name}
-                button="link"
-              />
-            </td>
-            <td>
-              <Button
-                className=""
-                navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                label={
-                  transaction.channel_claim_id === transaction.source_claim_id
-                    ? 'Channel Page'
-                    : 'Content Page'
-                }
-                button="link"
-              />
-            </td>
-            <td>${transaction.tipped_amount / 100}</td>
-            <td>${transaction.transaction_fee / 100}</td>
-            <td>${transaction.application_fee / 100}</td>
-            <td>${transaction.received_amount / 100}</td>
-          </tr>
-        ))}
+          {accountTransactions &&
+            accountTransactions.map((transaction) => (
+              <tr key={transaction.name + transaction.created_at}>
+                <td>{moment(transaction.created_at).format('LLL')}</td>
+                <td>
+                  <Button
+                    className=""
+                    navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                    label={transaction.channel_name}
+                    button="link"
+                  />
+                </td>
+                <td>
+                  <Button
+                    className=""
+                    navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                    label={
+                      transaction.channel_claim_id === transaction.source_claim_id ? 'Channel Page' : 'Content Page'
+                    }
+                    button="link"
+                  />
+                </td>
+                <td>${transaction.tipped_amount / 100}</td>
+                <td>${transaction.transaction_fee / 100}</td>
+                <td>${transaction.application_fee / 100}</td>
+                <td>${transaction.received_amount / 100}</td>
+              </tr>
+            ))}
         </tbody>
       </table>
       {!accountTransactions && <p className="wallet__fiat-transactions">No Transactions</p>}
     </div>
-
   );
 };
 
diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx
index a4ef1bb28..9ec24b32e 100644
--- a/ui/component/walletFiatBalance/view.jsx
+++ b/ui/component/walletFiatBalance/view.jsx
@@ -41,33 +41,56 @@ const WalletBalance = () => {
   }, [stripeEnvironment]);
 
   return (
-    <>{<Card
-      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
-      subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
-          <I18nMessage>
-            This is your pending balance that will be automatically sent to your bank account
-          </I18nMessage>) : (
-        <I18nMessage>
-          When you begin to receive tips your balance will be updated here
-        </I18nMessage>)
-      }
-      actions={
-        <>
-          <h2 className="section__title--small">
-            ${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips
-          </h2>
+    <>
+      {
+        <Card
+          title={
+            <>
+              <Icon size={18} icon={ICONS.FINANCE} />
+              {(accountStatusResponse &&
+                (accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100) ||
+                0}{' '}
+              USD
+            </>
+          }
+          subtitle={
+            accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
+              <I18nMessage>
+                This is your pending balance that will be automatically sent to your bank account
+              </I18nMessage>
+            ) : (
+              <I18nMessage>When you begin to receive tips your balance will be updated here</I18nMessage>
+            )
+          }
+          actions={
+            <>
+              <h2 className="section__title--small">
+                ${(accountStatusResponse && accountStatusResponse.total_received_unpaid / 100) || 0} Total Received Tips
+              </h2>
 
-          <h2 className="section__title--small">
-            ${(accountStatusResponse && (accountStatusResponse.total_paid_out / 100)) || 0}  Withdrawn
-          </h2>
+              <h2 className="section__title--small">
+                ${(accountStatusResponse && accountStatusResponse.total_paid_out / 100) || 0} Withdrawn
+              </h2>
 
-          <div className="section__actions">
-            <Button button="secondary" label={__('Bank Accounts')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
-            <Button button="secondary" label={__('Payment Methods')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
-          </div>
-        </>
+              <div className="section__actions">
+                <Button
+                  button="secondary"
+                  label={__('Bank Accounts')}
+                  icon={ICONS.SETTINGS}
+                  navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
+                />
+                <Button
+                  button="secondary"
+                  label={__('Payment Methods')}
+                  icon={ICONS.SETTINGS}
+                  navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
+                />
+              </div>
+            </>
+          }
+        />
       }
-    />}</>
+    </>
   );
 };
 
diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx
index 2113947c0..144e53328 100644
--- a/ui/component/walletFiatPaymentHistory/view.jsx
+++ b/ui/component/walletFiatPaymentHistory/view.jsx
@@ -30,12 +30,15 @@ const WalletBalance = (props: Props) => {
 
   // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
   React.useEffect(() => {
-    (async function() {
-        const customerStatusResponse = await getCustomerStatus();
+    (async function () {
+      const customerStatusResponse = await getCustomerStatus();
 
-        const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4;
+      const lastFour =
+        customerStatusResponse.PaymentMethods &&
+        customerStatusResponse.PaymentMethods.length &&
+        customerStatusResponse.PaymentMethods[0].card.last4;
 
-        setLastFour(lastFour);
+      setLastFour(lastFour);
     })();
   }, []);
 
@@ -46,60 +49,60 @@ const WalletBalance = (props: Props) => {
           <table className="table table--transactions">
             {/* table header */}
             <thead>
-            <tr>
-              <th className="date-header">{__('Date')}</th>
-              <th>{<>{__('Receiving Channel Name')}</>}</th>
-              <th>{__('Tip Location')}</th>
-              <th>{__('Amount (USD)')} </th>
-              <th>{__('Card Last 4')}</th>
-              <th>{__('Anonymous')}</th>
-            </tr>
+              <tr>
+                <th className="date-header">{__('Date')}</th>
+                <th>{<>{__('Receiving Channel Name')}</>}</th>
+                <th>{__('Tip Location')}</th>
+                <th>{__('Amount (USD)')} </th>
+                <th>{__('Card Last 4')}</th>
+                <th>{__('Anonymous')}</th>
+              </tr>
             </thead>
             {/* list data for transactions */}
             <tbody>
-            {accountTransactions &&
-            accountTransactions.map((transaction) => (
-              <tr key={transaction.name + transaction.created_at}>
-                {/* date */}
-                <td>{moment(transaction.created_at).format('LLL')}</td>
-                {/* receiving channel name */}
-                <td>
-                  <Button
-                    className=""
-                    navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                    label={transaction.channel_name}
-                    button="link"
-                  />
-                </td>
-                {/* link to content or channel */}
-                <td>
-                  <Button
-                    className=""
-                    navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                    label={
-                      transaction.channel_claim_id === transaction.source_claim_id
-                        ? 'Channel Page'
-                        : 'Content Page'
-                    }
-                    button="link"
-                  />
-                </td>
-                {/* how much tipped */}
-                <td>${transaction.tipped_amount / 100}</td>
-                {/* TODO: this is incorrect need it per transactions not per user */}
-                {/* last four of credit card  */}
-                <td>{lastFour}</td>
-                {/* whether tip is anonymous or not */}
-                <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
-              </tr>
-            ))}
+              {accountTransactions &&
+                accountTransactions.map((transaction) => (
+                  <tr key={transaction.name + transaction.created_at}>
+                    {/* date */}
+                    <td>{moment(transaction.created_at).format('LLL')}</td>
+                    {/* receiving channel name */}
+                    <td>
+                      <Button
+                        className=""
+                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                        label={transaction.channel_name}
+                        button="link"
+                      />
+                    </td>
+                    {/* link to content or channel */}
+                    <td>
+                      <Button
+                        className=""
+                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                        label={
+                          transaction.channel_claim_id === transaction.source_claim_id ? 'Channel Page' : 'Content Page'
+                        }
+                        button="link"
+                      />
+                    </td>
+                    {/* how much tipped */}
+                    <td>${transaction.tipped_amount / 100}</td>
+                    {/* TODO: this is incorrect need it per transactions not per user */}
+                    {/* last four of credit card  */}
+                    <td>{lastFour}</td>
+                    {/* whether tip is anonymous or not */}
+                    <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+                  </tr>
+                ))}
             </tbody>
           </table>
           {/* show some markup if there's no transactions */}
-          {(!accountTransactions || accountTransactions.length === 0) && <p className="wallet__fiat-transactions">No Transactions</p>}
+          {(!accountTransactions || accountTransactions.length === 0) && (
+            <p className="wallet__fiat-transactions">No Transactions</p>
+          )}
         </div>
       </div>
-  </>
+    </>
   );
 };