From 211ce07a451330772a9229c961c1c6f51fe1f5f6 Mon Sep 17 00:00:00 2001
From: Chisomchima <chimachisom360@gmail.com>
Date: Tue, 19 Nov 2024 09:37:00 +0100
Subject: [PATCH] feat: track loading state

---
 src/layout/FormFields.component.js  |  2 --
 src/layout/VerifyEmail.component.js | 44 ++++++++++++++++-------------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/layout/FormFields.component.js b/src/layout/FormFields.component.js
index 6ebc2289..50fb832f 100644
--- a/src/layout/FormFields.component.js
+++ b/src/layout/FormFields.component.js
@@ -236,8 +236,6 @@ function createAvatarEditor(fieldBase, d2, valueStore) {
 }
 
 function createFieldBaseObject(fieldName, mapping, valueStore) {
-    console.log('Field:', fieldName, 'Mapping:', mapping)
-
     if (!mapping) {
         log.warn(`Mapping not found for field: ${fieldName}`)
         return null // Skip this field
diff --git a/src/layout/VerifyEmail.component.js b/src/layout/VerifyEmail.component.js
index 2676615d..012dba29 100644
--- a/src/layout/VerifyEmail.component.js
+++ b/src/layout/VerifyEmail.component.js
@@ -1,20 +1,21 @@
 import { useAlert } from '@dhis2/app-runtime'
+import { CircularLoader } from '@dhis2/ui'
 import { getInstance as getD2 } from 'd2'
-import { blue400 } from 'material-ui/styles/colors.js'
-import React from 'react'
+import React, { useState } from 'react'
 
 export function VerifyEmail() {
     const errorAlert = useAlert(({ message }) => message, { critical: true })
     const successAlert = useAlert(({ message }) => message, { success: true })
+    const [isLoading, setIsLoading] = useState(false)
 
     const handleEmailVerification = async () => {
+        setIsLoading(true)
         try {
             const d2 = await getD2()
             const api = d2.Api.getApi()
             api.baseUrl = 'http://localhost:8080/'
 
-            const res = await api.post('account/sendEmailVerification')
-            console.log('Response:', res)
+            await api.post('account/sendEmailVerification')
             successAlert.show({
                 message: 'Email verification link sent successfully!',
             })
@@ -24,24 +25,29 @@ export function VerifyEmail() {
                 message:
                     err.message || 'Failed to send email verification link.',
             })
+        } finally {
+            setIsLoading(false)
         }
     }
 
     return (
-        <button
-            type="button"
-            style={{
-                marginTop: '10px',
-                background: 'white',
-                border: '1px solid',
-                borderColor: blue400,
-                color: blue400,
-                padding: '10px',
-                cursor: 'pointer',
-            }}
-            onClick={handleEmailVerification}
-        >
-            Verify Email
-        </button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <button
+                type="button"
+                style={{
+                    background: 'white',
+                    border: '1px solid',
+                    borderColor: '#1976D2',
+                    color: '#1976D2',
+                    padding: '10px',
+                    cursor: isLoading ? 'not-allowed' : 'pointer',
+                }}
+                onClick={handleEmailVerification}
+                disabled={isLoading}
+            >
+                Verify Email
+            </button>
+            {isLoading && <CircularLoader small />}
+        </div>
     )
 }