add tenant validation to match backend requirements

Special handling for blank values in: unit number, occupants. Backend validation requires `null` instead of empty string
Custom form validation: property ID is required ONLY when lease dates are supplied
- use Formik's "validate" hook to drive new state for the error messages on propertyID
The form resets all fields after submission
- `preSelectedChoices` was the trick to get previously selected "chips" to disappear from SearchPanel components
indentation fixes

Author: DaveTrost

src/views/AddTenant/addTenant.js

@@ -23,7 +23,7 @@ const validationSchema = Yup.object().shape({
     .min(7, "*Phone Number must have at least 7 characters")
     .max(20, "*Phone Number can't be longer than 20 characters")
     .required("*Phone Number is required"),
-  unitNum: Yup.number(),
+  unitNum: Yup.string(),
   occupants: Yup.number(),
 });
 
@@ -39,12 +39,16 @@ export const AddTenant = () => {
   const [propertyOptions, setPropertyOptions] = useState([]);
   const [propertySearchResults, setPropertySearchResults] = useState([]);
   const [showAddProperty, setShowAddProperty] = useState(false);
+  const [isValidationActive, setIsValidationActive] = useState(false);
+  const [propertyErrorText, setPropertyErrorText] = useState("");
 
   const calendarState = useCalendarState();
-  const { dateTimeStart, dateTimeEnd, } = calendarState;
+  const { dateTimeStart, dateTimeEnd } = calendarState;
 
   useMountEffect(() => getProperties());
 
+  useEffect(() => validateForm(), [propertySelection, dateTimeStart, dateTimeEnd]);
+
   useEffect(() => {
     axios.post("/api/users/role", {
       userrole: RoleEnum.STAFF,
@@ -88,13 +92,8 @@ export const AddTenant = () => {
   };
 
   const handleFormSubmit = (data) => {
-    let body = {
-      ...data,
-      propertyID: propertySelection[0].key,
-      staffIDs: staffSelections && staffSelections.map(staff => staff.key)
-    };
     axios
-      .post(`/api/tenants`, body, makeAuthHeaders(context))
+      .post(`/api/tenants`, data, makeAuthHeaders(context))
       .then((response) => {
         Toast("Tenant Created Successfully!", "success");
       })
@@ -144,6 +143,17 @@ export const AddTenant = () => {
     setStaffSelections(selectedChoices);
   };
 
+  const validateForm = (values) => {
+    setIsValidationActive(true);
+
+    if (dateTimeStart !== dateTimeEnd) {
+      setPropertyErrorText(dateTimeStart !== dateTimeEnd && propertySelection && propertySelection.length
+        ? "" 
+        : "*Property is a required field"
+      );
+    }
+  };    
+
   return (
     <div className='main-container'>
       <div>
@@ -158,16 +168,30 @@ export const AddTenant = () => {
             occupants: "",
           }}
           validationSchema={validationSchema}
+          validate={validateForm}
           validateOnBlur={false}
-          onSubmit={(values, { setSubmitting }) => {
+          onSubmit={(values, { setSubmitting, resetForm }) => {
             const toSubmit = {
               ...values,
-              dateTimeStart,
-              dateTimeEnd,
+              occupants: values.occupants || null,
+              unitNum: values.unitNum || null,
+              propertyID: propertySelection[0].key,
+              staffIDs: staffSelections && staffSelections.map(staff => staff.key)
             };
+            if (dateTimeStart !== dateTimeEnd) {
+              toSubmit.dateTimeStart = dateTimeStart;
+              toSubmit.dateTimeEnd = dateTimeEnd;
+            }
 
             setSubmitting(true);
             handleFormSubmit(toSubmit);
+            resetForm();
+            setPropertySearchText("");
+            setPropertySelection([]);
+            setStaffSearchText("");
+            setStaffSelections([]);
+            setPropertyErrorText("");
+            setIsValidationActive(false);
             setSubmitting(false);
           }}
         >
@@ -275,16 +299,20 @@ export const AddTenant = () => {
                       onSelectionChange={setPropertySelection}
                       onChange={handlePropertySearch}
                       onClear={handlePropertySearch}
+                      preSelectedChoices={propertySelection}
                       shadow
                     />
+                    {isValidationActive && propertyErrorText ? (
+                      <div className="error-message">{propertyErrorText}</div>
+                    ) : null}
                     <button
                       className="add-property-button"
                       onClick={() => setShowAddProperty(!showAddProperty)}
                       type="button"
                     >
                       <i className="fas fa-plus-circle icon-inline-space"></i>
-                  Create New Property
-                </button>
+                      Create New Property
+                    </button>
                   </div>
                   <h1 className="section-title">UNIT</h1>
                   <div className="form-row form-first-row">
@@ -294,17 +322,17 @@ export const AddTenant = () => {
                       htmlFor="number"
                     >
                       Number
-                </label>
+                    </label>
                     <Field
                       className="column form-field"
                       type="text"
                       name="unitNum"
                       onChange={handleChange}
                       value={values.unitNum}
-                      placeholder="Unit Number (Optional)"
+                      placeholder="Unit Number"
                     />
-                    {errors.number ? (
-                      <div className="error-message">{errors.number}</div>
+                    {errors.unitNum ? (
+                      <div className="error-message">{errors.unitNum}</div>
                     ) : null}
                   </div>
                   <div className="form-row">
@@ -339,15 +367,14 @@ export const AddTenant = () => {
                       className="column form-field"
                       type="text"
                       name="lease"
-                      onChange={null}
-                      value={dateTimeEnd !== dateTimeStart ? `${dateTimeStart.toDateString()} - ${dateTimeEnd.toDateString()}` : ""}
-
+                      onChange={validateForm}
+                      value={dateTimeEnd !== dateTimeStart 
+                        ? `${dateTimeStart.toDateString()} - ${dateTimeEnd.toDateString()}` 
+                        : ""
+                      }
                       placeholder="Lease dates (Start and End)"
                     />
                     <CalendarModal title="Lease Range" calendarState={calendarState} iconYPosition="0.8rem" />
-                    {errors.lease ? (
-                      <div className="error-message">{errors.lease}</div>
-                    ) : null}
                   </div>
                   <div className="button-container">
                     <Button