Issue #23 Resolved

client-app/src/Components/DonorForm.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, ChangeEvent, FormEvent } from 'react';
 import axios from 'axios';
 import '../css/DonorForm.css';
@@ -65,10 +64,6 @@ const DonorForm: React.FC = () => {
         if (name === 'imageUpload' && files) {
             const fileArray = Array.from(files);
             const base64Images = await Promise.all(fileArray.map(file=>convertToBase64(file)));
-            if (files.length > 5) {
-                setErrorMessage('Please limit to 5 images only.');
-                return;
-            }
             setFormData(prevState => ({
                 ...prevState,
                 [name]: base64Images,
@@ -96,20 +91,36 @@ const DonorForm: React.FC = () => {
         ];
 
         if (requiredFields.includes(name)) {
-            if (name === 'imageUpload') {
+            if (name === 'itemType') {
+                if (!value || value.length === 0) {
+                    return "Please select an item type"
+                }
+            } else if (name === 'currentStatus') {
+                if (!value || value.length === 0) {
+                    return "Please enter a status"
+                }
+            } else if (name === 'donorEmail') {
                 if (!value || value.length === 0) {
-                    return 'Please upload at least one image.';
+                    return "Please select the donor's email"
+                }
+            } else if (name === 'program') {
+                if (!value || value.length === 0) {
+                    return "Please select a program"
+                }
+            } else if (name === 'imageUpload') {
+                if (!value || value.length === 0) {
+                    return 'Please upload at least one image';
+                } else if (value.length > 5) {
+                    return 'Please keep under 5 images'
+                }
+            } else if (name === 'dateDonated') {
+                if (!value || value.length === 0) {
+                    return 'Please select a date'
                 }
             } else if (typeof value === 'string' && !value.trim()) {
                 return `${name.replace(/([A-Z])/g, ' $1')} is required`;
             }
         }
-
-        if (name === 'donorEmail') {
-            if (!value) {
-                return 'Donor email is required.'
-            }
-        }
         return '';
     };
 
@@ -134,7 +145,7 @@ const DonorForm: React.FC = () => {
                     formData,
                 );
                 if (response.status === 201) {
-                    setSuccessMessage('Donor added successfully!');
+                    setSuccessMessage('Item added successfully!');
                     console.log('Item Type: ' + formData.itemType);
                     console.log('Current Status ' + formData.currentStatus);
                     console.log('Donor Email: ' + formData.donorEmail);
@@ -150,12 +161,12 @@ const DonorForm: React.FC = () => {
                         dateDonated: '',
                     });
                 } else {
-                    setErrorMessage('Donor not added');
+                    setErrorMessage('Item not added');
                 }
             } catch (error: unknown) {
                 const message =
                     (error as any).response?.data?.message ||
-                    'Error adding donor';
+                    'Error adding item';
                 setErrorMessage(message);
             }
         } else {
@@ -238,7 +249,7 @@ const DonorForm: React.FC = () => {
     return (
         <div className="donor-form outer-container mx-auto p-10">
             <h1 className="text-2xl font-bold heading-centered">
-                Add Donor Details
+                New Donated Item
             </h1>
             {errorMessage && <p className="error-message">{errorMessage}</p>}
             {successMessage && (
@@ -255,7 +266,7 @@ const DonorForm: React.FC = () => {
 
                 <div className="form-field full-width button-container">
                     <button type="submit" className="submit-button">
-                        Add Donor
+                        Add Item
                     </button>
                     <button
                         type="button"
@@ -272,7 +283,7 @@ const DonorForm: React.FC = () => {
 
 export default DonorForm;
 
-
+// NOTE: I will be moving my code to NewDonationForm.tsx as soon as I can get a tab for it. This is so I could see what I was working on
 
 /*import React, { useState, ChangeEvent, FormEvent } from 'react';
 import axios from 'axios';