now the site works because of the model changes made by Ben

src/components/root/Home.js

@@ -52,7 +52,7 @@ export class Home extends Component {
             <div className="divider"></div>
             <div className="section">
               <div className="col s12">
-                <SideMigrations />
+                <SideMigrations migs={this.state.migs} />
               </div>
             </div>
             <div className="divider"></div>

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

@@ -14,9 +14,10 @@ export const CPanelBooking = () => {
   const onSubmit = async (values, { setSubmitting }) => {
     console.log(values);
     callAPI
-      .post("/")
+      .post("/", values)
       .then(function (response) {
         console.log(JSON.stringify(response.values));
+        // add function here
       })
       .catch(function (error) {
         console.log(error);
@@ -34,7 +35,7 @@ export const CPanelBooking = () => {
                 <Input
                   type="date"
                   name="booked_date"
-                  id="exampleDate"
+                  id="bookedDate"
                   placeholder="date placeholder"
                   mindate={Date()}
                 />
@@ -44,8 +45,11 @@ export const CPanelBooking = () => {
               <FormGroup>
                 <Label for="bookedTime">Timeslot</Label>
                 <Input type="select" name="booked_time" id="bookedTime">
-                  <option>00:00-09:00</option>
+                  <option>Select</option>
-                  <option>09:00-12:00</option>
+                  <option>00:00-03:00</option>
+                  <option>03:00-06:00</option>
+                  <option>06:00-09:00</option>
+                  <option>08:00-12:00</option>
                   <option>12:00-18:00</option>
                   <option>18:00-00:00</option>
                 </Input>
@@ -103,6 +107,7 @@ export const CPanelBooking = () => {
               <FormGroup>
                 <Label for="bookedBrand">Brand</Label>
                 <Input type="select" name="brand" id="bookedBrand">
+                  <option>Select</option>
                   <option>VentraIP</option>
                   <option>Zuver</option>
                   <option>Synergy</option>
@@ -124,6 +129,7 @@ export const CPanelBooking = () => {
               <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>

src/components/root/Pages/Historical.js

@@ -1,9 +1,55 @@
-import React from 'react'
+import React, { Component } from "react";
 
-const Historical = () => {
+import { callAPI } from "../../actions/API";
+import HistoricalSingle from "./Migrations/HistoricalSingle";
+import Error from "../../actions/Error";
+
+class Historical extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidemigs: [],
+      error: false,
+    };
+  }
+  componentDidMount() {
+    callAPI
+      .get("/all")
+      .then((request) => {
+        this.setState({
+          migs: request.data,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
+  renderItems() {
+    if (!this.props.error) {
+      return <HistoricalSingle data={this.state.sidemigs} />;
+    } else {
+      console.log("error");
+      return <Error />;
+    }
+  }
+
+  render() {
     return (
-        <h1>Historical</h1>
+      <div className="row">
+        <div className="divider"></div>
+        <div className="section">
+          <div className="col s12"></div>
+        </div>
+        <div className="divider"></div>
+        <div className="section">
+          <div className="col s12">{this.renderItems()}</div>
+        </div>
+        <div className="divider"></div>
+      </div>
     );
+  }
 }
 
 export default Historical;

src/components/root/Pages/Migrations/HistoricalSingle.js

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from "react";
+import { callAPI } from "../../../actions/API";
+import BootstrapTable from "react-bootstrap-table-next";
+import paginationFactory from "react-bootstrap-table2-paginator";
+import * as ReactBootstrap from "react-bootstrap";
+import filterFactory from "react-bootstrap-table2-filter";
+import ToolkitProvider, {
+  Search,
+  CSVExport,
+} from "react-bootstrap-table2-toolkit";
+
+const HistoricalSingle = () => {
+  const [list, setList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const { SearchBar } = Search;
+  const { ExportCSVButton } = CSVExport;
+  const sizePerPageRenderer = ({
+    options,
+    currSizePerPage,
+    onSizePerPageChange,
+  }) => (
+    <div className="btn-group" role="group">
+      {options.map((option) => {
+        const isSelect = currSizePerPage === `${option.page}`;
+        return (
+          <button
+            key={option.text}
+            type="button"
+            onClick={() => onSizePerPageChange(option.page)}
+            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
+          >
+            {option.text}
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  const getListData = async () => {
+    try {
+      const data = await callAPI.get("/all/");
+      console.log(data);
+      setList(data.data);
+      setLoading(true);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const options = {
+    paginationSize: 4,
+    pageStartIndex: 0,
+    // alwaysShowAllBtns: true, // Always show next and previous button
+    // withFirstAndLast: false, // Hide the going to First and Last page button
+    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
+    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
+    firstPageText: "First",
+    prePageText: "Back",
+    nextPageText: "Next",
+    lastPageText: "Last",
+    nextPageTitle: "First page",
+    prePageTitle: "Pre page",
+    firstPageTitle: "Next page",
+    lastPageTitle: "Last page",
+    showTotal: true,
+    disablePageTitle: true,
+    sizePerPageList: [
+      {
+        text: "50",
+        value: 50,
+      },
+      {
+        text: "100",
+        value: 100,
+      },
+    ],
+    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
+  };
+  const columns = [
+    { dataField: "id", text: "ID", hidden: true },
+    { dataField: "submit_time", text: "Submit Time", sort: true },
+    {
+      dataField: "domain",
+      text: "Domain",
+      sort: true,
+      formatter: (cell, row) => <a href={"reports/" + row.id}> {cell} </a>,
+    },
+    { dataField: "booked_date", text: "Booked Date", sort: true },
+    { dataField: "booked_time", text: "Booked Time", sort: true },
+    { dataField: "original_server", text: "Original Server", sort: true },
+    { dataField: "new_server", text: "New Server", sort: true },
+    { dataField: "username", text: "Username", sort: true },
+    { dataField: "brand", text: "Brand", sort: true },
+    { dataField: "ticket_id", text: "TicketID", sort: true },
+    { dataField: "migration_status", text: "Status", sort: true },
+    { dataField: "agent_booked", text: "Agent initials", sort: true },
+    { dataField: "additional_domains", text: "Additional Domains", sort: true },
+    { dataField: "migration_type", text: "Type", sort: true },
+    { dataField: "term_date", text: "Termination Date", sort: true },
+    { dataField: "notes", text: "Notes", sort: true },
+    {
+      dataField: "report",
+      text: "Show Detailed Report",
+      formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>,
+    },
+  ];
+
+  useEffect(() => {
+    getListData();
+  }, []);
+
+  return (
+    <div className="HistoricalSingle">
+      {loading ? (
+        <ToolkitProvider
+          keyField="name"
+          data={list}
+          columns={columns}
+          search
+          exportCSV
+        >
+          {(props) => (
+            <div>
+              <div className="serSec">
+                <h3 className="hdrOne"></h3>
+                <SearchBar {...props.searchProps} />
+              </div>
+
+              <div className="table-responsive">
+                <BootstrapTable
+                  {...props.baseProps}
+                  filter={filterFactory()}
+                  pagination={paginationFactory(options)}
+                  striped
+                  hover
+                  condensed
+                />
+              </div>
+              <ExportCSVButton {...props.csvProps}>
+                Export CSV!!
+              </ExportCSVButton>
+            </div>
+          )}
+        </ToolkitProvider>
+      ) : (
+        <ReactBootstrap.Spinner animation="border" />
+      )}
+    </div>
+  );
+};
+
+export default HistoricalSingle;

src/components/root/Pages/Migrations/SideMigrations.js

@@ -8,41 +8,17 @@ class SideMigrations extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      sidemigs: [],
+      migs: [],
       e: false,
     };
   }
-  componentDidMount() {
-    callAPI
-      .get("booked/")
-      .then((request) => {
-        this.setState({
-          sidemigs: request.data,
-        });
-      })
-      .catch((e) => {
-        this.setState({
-          error: true,
-        });
-      });
-  }
-
-  renderItems() {
-    if (!this.state.e) {
-      return this.state.sidemigs.map((data) => (
-        <SingleSide key={data.id} data={data} />
-      ));
-    } else {
-      return <Error />;
-    }
-  }
 
   render() {
-    return <SingleSide data={this.state.sidemigs} />;
+    return <SingleSide key={this.state.migs.domain} data={this.state.migs} />;
   }
 }
 
 export default SideMigrations;
 
-//return <div className="row">{this.renderItems()}</div>;
+//return
 //

src/components/root/Pages/Migrations/UpcomingSingle copy.old

@@ -1,135 +0,0 @@
-import React from "react";
-import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
-import { Link } from "react-router-dom";
-
-import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"; // I love this
-
-export const UpcomingSingle = ({ data }) => {
-  const options = {
-    sizePerPageList: [
-      {
-        text: "100",
-        value: 100,
-      },
-      {
-        text: "200",
-        value: 200,
-      },
-      {
-        text: "All",
-        value: data.length,
-      },
-    ],
-    sizePerPage: 30,
-    // pageStartIndex: 0,
-    // prePage: "Prev",
-    // nextPage: "Next",
-    formatter: (cell, row) => <a href={cell}> {cell} </a>,
-  };
-  console.log(data.id);
-
-  return (
-    <div>
-      <BootstrapTable
-        data={data}
-        height="100%"
-        striped
-        hover
-        condensed
-        pagination
-        version="4"
-        options={options}
-      >
-        <TableHeaderColumn
-          isKey
-          dataField="submit_time"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Submit time
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="domain"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Domain
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="booked_time"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Booked time
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="original_server"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Original server
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="new_server"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          New server
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="username"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Username
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="brand"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Brand
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="ticket_id"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Ticket ID
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="migration_status"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Status
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="agent_booked"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Agent
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="additional_domains"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Additional Domains
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="migration_type"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Migration type
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="term_date"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          est. Terminaton Date
-        </TableHeaderColumn>
-        <TableHeaderColumn
-          dataField="migration_cmd"
-          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
-        >
-          Migration CMD
-        </TableHeaderColumn>
-        <TableHeaderColumn dataField="notes">Notes</TableHeaderColumn>
-      </BootstrapTable>
-    </div>
-  );
-  //
-};
-{
-}

src/components/root/Pages/Migrations/UpcomingSingle.js

@@ -38,7 +38,7 @@ const UpcomingSingle = () => {
 
   const getListData = async () => {
     try {
-      const data = await callAPI.get("/all/");
+      const data = await callAPI.get("/pending/");
       console.log(data);
       setList(data.data);
       setLoading(true);
@@ -78,7 +78,13 @@ const UpcomingSingle = () => {
   const columns = [
     { dataField: "id", text: "ID", hidden: true },
     { dataField: "submit_time", text: "Submit Time", sort: true },
-    { dataField: "domain", text: "Domain", sort: true },
+    {
+      dataField: "domain",
+      text: "Domain",
+      sort: true,
+      formatter: (cell, row) => <a href={"reports/" + row.id}> {cell} </a>,
+    },
+    { dataField: "booked_date", text: "Booked Date", sort: true },
     { dataField: "booked_time", text: "Booked Time", sort: true },
     { dataField: "original_server", text: "Original Server", sort: true },
     { dataField: "new_server", text: "New Server", sort: true },
@@ -119,7 +125,7 @@ const UpcomingSingle = () => {
                 <SearchBar {...props.searchProps} />
               </div>
 
-              <div class="table-responsive">
+              <div className="table-responsive">
                 <BootstrapTable
                   {...props.baseProps}
                   filter={filterFactory()}

src/components/root/Pages/Upcoming.js

@@ -3,14 +3,6 @@ import React, { Component } from "react";
 import UpcomingSingle from "./Migrations/UpcomingSingle";
 
 class Upcoming extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sidemigs: [],
-      e: false,
-    };
-  }
-
   render() {
     return (
       <div className="row">
@@ -21,7 +13,7 @@ class Upcoming extends Component {
         <div className="divider"></div>
         <div className="section">
           <div className="col s12">
-            <UpcomingSingle data={this.state.sidemigs} />
+            <UpcomingSingle />
           </div>
         </div>
         <div className="divider"></div>
@@ -31,6 +23,3 @@ class Upcoming extends Component {
 }
 
 export default Upcoming;
-{
-  /* <UpcomingSingle data={this.state.sidemigs} /> */
-}