improve rightPanel behavior

src/AdminHome.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {Tab, Tabs} from 'react-bootstrap';
 import DataToTable from './DataToTable';
 import TableToolBar from './TableToolBar';
-import CreateUserRightPanel from './CreateUserRightPanel';
+import CollapsableRightPanel from './CollapsableRightPanel';
 
 
 export default class AdminHome extends Component {
@@ -16,23 +16,40 @@ export default class AdminHome extends Component {
   onRefresh = () => {
     this.setState({refresh: !this.state.refresh});
   }
+
+  onClose = () => {
+    this.setState({
+      rightPanel: false,
+    });
+  }
+
+  setRightPanel = (panel) =>{
+    this.setState({
+      rightPanel: panel,
+    });
+  }
   render() {
+    let panel;
+    if (this.state.rightPanel) {
+      panel = <CollapsableRightPanel
+        panelType={this.state.rightPanel['type']} data={this.state.rightPanel['data']} onClose={this.onClose} />;
+    }
     return (
 
-      <div>
-        <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
-          <TableToolBar refresh={this.onRefresh}></TableToolBar>
+      <div className='AdminHomeContainer'>
+        <Tabs defaultActiveKey={1} className='tabsContainer' id='tabs'>
+          <TableToolBar refresh={this.onRefresh} setRightPanel={this.setRightPanel} onClose = {this.onClose}></TableToolBar>
           <Tab eventKey={1} title="Users">
-            <DataToTable tableName='user' token={this.props.token} server={this.props.server} key={this.state.refresh} />
+            <DataToTable tableName='user' token={this.props.token} server={this.props.server} key={this.state.refresh} 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} />
+            <DataToTable tableName='room' token={this.props.token} server={this.props.server} key={this.state.refresh} setRightPanel={this.setRightPanel} onClose = {this.onClose} />
           </Tab>
           <Tab eventKey={3} title="Stats">
           Tab 3 content
           </Tab>
         </Tabs>
-        <CreateUserRightPanel server={this.props.server} token={this.props.token} />
+        { panel }
       </div>
     );
   }

src/Buttons/CreateUserButton.js

@@ -9,12 +9,10 @@ export default class CreateUserButton extends Component {
 
     };
   }
-  onClick = () =>{
 
-  }
   render() {
     return (
-      <Button onClick = {this.onClick} >Create User</Button>
+      <Button onClick = {this.props.onClick} >Create User</Button>
     );
   }
 }

src/CollapsableRightPanel.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import RoomRightPanel from './RoomRightPanel.js';
-import UserRightPanel from './UserRightPanel.js';
+import RoomRightPanel from './RoomRightPanel';
+import UserRightPanel from './UserRightPanel';
+import CreateUserRightPanel from './CreateUserRightPanel';
 
 export default class CollapsableRightPanel extends Component {
   constructor(props) {
@@ -13,21 +14,25 @@ export default class CollapsableRightPanel extends Component {
 
 
   onClose = () => {
-    this.props.close();
+    this.props.onClose();
   }
 
 
   getPanel = () => {
     let panel;
-    switch (this.props.tableName) {
+    console.log(this.props.panelType);
+    switch (this.props.panelType) {
       case 'user':
-        panel = <UserRightPanel data={this.props.data} close={this.onClose} />;
+        panel = <UserRightPanel data={this.props.data} onClose={this.onClose} />;
         break;
       case 'room':
-        panel = <RoomRightPanel data={this.props.data} close={this.onClose} />;
+        panel = <RoomRightPanel data={this.props.data} onClose={this.onClose} />;
+        break;
+      case 'createUser':
+        panel = <CreateUserRightPanel data={this.props.data} onClose={this.onClose} />;
         break;
       default:
-        panel=<UserRightPanel data={this.props.data} close={this.onClose} />;
+        panel=<UserRightPanel data={this.props.data} onClose={this.onClose} />;
     }
     return panel;
   }

src/CreateUserRightPanel.js

@@ -12,7 +12,6 @@ export default class CreateUserRightPanel extends Component {
   createUser = async () =>{
     const homeServer = this.props.server;
     const accessToken = this.props.token;
-    console.log(this.state.userIdValue);
 
     try {
       const userRequest = await fetch(homeServer+ '_matrix/client/r0/watcha_register', {
@@ -22,8 +21,10 @@ export default class CreateUserRightPanel extends Component {
           'Accept': 'application/json',
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({user: this.state.userIdValue, full_name: this.state.firstNameValue+' '+this.state.lastNameValue,
-          email: this.state.emailValue, admin: false}),
+        body: JSON.stringify(
+            {user: this.state.userIdValue, full_name: this.state.firstNameValue+' '+this.state.lastNameValue,
+              email: this.state.emailValue, admin: false},
+        ),
       });
     } catch (e) {
       console.log('error: ' + e);
@@ -43,6 +44,9 @@ export default class CreateUserRightPanel extends Component {
   isUserId = (query) => {
     return true;
   }
+  onClose = () => {
+    this.props.onClose();
+  }
 
   onEmailChange = (ev) => {
     this.setState({emailValue: ev.target.value});
@@ -76,7 +80,7 @@ export default class CreateUserRightPanel extends Component {
     return (
 
       <div>
-        <Collapse in={'close'} dimension='width' timeout={0}>
+        <Collapse in={true} dimension='width' timeout={0}>
           <div>
 
             <Panel className='panel'>

src/DataToRow.js

@@ -14,7 +14,6 @@ export default class dataToRow extends Component {
   onSelect = () => {
     this.props.onUserSelected(this.props.data);
     this.setState({update: !this.state.update});
-
   }
 
   dataToRow = () => {

src/DataToTable.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import Datatorow from './DataToRow';
 import {Table} from 'react-bootstrap';
-import CollapsableRightPanel from './CollapsableRightPanel';
 
 const tableType = {
   'user': {'primaryKey': 'User Id', 'apiAdress': '_matrix/client/r0/watchauserlist',
@@ -55,6 +54,7 @@ export default class DataToTable extends Component {
 
   onUserSelected = (data) => {
     this.setState({ selected: data });
+    this.props.setRightPanel({type: this.props.tableName, data: data});
   };
 
   escFunction = (event) => {
@@ -249,7 +249,6 @@ export default class DataToTable extends Component {
             { dataToRow }
           </tbody>
         </Table>
-        <CollapsableRightPanel className='collapsedRightPanel' data={this.state.selected} close={this.closeRightPanel} tableName={this.props.tableName} />
       </div>
     );
   }

src/RoomRightPanel.js

@@ -15,7 +15,7 @@ export default class RoomRightPanel extends Component {
 
 
   onClose = () => {
-    this.props.close();
+    this.props.onClose();
   }
 
 

src/TableToolBar.js

@@ -10,12 +10,18 @@ export default class TableToolBar extends Component {
 
     };
   }
+  createUser = () =>{
+    const panel = {'type': 'createUser'};
+    console.log(panel);
+    this.props.setRightPanel(panel);
+  }
+
 
   render() {
     return (
       <div className='TableToolBar'>
         <RefreshButton onClick={this.props.refresh} />
-        <CreateUserButton />
+        <CreateUserButton onClick={this.createUser} />
       </div>
     );
   }

src/User.css

@@ -7,9 +7,6 @@
 /*collapsedRightPanel*/
 .panel{
   height: 100vh;
-  position: fixed;
-  top: 0px;
-  right: 0px;
   width: 30vw;
 }
 
@@ -58,3 +55,11 @@ display:flex;
 .table-responsive{
   max-height: 92vh;
 }
+
+.AdminHomeContainer{
+  display: flex;
+}
+
+.tabsContainer{
+  flex-grow: 1;
+}

src/UserRightPanel.js

@@ -47,7 +47,7 @@ export default class UserRightPanel extends Component {
   }
 
   onClose = () => {
-    this.props.close();
+    this.props.onClose();
   }
 
   onEmailValidate = () => {