Cleanup and refactor (#4361)

* fix three panel layout height issue

* rename websocket/services to websocket/persistence, implement LeaveRoom

* cleanup

* add new line eof

* move route components from /components to /containers

* remove duplicate style

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/api/AuthenticationService.tsx

@@ -3,10 +3,10 @@ import { webClient } from "websocket";
 
 export default class AuthenticationService {
   static connect(options) {
-    webClient.services.session.connectServer(options);
+    webClient.persistence.session.connectServer(options);
   }
   static disconnect() {
-    webClient.services.session.disconnectServer();
+    webClient.persistence.session.disconnectServer();
   }
 
   static isConnected(state) {

webclient/src/api/RoomsService.tsx

@@ -5,6 +5,10 @@ export default class RoomsService {
     webClient.commands.session.joinRoom(roomId);
   }
 
+  static leaveRoom(roomId) {
+    webClient.commands.room.leaveRoom(roomId);
+  }
+
   static roomSay(roomId, message) {
     webClient.commands.room.roomSay(roomId, message);
   }

webclient/src/components/Header/Header.tsx

@@ -6,7 +6,7 @@ import Chip from "@material-ui/core/Chip";
 import Toolbar from "@material-ui/core/Toolbar";
 import * as _ from "lodash";
 
-import { AuthenticationService } from "api";
+import { AuthenticationService, RoomsService } from "api";
 import {  RoomsSelectors, ServerSelectors } from "store";
 import { Room, RouteEnum, User } from "types";
 
@@ -23,6 +23,7 @@ class Header extends Component<HeaderProps> {
       this.props.history.push(generatePath(RouteEnum.ROOM, { roomId }));
     }
   }
+
   render() {
     const { joinedRooms, server, state, user } = this.props;
 
@@ -82,21 +83,27 @@ class Header extends Component<HeaderProps> {
   }
 }
 
-const Rooms = props => (
-  <div className="temp-subnav__rooms">
+const Rooms = props => {
+
+  const onLeaveRoom = (event, roomId) => {
+    event.preventDefault();
+    RoomsService.leaveRoom(roomId);
+  };
+
+  return <div className="temp-subnav__rooms">
     <span>Rooms: </span>
     {
       _.reduce(props.rooms, (rooms, { name, roomId}) => {
         rooms.push(
           <NavLink to={generatePath(RouteEnum.ROOM, { roomId })} className="temp-chip" key={roomId}>
-            <Chip label={name} color="primary" />
+            <Chip label={name} color="primary" onDelete={(event) => onLeaveRoom(event, roomId)} />
           </NavLink>
         );
         return rooms;
       }, [])
     }
   </div>
-)
+};
 
 interface HeaderProps {
   state: number;

webclient/src/components/ThreePaneLayout/ThreePaneLayout.css

@@ -22,12 +22,13 @@
   flex-shrink: 0;
 }
 
-.three-pane-layout .grid-main__top.fixedHeight {
-  height: 50%;
-}
-
 .three-pane-layout .grid-main__bottom {
   height: 100%;
   width: 100%;
   flex-shrink: 1;
-}
\ No newline at end of file
+}
+
+.three-pane-layout .grid-main__top.fixedHeight,
+.three-pane-layout .grid-main__bottom.fixedHeight {
+  height: 50%;
+}

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -18,7 +18,10 @@ class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
             }>
               {this.props.top}
             </Grid>
-            <Grid item className="grid-main__bottom">
+            <Grid item className={
+              "grid-main__bottom"
+              + (this.props.fixedHeight ? " fixedHeight" : "")
+            }>
               {this.props.bottom}
             </Grid>
           </Grid>

webclient/src/components/index.ts

-
-
 // Common components
 export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
@@ -11,14 +9,6 @@ export { default as CheckboxField } from './CheckboxField/CheckboxField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/ScrollToBottomOnChanges';
 
-// Major components
-export { default as Game } from './Game/Game';
-export { default as Decks } from './Decks/Decks';
-export { default as Room } from "./Room/Room";
-export { default as Player } from "./Player/Player";
-export { default as Server } from "./Server/Server";
-export { default as Logs } from "./Logs/Logs";
-
 // Guards
 export { default as AuthGuard } from './Guard/AuthGuard';
 export { default as ModGuard} from './Guard/ModGuard';

webclient/src/containers/App/AppShellRoutes.tsx

@@ -2,14 +2,15 @@
 import { Redirect, Route, Switch } from "react-router-dom";
 
 import { RouteEnum } from "types";
-import { Account } from "containers";
-import { 
+import {
+  Account,
   Decks, 
   Game, 
   Player, 
   Room, 
   Server, 
-  Logs } from "components";
+  Logs
+} from "containers";
 
 const Routes = () => (
   <div className="AppShell-routes overflow-scroll">

webclient/src/components/Game/Game.tsx → webclient/src/containers/Game/Game.tsx

 // eslint-disable-next-line
 import React, { Component } from "react";
 
-import { AuthGuard } from "../index";
+import { AuthGuard } from "components";
 
 import "./Game.css";
 

webclient/src/components/Logs/Logs.tsx → webclient/src/containers/Logs/Logs.tsx

@@ -4,14 +4,12 @@ import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import * as _ from "lodash";
 
-import { ServerDispatch, ServerSelectors, ServerStateLogs } from "store";
-
 import { ModeratorService } from "api";
-
 import { AuthGuard, ModGuard} from "components";
-import LogResults from "./LogResults";
 import { SearchForm } from "forms";
+import { ServerDispatch, ServerSelectors, ServerStateLogs } from "store";
 
+import LogResults from "./LogResults";
 import "./Logs.css";
 
 class Logs extends Component<LogsTypes> {