cleaned up some legacy code and restructured form

package-lock.json

@@ -3413,6 +3413,11 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
+    "autosize": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz",
+      "integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA=="
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -14661,6 +14666,17 @@
         "prop-types": "^15.5.6"
       }
     },
+    "react-textarea-autosize": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.0.tgz",
+      "integrity": "sha512-3GLWFAan2pbwBeoeNDoqGmSbrShORtgWfaWX0RJDivsUrpShh01saRM5RU/i4Zmf+whpBVEY5cA90Eq8Ub1N3w==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.0.0",
+        "use-latest": "^1.0.0"
+      }
+    },
     "react-time-picker": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-time-picker/-/react-time-picker-4.0.1.tgz",
@@ -17155,6 +17171,12 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "ts-essentials": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
+      "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==",
+      "dev": true
+    },
     "ts-pnp": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -17493,6 +17515,30 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-composed-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
+      "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
+      "dev": true,
+      "requires": {
+        "ts-essentials": "^2.0.3"
+      }
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "dev": true
+    },
+    "use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "dev": true,
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "autosize": "^4.0.2",
     "axios": "^0.21.0",
     "axios-react": "^2.0.2",
     "bootstrap": "^4.5.3",
@@ -71,5 +72,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-textarea-autosize": "^8.3.0"
   }
 }

src/components/root/Navigation.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Link as a } from "react-router-dom";
+
 import InLineSearch from "./common/Functionality/InlineSearchBar";
 
 // Navbar class component, Just simple href's to retain styling
@@ -23,10 +23,17 @@ export class Navigation extends Component {
                 <Link to="/migrations">Migrations</Link>
               </li> */}
               <li>
-                <a href="/reports" className="hide-on-med-and-down">Reports</a>
+                <a href="/reports" className="hide-on-med-and-down">
+                  Reports
+                </a>
               </li>
               <li>
-                <a href="/historical-migrations" className="hide-on-med-and-down">Historical Migrations</a>
+                <a
+                  href="/historical-migrations"
+                  className="hide-on-med-and-down"
+                >
+                  Historical Migrations
+                </a>
               </li>
               <li className="orange accent-4 active">
                 <a href="/book">Book</a>

src/components/root/common/Forms/CPanelBooking.js

@@ -8,22 +8,13 @@ import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
 import Msgbox from "../../../actions/Msgbox";
 import { builfArrayFromObject } from "../../../actions/Error";
+import TextareaAutosize from "react-textarea-autosize";
 
 // Main form and POST Request to add migrations
 // found at /book under the web hosting migration tab
 // Things to add:
 // better date time picking.
 
-const timezoneList = {
-  losAngeles: "America/Los_Angeles", // -8:00 (-7)
-  berlin: "Europe/Berlin", // +2:00 (-1)
-  newYork: "America/New_York", // -5:00 (-4)
-  melbourne: "Australia/Melbourne", // +8:00
-  tongatapu: "Pacific/Tongatapu", // +13:00 (+14)
-  djibouti: "Africa/Djibouti", // +3:00
-};
-const timezone = timezoneList.melbourne;
-
 const InputValidation = Yup.object().shape({
   domain: Yup.string()
     .matches(
@@ -64,6 +55,7 @@ export const CPanelBooking = () => {
   };
 
   const onSubmit = async (values, { setSubmitting, resetForm }) => {
+    console.log(values);
     callAPI
       .post("/", values)
       .then(function (response) {
@@ -85,8 +77,16 @@ export const CPanelBooking = () => {
       onSubmit={onSubmit}
       validationSchema={InputValidation}
     >
-      {({ errors, touched }) => (
+      {({
-        <Form>
+        handleSubmit,
+        handleChange,
+        handleBlur,
+        values,
+        touched,
+        isValid,
+        errors,
+      }) => (
+        <Form noValidate onSubmit={handleSubmit}>
           <Container>
             <Row>
               <Col>
@@ -100,11 +100,14 @@ export const CPanelBooking = () => {
                     mindate={Date()}
                   />
                 </FormGroup>
-              </Col>
-              <Col>
                 <FormGroup>
                   <Label for="bookedTime">Timeslot *</Label>
-                  <Input type="select" name="booked_time" id="bookedTime">
+                  <Input
+                    type="select"
+                    name="booked_time"
+                    id="bookedTime"
+                    className="has-success"
+                  >
                     <option>Select</option>
                     <option>00:00-03:00</option>
                     <option>03:00-06:00</option>
@@ -125,8 +128,6 @@ export const CPanelBooking = () => {
                     placeholder="example.com.au"
                   />
                 </FormGroup>
-              </Col>
-              <Col>
                 <FormGroup>
                   <Label for="bookedUsername">cPanel username *</Label>
                   <Input
@@ -137,8 +138,6 @@ export const CPanelBooking = () => {
                   />
                 </FormGroup>
               </Col>
-            </Row>
-            <Row>
               <Col>
                 <FormGroup>
                   <Label for="bookedSource">Original server *</Label>
@@ -146,22 +145,21 @@ export const CPanelBooking = () => {
                     type="text"
                     name="original_server"
                     id="bookedSource"
-                    placeholder="1.2.3.4"
+                    placeholder="1.2.3.4 / example.com"
                   />
                 </FormGroup>
-              </Col>
-              <Col>
                 <FormGroup>
                   <Label for="bookedDestination">New server *</Label>
                   <Input
                     type="text"
                     name="new_server"
                     id="bookedDestination"
-                    placeholder="1.2.3.4"
+                    placeholder="1.2.3.4 / S111.SYD1"
                   />
                 </FormGroup>
               </Col>
             </Row>
+
             <Row>
               <Col>
                 <FormGroup>
@@ -185,17 +183,6 @@ export const CPanelBooking = () => {
                   />
                 </FormGroup>
               </Col>
-              <Col>
-                <FormGroup>
-                  <Label for="bookedType">Migration type *</Label>
-                  <Input type="select" name="migration_type" id="bookedType">
-                    <option>Select</option>
-                    <option>cPanel</option>
-                    <option>Plesk</option>
-                    <option>Other</option>
-                  </Input>
-                </FormGroup>
-              </Col>
               <Col>
                 <FormGroup>
                   <Label for="bookedAgent">Agent Initials *</Label>
@@ -207,7 +194,20 @@ export const CPanelBooking = () => {
                   />
                 </FormGroup>
               </Col>
+              <Col>
+                <FormGroup>
+                  <Label for="bookedType">Migration type *</Label>
+                  <Input type="select" name="migration_type" id="bookedType">
+                    <option>Select</option>
+                    <option>cPanel</option>
+                    <option>Plesk</option>
+                    <option>Other</option>
+                  </Input>
+                </FormGroup>
+              </Col>
             </Row>
+            <Row>
+              <Col md={4}>
                 <FormGroup>
                   <Label for="bookedAdditionalDomains">Addon Domains</Label>
                   <Input
@@ -217,17 +217,20 @@ export const CPanelBooking = () => {
                     placeholder="example.com.au,example.net.au"
                   />
                 </FormGroup>
-
                 <FormGroup>
                   <Label for="bookedTermDate">
                     Estimated termination date (internal migrations only)
                   </Label>
                   <Input type="date" name="term_date" id="bookedTermDate" />
                 </FormGroup>
+              </Col>
+              <Col md={8}>
                 <FormGroup>
                   <Label for="bookedNotes">Notes</Label>
-              <Input type="textarea" name="notes" id="notes" />
+                  <Input name="notes" id="notes" type="textarea" rows={6} />
                 </FormGroup>
+              </Col>
+            </Row>
             <Submit withSpinner>Submit</Submit>
           </Container>
           {respID ? <Msgbox linkid={respID}></Msgbox> : null}