cleaned redundant code

README.md

@@ -26,6 +26,7 @@ npm run build
 The development server will start on `http://localhost:3000`
 
 Get css docs here https://materializecss.com/
+react-tables docs here https://react-bootstrap-table.github.io/react-bootstrap-table2/
 
 Default .htaccess file
 

public/main.css

@@ -1,16 +1,20 @@
 a.white-link:link {
-    color: azure;
-    font-size: large;
+  color: azure;
+  font-size: large;
 }
 a.white-link:hover {
-    color: azure;
-    font-size: large;
+  color: azure;
+  font-size: large;
 }
 a.white-link:visited {
-    color: azure;
-    font-size: large;
+  color: azure;
+  font-size: large;
 }
 a.white-link:active {
-    color: azure;
-    font-size: large;
-}
+  color: azure;
+  font-size: large;
+}
+
+.react-bootstrap-table {
+  overflow-x: auto !important;
+}

src/components/root/Home.js

@@ -5,9 +5,6 @@ import Cards from "./Pages/Cards";
 import GenericList from "../root/Pages/GenericList";
 import TimeSlotHelper from "./Pages/TimeSlotHelper";
 
-import { UList } from "../root/common/Functionality/UnorderedList";
-import { builfArrayFromObject } from "../actions/Error";
-
 // Homepage/Cards, first API call here to pass down to cards
 // and the pending migration list, if there's no data, nothing will show
 // This would benefit from an error/notification if there is no data
@@ -66,7 +63,7 @@ export class Home extends Component {
           <div className="col s8 12">
             {/* <p>Current availability for {Date()}</p>
             <UList listItems={builfArrayFromObject(this.state.timeslots)} /> */}
-            {/* <TimeSlotHelper /> */}
+            <TimeSlotHelper />
           </div>
           <div className="row">
             <div className="col s12">

src/components/root/Pages/IDSingle.js

@@ -21,7 +21,7 @@ export default class Reports extends Component {
       match: { params },
     } = this.props;
 
-    const urlID = callAPI
+    callAPI
       .get(`/${params.migrationId}/`)
       .then((response) =>
         this.setState({
@@ -31,14 +31,9 @@ export default class Reports extends Component {
       .catch(function (error) {
         console.log(error);
       });
-    console.log(urlID);
   }
 
   render() {
-    // const urlID = ({ migrationId }) => {
-    //   console.log(migrationId.migrationId);
-
-    // };
     return (
       <div>
         {/* {this.state.migs} */}

src/components/root/Pages/Migrations.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 
 import ReportSingleMigration from "../common/Forms/ReportSingleMigration";
-import { callAPI } from "../../actions/API";
 
 // /migrations in the address bar,
 // Allows the modification of migrations, and also populating a form
@@ -9,35 +8,10 @@ import { callAPI } from "../../actions/API";
 // ReportSingleMigration is the actual form, witha PUT API request on that page.
 
 export default class Migrations extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      migs: [],
-      redirect: false,
-    };
-  }
-
   render() {
-    const onSubmit = async (migrationId, { setSubmitting }) => {
-      callAPI
-        .get(`/${migrationId.migrationId}/`)
-        .then((response) =>
-          this.setState({
-            redirect: true,
-            migs: response.data,
-          })
-        )
-        .catch(function (error) {
-          console.log(error);
-        });
-      setSubmitting(false);
-    };
     return (
       <div>
-        <ReportSingleMigration
-          key={this.state.migs.id}
-          item={this.state.migs}
-        />
+        <ReportSingleMigration />
       </div>
     );
   }

src/components/root/Pages/TimeSlotHelper.js

@@ -14,15 +14,15 @@ class GenericList extends Component {
     super(props);
     this.state = {
       error: false,
-      timeslots: [],
+
       bookedslots: [],
     };
   }
 
   componentDidMount() {
-    callAPI.get("/gettimeslots/").then((response) => {
+    callAPI.get("/bookedslots/").then((response) => {
       this.setState({
-        timeslots: response.data,
+        bookedslots: response.data,
       });
     });
   }
@@ -30,11 +30,7 @@ class GenericList extends Component {
   renderItems() {
     if (!this.state.error) {
       return (
-        <TimeSlots
-          timeSlots={this.state.timeslots}
-          bookedSlots={this.state.bookedslots}
-          key={this.state.timeslots}
-        />
+        <TimeSlots booked={this.state.bookedslots} key={this.state.error} />
       );
     } else {
       return <Error />;
@@ -46,9 +42,3 @@ class GenericList extends Component {
   }
 }
 export default GenericList;
-
-// if (this.state.timeslots > 0) {
-//   else {
-//     return <Error />;
-//   }
-// }

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import moment from "moment";
 import { Col, FormGroup, Row, Container, Label } from "reactstrap";
-import { Formik, Form, Field } from "formik";
+import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
@@ -22,10 +22,8 @@ const InputValidation = Yup.object().shape({
     )
     .required("Please enter a domain"),
   username: Yup.string().min(2, "Too Short!").required("Required"),
-  original_server: Yup.string()
-    .required("Please enter a valid IPv4 or domain"),
-  new_server: Yup.string()
-    .required("Please enter a valid IPv4 or domain"),
+  original_server: Yup.string().required("Please enter a valid IPv4 or domain"),
+  new_server: Yup.string().required("Please enter a valid IPv4 or domain"),
   agent_booked: Yup.string()
     .min(2, "Too short!")
     .required("Please enter your name!"),
@@ -101,7 +99,9 @@ export const CPanelBooking = (timeslots) => {
                     className="has-success"
                   >
                     <option>Select</option>
-                    {timeslots.timeslots.map((slot) => <option>{slot}</option>)}
+                    {timeslots.timeslots.map((slot) => (
+                      <option>{slot}</option>
+                    ))}
                   </Input>
                 </FormGroup>
               </Col>

src/components/root/common/Tables/CompTable.js

@@ -99,6 +99,7 @@ const CompTable = (props) => {
               : null
           }
           target="_blank"
+          rel="noreferrer"
         >
           {" "}
           {cell}{" "}
@@ -118,7 +119,7 @@ const CompTable = (props) => {
     { dataField: "migration_type", text: "Type", sort: true },
     { dataField: "original_server", text: "Original Server", sort: true },
     { dataField: "new_server", text: "New Server", sort: true },
-    { dataField: "notes", text: "Notes", sort: true },
+    // { dataField: "notes", text: "Notes", sort: true },
   ];
 
   useEffect(() => {
@@ -135,6 +136,7 @@ const CompTable = (props) => {
           search
           exportCSV
           key={columns.id}
+          width="100%"
         >
           {(props) => (
             <div>
@@ -153,6 +155,8 @@ const CompTable = (props) => {
                   condensed
                   key={columns.id}
                   keyField="id"
+                  wrapperClasses="table-responsive"
+                  rowClasses="text-nowrap"
                 />
               </div>
               <ExportCSVButton {...props.csvProps} key={columns}>

src/components/root/common/Tables/TimeSlots.js

@@ -1,132 +1,74 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 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";
 
-// notes
-//
+import ToolkitProvider from "react-bootstrap-table2-toolkit";
+
+// Main table for the Historical migrations tab,
+// receives all API information and displays as a table with a searchbox
 
 const TimeSlots = (props) => {
-  const [list, setList, setTimeSlots, setBookedSlots] = 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 setList = await props.setList;
-      setList();
-      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
-  };
+  let date = new Date(); // today
+  let yesterday =
+    date.getDate() - 1 + date.toLocaleDateString("en-AU").slice(2);
+  let today = date.getDate() + date.toLocaleDateString("en-AU").slice(2);
+  let tomorrow = date.getDate() + 1 + date.toLocaleDateString("en-AU").slice(2);
+  let dayafter = date.getDate() + 2 + date.toLocaleDateString("en-AU").slice(2);
+  let dayafter2 =
+    date.getDate() + 3 + date.toLocaleDateString("en-AU").slice(2);
 
   const columns = [
-    { dataField: "bookedSlots", text: "bookedslots", sort: true },
-    { dataField: "timeSlots", text: "timeslots", sort: true },
+    {
+      dataField: "timeslot",
+      text: "timeslot/date",
+    },
+    {
+      dataField: "yesterday",
+      text: yesterday,
+    },
+    {
+      dataField: "today",
+      text: "TODAY",
+      style: { backgroundColor: "#9e9e9e" },
+    },
+    {
+      dataField: "tomorrow",
+      text: tomorrow,
+    },
+    {
+      dataField: "2days",
+      text: dayafter,
+    },
+    {
+      dataField: "3days",
+      text: dayafter2,
+    },
   ];
 
-  useEffect(() => {
-    getListData();
-  }, []);
-
   return (
-    <div>
-      {loading ? (
-        <ToolkitProvider
-          keyField="name"
-          data={list}
-          columns={columns}
-          search
-          exportCSV
-          key={columns.id}
-          keyField="id"
-        >
-          {(props) => (
-            <div>
-              <div className="serSec">
-                <h3 className="hdrOne"></h3>
-                <SearchBar {...props.searchProps} key={columns} />
-              </div>
-
-              <div className="table-responsive">
-                <BootstrapTable
-                  {...props.baseProps}
-                  filter={filterFactory()}
-                  pagination={paginationFactory(options)}
-                  striped
-                  hover
-                  condensed
-                  key={columns.id}
-                />
-              </div>
-              <ExportCSVButton {...props.csvProps} key={columns}>
-                Export CSV!!
-              </ExportCSVButton>
-            </div>
-          )}
-        </ToolkitProvider>
-      ) : (
-        <ReactBootstrap.Spinner animation="border" />
+    <ToolkitProvider
+      data={props.booked}
+      keyField="timeslot"
+      key={columns.text}
+      columns={columns}
+    >
+      {(props) => (
+        <div className="py-4">
+          <div
+            id="datatable-basic_filter"
+            className="dataTables_filter px-4 pb-1"
+          ></div>
+          <BootstrapTable
+            {...props.baseProps}
+            bootstrap4={true}
+            bordered={false}
+            loading={true}
+            striped
+            bordered
+            hover
+          />
+        </div>
       )}
-    </div>
+    </ToolkitProvider>
   );
 };