creating a table in SideMigrations...hard

src/components/Migrations/Migrations.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import axios from "axios";
 
 import MigrationSingle from "./MigrationSingle";
-import Error from "./Error";
+import Error from "../actions/Error";
 
 class Migrations extends Component {
   constructor(props) {
@@ -66,7 +66,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>
-              {this.bookedMig()}
+              <p>{this.bookedMig()}</p>
             </div>
             <div className="card-action">
               <a href="/upcoming-migrations">View all...</a>
@@ -77,7 +77,7 @@ class Migrations extends Component {
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title">Waiting Termination</span>
-              {this.waitingMig()}
+              <p>{this.waitingMig()}</p>
             </div>
             <div className="card-action">
               <a href="/upcoming-migrations">View all...</a>
@@ -89,7 +89,7 @@ class Migrations extends Component {
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title">Completed</span>
-              {this.completedMig()}
+              <p>{this.completedMig()}</p>
             </div>
             <div className="card-action">
               <a href="/historical-migrations">View all...</a>

src/components/Migrations/SideMigrations.js

@@ -1,51 +1,60 @@
-import React, { Component } from 'react';
-import axios from 'axios';
+import React, { Component } from "react";
+import axios from "axios";
+import ReactTable from "react-table";
 
-import SingleSide from './SingleSide';
-import Error from './Error';
+import SingleSide from "./SingleSide";
+import Error from "../actions/Error";
+//import Table from "./Table";
 
 class SideMigrations extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            sidemigs: [],
-            error: false,
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidemigs: [],
+      e: false,
+    };
+  }
+  async getMigrationData() {
+    const response = await axios.get(
+      "https://devapi.benjamyn.love/migrations/"
+    );
+    this.setState({
+      sidemigs: response.data,
+      e: false,
+    });
+  }
 
-    componentDidMount() {
-        const url = `https://newsapi.org/v2/${this.props.migs.type}?${this.props.migs.query}&apiKey=f42b951fc64d4ec7b891bcdc23666a34`;
+  componentDidMount() {
+    this.getMigrationData();
+  }
 
-        axios.get(url)
-            .then((response) => {
-                this.setState({
-                    sidemigs: response.data.articles
-                })
-            })
-            .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 />;
+  //    }
+  //  }
 
-    renderItems() {
-        if (!this.state.error) {
-            return this.state.sidemigs.map((item) => (
-                <SingleSide key={item.url} item={item} />
-            ));
-        } else {
-            return <Error />
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                {this.renderItems()}
-            </div>
-        );
-    }
+  render() {
+    const columns = [
+      {
+        Header: "Domain",
+        accessor: "domain",
+      },
+      {
+        Header: "Booked Time",
+        accessor: "booked_time",
+      },
+      {
+        Header: "Status",
+        accessor: "migration_status",
+      },
+    ];
+    return <ReactTable data={this.state.sidemigs} columns={columns} />;
+  }
 }
 
 export default SideMigrations;

src/components/Migrations/SingleSide.js

@@ -1,16 +1,21 @@
-import React from 'react'
+import React from "react";
 
 const SingleSide = ({ item }) => (
-    <div>
-        <div className="divider"></div>
-        <a href={item.url} target="_blank" rel="noreferrer">
-            <div className="section">
-                <h5>{item.source.name}</h5>
-                <p>{item.title}</p>
-            </div>
-        </a>
-
-    </div>
+  <div>
+    <div className="divider"></div>
+    <a href={item.url} target="_blank" rel="noreferrer">
+      <div className="section">
+        <table className="centered striped">
+          <tbody>
+            <td>#</td>
+            <td>{item.domain}</td>
+            <td>{item.booked_time}</td>
+            <td>{item.migration_status}</td>
+          </tbody>
+        </table>
+      </div>
+    </a>
+  </div>
 );
 
 export default SingleSide;

src/components/Migrations/Table.js

@@ -0,0 +1,44 @@
+import DataGrid from 'react-data-grid';
+import 'react-data-grid/dist/react-data-grid.css';
+
+const columns = [
+  { key: 'id', name: 'ID' },
+  { key: 'title', name: 'Title' }
+];
+
+const rows = [
+  { id: 0, title: 'Example' },
+  { id: 1, title: 'Demo' },
+  { id: 3, title: 'Example' },
+  { id: 4, title: 'Demo' },
+  { id: 5, title: 'Example' },
+  { id: 6, title: 'Demo' },
+  { id: 7, title: 'Example' },
+  { id: 8, title: 'Demo' },
+  { id: 9, title: 'Demo' },
+  { id: 10, title: 'Example' },
+  { id: 11, title: 'Demo' },
+  { id: 12, title: 'Example' },
+  { id: 13, title: 'Demo' },
+  { id: 14, title: 'Example' },
+  { id: 15, title: 'Demo' },
+  { id: 16, title: 'Demo' },
+  { id: 17, title: 'Example' },
+  { id: 18, title: 'Demo' },
+  { id: 19, title: 'Example' },
+  { id: 20, title: 'Demo' },
+  { id: 21, title: 'Example' },
+  { id: 22, title: 'Demo' }
+];
+
+function Table() {
+  return (
+    <DataGrid
+      columns={columns}
+      rows={rows}
+      rowsGetter={this.state.sidemigs.domain}
+      rowsCount={20}
+    />
+  );
+}
+export default Table;

src/components/actions/requests.js

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

src/components/root/Dashboard.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+
+export default class Dashboard extends Component {
+    render() {
+        return (
+            <div>
+                
+            </div>
+        )
+    }
+}

src/components/root/Home.js

@@ -1,41 +1,24 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import Migrations from '../Migrations/Migrations';
-import SideMigrations from '../Migrations/SideMigrations';
+import Migrations from "../Migrations/Migrations";
+import SideMigrations from "../Migrations/SideMigrations";
 
 export class Home extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            migs1: {
-                type: 'top-headlines',
-                query: 'migration_status'
-            },
-            migs2: {
-                type: 'top-headlines',
-                query: 'country=us&category=business'
-            },
-            migs3: {
-                type: 'top-headlines',
-                query: 'sources=bbc-news'
-            }
-        };
-    }
-
-    render() {
-        return (
-            <div className="row">
-                <div className="col s8">
-                    <Migrations />
-
-                </div>
-                <div className="col s4">
-                    <SideMigrations migs={this.state.migs3} />
-                </div>
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div className="row">
+        <div className="col s8">
+          <Migrations />
+        </div>
+        <div className="col s4">
+          <h3>Side Migrations goes here</h3>
+        </div>
+      </div>
+    );
+  }
 }
 
-export default Home
+export default Home;
+
+// Broken
+// <SideMigrations />