92 lines
3.0 KiB
JavaScript
92 lines
3.0 KiB
JavaScript
import React, { Component } from "react";
|
|
import axios from "axios"; // npm instal axios
|
|
import { forwardRef } from "react";
|
|
import MaterialTable from "material-table";
|
|
import ArrowDownward from "@material-ui/icons/ArrowDownward";
|
|
import ChevronLeft from "@material-ui/icons/ChevronLeft";
|
|
import ChevronRight from "@material-ui/icons/ChevronRight";
|
|
import Clear from "@material-ui/icons/Clear";
|
|
import FilterList from "@material-ui/icons/FilterList";
|
|
import FirstPage from "@material-ui/icons/FirstPage";
|
|
import LastPage from "@material-ui/icons/LastPage";
|
|
import Search from "@material-ui/icons/Search";
|
|
|
|
const tableIcons = {
|
|
// DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
|
|
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
|
|
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
|
|
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
|
|
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
|
|
PreviousPage: forwardRef((props, ref) => (
|
|
<ChevronLeft {...props} ref={ref} />
|
|
)),
|
|
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
|
|
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
|
|
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
|
|
};
|
|
|
|
export default class MatDataTable extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { person: [] };
|
|
}
|
|
|
|
componentDidMount(prevProps) {
|
|
const url = "http://vps.k-world.me.uk:3001/getUserAccounts";
|
|
axios.get(url, { withCredentials: true }).then((results) => {
|
|
console.log(results);
|
|
console.log(results.data);
|
|
this.setState({ person: results.data });
|
|
|
|
var newArr = results.data.map(function (val) {
|
|
let date = new Date(val.expiaryDate * 1000);
|
|
let d = date.toGMTString();
|
|
return {
|
|
username: val.username,
|
|
streamName: val.streamName,
|
|
streamURL: val.streamURL,
|
|
expiaryDate: d,
|
|
};
|
|
});
|
|
console.log(results.data.results);
|
|
this.setState(
|
|
{
|
|
tableArray: newArr, //set state of the weather5days
|
|
},
|
|
() => {
|
|
console.log(this.state.tableArray);
|
|
console.log("this.tableArray ", this.state.tableArray);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
style={{ maxWidth: "100%", marginLeft: "50px", marginRight: "50px" }}
|
|
>
|
|
<MaterialTable
|
|
icons={tableIcons}
|
|
options={{
|
|
grouping: false,
|
|
}}
|
|
columns={[
|
|
{
|
|
title: "Username",
|
|
field: "username",
|
|
type: "numeric",
|
|
align: "left",
|
|
},
|
|
{ title: "Stream Name", field: "streamName" },
|
|
{ title: "Stream URL", field: "streamURL" },
|
|
{ title: "Expiry Date", field: "expiaryDate", type: "numeric" },
|
|
]}
|
|
data={this.state.tableArray}
|
|
title="Stream Details"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|