add loading state for create button and export csv

Author: johnkuney

components/Paybutton/PaybuttonForm.tsx

@@ -7,7 +7,7 @@ import style from './paybutton.module.css'
 import Plus from 'assets/plus.png'
 
 interface IProps {
-  onSubmit: Function
+  onSubmit: (data: PaybuttonPOSTParameters) => Promise<void>
   paybuttons: []
   wallets: WalletWithAddressesWithPaybuttons[]
   error: String
@@ -16,6 +16,7 @@ interface IProps {
 export default function PaybuttonForm ({ onSubmit, paybuttons, wallets, error }: IProps): ReactElement {
   const { register, handleSubmit, reset } = useForm<PaybuttonPOSTParameters>()
   const [modal, setModal] = useState(false)
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     setModal(false)
@@ -28,6 +29,16 @@ export default function PaybuttonForm ({ onSubmit, paybuttons, wallets, error }:
       label: wallet.name
     }
   })
+
+  const handleFormSubmit = async (data: PaybuttonPOSTParameters): Promise<void> => {
+    setLoading(true)
+    try {
+      await onSubmit(data)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
     <>
       <div className={style.create_button_ctn}>
@@ -42,7 +53,13 @@ export default function PaybuttonForm ({ onSubmit, paybuttons, wallets, error }:
           <div className={style.form_ctn_inner}>
             <h4>Create Button</h4>
             <div className={style.form_ctn}>
-              <form onSubmit={(e) => { void handleSubmit(onSubmit)(e) }} method='post'>
+            <form
+                onSubmit={(e) => {
+                  e.preventDefault()
+                  void handleSubmit(handleFormSubmit)()
+                }}
+                method="post"
+              >
                 <label htmlFor='name'>Name*</label>
                 <input {...register('name')} type='text' id='name' name='name' placeholder="The unique name of your button" required />
                 <label htmlFor='wallet'>Wallet*</label>
@@ -69,7 +86,7 @@ export default function PaybuttonForm ({ onSubmit, paybuttons, wallets, error }:
                 <textarea {...register('description')} id='description' name='description' placeholder="More information about your button (optional)"/>
                 <div className={style.btn_row}>
                   {error !== '' && <div className={style.error_message}>{error}</div>}
-                  <button type='submit' className='button_main'>Submit</button>
+                  <button type='submit' className='button_main' disabled={loading}>{loading ? 'Loading...' : 'Submit'}</button>
                   <button onClick={() => { setModal(false); reset() }} className='button_outline'>Cancel</button>
                 </div>
               </form>

pages/button/[id].tsx

@@ -59,6 +59,7 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
   const userProfile = props.userProfile
   const timezone = userProfile?.preferredTimezone === '' ? moment.tz.guess() : userProfile.preferredTimezone
   const router = useRouter()
+  const [loading, setLoading] = useState(false)
 
   const updateIsSyncing = (addressStringList: string[]): void => {
     const newIsSyncing = { ...isSyncing }
@@ -118,6 +119,7 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
 
   const downloadCSV = async (paybutton: { id: string, name: string }, currency: string): Promise<void> => {
     try {
+      setLoading(true)
       const preferredCurrencyId = userProfile?.preferredCurrencyId ?? ''
       let url = `/api/paybutton/download/transactions/${paybutton.id}?currency=${preferredCurrencyId}`
       const isCurrencyEmptyOrUndefined = (value: string): boolean => (value === '' || value === undefined)
@@ -148,6 +150,7 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
     } catch (error) {
       console.error('An error occurred while downloading the CSV:', error)
     } finally {
+      setLoading(false)
       setSelectedCurrency('')
     }
   }
@@ -173,30 +176,32 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
                 id='export-btn'
                 value={selectedCurrency}
                 onChange={handleExport}
+                disabled={loading}
                 className="button_outline button_small"
                 style={{ marginBottom: '0', cursor: 'pointer' }}
               >
-                <option value='' disabled> Export as CSV</option>
+                <option value='' disabled>{loading ? 'Downloading...' : 'Export as CSV'}</option>
                 <option key="all" value="all">
-                  All Currencies
+                  {loading ? 'Downloading...' : 'All Currencies'}
                 </option>
                 {Object.entries(NETWORK_TICKERS_FROM_ID)
                   .filter(([id]) => paybuttonNetworks.includes(Number(id)))
                   .map(([id, ticker]) => (
                     <option key={id} value={ticker}>
-                      {ticker.toUpperCase()}
+                      {loading ? 'Downloading...' : ticker.toUpperCase()}
                     </option>
                   ))}
               </select>
                 )
               : (
-              <div
+              <button
                 onClick={handleExport}
+                disabled={loading}
                 className="button_outline button_small"
                 style={{ marginBottom: '0', cursor: 'pointer' }}
               >
-                Export as CSV
-              </div>
+                {loading ? 'Downloading...' : 'Export as CSV'}
+              </button>
                 )}
           </div>
         </div>

styles/global.css

@@ -388,6 +388,14 @@ body[data-theme='dark'] .button_main {
   color: #231f20 !important;
 }
 
+.button_outline:disabled {
+  background-color: var(--secondary-bg-color) !important;
+  color: var(--primary-text-color) !important;
+  border: none !important;
+  opacity: 0.6;
+  cursor: not-allowed !important;
+}
+
 body[data-theme='dark'] .button_outline:hover {
   border-color: #000;
 }