Updated book and form logic

src/components/App.js

@@ -15,6 +15,7 @@ import IDSingle from "./root/Pages/IDSingle";
 // Components
 import Home from "./root/Home";
 import Navigation from "./root/Navigation";
+import Autobook from "./root/Pages/Autobook";
 
 // Main app component, react-router comes from here,
 // and links to all of the sub pages
@@ -73,6 +74,7 @@ class App extends Component {
               path="/booked"
               render={(props) => <GenericList {...props} APILINK="/booked/" />}
             />
+            <Route exact path="/check" component={Autobook} />
           </Switch>
         </div>
       </Router>

src/components/root/Pages/Autobook.js

@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import { CredChecker } from "../common/Forms/CredChecker";
+import FormPage from "../common/Forms/FormPage";
+import { callAPI } from "../../actions/API";
+import { GenericForm } from "../common/Forms/GenericForm";
+import moment from "moment";
+
+export default class Book extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      timeslots: [],
+    };
+  }
+  preBookedData = {
+    submit_time: moment().format("YYYY-MM-DD"),
+    dateTime: "2019-03-11T12:00:00.000Z",
+    migration_status: "Booked",
+    domain: null,
+    username: "",
+    original_server: null,
+    new_server: "",
+    agent_booked: "",
+    booked_time: "",
+    ticket_id: "",
+    brand: "",
+    migration_type: "cPanel",
+    booked_date: "",
+    term_date: "",
+    additional_domains: null,
+    notes: "",
+  };
+
+  componentDidMount() {
+    callAPI.get("/gettimeslots/").then((response) => {
+      this.setState({
+        timeslots: response.data,
+      });
+      // console.log(response.data);
+    });
+  }
+
+  credCallback = (credData) => {
+    console.log(credData);
+    this.setState({
+      data: credData,
+    });
+    console.log(this.state.data);
+    this.preBookedData.domain = this.state.data[0].data.main_domain;
+    this.preBookedData.additional_domains = this.state.data[0].data.other_domains;
+    this.preBookedData.username = this.state.data[1].username;
+    this.preBookedData.original_server = this.state.data[1].hostname;
+    console.log(this.preBookedData);
+  };
+  render() {
+    if (this.state.data) {
+      return (
+        <div>
+          {console.log(this.preBookedData)}
+          {this.state.data[0].data.main_domain ? (
+            <GenericForm
+              data={this.preBookedData}
+              timeslots={this.state.timeslots}
+            />
+          ) : (
+            <div></div>
+          )}
+        </div>
+      );
+    } else {
+      return <CredChecker credCallback={this.credCallback} />;
+    }
+  }
+}

src/components/root/Pages/Book.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import { callAPI } from "../../actions/API";
+import { CredChecker } from "../common/Forms/CredChecker";
 import FormPage from "../common/Forms/FormPage";
 
 // Parent page for the Book component,
@@ -22,6 +23,7 @@ export default class Book extends Component {
       this.setState({
         timeslots: response.data
       })
+      console.log(response.data)
     })
   }
 

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { callAPI } from "../../../actions/API";
+
+export const CredChecker = (props) => {
+
+    const sendit = () => {
+        let values = {
+            hostname: document.getElementById("Host").value,
+            username: document.getElementById("User").value,
+            password: document.getElementById("Pass").value,
+        }
+        callAPI
+        .post('/checkcpanel/', values)
+        .then( (resp) => {
+            props.credCallback([resp, values])
+        })
+        console.log()
+        
+    }
+    return (
+        <div>
+            <div className="row">
+                <div className="col s3"><label htmlFor="Host">Hostname</label><input id="Host" ></input></div>
+                <div className="col s3"><label htmlFor="User">Username</label><input id="User" ></input></div>
+                <div className="col s3"><label htmlFor="Pass">Password</label><input id="Pass" ></input></div>
+            </div>
+            <div className="row"><button className="" onClick={sendit}>Check Deets homie</button></div>
+           
+        </div>
+    )
+}

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Formik, Form, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import moment from "moment";
@@ -10,14 +10,20 @@ import { builfArrayFromObject } from "../../../actions/Error";
 export const GenericForm = (props) => {
   const [respID, setRespID] = useState(0);
   const [error, setError] = useState(0);
+  const [initial, setInitial] = useState({});
+  const [set, setSet] = useState(false);
 
-  const getInitial = () => {
+  useEffect(() => {
-    let initial = {};
+    // console.log(initial);
-    // console.log(migData);
+    // console.log(initial.domain);
+
+    if (!set) {
+      console.log(typeof initial.domain);
       if (props.data) {
-      initial = props.data;
+        setInitial(props.data);
+        setSet(true);
       } else {
-      initial = {
+        setInitial({
           submit_time: moment().format("YYYY-MM-DD"),
           dateTime: "2019-03-11T12:00:00.000Z",
           migration_status: "Booked",
@@ -34,14 +40,21 @@ export const GenericForm = (props) => {
           term_date: "",
           additional_domains: "",
           notes: "",
-      };
+        });
+        setSet(true);
       }
-    return initial;
+    }
+  });
+
+  const getInitial = () => {
+    // return initial;
   };
 
+  console.log(initial);
+  if (set) {
     return (
       <Formik
-      initialValues={getInitial()}
+        initialValues={initial}
         validationSchema={Yup.object().shape({
           domain: Yup.string()
             .matches(
@@ -49,7 +62,9 @@ export const GenericForm = (props) => {
               "Required field"
             )
             .required("Required field"),
-        username: Yup.string().min(2, "Too Short!").required("Required field"),
+          username: Yup.string()
+            .min(2, "Too Short!")
+            .required("Required field"),
           original_server: Yup.string().required("Required field"),
           new_server: Yup.string().required("Required field"),
           agent_booked: Yup.string()
@@ -212,7 +227,9 @@ export const GenericForm = (props) => {
                     onBlur={handleBlur}
                     className={
                       "form-control" +
-                    (errors.ticket_id && touched.ticket_id ? " is-invalid" : "")
+                      (errors.ticket_id && touched.ticket_id
+                        ? " is-invalid"
+                        : "")
                     }
                   />
                   <ErrorMessage
@@ -412,7 +429,9 @@ export const GenericForm = (props) => {
                     onBlur={handleBlur}
                     className={
                       "form-control" +
-                    (errors.term_date && touched.term_date ? " is-invalid" : "")
+                      (errors.term_date && touched.term_date
+                        ? " is-invalid"
+                        : "")
                     }
                   />
                   <ErrorMessage
@@ -468,4 +487,7 @@ export const GenericForm = (props) => {
         )}
       />
     );
+  } else {
+    return <div>Loading</div>;
+  }
 };