Control page displays all users from zendesk and db

static/main/js/control.js

@@ -1,10 +1,10 @@
 "use strict";
 
 // React
-class TableRow extends React.Component {
+class ModelUserTableRow extends React.Component {
   render() {
     return (
-      <tr>
+      <tr className={"table-dark"}>
         <td>
           <a href="#">{this.props.user.name}</a>
         </td>
@@ -23,6 +23,43 @@ class TableRow extends React.Component {
   }
 }
 
+class ModelUserTableRows extends React.Component {
+  render() {
+    return ReactDOM.createPortal(
+      this.props.users.map((user, key) => (
+        <ModelUserTableRow user={user} key={key} />
+      )),
+      document.getElementById("tbody")
+    );
+  }
+}
+
+class ZendeskUserTableRow extends React.Component {
+  render() {
+    return (
+      <tr className={"table-secondary"}>
+        <td>
+          <a href="#">{this.props.user.name}</a>
+        </td>
+        <td>{this.props.user.email}</td>
+        <td>{this.props.user.zendesk_role}</td>
+        <td></td>
+      </tr>
+    );
+  }
+}
+
+class ZendeskUserTableRows extends React.Component {
+  render() {
+    return ReactDOM.createPortal(
+      this.props.users.map((user, key) => (
+        <ZendeskUserTableRow user={user} key={key} />
+      )),
+      document.getElementById("tbody")
+    );
+  }
+}
+
 class TableBody extends React.Component {
   constructor(props) {
     super(props);
@@ -30,6 +67,7 @@ class TableBody extends React.Component {
       users: [],
       engineers: 0,
       light_agents: 0,
+      zendesk_users: [],
     };
   }
 
@@ -39,6 +77,7 @@ class TableBody extends React.Component {
         users: response.data.users,
         engineers: response.data.engineers,
         light_agents: response.data.light_agents,
+        zendesk_users: response.data.zendesk_users,
       });
       let elements = document.querySelectorAll(".info-quantity-value");
       elements[0].innerHTML = this.state.engineers;
@@ -62,9 +101,12 @@ class TableBody extends React.Component {
   }
 
   render() {
-    return this.state.users.map((user, key) => (
-      <TableRow user={user} key={key} />
-    ));
+    return (
+      <tr>
+        <ModelUserTableRows users={this.state.users} />
+        <ZendeskUserTableRows users={this.state.zendesk_users} />
+      </tr>
+    );
   }
 }