creating a table in SideMigrations...hard

package-lock.json

@@ -4125,6 +4125,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -12669,6 +12674,14 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-data-grid": {
+      "version": "7.0.0-canary.28",
+      "resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-7.0.0-canary.28.tgz",
+      "integrity": "sha512-q5q7See4dB/C1Uj9RX38j1i7OK5uUM7vG4wfpTj1xccOheJGBJb5BYuTevXlFTMjS3iBEY/73j+t9xFB4GI5ng==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz",
@@ -12774,6 +12787,47 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-json-to-table": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/react-json-to-table/-/react-json-to-table-0.1.7.tgz",
+      "integrity": "sha512-mUo8gFS1VquYKm38hQukcQuFjWRfnnmDaGHWg5quQM4Ib+ogWgQV5kEaouvTyIXBK3LZ7Us9O0uqDa4TJdUOtA==",
+      "requires": {
+        "react": "^16.7.0",
+        "react-dom": "^16.7.0"
+      },
+      "dependencies": {
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        },
+        "react-dom": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "scheduler": "^0.19.1"
+          }
+        },
+        "scheduler": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "react-lazy-load": {
       "version": "3.1.13",
       "resolved": "https://registry.npmjs.org/react-lazy-load/-/react-lazy-load-3.1.13.tgz",
@@ -12785,6 +12839,18 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12901,6 +12967,11 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-table": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.6.1.tgz",
+      "integrity": "sha512-XQyvombPoFbNiDHWAXdxbN78kFpsT1/aJuRSupFfBhO3FJtEVIIq2xbV1NvLzrd1YwfCYRm07ln5OHlfz0SXBg=="
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -13016,6 +13087,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -14794,6 +14874,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -17101,24 +17186,6 @@
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
         }
       }
-    },
-    "zingchart": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/zingchart/-/zingchart-2.9.1.tgz",
-      "integrity": "sha512-LYCiqkzdDn5OxPqShfvUNcTtXxVgZDVqEztGINBb0EA9a1b1TOrLbW/BdJPpeobBahXSxvHYLO6NV/Dbw309Vw=="
-    },
-    "zingchart-constants": {
-      "version": "github:zingchart/zingchart-constants#2cb0b3a55bbae8ee6fb943161fdd5b71618bc95f",
-      "from": "github:zingchart/zingchart-constants#master"
-    },
-    "zingchart-react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/zingchart-react/-/zingchart-react-3.1.0.tgz",
-      "integrity": "sha512-emVB4wEmyR9TlZV1LzksSZ+NwG6voroDqJaMTbOpLF5JDSw/nppf4HWn4rLgQYsdb6uizEp2Pacqj+IXhFZtKg==",
-      "requires": {
-        "zingchart": "^2.9.1",
-        "zingchart-constants": "github:zingchart/zingchart-constants#master"
-      }
     }
   }
 }

package.json

@@ -9,10 +9,15 @@
     "axios": "^0.21.0",
     "axios-react": "^2.0.2",
     "react": "^17.0.1",
+    "react-data-grid": "^7.0.0-canary.28",
     "react-dom": "^17.0.1",
+    "react-json-to-table": "^0.1.7",
     "react-lazy-load": "^3.1.13",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-table": "^7.6.1",
+    "redux": "^4.0.5",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

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

src/components/Migrations/SingleSide.js

@@ -1,15 +1,20 @@
-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>
+        <table className="centered striped">
-                <p>{item.title}</p>
+          <tbody>
+            <td>#</td>
+            <td>{item.domain}</td>
+            <td>{item.booked_time}</td>
+            <td>{item.migration_status}</td>
+          </tbody>
+        </table>
       </div>
     </a>
-
   </div>
 );
 

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 Migrations from "../Migrations/Migrations";
-import SideMigrations from '../Migrations/SideMigrations';
+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} />
+          <h3>Side Migrations goes here</h3>
         </div>
       </div>
-        )
+    );
   }
 }
 
-export default Home
+export default Home;
+
+// Broken
+// <SideMigrations />