add stats tab component

src/AdminHome.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import {Tab, Tabs} from 'react-bootstrap';
 import DataToTable from './DataToTable';
+import StatsTab from './StatsTab';
 
 
 export default class AdminHome extends Component {
@@ -11,9 +12,7 @@ export default class AdminHome extends Component {
       refresh: true,
     };
   }
-  onRefresh = () => {
-    this.setState({refresh: !this.state.refresh});
-  }
+
 
   onClose = () => {
     this.setState({
@@ -28,13 +27,13 @@ export default class AdminHome extends Component {
       <div className='AdminHomeContainer'>
         <Tabs defaultActiveKey={1} className='tabsContainer' id='tabs'>
           <Tab eventKey={1} title="Users">
-            <DataToTable tableName='user' token={this.props.token} server={this.props.server} key={this.state.refresh} setRightPanel={this.setRightPanel} onClose = {this.onClose} />
+            <DataToTable tableName='user' token={this.props.token} server={this.props.server} setRightPanel={this.setRightPanel} onClose = {this.onClose} />
           </Tab>
           <Tab eventKey={2} title="Rooms">
-            <DataToTable tableName='room' token={this.props.token} server={this.props.server} key={this.state.refresh} setRightPanel={this.setRightPanel} onClose = {this.onClose} />
+            <DataToTable tableName='room' token={this.props.token} server={this.props.server} setRightPanel={this.setRightPanel} onClose = {this.onClose} />
           </Tab>
           <Tab eventKey={3} title="Stats">
-          Tab 3 content
+            <StatsTab token='this.props.token' server={this.props.server} />
           </Tab>
         </Tabs>
 

src/StatsTab.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import {PageHeader, Panel} from 'react-bootstrap';
+
+
+export default class StatsTab extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+  }
+componentDidMount = () => {
+  this.getStats();
+}
+
+getStats = async () =>{
+  let statsData;
+  const homeServer = this.props.server;
+  //const accessToken = this.props.token;
+
+  try {
+    const statsRequest = await fetch(homeServer+ '_matrix/client/r0/stats', {
+      method: 'GET',
+      headers: {
+      },
+    });
+
+    statsData = JSON.parse(await statsRequest.text());
+  } catch (e) {
+    console.log('error: ' + e);
+    return;
+  }
+  this.setState({
+    statsData: statsData,
+  });
+}
+render() {
+  let usersData;
+  if (this.state.statsData) {
+    usersData=this.state.statsData['users']['local'];
+  }
+  return (
+    <div>
+      <PageHeader>
+        Statistics for Watcha server { this.props.server.replace('https://', '').replace('/', '') }
+      </PageHeader>
+      <Panel bsStyle="primary">
+        <Panel.Heading>
+          <Panel.Title componentClass="h3">Users</Panel.Title>
+        </Panel.Heading>
+        <Panel.Body>
+          <div>Members Users: { usersData }</div>
+        </Panel.Body>
+      </Panel>
+    </div>
+  );
+}
+}