ISSUE 9: preload space details into input UI

src/pages/Host/Spaces/Edit/EditPropertySpacePage.jsx

@@ -9,7 +9,12 @@ import MkdSDK from "@/utils/MkdSDK";
 import { useContext } from "react";
 import { GlobalContext } from "@/globalContext";
 import { useSearchParams } from "react-router-dom";
-import { SPACE_CATEGORY_SIZES, NOTIFICATION_STATUS, NOTIFICATION_TYPE, SPACE_STATUS } from "@/utils/constants";
+import {
+  SPACE_CATEGORY_SIZES,
+  NOTIFICATION_STATUS,
+  NOTIFICATION_TYPE,
+  SPACE_STATUS,
+} from "@/utils/constants";
 import CustomLocationAutoCompleteV2 from "@/components/CustomLocationAutoCompleteV2";
 import CustomSelectV2 from "@/components/CustomSelectV2";
 import CounterV2 from "@/components/CounterV2";
@@ -24,7 +29,8 @@ const ctrl = new AbortController();
 const EditPropertySpacePage = () => {
   const { dispatch: authDispatch } = useContext(AuthContext);
   const { spaceData, dispatch } = useSpaceContext();
-  const { dispatch: globalDispatch, state: globalState } = useContext(GlobalContext);
+  const { dispatch: globalDispatch, state: globalState } =
+    useContext(GlobalContext);
   const [searchParams] = useSearchParams();
   const mode = searchParams.get("mode");
   const { id } = useParams();
@@ -41,7 +47,11 @@ const EditPropertySpacePage = () => {
     rate: yup.number().typeError("Must be a number").positive().integer(),
     description: yup.string().required("This field is required"),
     rule: yup.string(),
-    max_capacity: yup.number().required("This field is required").min(1).typeError("This field is required"),
+    max_capacity: yup
+      .number()
+      .required("This field is required")
+      .min(1)
+      .typeError("This field is required"),
     additional_guest_rate: yup.string(),
   });
 
@@ -79,7 +89,12 @@ const EditPropertySpacePage = () => {
     const where = [`ergo_property_spaces.id = ${id}`];
     const user_id = localStorage.getItem("user");
     try {
-      const result = await sdk.callRawAPI("/v2/api/custom/ergo/popular/PAGINATE", { page: 1, limit: 1, user_id: Number(user_id), where, all: true }, "POST", ctrl.signal);
+      const result = await sdk.callRawAPI(
+        "/v2/api/custom/ergo/popular/PAGINATE",
+        { page: 1, limit: 1, user_id: Number(user_id), where, all: true },
+        "POST",
+        ctrl.signal
+      );
       if (Array.isArray(result.list) && result.list.length > 0) {
         setCurrSpace(result.list[0]);
       }
@@ -102,10 +117,29 @@ const EditPropertySpacePage = () => {
     }
   }, []);
 
+  useEffect(() => {
+    if (mode === "edit" && currSpace && Object.keys(currSpace).length > 0) {
+      setValue("category", currSpace.space_id ?? "");
+      setValue("id", currSpace.id ?? "");
+      setValue("name", currSpace.name ?? "");
+      setValue("rate", currSpace.rate ?? "");
+      setValue("max_capacity", currSpace.max_capacity ?? 0);
+      setValue("description", currSpace.description ?? "");
+      setValue("rule", currSpace.rule ?? "");
+      setValue("zip", currSpace.zip ?? "");
+      setValue("country", currSpace.country ?? "");
+      setValue("city", currSpace.city ?? "");
+      setValue("address_line_1", currSpace.address_line_1 ?? "");
+      setValue("address_line_2", currSpace.address_line_2 ?? "");
+      setValue("additional_guest_rate", currSpace.additional_guest_rate ?? "");
+      setValue("size", currSpace.size ?? 0);
+    }
+  }, [currSpace, mode, setValue]);
+
   const onSubmit = async (data) => {
-    const result = extractLocationInfo(data?.city)
+    const result = extractLocationInfo(data?.city);
-    data.city = (result[0]);
+    data.city = result[0];
-    data.country = (result[1]);
+    data.country = result[1];
     console.log("submitting", data);
     const host_id = localStorage.getItem("user");
     globalDispatch({ type: "START_LOADING" });
@@ -127,7 +161,7 @@ const EditPropertySpacePage = () => {
             name: data.name,
             rule: data.rule,
           },
-          "PUT",
+          "PUT"
         );
 
         sdk.setTable("property_spaces");
@@ -143,7 +177,7 @@ const EditPropertySpacePage = () => {
             additional_guest_rate: data.additional_guest_rate,
             size: hasSizes ? data.size : SPACE_CATEGORY_SIZES.UNSET,
           },
-          "PUT",
+          "PUT"
         );
 
         // create notification
@@ -158,7 +192,7 @@ const EditPropertySpacePage = () => {
             type: NOTIFICATION_TYPE.EDIT_PROPERTY_SPACE,
             status: NOTIFICATION_STATUS.NOT_ADDRESSED,
           },
-          "POST",
+          "POST"
         );
       }
       if (draftType === "continue") {
@@ -168,7 +202,10 @@ const EditPropertySpacePage = () => {
       }
     } catch (err) {
       tokenExpireError(authDispatch, err.message);
-      globalDispatch({ type: "SHOW_ERROR", payload: { heading: "Edit Space Failed", message: err.message } });
+      globalDispatch({
+        type: "SHOW_ERROR",
+        payload: { heading: "Edit Space Failed", message: err.message },
+      });
     }
     globalDispatch({ type: "STOP_LOADING" });
   };
@@ -181,166 +218,268 @@ const EditPropertySpacePage = () => {
     { label: "X-Large", value: SPACE_CATEGORY_SIZES.X_LARGE },
   ];
   const category = watch("category");
-  const hasSizes = globalState.spaceCategories.find((ctg) => ctg.id == Number(category))?.has_sizes == 1;
+  const hasSizes =
+    globalState.spaceCategories.find((ctg) => ctg.id == Number(category))
+      ?.has_sizes == 1;
 
   return (
-    <div className="min-h-screen pb-40">
+    <div className='min-h-screen pb-40'>
       <form
-        className="text-sm md:max-w-lg"
+        className='text-sm md:max-w-lg'
         onSubmit={handleSubmit(onSubmit)}
-        autoComplete="off"
+        autoComplete='off'
       >
-        <h1 className="mb-8 text-3xl font-bold md:text-4xl">Space Details</h1>
+        <h1 className='mb-8 text-3xl font-bold md:text-4xl'>Space Details</h1>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="name"
+            htmlFor='name'
           >
-            Property name {errors.name?.message ? <span className="text-xs font-normal italic text-red-500">{errors.name?.message}</span> : ""}
+            Property name{" "}
+            {errors.name?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.name?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <input
-            autoComplete="off"
+            autoComplete='off'
-            placeholder=""
+            placeholder=''
             {...register("name")}
-            className={`w-full rounded border py-2 px-3 leading-tight text-gray-700 ${errors.name?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+            className={`w-full rounded border px-3 py-2 leading-tight text-gray-700 ${
+              errors.name?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
           />
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="address_line_1"
+            htmlFor='address_line_1'
           >
-            Address Line 1 {errors.address_line_1?.message ? <span className="text-xs font-normal italic text-red-500">{errors.address_line_1?.message}</span> : ""}
+            Address Line 1{" "}
+            {errors.address_line_1?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.address_line_1?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <CustomLocationAutoCompleteV2
             control={control}
             setValue={(val) => setValue("address_line_1", val)}
-            name="address_line_1"
+            name='address_line_1'
-            className={`w-full rounded border py-2 px-3 leading-tight text-gray-700 ${errors.address_line_1?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+            className={`w-full rounded border px-3 py-2 leading-tight text-gray-700 ${
-            placeholder=""
+              errors.address_line_1?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
+            placeholder=''
             hideIcons
             suggestionType={["(cities)"]}
           />
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="address_line_2"
+            htmlFor='address_line_2'
           >
-            Address Line 2 {errors.address_line_2?.message ? <span className="text-xs font-normal italic text-red-500">{errors.address_line_2?.message}</span> : ""}
+            Address Line 2{" "}
+            {errors.address_line_2?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.address_line_2?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <CustomLocationAutoCompleteV2
             control={control}
             setValue={(val) => setValue("address_line_2", val)}
-            name="address_line_2"
+            name='address_line_2'
-            className={`w-full rounded border py-2 px-3 leading-tight text-gray-700 ${errors.address_line_2?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+            className={`w-full rounded border px-3 py-2 leading-tight text-gray-700 ${
-            placeholder=""
+              errors.address_line_2?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
+            placeholder=''
             hideIcons
             suggestionType={["(cities)"]}
           />
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="city"
+            htmlFor='city'
           >
-            City {errors.city?.message ? <span className="text-xs font-normal italic text-red-500">{errors.city?.message}</span> : ""}
+            City{" "}
+            {errors.city?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.city?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <CustomLocationAutoCompleteV2
             control={control}
             setValue={(val) => setValue("city", val)}
-            name="city"
+            name='city'
-            className={`w-full rounded border py-2 px-3 leading-tight text-gray-700 ${errors.city?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+            className={`w-full rounded border px-3 py-2 leading-tight text-gray-700 ${
-            placeholder=""
+              errors.city?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
+            placeholder=''
             hideIcons
             suggestionType={["(cities)"]}
           />
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="zip"
+            htmlFor='zip'
           >
-            Zip code {errors.zip?.message ? <span className="text-xs font-normal italic text-red-500">{errors.zip?.message}</span> : ""}
+            Zip code{" "}
+            {errors.zip?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.zip?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <input
-            placeholder=""
+            placeholder=''
             {...register("zip")}
-            className={` focus:shadow-outline $ w-full rounded border py-2 px-3 leading-tight text-gray-700 ${errors.zip?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"
+            className={` focus:shadow-outline $ w-full rounded border px-3 py-2 leading-tight text-gray-700 ${
-              }`}
+              errors.zip?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
           />
         </div>
-        
+
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="category"
+            htmlFor='category'
           >
-            Category {errors.category?.message ? <span className="text-xs font-normal italic text-red-500">{errors.category?.message}</span> : ""}
+            Category{" "}
+            {errors.category?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.category?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <CustomSelectV2
             items={globalState.spaceCategories}
-            labelField="category"
+            labelField='category'
-            valueField="id"
+            valueField='id'
-            containerClassName=""
+            containerClassName=''
-            className={`w-full border py-2 px-3 ${errors.category?.message ? "ring-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+            className={`w-full border px-3 py-2 ${
-            openClassName="ring-primary ring-2"
+              errors.category?.message
+                ? "ring-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
+            openClassName='ring-primary ring-2'
             placeholder={"Select a category"}
             control={control}
-            name="category"
+            name='category'
           />
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="rate"
+            htmlFor='rate'
           >
-            Hourly rate {errors.rate?.message ? <span className="text-xs font-normal italic text-red-500">{errors.rate?.message}</span> : ""}
+            Hourly rate{" "}
+            {errors.rate?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.rate?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
-          <div className="flex">
+          <div className='flex'>
-            <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-100 px-4 text-sm">&#36;</span>
+            <span className='inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-100 px-4 text-sm'>
+              &#36;
+            </span>
             <input
-              placeholder=""
+              placeholder=''
-              type="number"
+              type='number'
               {...register("rate")}
-              className={`remove-arrow focus:shadow-outline w-full rounded rounded-l-none border py-2 px-3 leading-tight text-gray-700 ${errors.rate?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"
+              className={`remove-arrow focus:shadow-outline w-full rounded rounded-l-none border px-3 py-2 leading-tight text-gray-700 ${
-                }`}
+                errors.rate?.message
+                  ? "border-red-500 focus:outline-red-500"
+                  : "focus-within:outline-primary"
+              }`}
             />
           </div>
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="description"
+            htmlFor='description'
           >
-            Description {errors.description?.message ? <span className="text-xs font-normal italic text-red-500">{errors.description?.message}</span> : ""}
+            Description{" "}
+            {errors.description?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.description?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
           <textarea
-            placeholder=""
+            placeholder=''
             {...register("description")}
-            className={`w-full resize-none rounded border py-2 px-3 leading-tight text-gray-700 ${errors.description?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"
+            className={`w-full resize-none rounded border px-3 py-2 leading-tight text-gray-700 ${
-              }`}
+              errors.description?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
             rows={10}
           ></textarea>
         </div>
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="rule"
+            htmlFor='rule'
           >
             Property rules
           </label>
           <textarea
-            placeholder=""
+            placeholder=''
             {...register("rule")}
-            className={`w-full resize-none rounded border py-2 px-3 leading-tight text-gray-700 ${errors.rule?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+            className={`w-full resize-none rounded border px-3 py-2 leading-tight text-gray-700 ${
+              errors.rule?.message
+                ? "border-red-500 focus:outline-red-500"
+                : "focus-within:outline-primary"
+            }`}
             rows={10}
           ></textarea>
         </div>
-        <div className="mb-6 flex items-center justify-between">
+        <div className='mb-6 flex items-center justify-between'>
-          <p className="font-semibold">* Max number of guests {errors.max_capacity?.message ? <span className="text-xs font-normal italic text-red-500">{errors.max_capacity?.message}</span> : ""}</p>
+          <p className='font-semibold'>
+            * Max number of guests{" "}
+            {errors.max_capacity?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.max_capacity?.message}
+              </span>
+            ) : (
+              ""
+            )}
+          </p>
           <CounterV2
-            name="max_capacity"
+            name='max_capacity'
             control={control}
             setValue={(val) => setValue("max_capacity", val)}
           />
@@ -348,58 +487,82 @@ const EditPropertySpacePage = () => {
         {hasSizes && (
           <div className={`mb-8`}>
             <label
-              className="mb-2 block text-sm font-bold text-gray-700"
+              className='mb-2 block text-sm font-bold text-gray-700'
-              htmlFor="size"
+              htmlFor='size'
             >
-              Size (<span className="text-sm font-normal italic">optional </span>) {errors.size?.message ? <span className="text-xs font-normal italic text-red-500">{errors.size?.message}</span> : ""}
+              Size (
+              <span className='text-sm font-normal italic'>optional </span>){" "}
+              {errors.size?.message ? (
+                <span className='text-xs font-normal italic text-red-500'>
+                  {errors.size?.message}
+                </span>
+              ) : (
+                ""
+              )}
             </label>
             <CustomSelectV2
               shouldUnregister={false}
               items={SIZES}
-              labelField="label"
+              labelField='label'
-              valueField="value"
+              valueField='value'
-              containerClassName=""
+              containerClassName=''
-              className={`w-full border py-2 px-3 ${errors.size?.message ? "ring-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
+              className={`w-full border px-3 py-2 ${
-              openClassName="ring-primary ring-2"
+                errors.size?.message
+                  ? "ring-red-500 focus:outline-red-500"
+                  : "focus-within:outline-primary"
+              }`}
+              openClassName='ring-primary ring-2'
               placeholder={"Select size"}
               control={control}
-              name="size"
+              name='size'
             />
           </div>
         )}
 
-        <div className="mb-8">
+        <div className='mb-8'>
           <label
-            className="mb-2 block text-sm font-bold text-gray-700"
+            className='mb-2 block text-sm font-bold text-gray-700'
-            htmlFor="additional_guest_rate"
+            htmlFor='additional_guest_rate'
           >
-            Hourly rate for additional {hasSizes ? "guests" : "guests"} (<span className="text-sm font-normal italic">optional </span>){" "}
+            Hourly rate for additional {hasSizes ? "guests" : "guests"} (
-            {errors.additional_guest_rate?.message ? <span className="text-xs font-normal italic text-red-500">{errors.additional_guest_rate?.message}</span> : ""}
+            <span className='text-sm font-normal italic'>optional </span>){" "}
+            {errors.additional_guest_rate?.message ? (
+              <span className='text-xs font-normal italic text-red-500'>
+                {errors.additional_guest_rate?.message}
+              </span>
+            ) : (
+              ""
+            )}
           </label>
-          <div className="flex">
+          <div className='flex'>
-            <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-100 px-4 text-sm">&#36;</span>
+            <span className='inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-100 px-4 text-sm'>
+              &#36;
+            </span>
             <input
-              placeholder=""
+              placeholder=''
-              type="number"
+              type='number'
               {...register("additional_guest_rate")}
-              className={`remove-arrow w-full rounded rounded-l-none border py-2 px-3 leading-tight text-gray-700 ${errors.additional_guest_rate?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"
+              className={`remove-arrow w-full rounded rounded-l-none border px-3 py-2 leading-tight text-gray-700 ${
-                }`}
+                errors.additional_guest_rate?.message
+                  ? "border-red-500 focus:outline-red-500"
+                  : "focus-within:outline-primary"
+              }`}
             />
           </div>
         </div>
-        <hr className="my-[48px]" />
+        <hr className='my-[48px]' />
         <button
           onClick={() => setDraftType("continue")}
-          type="submit"
+          type='submit'
-          className="login-btn-gradient rounded py-2 px-4 tracking-wide text-white outline-none focus:outline-none"
+          className='login-btn-gradient rounded px-4 py-2 tracking-wide text-white outline-none focus:outline-none'
         >
           Continue
         </button>
         <br />
         <button
           onClick={() => setDraftType("submit")}
-          type="submit"
+          type='submit'
-          className="login-btn-gradient rounded py-2 mt-3 px-4 tracking-wide text-white outline-none focus:outline-none"
+          className='login-btn-gradient mt-3 rounded px-4 py-2 tracking-wide text-white outline-none focus:outline-none'
         >
           Submit
         </button>