From abf2fe55dcdadb367de4a889bc6b02eb40743b99 Mon Sep 17 00:00:00 2001
From: Dave Trost <davetrost@gmail.com>
Date: Mon, 21 Dec 2020 11:30:30 -0800
Subject: [PATCH 1/3] 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
---
 src/views/AddTenant/addTenant.js | 73 ++++++++++++++++++++++----------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/views/AddTenant/addTenant.js b/src/views/AddTenant/addTenant.js
index ccd9ddd7c..dfd7c8913 100644
--- a/src/views/AddTenant/addTenant.js
+++ b/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

From ab45c1f4b43f7225a0536b83ef8ee4df7b034855 Mon Sep 17 00:00:00 2001
From: Dave Trost <davetrost@gmail.com>
Date: Tue, 22 Dec 2020 10:26:38 -0800
Subject: [PATCH 2/3] Lease Dates field (controlled by calendar modal) is now
 able to be reset

---
 src/components/CalendarModal/CalendarModal.jsx |  6 +++++-
 src/views/AddTenant/addTenant.js               | 11 ++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/CalendarModal/CalendarModal.jsx b/src/components/CalendarModal/CalendarModal.jsx
index b173404f8..bf462fd6f 100644
--- a/src/components/CalendarModal/CalendarModal.jsx
+++ b/src/components/CalendarModal/CalendarModal.jsx
@@ -79,6 +79,10 @@ const today = new Date()
 export function useCalendarState(startDateInit = today, endDateInit = today) {
   const [dateTimeStart, setStart] = useState(startDateInit)
   const [dateTimeEnd, setEnd] = useState(endDateInit)
+  const resetDates = () => {
+    setStart(startDateInit);
+    setEnd(startDateInit);
+  };
 
-  return { dateTimeStart, dateTimeEnd, setStart, setEnd }
+  return { dateTimeStart, dateTimeEnd, setStart, setEnd, resetDates }
 }
\ No newline at end of file
diff --git a/src/views/AddTenant/addTenant.js b/src/views/AddTenant/addTenant.js
index dfd7c8913..4767cea8a 100644
--- a/src/views/AddTenant/addTenant.js
+++ b/src/views/AddTenant/addTenant.js
@@ -43,7 +43,7 @@ export const AddTenant = () => {
   const [propertyErrorText, setPropertyErrorText] = useState("");
 
   const calendarState = useCalendarState();
-  const { dateTimeStart, dateTimeEnd } = calendarState;
+  const { dateTimeStart, dateTimeEnd, resetDates } = calendarState;
 
   useMountEffect(() => getProperties());
 
@@ -191,6 +191,7 @@ export const AddTenant = () => {
             setStaffSearchText("");
             setStaffSelections([]);
             setPropertyErrorText("");
+            resetDates();
             setIsValidationActive(false);
             setSubmitting(false);
           }}
@@ -314,7 +315,7 @@ export const AddTenant = () => {
                       Create New Property
                     </button>
                   </div>
-                  <h1 className="section-title">UNIT</h1>
+                  <h1 className="section-title">LEASE</h1>
                   <div className="form-row form-first-row">
                     <label
                       className="column is-one-fifth"
@@ -329,7 +330,7 @@ export const AddTenant = () => {
                       name="unitNum"
                       onChange={handleChange}
                       value={values.unitNum}
-                      placeholder="Unit Number"
+                      placeholder="Unit Number (Optional)"
                     />
                     {errors.unitNum ? (
                       <div className="error-message">{errors.unitNum}</div>
@@ -349,7 +350,7 @@ export const AddTenant = () => {
                       name="occupants"
                       onChange={handleChange}
                       value={values.occupants}
-                      placeholder="Total number of unit tenants"
+                      placeholder="Total number of unit tenants (Optional)"
                     />
                     {errors.occupants ? (
                       <div className="error-message">{errors.occupants}</div>
@@ -372,7 +373,7 @@ export const AddTenant = () => {
                         ? `${dateTimeStart.toDateString()} - ${dateTimeEnd.toDateString()}` 
                         : ""
                       }
-                      placeholder="Lease dates (Start and End)"
+                      placeholder="Lease dates (Optional)"
                     />
                     <CalendarModal title="Lease Range" calendarState={calendarState} iconYPosition="0.8rem" />
                   </div>

From 74c78083befe7e964554c5a05855771b532c6ea8 Mon Sep 17 00:00:00 2001
From: Dave Trost <davetrost@gmail.com>
Date: Tue, 22 Dec 2020 21:16:24 -0800
Subject: [PATCH 3/3] bugfix to allow an empty field for propertyID

---
 src/views/AddTenant/addTenant.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/AddTenant/addTenant.js b/src/views/AddTenant/addTenant.js
index 4767cea8a..03666d4e1 100644
--- a/src/views/AddTenant/addTenant.js
+++ b/src/views/AddTenant/addTenant.js
@@ -147,7 +147,7 @@ export const AddTenant = () => {
     setIsValidationActive(true);
 
     if (dateTimeStart !== dateTimeEnd) {
-      setPropertyErrorText(dateTimeStart !== dateTimeEnd && propertySelection && propertySelection.length
+      setPropertyErrorText(dateTimeStart !== dateTimeEnd && propertySelection.length
         ? "" 
         : "*Property is a required field"
       );
@@ -175,7 +175,7 @@ export const AddTenant = () => {
               ...values,
               occupants: values.occupants || null,
               unitNum: values.unitNum || null,
-              propertyID: propertySelection[0].key,
+              propertyID: propertySelection.length ? propertySelection[0].key : null,
               staffIDs: staffSelections && staffSelections.map(staff => staff.key)
             };
             if (dateTimeStart !== dateTimeEnd) {