Redoing Add-Tenant PR (#163)

* Redoing Add-Tenant PR

* Removing unused import for ReactDOM from add-property.tsx

* Add Tenant page before adding dropdown to choose property

* Before getting the Building Name dropdown to populate automatically - just one entry

* Building ID dropdown almost working

* Mutation working - now just need to fix the dropdown label to only show the name, not the ID

* Mutation finally works

* Added field for apartment/unit number

* Removing unused variables

* James and I made some corrections to add-tenant.tsx

Co-authored-by: Pat Min <patmin@Pats-MacBook-Pro.local>

tenant-file/portal-app/src/App.tsx

@@ -14,6 +14,7 @@ import Properties from './component/properties';
 import Home from './component/home';
 import TenantDetails from './component/tenant-details';
 import FileUpload from './component/file-upload';
+import AddTenant from './component/add-tenant';
 import AddProperty from './component/add-property';
 
 
@@ -38,6 +39,9 @@ function App() {
         <Route path="/login">
           <Login />
         </Route>
+        <Route path="/add-tenant">
+          <AddTenant />
+        </Route>
         <Route path="/properties">
           <Properties />
         </Route>

tenant-file/portal-app/src/component/add-tenant.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+
+import { Formik, Field, Form } from "formik";
+
+import { gql, useMutation, useQuery } from '@apollo/client';
+
+const ADD_TENANT = gql`
+    mutation addingATenant($fullName: String!, $phoneNumber: String!, $street: String!, $unitNumber: String!, $city: String!, $zip: String!, $bldgId: ID) {
+
+        createTenant(inputTenant: { name: $fullName, phoneNumber: $phoneNumber, currentResidence: { addressInput: { line1: $street, line2: $unitNumber, city: $city, state: "TX", postalCode: $zip }, propertyId: $bldgId } } )
+        {
+            payload {
+                id
+                name
+            }
+        }
+    }
+`;
+
+const GET_PROPERTIES = gql`
+    query getProps {
+        properties {
+            nodes {
+                id
+                name
+            }
+        }
+    }
+`;
+
+function ValidatePhoneNumber(number: any) {
+    let error;
+    if(!number) {
+        error = "Please enter your cell phone number. ";
+    }
+    if(!/^[2-9][0-9]{9}/.test(number)) {
+        error = "Please make sure to enter your 10-digit cell phone number, without hyphens or parentheses. "
+    }
+    return error;
+}
+
+export default () => {
+
+    const [addTenant] = useMutation(ADD_TENANT);
+
+    const { loading, data } = useQuery(GET_PROPERTIES);
+
+
+    const labelIndentation = {
+        textIndent: '50px'
+    };
+
+    const bldgSelectHandler = (bldgNode: any) => {
+        console.log("The building ID is: " + bldgNode.id);
+    };
+
+    if (loading) return <p>Loading...</p>;
+
+    return <Formik
+    initialValues={{
+        firstName: '',
+        lastName: '',
+        street: '',
+        unitNumber: '',
+        city: '',
+        state: '',
+        zip: '',
+        bldgId: '',
+        phoneNumber: ''
+        }}
+        onSubmit={         
+            async e => {
+                console.log("The ID is: " + e.bldgId);
+                addTenant({
+                    variables:
+                    {
+                        fullName: e.firstName + " " + e.lastName,
+                        street: e.street,
+                        unitNumber: e.unitNumber,
+                        city: e.city,
+                        state: e.state,
+                        zip: e.zip,
+                        bldgId: e.bldgId,
+                        phoneNumber: e.phoneNumber
+                    }
+                })
+                setTimeout(() => { }, 1000);
+            }
+        }>
+        {({ errors, touched, validateForm, validateField, values }) => (
+            <Form>
+                <h1 style={labelIndentation}>Add a New Tenant to the Tenant File</h1>
+
+                <label htmlFor="firstName">*First Name:</label>
+                <Field id="firstName" name="firstName" />
+                <br></br>
+                <label htmlFor="lastName">*Last Name:</label>
+                <Field id="lastName" name="lastName" />
+                <br></br>
+                <label htmlFor="street">*Street:</label>
+                <Field id="street" name="street" />
+                <br></br>
+                <label htmlFor="unitNumber">Unit Number:</label>
+                <Field id="unitNumber" name="unitNumber" />
+                <br></br>
+                <label htmlFor="city">*City:</label>
+                <Field id="city" name="city" />
+                <br></br>
+                <label htmlFor="state">*State:</label>
+                <Field id="state" name="state" />
+                <br></br>
+                <label htmlFor="zip">*Zip Code:</label>
+                <Field id="zip" name="zip" />
+                <br></br>
+                <label htmlFor="bldg">*Building Name:</label>
+                <select id="bldgId" name="bldgId">
+                    {data.properties.nodes.map( function (bldgNode: any) {
+
+                            values.bldgId = bldgNode.id;
+                            bldgSelectHandler(bldgNode);
+
+                            return (<option key={bldgNode.id} value={bldgNode.name}>
+                                {bldgNode.name}
+                            </option>);
+                    })}
+
+                </select>
+                <br></br>
+                <label htmlFor="phoneNumber">*Cell Phone Number:</label>
+                <Field id="phoneNumber" name="phoneNumber" validate={ValidatePhoneNumber} />
+                {errors.phoneNumber && touched.phoneNumber && <div>{errors.phoneNumber}</div>}
+                <br></br>
+                <button type="submit">Click Here to Submit</button>
+            </Form>
+        )}
+    </Formik>
+}