adding in the timeslot page, that shows available slots over the next few days, possible rework on the TimeSlot.js page as she is fucked

src/components/root/Home.js

@@ -3,6 +3,8 @@ import React, { Component } from "react";
 import { callAPI } from "../actions/API";
 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";
 
@@ -23,6 +25,19 @@ export class Home extends Component {
     };
   }
 
+  getTimeslot(days) {
+    callAPI
+      .get("/timeslots/?days=" + days)
+      .then((request) => {
+        return request.data;
+      })
+      .catch((error) => {
+        this.setState({
+          error: error,
+        });
+      });
+  }
+
   componentDidMount() {
     callAPI
       .get("/")
@@ -36,40 +51,28 @@ export class Home extends Component {
           error: error,
         });
       });
-    callAPI
-      .get("/timeslots")
-      .then((request) => {
-        this.setState({
-          timeslots: request.data,
-        });
-      })
-      .catch((error) => {
-        this.setState({
-          error: error,
-        });
-      });
   }
 
   render() {
     return (
-      <div className="row">
-        <div className="divider"></div>
-
-        <div className="section">
-          <div className="col s7">
+      <div className="container">
+        <div className="row">
+          <div className="col s12"></div>
+        </div>
+        <div className="row">
+          <div className="col s4 18">
             <Cards migs={this.state.migs} />
           </div>
-          <div className="col s5">
-            <p>Current availability for {Date()}</p>
-            <UList listItems={builfArrayFromObject(this.state.timeslots)} />
+          <div className="col s8 12">
+            {/* <p>Current availability for {Date()}</p>
+            <UList listItems={builfArrayFromObject(this.state.timeslots)} /> */}
+            {/* <TimeSlotHelper /> */}
           </div>
-          <div className="divider"></div>
-          <div className="section">
+          <div className="row">
             <div className="col s12">
               <GenericList APILINK="/pending/" />
             </div>
           </div>
-          <div className="divider"></div>
         </div>
       </div>
     );

src/components/root/Pages/TimeSlotHelper.js

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import TimeSlots from "../common/Tables/TimeSlots";
+import { callAPI } from "../../actions/API";
+import { Error } from "../../actions/Error";
+
+// Missing parent page,
+// Most of the good stuff is happening in UpcomingSingle, which does the
+// main rendering of the table,
+// may want to eventually do the API call here, to re-use the table
+// instead of duplicating it.
+
+class GenericList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false,
+      timeslots: [],
+      bookedslots: [],
+    };
+  }
+
+  componentDidMount() {
+    callAPI.get("/gettimeslots/").then((response) => {
+      this.setState({
+        timeslots: response.data,
+      });
+    });
+  }
+
+  renderItems() {
+    if (!this.state.error) {
+      return (
+        <TimeSlots
+          timeSlots={this.state.timeslots}
+          bookedSlots={this.state.bookedslots}
+          key={this.state.timeslots}
+        />
+      );
+    } else {
+      return <Error />;
+    }
+  }
+
+  render() {
+    return <div>{this.renderItems()}</div>;
+  }
+}
+export default GenericList;
+
+// if (this.state.timeslots > 0) {
+//   else {
+//     return <Error />;
+//   }
+// }

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

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } 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
+//
+
+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
+  };
+
+  const columns = [
+    { dataField: "bookedSlots", text: "bookedslots", sort: true },
+    { dataField: "timeSlots", text: "timeslots", sort: true },
+  ];
+
+  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" />
+      )}
+    </div>
+  );
+};
+
+export default TimeSlots;