stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/components/AddNewProperty/Images.jsx

@@ -12,12 +12,8 @@ import "../../styles/images.scss";
 import ButtonPrimary from "../../shared/Button/ButtonPrimary";
 import { useDropzone } from "react-dropzone";
 import successHandler from "../../utils/helpers/SuccessHandler";
-
-const validationSchema = Yup.object({
-  place_images: Yup.array()
-    .min(1, "Please upload at least one image")
-    .required("Images are required"),
-});
+import { ImagevalidationSchema } from "../../shared/Schema/FormSchema";
+import SecondryButton from "../../shared/Button/SecondryButton";
 
 const Images = () => {
   const dispatch = useDispatch();
@@ -28,6 +24,7 @@ const Images = () => {
   const { PropertyToEdit } = useSelector((state) => state.property);
   const [previews, setPreviews] = useState([]);
   const [isEditing, setIsEditing] = useState(false);
+  const [initialImageState, setInitialImageState] = useState([]);
 
   const initialValues = {
     place_images: PropertyToEdit?.place_images || [],
@@ -36,29 +33,55 @@ const Images = () => {
   const formik = useFormik({
     initialValues,
     enableReinitialize: true,
-    validationSchema,
+    validationSchema: ImagevalidationSchema,
     onSubmit: async (values, { setSubmitting }) => {
-      setSubmitting(true);
+      try {
+        setSubmitting(true);
 
-      const formData = new FormData();
-      formData.append("property[id]", slug);
+        if (slug && isEditing) {
+          const formData = new FormData();
+          formData.append("property[id]", slug);
 
-      // Append only new File objects to FormData
-      values.place_images.forEach((file) => {
-        if (file instanceof File) {
-          formData.append("property[place_images][]", file);
-        }
-      });
-
-      try {
-        const response = await dispatch(
-          uploadImageProperties(formData)
-        ).unwrap();
-        if (response) {
-          successHandler("Images uploaded successfully");
+          // Append only new File objects to FormData
+          let hasNewFiles = false;
+          values.place_images.forEach((file) => {
+            if (file instanceof File) {
+              formData.append("property[place_images][]", file);
+              hasNewFiles = true;
+            }
+          });
+          if (hasNewFiles) {
+            const response = await dispatch(
+              uploadImageProperties(formData)
+            ).unwrap();
+            if (response) {
+              successHandler("Images uploaded successfully");
+              navigate(`/property-3/${slug}`);
+            } else {
+              console.error("Upload failed:", response);
+            }
+          } else {
+            navigate(`/property-3/${slug}`);
+          }
+        } else if (slug && !isEditing) {
           navigate(`/property-3/${slug}`);
         } else {
-          console.error("Operation failed:", response);
+          const formData = new FormData();
+          values.place_images.forEach((file) => {
+            if (file instanceof File) {
+              formData.append("property[place_images][]", file);
+            }
+          });
+
+          const response = await dispatch(
+            uploadImageProperties(formData)
+          ).unwrap();
+          if (response) {
+            successHandler("Images uploaded successfully");
+            navigate(`/property-3/${response?.property?.slug || slug}`);
+          } else {
+            console.error("Create failed:", response);
+          }
         }
       } catch (error) {
         console.error("Error uploading images:", error);
@@ -68,29 +91,53 @@ const Images = () => {
     },
   });
 
-  const initialFormValues = JSON.stringify(initialValues);
-
+  // Track changes in images
   useEffect(() => {
-    const currentFormValues = JSON.stringify(formik.values);
-    setIsEditing(currentFormValues !== initialFormValues);
-  }, [formik.values, initialFormValues]);
+    const currentImages = formik.values.place_images || [];
+    const hasChanges = !arraysEqual(currentImages, initialImageState);
+    setIsEditing(hasChanges);
+  }, [formik.values.place_images, initialImageState]);
+
+  // Helper function to compare arrays (considering File objects and URLs)
+  const arraysEqual = (a, b) => {
+    if (a.length !== b.length) return false;
+
+    for (let i = 0; i < a.length; i++) {
+      const itemA = a[i];
+      const itemB = b[i];
+
+      // Compare File objects by name and size
+      if (itemA instanceof File && itemB instanceof File) {
+        if (itemA.name !== itemB.name || itemA.size !== itemB.size) {
+          return false;
+        }
+      } else if (typeof itemA === "string" && typeof itemB === "string") {
+        // Compare URLs
+        if (itemA !== itemB) return false;
+      } else {
+        // Different types
+        return false;
+      }
+    }
+    return true;
+  };
 
   const onDrop = (acceptedFiles) => {
     const newImages = [...formik.values.place_images, ...acceptedFiles];
     formik.setFieldValue("place_images", newImages);
-    setPreviews((prev) => [
-      ...prev,
-      ...acceptedFiles.map((file) => URL.createObjectURL(file)),
-    ]);
+
+    const newPreviews = acceptedFiles.map((file) => URL.createObjectURL(file));
+    setPreviews((prev) => [...prev, ...newPreviews]);
   };
 
   const handleRemoveImage = (index) => {
     const newImages = [...formik.values.place_images];
     const newPreviews = [...previews];
-
+    if (newPreviews[index] && newPreviews[index].startsWith("blob:")) {
+      URL.revokeObjectURL(newPreviews[index]);
+    }
     newImages.splice(index, 1);
     newPreviews.splice(index, 1);
-
     formik.setFieldValue("place_images", newImages);
     setPreviews(newPreviews);
   };
@@ -107,25 +154,53 @@ const Images = () => {
   }, [dispatch, slug]);
 
   useEffect(() => {
-    const existingUrls = Array.isArray(PropertyToEdit?.place_images)
-      ? PropertyToEdit.place_images.filter((img) => typeof img === "string")
+    const existingImages = PropertyToEdit?.place_images || [];
+    const existingUrls = Array.isArray(existingImages)
+      ? existingImages.filter((img) => typeof img === "string")
       : [];
-
-    if (existingUrls.length > 0) {
+    if (existingImages.length > 0) {
       setPreviews(existingUrls);
-      formik.setFieldValue("place_images", PropertyToEdit.place_images);
+      formik.setFieldValue("place_images", existingImages);
+      setInitialImageState([...existingImages]); // Set initial state for comparison
+    } else {
+      // Reset states if no existing images
+      setPreviews([]);
+      formik.setFieldValue("place_images", []);
+      setInitialImageState([]);
     }
   }, [PropertyToEdit]);
 
-  const isSubmitDisabled =
-    formik.isSubmitting || formik.values.place_images.length === 0;
+  // Handle form submission with validation
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formik.setTouched({
+      place_images: true,
+    });
+
+    if (formik.isValid) {
+      formik.handleSubmit(e);
+    } else {
+      console.log("Form validation failed, not submitting");
+    }
+  };
+
+  // Clean up blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      previews.forEach((preview) => {
+        if (preview && preview.startsWith("blob:")) {
+          URL.revokeObjectURL(preview);
+        }
+      });
+    };
+  }, []);
 
   return (
     <CommonLayout currentHref="/property-2" PropertyID={routeId}>
       <div className="image-step-container">
         <h2 className="title">Upload Property Images</h2>
         <div className="divider" />
-        <form className="image-form" onSubmit={formik.handleSubmit}>
+        <form className="image-form" onSubmit={handleSubmit}>
           <div className="form-group">
             <label>Images</label>
             <div {...getRootProps()} className="dropzone">
@@ -178,11 +253,13 @@ const Images = () => {
             </div>
           )}
           <div className="actions">
-            <ButtonPrimary href={`/property-1/${slug}`}>Go back</ButtonPrimary>
+            <SecondryButton href={`/property-1/${slug}`}>
+              Go back
+            </SecondryButton>
             <ButtonPrimary
               type="submit"
               className="submit-btn"
-              disabled={isSubmitDisabled}
+              disabled={formik.isSubmitting}
             >
               {formik.isSubmitting ? "Saving..." : "Save"}
             </ButtonPrimary>

data/app/javascript/react/components/AddNewProperty/Location.jsx

@@ -14,6 +14,8 @@ import FormField from "../../shared/FormField/FormField";
 import ButtonPrimary from "../../shared/Button/ButtonPrimary";
 import "../../styles/location.scss";
 import successHandler from "../../utils/helpers/SuccessHandler";
+import { LocationSchema } from "../../shared/Schema/FormSchema";
+import SecondryButton from "../../shared/Button/SecondryButton";
 
 const Location = () => {
   const dispatch = useDispatch();
@@ -57,15 +59,23 @@ const Location = () => {
       latitude: PropertyToEdit?.latitude || "",
       longitude: PropertyToEdit?.longitude || "",
     },
-    validate: (values) => {
-      const errors = {};
-      if (!values.city) errors.city = "City is required";
-      if (!values.state) errors.state = "State is required";
-      if (!values.zipcode) errors.zipcode = "Zipcode is required";
-      return errors;
-    },
+    validationSchema: LocationSchema,
     onSubmit: async (values) => {
+      const hasChanges = [
+        "city",
+        "state",
+        "zipcode",
+        "latitude",
+        "longitude",
+      ].some((key) => values[key] !== PropertyToEdit?.[key]);
+      if (!hasChanges) {
+        navigate(`/property-5/${slug}`);
+        return;
+      }
+
       try {
+        setSubmitting(true);
+
         const payload = {
           id: slug,
           city: values.city,
@@ -75,8 +85,6 @@ const Location = () => {
           longitude: values.longitude,
         };
 
-        formik.setSubmitting(true);
-
         const response = await dispatch(
           updateProperties({ property: payload })
         ).unwrap();
@@ -85,14 +93,13 @@ const Location = () => {
           successHandler("Location updated successfully");
           navigate(`/property-5/${slug}`);
         } else {
-          console.error("Update failed:", response);
           alert("Failed to update property. Please try again.");
         }
       } catch (error) {
         console.error("Error updating property:", error);
         alert("An error occurred while updating the property.");
       } finally {
-        formik.setSubmitting(false);
+        setSubmitting(false);
       }
     },
   });
@@ -222,11 +229,11 @@ const Location = () => {
             </div>
 
             <div className="action-buttons">
-              <ButtonPrimary href={`/property-3/${slug}`}>
+              <SecondryButton href={`/property-3/${slug}`}>
                 Go back
-              </ButtonPrimary>
+              </SecondryButton>
               <ButtonPrimary type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Loading..." : "Continue"}
+                {isSubmitting ? "Saving..." : "Save"}
               </ButtonPrimary>
             </div>
           </div>