Solve - Enroll

src/screens/Biometric/FaceRecognition/Section/Enroll.jsx

@@ -95,6 +95,7 @@ const Enroll = () => {
 
     // Handle application change
     const handleApplicationChange = async (selectedOption) => {
+        setApplicationError('');
         const selectedId = selectedOption.value;
         const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
 
@@ -145,6 +146,7 @@ const Enroll = () => {
 
     // Handle image file upload
     const handleImageUpload = (file) => {
+        setShowResult(false);
         if (!file) {
             setImageError('Please select a file');
             return;
@@ -189,10 +191,9 @@ const Enroll = () => {
         if (fileInputRef.current) fileInputRef.current.value = '';
     };
     
-
-    // Handle form validation and enrollment submission
-    const handleEnrollClick = async () => {
-        let hasError = false;
+    // Validation function
+    const validateForm = () => {
+        let isValid = true;
         const validationErrors = {
             imageError: !selectedImageName ? 'Please upload a face photo before enrolling.' : '',
             applicationError: !applicationId ? 'Please select an Application ID before enrolling.' : '',
@@ -201,65 +202,85 @@ const Enroll = () => {
 
         if (validationErrors.imageError) {
             setImageError(validationErrors.imageError);
-            hasError = true;
+            isValid = false;
         }
 
         if (validationErrors.applicationError) {
             setApplicationError(validationErrors.applicationError);
-            hasError = true;
+            isValid = false;
         }
 
         if (validationErrors.subjectError) {
             setSubjectError(validationErrors.subjectError);
-            hasError = true;
+            isValid = false;
         }
 
-        if (hasError) return;
-
         if (!file) {
             setImageError('No file selected. Please upload a valid image file.');
+            isValid = false;
+        }
+
+        return isValid;
+    };
+
+    // HandleEnrollClick function
+    const handleEnrollClick = () => {
+        if (!validateForm()) {
             return;
         }
 
+        setIsLoading(true);
+        setErrorMessage('');
+
         const formData = new FormData();
         formData.append('application_id', String(applicationId));
         formData.append('subject_id', subjectId);
         formData.append('file', file);
 
-        setIsLoading(true);
-        setErrorMessage('');
-
-        try {
-            const response = await fetch(`${BASE_URL}/face_recognition/enroll`, {
-                method: 'POST',
-                body: formData,
-                headers: { 'accept': 'application/json', 'x-api-key': API_KEY },
-            });
-
+        fetch(`${BASE_URL}/face_recognition/enroll`, {
+            method: 'POST',
+            headers: {
+                'accept': 'application/json',
+                'x-api-key': API_KEY,
+            },
+            body: formData,
+        })
+        .then(response => {
             if (!response.ok) {
-                const errorDetails = await response.json();
-                setErrorMessage(errorDetails.detail || 'Failed to enroll, please try again');
-                return;
+                return response.json().then(errorData => {
+                    throw new Error(errorData.detail || 'Failed to enroll, please try again');
+                });
             }
+            return response.json();
+        })
+        .then(result => {
+            console.log('📡 API Response:', result);
 
-            const result = await response.json();
             if (result.details.data.quota !== undefined) {
                 setSelectedQuota(result.details.data.quota);
             }
 
-            if (result.details.data.image_url) {
-                await fetchImage(result.details.data.image_url.split('/').pop());
-                setresultImageLabel(selectedImageName);
-            }
-
             setShowResult(true);
-        } catch (error) {
-            setErrorMessage('An unexpected error occurred. Please try again.');
-        } finally {
+            setErrorMessage('');
+            setSelectedImageName('');
+            setresultImageLabel(selectedImageName);
+
+            if (result.details.data.image_url) {
+                const imageFileName = result.details.data.image_url.split('/').pop();
+                return fetchImage(imageFileName);
+            }
+        })
+        .catch(error => {
+            console.error('🔥 Request Failed:', error);
+            setErrorMessage(error.message);
+            setShowResult(false);
+        })
+        .finally(() => {
             setIsLoading(false);
-        }
+        });
     };
 
+
     // Fetch image preview
     const fetchImage = async (imageFileName) => {
         setIsLoading(true);
@@ -599,6 +620,12 @@ const Enroll = () => {
                 </div>
             </div>
 
+            {errorMessage && (
+                <div style={styles.errorContainer}>
+                    <p style={styles.errorText}>{errorMessage}</p>
+                </div>
+            )}
+    
             <div style={styles.submitButton}>
                 <button onClick={handleEnrollClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
                     <p className="text-white mb-0">Enroll Now</p>