This may be the last commit from this machine

src/components/Migrations/Migrations.js

@@ -2,40 +2,41 @@ import React, { Component } from "react";
 import axios from "axios";
 
 import MigrationSingle from "./MigrationSingle";
+import { getMigrations } from "../actions/requests";
 import Error from "../actions/Error";
 
 class Migrations extends Component {
-  constructor(props) {
+  //  constructor(props) {
-    super(props);
+  //    super(props);
-    this.state = {
+  //    this.state = {
-      migs: [],
+  //      migs: [],
-      migs1: [],
+  //      migs1: [],
-      error: false,
+  //      error: false,
-    };
+  //    };
-  }
+  //  }
-
+  //
-  componentDidMount() {
+  //  componentDidMount() {
-    const url = `https://devapi.benjamyn.love/migrations/`;
+  //    const url = `https://devapi.benjamyn.love/migrations/`;
-
+  //
-    axios
+  //    axios
-      .get(url)
+  //      .get(url)
-      .then((response) => {
+  //      .then((response) => {
-        this.setState({
+  //        this.setState({
-          migs: response.data,
+  //          migs: response.data,
-          migs1: response.data.migration_status,
+  //          migs1: response.data.migration_status,
-        });
+  //        });
-      })
+  //      })
-
+  //
-      .catch((error) => {
+  //      .catch((error) => {
-        this.setState({
+  //        this.setState({
-          error: true,
+  //          error: true,
-        });
+  //        });
-      });
+  //      });
-  }
+  //  }
 
   renderItems() {
-    if (!this.state.error) {
+    if (!this.props.error) {
-      return this.state.migs.map((item) => (
+      return this.props.migs.map((item) => (
         <MigrationSingle key={item.id} item={item} />
       ));
     } else {
@@ -44,17 +45,17 @@ class Migrations extends Component {
   }
 
   bookedMig() {
-    return this.state.migs.filter(
+    return this.props.migs.filter(
       (booked) => booked.migration_status === "Booked"
     ).length;
   }
   waitingMig() {
-    return this.state.migs.filter(
+    return this.props.migs.filter(
       (waiting) => waiting.migration_status === "Waiting Termination"
     ).length;
   }
   completedMig() {
-    return this.state.migs.filter(
+    return this.props.migs.filter(
       (complete) => complete.migration_status === "Completed"
     ).length;
   }
@@ -66,7 +67,7 @@ class Migrations extends Component {
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title">Booked Migrations</span>
-              <p>{this.bookedMig()}</p>
+              {this.bookedMig()}
             </div>
             <div className="card-action">
               <a href="/upcoming-migrations">View all...</a>
@@ -77,7 +78,8 @@ class Migrations extends Component {
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title">Waiting Termination</span>
-              <p>{this.waitingMig()}</p>
+              <p></p>
+              {this.waitingMig()}
             </div>
             <div className="card-action">
               <a href="/upcoming-migrations">View all...</a>
@@ -89,7 +91,7 @@ class Migrations extends Component {
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title">Completed</span>
-              <p>{this.completedMig()}</p>
+              {this.completedMig()}
             </div>
             <div className="card-action">
               <a href="/historical-migrations">View all...</a>

src/components/Migrations/SideMigrations.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import axios from "axios";
 import ReactTable from "react-table";
 
+import { callAPI } from "../../services/API";
 import SingleSide from "./SingleSide";
 import Error from "../actions/Error";
 //import Table from "./Table";
@@ -14,30 +15,21 @@ class SideMigrations extends Component {
       e: false,
     };
   }
-  async getMigrationData() {
-    const response = await axios.get(
-      "https://devapi.benjamyn.love/migrations/"
-    );
-    this.setState({
-      sidemigs: response.data,
-      e: false,
-    });
-  }
-
   componentDidMount() {
-    this.getMigrationData();
+    callAPI
+      .get()
+      .then((request) => {
+        this.setState({
+          sidemigs: request.data,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: true,
+        });
+      });
   }
 
-  //  renderItems() {
-  //    if (!this.state.e) {
-  //      return this.state.sidemigs.map((item) => (
-  //        <SingleSide key={item.id} item={item} />
-  //      ));
-  //    } else {
-  //      return <Error />;
-  //    }
-  //  }
-
   render() {
     const columns = [
       {

src/components/actions/requests.js

@@ -1,19 +1,18 @@
-import axios from 'axios';
+import axios from "axios";
-
-import Error from './Error';
 
 const url = `https://devapi.benjamyn.love/migrations/`;
 
 export const getMigrations = () => (dispatch) => {
-    axios.get(url)
+  axios
+    .get(url)
     .then((response) => {
-        dispatch({
+      dispatch({
-          migs: response.data,
+        migs: response.data,
-          });
-      })
-      .catch((error) => {
-        this.setState({
-          error: true,
-        });
       });
-    }
+    })
+    .catch((error) => {
+      this.setState({
+        error: true,
+      });
+    });
+};

src/components/root/Home.js

@@ -1,17 +1,45 @@
 import React, { Component } from "react";
 
+import { getMigrations } from "../actions/requests";
+import { callAPI } from "../../services/API";
 import Migrations from "../Migrations/Migrations";
+import Error from "../actions/Error";
 import SideMigrations from "../Migrations/SideMigrations";
 
 export class Home extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      migs: [],
+      error: false,
+    };
+  }
+
+  componentDidMount() {
+    callAPI
+      .get()
+      .then((request) => {
+        this.setState({
+          migs: request.data,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
   render() {
     return (
       <div className="row">
         <div className="col s8">
-          <Migrations />
+          <Migrations migs={this.state.migs} />
         </div>
         <div className="col s4">
-          <h3>Side Migrations goes here</h3>
+          <h3>
+            Side Migrations goes here
+            <SideMigrations migs={this.state.migs} />
+          </h3>
         </div>
       </div>
     );
@@ -21,4 +49,4 @@ export class Home extends Component {
 export default Home;
 
 // Broken
-// <SideMigrations />
+// <SideMigrations migs={this.state.migs} />

src/services/API.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+export const callAPI = axios.create({
+    baseURL: 'https://devapi.benjamyn.love/migrations/'
+})
+
+export default callAPI