Added state and status to form

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

@@ -1,15 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { Col, FormGroup, Row, Container, Label } from "reactstrap";
 import { Formik, Form } from "formik";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
+import Msgbox from "../../../actions/Msgbox";
 
 // Main form element for the UUID linking Migrations page,
 // Contians the PUT request to modify data from the API
 
 const ReportSingleMigration = ({ item }) => {
+  const [respID, setRespID] = useState(0);
+  const [error, setError] = useState(0);
+
   const initialValues = {
+    migration_status: item.migration_status,
     submit_time: item.submit_time,
     domain: item.domain,
     booked_date: item.booked_date,
@@ -31,9 +36,11 @@ const ReportSingleMigration = ({ item }) => {
       .put(`/${item.id}/`, values)
       .then(function (response) {
         console.log(JSON.stringify(response.values));
+        setRespID(response.data.ticket_id);
       })
       .catch(function (error) {
         console.log(error);
+        setError(error);
       });
     setSubmitting(false);
   };
@@ -42,6 +49,22 @@ const ReportSingleMigration = ({ item }) => {
       <Form>
         <Container>
           <Row>
+            <Col>
+              <FormGroup>
+                <Label for={item.migration_status}>Status</Label>
+                <Input
+                  type="select"
+                  name="migration_status"
+                  id="migration_status"
+                >
+                  <option>Status</option>
+                  <option>Booked</option>
+                  <option>Waiting Termination</option>
+                  <option>Complete</option>
+                  <option>Cancelled</option>
+                </Input>
+              </FormGroup>
+            </Col>
             <Col>
               <FormGroup>
                 <Label for={item.booked_date}>Date</Label>
@@ -205,6 +228,8 @@ const ReportSingleMigration = ({ item }) => {
           </FormGroup>
           <Submit withSpinner>Update</Submit>
         </Container>
+        {respID ? <Msgbox msg={respID}></Msgbox> : null}
+        {error ? <Msgbox error={error}></Msgbox> : null}
       </Form>
     </Formik>
   );