creating a table in SideMigrations...hard
This commit is contained in:
parent
cd2897d5a1
commit
9631181cb9
103
package-lock.json
generated
103
package-lock.json
generated
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
44
src/components/Migrations/Table.js
Normal file
44
src/components/Migrations/Table.js
Normal file
@ -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;
|
||||
19
src/components/actions/requests.js
Normal file
19
src/components/actions/requests.js
Normal file
@ -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,
|
||||
});
|
||||
});
|
||||
}
|
||||
12
src/components/root/Dashboard.js
Normal file
12
src/components/root/Dashboard.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
|
||||
export default class Dashboard extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user