Update

React/test-housing/src/pages/EditListing.js

@@ -1,7 +1,278 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 export const EditListing = () => {
+  const [geolocationEnabled, setGeolocationEnabled] = useState(false)
+  const [formData, setFormData] = useState({
+    type: 'rent',
+    name: '',
+    bedrooms: 1,
+    bathrooms: 1,
+    parking: false,
+    furnished: false,
+    address: '',
+    offer: false,
+    regularPrice: 0,
+    discountedPrice: 0,
+    images: {},
+    latitude: 0,
+    longitude: 0,
+  })
+
+  const {
+    type,
+    name,
+    bedrooms,
+    bathrooms,
+    parking,
+    furnished,
+    address,
+    offer,
+    regularPrice,
+    discountedPrice,
+    images,
+    latitude,
+    longitude,
+  } = formData
+
+  const onMutate = (e) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.id]: e.target.value
+    }))
+  }
+
+  const onSubmit = (e) => {
+    e.preventDefault()
+  }
+
   return (
-    <div>EditListing</div>
+    <div className="profile">
+      <header>
+        <p className="pageHeader">Edit listing</p>
+      </header>
+
+      <main>
+        <form onSubmit={onSubmit}>
+          <label className="formLabel">Sell / Rent</label>
+          <div className="formButtons">
+            <button
+              type="button"
+              className={type === 'sale' ? 'formButtonActive' : 'formButton'}
+              id="type"
+              value="sale"
+              onClick={onMutate}
+            >
+              Sell
+            </button>
+
+            <button
+              type="button"
+              className={type === 'rent' ? 'formButtonActive' : 'formButton'}
+              id="type"
+              value="rent"
+              onClick={onMutate}
+            >
+              Rent
+            </button>
+          </div>
+          <label className="formLabel">Name</label>
+          <input
+            type="text"
+            className="formInputName"
+            id="name"
+            value={name}
+            onChange={onMutate}
+            maxLength="32"
+            minLength="10"
+            required
+          />
+          <div className="formRooms flex">
+            <div>
+              <label className="formLabel">Bedrooms</label>
+              <input
+                type="number"
+                className="formInputSmall"
+                id="bedrooms"
+                value={bedrooms}
+                onChange={onMutate}
+                min="1"
+                max="50"
+                required
+              />
+            </div>
+            <div>
+              <label className="formLabel">Bathrooms</label>
+              <input
+                type="number"
+                className="formInputSmall"
+                id="bathrooms"
+                value={bathrooms}
+                onChange={onMutate}
+                min="1"
+                max="50"
+                required
+              />
+            </div>
+          </div>
+          <label className="formLabel">Parking spot</label>
+          <div className="formButtons">
+            <button
+              className={parking ? 'formButtonActive' : 'formButton'}
+              type="button"
+              id="parking"
+              value={true}
+              onClick={onMutate}
+            >
+              Yes
+            </button>
+
+            <button
+              className={
+                !parking && parking !== null ? 'formButtonActive' : 'formButton'
+              }
+              type="button"
+              id="parking"
+              value={false}
+              onClick={onMutate}
+            >
+              No
+            </button>
+          </div>
+          <label className="formLabel">Furnished</label>
+          <div className="formButtons">
+            <button
+              className={furnished ? 'formButtonActive' : 'formButton'}
+              type="button"
+              id="furnished"
+              value={true}
+              onClick={onMutate}
+            >
+              Yes
+            </button>
+
+            <button
+              className={
+                !furnished && furnished !== null
+                  ? 'formButtonActive'
+                  : 'formButton'
+              }
+              type="button"
+              id="furnished"
+              value={false}
+              onClick={onMutate}
+            >
+              No
+            </button>
+          </div>
+          <label className="formLabel">Address</label>
+          <textarea
+            className="formInputAddress"
+            type="text"
+            id="address"
+            value={address}
+            onChange={onMutate}
+            required
+          ></textarea>
+          {!geolocationEnabled && (
+            <div className="formLatLng flex">
+              <div>
+                <label className="formLabel">Latitude</label>
+                <input
+                  type="number"
+                  className="formInputSmall"
+                  id="latitude"
+                  onChange={onMutate}
+                  required
+                />
+              </div>
+              <div>
+                <label className="formLabel">Longitude</label>
+                <input
+                  type="number"
+                  className="formInputSmall"
+                  id="longitude"
+                  onChange={onMutate}
+                  required
+                />
+              </div>
+            </div>
+          )}
+
+          <label className="formLabel">Offer</label>
+          <div className="formButtons">
+            <button
+              className={offer ? 'formButtonActive' : 'formButton'}
+              type="button"
+              id="offer"
+              value={true}
+              onClick={onMutate}
+            >
+              Yes
+            </button>
+            <button
+              className={
+                !offer && offer !== null ? 'formButtonActive' : 'formButton'
+              }
+              type="button"
+              id="offer"
+              value={false}
+              onClick={onMutate}
+            >
+              No
+            </button>
+          </div>
+
+          <label className="formLabel">Regular Price</label>
+          <div className="formPriceDiv">
+            <input
+              type="number"
+              className="formInputSmall"
+              id="regularPrice"
+              value={regularPrice}
+              onChange={onMutate}
+              min="50"
+              max="750000000"
+              required
+            />
+            {type === 'rent' && <p className="formPriceText">$ / Month</p>}
+          </div>
+
+          {offer && (
+            <>
+              <label className="formLabel">Discounted Price</label>
+              <input
+                type="number"
+                className="formInputSmall"
+                id="discountedPrice"
+                value={discountedPrice}
+                onChange={onMutate}
+                min="50"
+                max="750000000"
+                required={offer}
+              />
+            </>
+          )}
+
+          <label className="formLabel">Images</label>
+          <p className="imagesInfo">
+            The first image will be the cover (max 6).
+          </p>
+          <input
+            type="file"
+            className="formInputFile"
+            id="images"
+            onChange={onMutate}
+            max="6"
+            accept=".jpg, .png, .jpeg"
+            multiple
+            required
+          />
+
+          <button className="primaryButton createListingButton" type="submit">
+            Edit Listing
+          </button>
+        </form>
+      </main>
+    </div>
   )
 }