working stream table

client/src/components/About.jsx

@@ -1,12 +1,10 @@
 import React from "react";
 import MTable from "./accountTable";
 
-
 function About() {
   return (
     <div style={{ padding: "30px" }}>
-      <h1>Material Table Example</h1>
-      <MTable />
+      <MTable/>
     </div>
   );
 }

client/src/components/accountTable.jsx

@@ -1,42 +1,88 @@
-import { useState } from "react";
+import React, { Component } from "react";
+import axios from "axios"; // npm instal axios
+import { forwardRef } from "react";
 import MaterialTable from "material-table";
-import { data } from "../data";
+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 MTable = () => {
-//     let res
-//   try {
-//     res = axios.get("/getUserAccounts", {
-//       data: {
-//         username: "Duly",
-//       },
-//     });
-//   } catch (error) {
-//     console.log(error);
-//   }
-  const [selectedRow, setSelectedRow] = useState(null);
-  const columns = [
-    { title: "UserName", field: "username" },
-    { title: "Stream Name", field: "streamName" },
-    { title: "Stream URL", field: "streamURL" },
-  ];
-  return (
-    <div style={{ maxWidth: "100%" }}>
-      <MaterialTable
-        columns={columns}
-        data={res}
-        title="Books Directory"
-        onRowClick={(evt, selectedRow) =>
-          setSelectedRow(selectedRow.tableData.id)
+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 user = "Karl";
+    const url = `/getUserAccounts?userName=${user}`;
+    axios.get(url).then((results) => {
+      console.log(results);
+      console.log(results.data);
+      this.setState({ person: results.data });
+
+      var newArr = results.data.map(function (val) {
+        return {
+          username: val.username,
+          streamName: val.streamName,
+          streamURL: val.streamURL,
+          expiaryDate: val.expiaryDate
+        };
+      });
+      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={{
-          search: false,
-          rowStyle: (rowData) => ({
-            backgroundColor:
-              selectedRow === rowData.tableData.id ? "#67aeae" : "#FFF",
-          }),
+            grouping: false,
           }}
+          columns={[
+            {
+              title: "userName",
+              field: "username",
+              type: "numeric",
+              align: "left",
+            },
+            { title: "streamName", field: "streamName" },
+            { title: "streamURL", field: "streamURL" },
+            { title: "Expires", field: "expiaryDate", type: "numeric" },
+          ]}
+          data={this.state.tableArray}
+          title="Stream Details"
         />
       </div>
     );
-};
-export default MTable;
+  }
+}

lib/getUser.js

@@ -4,7 +4,8 @@ function getUserAccounts(user) {
     let data = sql.query(`SELECT
       userAccounts.username,
       streams.streamName,
-      streams.streamURL
+      streams.streamURL,
+      userAccounts.expiaryDate
     FROM users
       INNER JOIN userAccounts
         ON users.idusers = userAccounts.userID