src/components/App.js

@@ -2,8 +2,9 @@ import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 // Routes
+import Upcoming from "./root/Pages/Upcoming";
 import Migrations from "./root/Pages/Migrations";
-import GenericList from "./root/Pages/GenericList";
+import Historical from "./root/Pages/Historical";
 import Reports from "./root/Pages/Reports";
 import Book from "./root/Pages/Book";
 import IDSingle from "./root/Pages/IDSingle";
@@ -11,7 +12,6 @@ import IDSingle from "./root/Pages/IDSingle";
 import Home from "./root/Home";
 import Navigation from "./root/Navigation";
 
-
 // Main app component, react-router comes from here,
 // and links to all of the sub pages
 
@@ -24,27 +24,11 @@ class App extends Component {
           <Switch>
             <Route exact path="/" component={Home} />
             <Route exact path="/book" component={Book} />
+            <Route exact path="/upcoming-migrations" component={Upcoming} />
             <Route exact path="/migrations" component={Migrations} />
             <Route exact path="/reports" component={Reports} />
+            <Route exact path="/historical-migrations" component={Historical} />
             <Route path="/migrations/:migrationId" component={IDSingle} />
-            <Route exact path="/upcoming-migrations" render={(props) => (
-              <GenericList {...props} APILINK="/pending/" />
-            )} />
-            <Route exact path="/missed" render={(props) => (
-              <GenericList {...props} APILINK="/missed/" />
-            )} />
-            <Route exact path="/completed" render={(props) => (
-              <GenericList {...props} APILINK="/completed/" />
-            )} />
-            <Route exact path="/pending-terminations" render={(props) => (
-              <GenericList {...props} APILINK="/pendingterm/" />
-            )} />
-            <Route exact path="/all-terminations" render={(props) => (
-              <GenericList {...props} APILINK="/waitingterm/" />
-            )} />
-            <Route exact path="/historical-migrations" render={(props) => (
-              <GenericList {...props} APILINK="/all/" />
-            )} />
           </Switch>
         </div>
       </Router>

src/components/root/Pages/Cards.js

@@ -44,7 +44,7 @@ class Cards extends Component {
               {this.waitingMig()}
             </div>
             <div className="card-action">
-              <a href="/pending-terminations">waiting</a>
+              <a href="/upcoming-migrations">waiting</a>
             </div>
           </div>
         </div>
@@ -56,7 +56,7 @@ class Cards extends Component {
               {this.completedMig()}
             </div>
             <div className="card-action">
-              <a href="/completed">complete</a>
+              <a href="/historical-migrations">complete</a>
             </div>
           </div>
         </div>
@@ -67,7 +67,7 @@ class Cards extends Component {
               {this.missedMig()}
             </div>
             <div className="card-action">
-              <a href="/missed">missed</a>
+              <a href="/historical-migrations">missed</a>
             </div>
           </div>
         </div>

src/components/root/Pages/Historical.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+
+import { callAPI } from "../../actions/API";
+import CompTable from "../common/Tables/CompTable";
+import Error from "../../actions/Error";
+
+// Parent page for the /historical-migrations page,
+// is referenced in the react route, and calls the main table using
+// HIstoricalSingle,
+// All migrations are called, and can be searched
+// It actuall does error reporting, using `renderItems`
+
+class Historical extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false,
+    };
+  }
+
+  renderItems() {
+    if (!this.state.error) {
+      return <CompTable data={callAPI('/all/')} />;
+    } else {
+      console.log("error");
+      return <Error />;
+    }
+  }
+
+  render() {
+    return (
+      <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/Reports.js

@@ -1,6 +1,4 @@
 import React, { Component } from "react";
-import { Link } from "react-router-dom";
-
 
 // This page was should hold a way to generate reports/lists of
 // Migrations in varied statuses.
@@ -9,10 +7,7 @@ export default class Reports extends Component {
   render() {
     return (
       <div>
-        <Link to="/missed">Missed migrations</Link><p />
-        <Link to="/pending-terminations">Upcoming Terminations</Link><p />
-        <Link to="/all-terminations">All waiting terminations</Link><p />
-        <Link to="/completed">Completed Migrations</Link><p />
+        <h1>Reports</h1>
       </div>
     );
   }

src/components/root/Pages/Upcoming.js

@@ -3,13 +3,13 @@ import CompTable from "../common/Tables/CompTable";
 import { callAPI } from "../../actions/API"
 import Error from "../../actions/Error";
 
-// Missing parent page,
+// Upcoming 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 {
+class Upcoming extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -18,9 +18,8 @@ class GenericList extends Component {
   }
 
   renderItems() {
-      console.log(this.props.APILINK)
     if (!this.state.error) {
-      return <CompTable data={callAPI(this.props.APILINK)} />;
+      return <CompTable data={callAPI('/pending/')} />;
     } else {
       console.log("error");
       return <Error />;
@@ -44,4 +43,4 @@ class GenericList extends Component {
   }
 }
 
-export default GenericList;
+export default Upcoming;