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;
-}
+}
+
+.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

@@ -1,5 +1,3 @@
-
-
 // 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/containers/Game/Game.tsx

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

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 { ModeratorService } from "api";
+import { AuthGuard, ModGuard} from "components";
+import { SearchForm } from "forms";
 import { ServerDispatch, ServerSelectors, ServerStateLogs } from "store";
 
-import { ModeratorService } from "api";
-
-import { AuthGuard, ModGuard} from "components";
 import LogResults from "./LogResults";
-import { SearchForm } from "forms";
-
 import "./Logs.css";
 
 class Logs extends Component<LogsTypes> {

webclient/src/containers/Room/Room.tsx

@@ -1,15 +1,15 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { withRouter /*, RouteComponentProps */ } from "react-router-dom";
+import { withRouter /*, RouteComponentProps */, generatePath } from "react-router-dom";
+
 import ListItem from "@material-ui/core/ListItem";
 import Paper from "@material-ui/core/Paper";
 
 import { RoomsService } from "api";
 import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard} from "components";
-import { RoomsStateMessages, RoomsStateRooms, RoomsSelectors } from "store";
-
-
+import { RoomsStateMessages, RoomsStateRooms, JoinedRooms, RoomsSelectors } from "store";
+import { RouteEnum } from "types";
 
 import Games from "./Games";
 import Messages from "./Messages";
@@ -19,6 +19,17 @@ import "./Room.css";
 
 // @TODO (3)
 class Room extends Component<any> {
+  componentDidUpdate() {
+    const { joined, match, history } = this.props;
+    let { roomId } = match.params;
+
+    roomId = parseInt(roomId, 0);
+
+    if (!joined.find(({roomId: id}) => id === roomId)) {
+      history.push(generatePath(RouteEnum.SERVER));
+    }
+  }
+
   constructor(props) {
     super(props);
     this.handleRoomSay = this.handleRoomSay.bind(this);
@@ -32,7 +43,7 @@ class Room extends Component<any> {
   }
 
   render() {
-    const { match, rooms} = this.props;
+    const { match, rooms } = this.props;
     const { roomId } = match.params;
     const room = rooms[roomId];
 
@@ -89,11 +100,13 @@ class Room extends Component<any> {
 interface RoomProps {
   messages: RoomsStateMessages;
   rooms: RoomsStateRooms;
+  joined: JoinedRooms;
 }
 
 const mapStateToProps = state => ({
   messages: RoomsSelectors.getMessages(state),
-  rooms: RoomsSelectors.getRooms(state)
+  rooms: RoomsSelectors.getRooms(state),
+  joined: RoomsSelectors.getJoinedRooms(state),
 });
 
-export default withRouter(connect(mapStateToProps)(Room));
+export default withRouter(connect(mapStateToProps)(Room));

webclient/src/containers/index.ts

@@ -1,2 +1,8 @@
 export { default as AppShell } from './App/AppShell';
-export { default as Account } from './Account/Account';
+export { default as Account } from './Account/Account';
+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";

webclient/src/websocket/WebClient.tsx

@@ -5,7 +5,7 @@ import { StatusEnum } from "types";
 import * as roomEvents from "./events/RoomEvents";
 import * as sessionEvents from "./events/SessionEvents";
   
-import { RoomService, SessionService } from "./services";
+import { RoomService, SessionService } from "./persistence";
 import { RoomCommand, SessionCommands } from "./commands";
 
 import ProtoFiles from "./ProtoFiles";
@@ -18,7 +18,7 @@ interface ApplicationCommands {
   session: SessionCommands;
 }
 
-interface ApplicationServices {
+interface ApplicationPersistence {
   room: RoomService;
   session: SessionService;
 }
@@ -32,7 +32,7 @@ export class WebClient {
   private pendingCommands = {};
 
   public commands: ApplicationCommands;
-  public services: ApplicationServices;
+  public persistence: ApplicationPersistence;
 
   public protocolVersion = 14;
   public pb;
@@ -84,7 +84,7 @@ export class WebClient {
       session: new SessionCommands(this),
     };
 
-    this.services = {
+    this.persistence = {
       room: new RoomService(this),
       session: new SessionService(this),
     };
@@ -93,14 +93,14 @@ export class WebClient {
   }
 
   private clearStores() {
-    this.services.room.clearStore();
-    this.services.session.clearStore();
+    this.persistence.room.clearStore();
+    this.persistence.session.clearStore();
   }
 
   public updateStatus(status, description) {
     console.log(`Status: [${status}]: ${description}`);
     this.status = status;
-    this.services.session.updateStatus(status, description);
+    this.persistence.session.updateStatus(status, description);
 
     if (status === StatusEnum.DISCONNECTED) {
       this.clearStores();
@@ -195,7 +195,10 @@ export class WebClient {
         ".Command_Ping.ext" : ping
       });
 
-      this.sendSessionCommand(command, () => this.lastPingPending = false);
+      this.sendSessionCommand(command, () => {
+
+        this.lastPingPending = false;
+      });
     }, this.options.keepalive);
   }
 

webclient/src/websocket/commands/RoomCommands.tsx

@@ -24,4 +24,25 @@ export default class RoomCommands {
 
     this.webClient.sendRoomCommand(roomId, rc);
   }
-}
+
+  leaveRoom(roomId) {
+    var CmdLeaveRoom = this.webClient.pb.Command_LeaveRoom.create();
+
+    var rc = this.webClient.pb.RoomCommand.create({
+      ".Command_LeaveRoom.ext" : CmdLeaveRoom
+    });
+
+    this.webClient.sendRoomCommand(roomId, rc, (raw) => {
+      const { responseCode } = raw;
+
+      switch (responseCode) {
+        case this.webClient.pb.Response.ResponseCode.RespOk:
+          this.webClient.persistence.room.leaveRoom(roomId);
+          break;
+        default:
+          console.log(`Failed to leave Room ${roomId} [${responseCode}] : `, raw);
+      }
+    });
+
+  }
+}

webclient/src/websocket/commands/SessionCommands.tsx

@@ -33,9 +33,9 @@ export default class SessionCommands {
         case this.webClient.pb.Response.ResponseCode.RespOk:
           const { buddyList, ignoreList, userInfo } = resp;
 
-          this.webClient.services.session.updateBuddyList(buddyList);
-          this.webClient.services.session.updateIgnoreList(ignoreList);
-          this.webClient.services.session.updateUser(userInfo);
+          this.webClient.persistence.session.updateBuddyList(buddyList);
+          this.webClient.persistence.session.updateIgnoreList(ignoreList);
+          this.webClient.persistence.session.updateUser(userInfo);
 
           this.webClient.commands.session.listUsers();
           this.webClient.commands.session.listRooms();
@@ -97,7 +97,7 @@ export default class SessionCommands {
       if (response) {
         switch (responseCode) {
           case this.webClient.pb.Response.ResponseCode.RespOk:
-            this.webClient.services.session.updateUsers(response.userList);
+            this.webClient.persistence.session.updateUsers(response.userList);
             break;
           default:
             console.log(`Failed to fetch Server Rooms [${responseCode}] : `, raw);
@@ -135,7 +135,7 @@ export default class SessionCommands {
         case this.webClient.pb.Response.ResponseCode.RespOk:
           const { roomInfo } = raw[".Response_JoinRoom.ext"];
 
-          this.webClient.services.room.joinRoom(roomInfo);
+          this.webClient.persistence.room.joinRoom(roomInfo);
           this.webClient.debug(() => console.log("Join Room: ", roomInfo.name));
           return;
         case this.webClient.pb.Response.ResponseCode.RespNameNotFound:
@@ -217,7 +217,7 @@ export default class SessionCommands {
           const { logMessage } = raw[".Response_ViewLogHistory.ext"];
 
           console.log("Response_ViewLogHistory: ", logMessage)
-          this.webClient.services.session.viewLogs(logMessage)
+          this.webClient.persistence.session.viewLogs(logMessage)
 
           this.webClient.debug(() => console.log("View Log History: ", logMessage));
           return;

webclient/src/websocket/events/RoomEvents/JoinRoom.tsx

@@ -2,6 +2,6 @@ export const JoinRoom = {
   id: ".Event_JoinRoom.ext",
   action: ({ userInfo }, webClient, { roomEvent }) => {
     const { roomId } = roomEvent;
-    webClient.services.room.userJoined(roomId, userInfo);
+    webClient.persistence.room.userJoined(roomId, userInfo);
   }
-};
+};

webclient/src/websocket/events/RoomEvents/LeaveRoom.tsx

@@ -2,6 +2,6 @@ export const LeaveRoom = {
   id: ".Event_LeaveRoom.ext",
   action: ({ name }, webClient, { roomEvent }) => {
     const { roomId } = roomEvent;
-    webClient.services.room.userLeft(roomId, name);
+    webClient.persistence.room.userLeft(roomId, name);
   }
-};
+};

webclient/src/websocket/events/RoomEvents/ListGames.tsx

@@ -2,6 +2,6 @@ export const ListGames = {
   id: ".Event_ListGames.ext",
   action: ({ gameList }, webClient, { roomEvent }) => {
     const { roomId } = roomEvent;
-    webClient.services.room.updateGames(roomId, gameList);
+    webClient.persistence.room.updateGames(roomId, gameList);
   }
-};
+};

webclient/src/websocket/events/RoomEvents/RoomSay.tsx

@@ -2,6 +2,6 @@ export const RoomSay = {
   id: ".Event_RoomSay.ext",
   action: (message, webClient, { roomEvent }) => {
     const { roomId } = roomEvent;
-    webClient.services.room.addMessage(roomId, message);
+    webClient.persistence.room.addMessage(roomId, message);
   }
-};
+};

webclient/src/websocket/events/SessionEvents/AddToList.tsx

@@ -3,11 +3,11 @@ export const AddToList = {
   action: ({ listName, userInfo}, webClient) => {
     switch (listName) {
       case 'buddy': {
-        webClient.services.session.addToBuddyList(userInfo);
+        webClient.persistence.session.addToBuddyList(userInfo);
         break;
       }
       case 'ignore': {
-        webClient.services.session.addToIgnoreList(userInfo);
+        webClient.persistence.session.addToIgnoreList(userInfo);
         break;
       }
       default: {

webclient/src/websocket/events/SessionEvents/ListRooms.tsx

@@ -3,7 +3,7 @@ import * as _ from "lodash";
 export const ListRooms = {
   id: ".Event_ListRooms.ext",
   action: ({ roomList }, webClient) => {
-    webClient.services.room.updateRooms(roomList);
+    webClient.persistence.room.updateRooms(roomList);
 
     if (webClient.options.autojoinrooms) {
       _.each(roomList, ({ autoJoin, roomId }) => {

webclient/src/websocket/events/SessionEvents/RemoveFromList.tsx

@@ -3,11 +3,11 @@ export const RemoveFromList = {
   action: ({ listName, userName }, webClient) => {
     switch (listName) {
       case 'buddy': {
-        webClient.services.session.removeFromBuddyList(userName);
+        webClient.persistence.session.removeFromBuddyList(userName);
         break;
       }
       case 'ignore': {
-        webClient.services.session.removeFromIgnoreList(userName);
+        webClient.persistence.session.removeFromIgnoreList(userName);
         break;
       }
       default: {

webclient/src/websocket/events/SessionEvents/ServerIdentification.tsx

@@ -13,7 +13,7 @@ export const ServerIdentification = {
 
     webClient.resetConnectionvars();
     webClient.updateStatus(StatusEnum.LOGGINGIN, "Logging in...");
-    webClient.services.session.updateInfo(serverName, serverVersion);
+    webClient.persistence.session.updateInfo(serverName, serverVersion);
     webClient.commands.session.login();
   }
 };

webclient/src/websocket/events/SessionEvents/ServerMessage.tsx

@@ -1,6 +1,6 @@
 export const ServerMessage = {
   id: ".Event_ServerMessage.ext",
   action: ({ message }, webClient) => {
-    webClient.services.session.serverMessage(message);
+    webClient.persistence.session.serverMessage(message);
   }
-};
+};

webclient/src/websocket/events/SessionEvents/UserJoined.tsx

@@ -1,6 +1,6 @@
 export const UserJoined = {
   id: ".Event_UserJoined.ext",
   action: ({ userInfo }, webClient) => {
-    webClient.services.session.userJoined(userInfo);
+    webClient.persistence.session.userJoined(userInfo);
   }
-};
+};

webclient/src/websocket/events/SessionEvents/UserLeft.tsx

@@ -1,6 +1,6 @@
 export const UserLeft = {
   id: ".Event_UserLeft.ext",
   action: ({ name }, webClient) => {
-    webClient.services.session.userLeft(name);
+    webClient.persistence.session.userLeft(name);
   }
-};
+};

webclient/src/websocket/index.ts

@@ -3,4 +3,4 @@ export { default as ProtoFiles } from './ProtoFiles';
 
 
 // Export common used services
-export { NormalizeService, RoomService} from "./services";
+export { NormalizeService, RoomService} from "./persistence";

webclient/src/websocket/persistence/RoomService.tsx

@@ -19,6 +19,10 @@ export default class RoomService {
     RoomsDispatch.joinRoom(roomInfo);
   }
 
+  leaveRoom(roomId) {
+    RoomsDispatch.leaveRoom(roomId);
+  }
+
   updateRooms(rooms) {
     RoomsDispatch.updateRooms(rooms);
   }