getting to get this to work again

src/components/AddLens.js

@@ -14,17 +14,21 @@ function AddLens() {
   const [imageFile, setImageFile] = useState(null); // Store the selected image file
   const [uploading, setUploading] = useState(false); // Track the upload status
 
+  // Handle input changes for form fields
   const handleChange = (e) => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value,
     });
   };
 
+  // Handle image file input change
   const handleImageChange = (e) => {
     setImageFile(e.target.files[0]); // Store the image file on file input change
+    console.log("Selected image file:", e.target.files[0]); // Debugging log for image file
   };
 
+  // Function to upload image to Imgur
   const uploadImageToImgur = async () => {
     const clientId = '131a16b091d6516'; // Use Imgur Client ID for anonymous uploads
 
@@ -37,6 +41,7 @@ function AddLens() {
     imgurFormData.append("image", imageFile);
 
     try {
+      console.log("Uploading image to Imgur..."); // Debugging log before upload
       const response = await axios.post(
         "https://api.imgur.com/3/image",
         imgurFormData,
@@ -46,19 +51,21 @@ function AddLens() {
           },
         }
       );
-      return response.data.data.link;
+      console.log("Image upload successful:", response.data); // Debugging log after successful upload
+      return response.data.data.link; // Return the image URL from Imgur
     } catch (error) {
-      console.error("Error uploading image:", error);
+      console.error("Error uploading image:", error); // Debugging log for errors
       return null;
     }
   };
 
-
+  // Handle form submission
   const handleSubmit = async (e) => {
     e.preventDefault();
 
     setUploading(true);
 
+    // Upload the image to Imgur
     const uploadedImageUrl = await uploadImageToImgur();
 
     if (!uploadedImageUrl) {
@@ -70,6 +77,9 @@ function AddLens() {
       // Prepare lens data with the Imgur image URL
       const lensData = { ...formData, imgUrl: uploadedImageUrl };
 
+      // Log the lens data to ensure it's correct
+      console.log("Submitting lens data to the API:", lensData); // Debugging log before API submission
+
       // Send the POST request to your API
       const response = await axios.post("https://lens-api-7hy7.onrender.com/lenses", lensData);
       console.log("Lens added successfully:", response.data);
@@ -86,7 +96,17 @@ function AddLens() {
       });
       setImageFile(null);
     } catch (error) {
-      console.error("Error adding lens:", error);
+      // Improved error handling
+      if (error.response) {
+        console.error("Error response data:", error.response.data);
+        alert(`Error: ${error.response.data.message}`);
+      } else if (error.request) {
+        console.error("No response received:", error.request);
+        alert("No response from the server. Please try again later.");
+      } else {
+        console.error("Error setting up the request:", error.message);
+        alert("Error: " + error.message);
+      }
     } finally {
       setUploading(false);
     }