added timeslots

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 { 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
@@ -17,6 +19,7 @@ export class Home extends Component {
     super(props);
     this.state = {
       migs: [],
+      timeslots: [],
     };
   }
 
@@ -33,6 +36,18 @@ export class Home extends Component {
           error: error,
         });
       });
+    callAPI
+      .get("/timeslots")
+      .then((request) => {
+        this.setState({
+          timeslots: request.data,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: error,
+        });
+      });
   }
 
   render() {
@@ -45,13 +60,13 @@ export class Home extends Component {
             <Cards migs={this.state.migs} />
           </div>
           <div className="col s5">
-            <p>Migrations tracker</p>
+            <p>Current availability for {Date()}</p>
-            {/* <Cards migs={this.state.migs} /> */}
+            <UList listItems={builfArrayFromObject(this.state.timeslots)} />
           </div>
           <div className="divider"></div>
           <div className="section">
             <div className="col s12">
-              <GenericList APILINK="/pending/"/>
+              <GenericList APILINK="/pending/" />
             </div>
           </div>
           <div className="divider"></div>
@@ -61,4 +76,4 @@ export class Home extends Component {
   }
 }
 
-export default Home;
+export default Home;