From 32e8672be515b015f09f38ca1292057cc16a6ead Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Thu, 19 Aug 2021 16:30:47 +0200
Subject: [PATCH] tabs coming along well need to stack the cards

---
 ui/component/txoList/view.jsx                 |  93 +++++++++-------
 .../walletFiatPaymentHistory/view.jsx         | 105 +++++++++---------
 2 files changed, 106 insertions(+), 92 deletions(-)

diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index a8cc732d1..9c9ce8414 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -13,6 +13,7 @@ import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import FileExporter from 'component/common/file-exporter';
 import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
+import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
 
 type Props = {
   search: string,
@@ -54,6 +55,7 @@ function TxoList(props: Props) {
   const subtype = urlParams.get(TXO.SUB_TYPE);
   const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
   const currency = urlParams.get('currency') || 'credits';
+  const fiatType = urlParams.get('fiatType') || 'incoming';
 
   const currentUrlParams = {
     page,
@@ -62,6 +64,7 @@ function TxoList(props: Props) {
     type,
     subtype,
     currency,
+    fiatType,
   };
 
   const hideStatus =
@@ -128,7 +131,10 @@ function TxoList(props: Props) {
     const newUrlParams = new URLSearchParams();
 
     const existingCurrency = newUrlParams.get('currency') || 'credits';
-    console.log(existingCurrency);
+
+    const existingFiatType = newUrlParams.get('fiatType') || 'incoming';
+
+    console.log(existingFiatType);
 
     console.log(newUrlParams);
 
@@ -140,6 +146,12 @@ function TxoList(props: Props) {
       newUrlParams.set('currency', delta.currency);
     }
 
+    if (delta.fiatType) {
+      newUrlParams.set('fiatType', delta.fiatType);
+    } else {
+      newUrlParams.set('fiatType', existingFiatType);
+    }
+
     switch (delta.dkey) {
       case TXO.PAGE:
         if (currentUrlParams.type) {
@@ -363,29 +375,29 @@ function TxoList(props: Props) {
         : <div>
           <div className="card__body-actions">
             <div className="card__actions">
-              <div>
-                <FormField
-                  type="select"
-                  name="type"
-                  label={
-                    <>
-                      {__('Type')}
-                      <HelpLink href="https://lbry.com/faq/transaction-types" />
-                    </>
-                  }
-                  value={type || 'all'}
-                  onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab, currency: 'fiat' })}
-                >
-                  {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
-                    const stringV = String(v);
-                    return (
-                      <option key={stringV} value={stringV}>
-                        {stringV && __(toCapitalCase(stringV))}
-                      </option>
-                    );
-                  })}
-                </FormField>
-              </div>
+              {/*<div>*/}
+              {/*  <FormField*/}
+              {/*    type="select"*/}
+              {/*    name="type"*/}
+              {/*    label={*/}
+              {/*      <>*/}
+              {/*        {__('Type')}*/}
+              {/*        <HelpLink href="https://lbry.com/faq/transaction-types" />*/}
+              {/*      </>*/}
+              {/*    }*/}
+              {/*    value={type || 'all'}*/}
+              {/*    onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab, currency: 'fiat' })}*/}
+              {/*  >*/}
+              {/*    {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) && (
                 <div>
                   <FormField
@@ -409,32 +421,32 @@ function TxoList(props: Props) {
               {!hideStatus && (
                 <div>
                   <fieldset-section>
-                    <label>{__('Status')}</label>
+                    <label>{__('Type')}</label>
                     <div className={'txo__radios'}>
                       <Button
                         button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active', tab, currency: 'fiat' })}
+                        onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
                         className={classnames(`button-toggle`, {
-                          'button-toggle--active': active === TXO.ACTIVE,
+                          'button-toggle--active': fiatType === 'incoming',
                         })}
-                        label={__('Active')}
+                        label={__('Incoming')}
                       />
                       <Button
                         button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab, currency: 'fiat' })}
+                        onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}
                         className={classnames(`button-toggle`, {
-                          'button-toggle--active': active === 'spent',
+                          'button-toggle--active': fiatType === 'outgoing',
                         })}
-                        label={__('Historical')}
-                      />
-                      <Button
-                        button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab, currency: 'fiat' })}
-                        className={classnames(`button-toggle`, {
-                          'button-toggle--active': active === 'all',
-                        })}
-                        label={__('All')}
+                        label={__('Outgoing')}
                       />
+                      {/*<Button*/}
+                      {/*  button="alt"*/}
+                      {/*  onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab, currency: 'fiat' })}*/}
+                      {/*  className={classnames(`button-toggle`, {*/}
+                      {/*    'button-toggle--active': active === 'all',*/}
+                      {/*  })}*/}
+                      {/*  label={__('Payouts')}*/}
+                      {/*/>*/}
                     </div>
                   </fieldset-section>
                 </div>
@@ -442,7 +454,8 @@ function TxoList(props: Props) {
             </div>
           </div>
           {/* listing of the transactions */}
-          <WalletFiatPaymentHistory transactions={[]} />
+          { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
+          { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
           <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
         </div>
       }
diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx
index 42d0341f3..69bbc49d9 100644
--- a/ui/component/walletFiatPaymentHistory/view.jsx
+++ b/ui/component/walletFiatPaymentHistory/view.jsx
@@ -52,59 +52,60 @@ const WalletBalance = (props: Props) => {
 
   return (
     <>
-      <Card
-        title={__('Payment History')}
-        body={
-          <>
-            <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>{__('Card Last 4')}</th>
-                  <th>{__('Anonymous')}</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>{lastFour}</td>
-                    <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+      <div className="section card-stack">
+        <Card
+          body={
+            <>
+              <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>{__('Card Last 4')}</th>
+                    <th>{__('Anonymous')}</th>
                   </tr>
-                ))}
-                </tbody>
-              </table>
-              {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
-            </div>
-          </>
-        }
-      />
+                  </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>{lastFour}</td>
+                      <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+                    </tr>
+                  ))}
+                  </tbody>
+                </table>
+                {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
+              </div>
+            </>
+          }
+        />
+      </div>
   </>
   );
 };