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/containers/Server/Rooms.css

@@ -0,0 +1,26 @@
+.rooms {
+}
+
+.rooms-header,
+.room {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid black;
+}
+
+.rooms-header__label,
+.room__detail {
+  width: 10%;
+  flex-grow: 0;
+}
+
+.rooms-header__label.name,
+.room__detail.name {
+  width: 20%;
+}
+
+.rooms-header__label.description,
+.room__detail.description {
+  width: 30%;
+  flex-grow: 1;
+}

webclient/src/containers/Server/Rooms.tsx

@@ -0,0 +1,62 @@
+// eslint-disable-next-line
+import React from "react";
+import { generatePath } from "react-router-dom";
+import * as _ from "lodash";
+
+import Button from "@material-ui/core/Button";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+
+
+import { RoomsService } from "api";
+import { RouteEnum } from "types";
+
+import "./Rooms.css";
+
+const Rooms = ({ rooms, joinedRooms, history }) => {
+  function onClick(roomId) {
+    if (_.find(joinedRooms, room => room.roomId === roomId)) {
+      history.push(generatePath(RouteEnum.ROOM, { roomId }));
+    } else {
+      RoomsService.joinRoom(roomId);
+    }
+  }
+
+  return (
+    <div className="rooms">
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+            <TableCell>Permissions</TableCell>
+            <TableCell>Players</TableCell>
+            <TableCell>Games</TableCell>
+            <TableCell></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          { _.map(rooms, ({ description, gameCount, name, permissionlevel, playerCount, roomId }) => (
+            <TableRow key={roomId}>
+              <TableCell>{name}</TableCell>
+              <TableCell>{description}</TableCell>
+              <TableCell>{permissionlevel}</TableCell>
+              <TableCell>{playerCount}</TableCell>
+              <TableCell>{gameCount}</TableCell>
+              <TableCell>
+                <Button size="small" color="primary" variant="contained" onClick={() => onClick(roomId)}>
+                  Join
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default Rooms;

webclient/src/containers/Server/Server.css

@@ -0,0 +1,61 @@
+.server,
+.server-rooms,
+.server-rooms__side {
+  height: 100%;
+}
+
+.server {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.server .form-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.server-connect {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.server-connect__form,
+.server-connect__description {
+  width: 100%;
+  max-width: 300px;
+}
+
+.server-connect__form {
+  margin: 50px 0;
+}
+
+.server-connect__description {
+  text-align: center;
+  margin: 20px 0;
+  padding: 20px;
+}
+
+.serverRoomWrapper {
+  height: 100%;
+}
+
+.serverMessage {
+  height: 100%;
+  padding: 20px;
+  margin-bottom: 2px;
+}
+
+.server-rooms {
+  width: 100%;
+}
+
+.server-rooms__side-label {
+  position: sticky;
+  top: 0;
+  padding: 10px;
+  background: white;
+  z-index: 1;
+}

webclient/src/containers/Server/Server.tsx

@@ -0,0 +1,157 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+
+import Button from "@material-ui/core/Button";
+import ListItem from "@material-ui/core/ListItem";
+import Paper from "@material-ui/core/Paper";
+
+import { RoomsSelectors, ServerSelectors } from "store";
+
+import { AuthenticationService } from "api";
+
+import { ThreePaneLayout, UserDisplay, VirtualList } from "components";
+import { ConnectForm, RegisterForm } from "forms";
+import { Room, StatusEnum, User } from "types";
+import Rooms from './Rooms';
+
+import "./Server.css";
+
+class Server extends Component<ServerProps, ServerState> {
+  constructor(props) {
+    super(props);
+
+    this.showDescription = this.showDescription.bind(this);
+    this.showRegisterForm = this.showRegisterForm.bind(this);
+    this.hideRegisterForm = this.hideRegisterForm.bind(this);
+    this.onRegister = this.onRegister.bind(this);
+
+    this.state = {
+      register: false
+    };
+  }
+
+  showDescription(state, description) {
+    const isDisconnected = state === StatusEnum.DISCONNECTED;
+    const hasDescription = description && !!description.length;
+
+    return isDisconnected && hasDescription;
+  }
+
+  showRegisterForm() {
+    this.setState({register: true});
+  }
+
+  hideRegisterForm() {
+    this.setState({register: false});
+  }
+
+  onRegister(fields) {
+    console.log("register", fields);
+  }
+
+  render() {
+    const { message, rooms, joinedRooms, history, state, description, users } = this.props;
+    const { register } = this.state;
+    const isConnected = AuthenticationService.isConnected(state);
+
+    return (
+      <div className="server">
+            {
+              isConnected
+                ? ( <ServerRooms rooms={rooms} joinedRooms={joinedRooms} history={history} message={message} users={users} /> )
+                : (
+                  <div className="server-connect">
+                    <Paper className="server-connect__form">
+                      {
+                        register
+                          ? ( <Register connect={this.hideRegisterForm} onRegister={this.onRegister} /> )
+                          : ( <Connect register={this.showRegisterForm} /> )
+                      }
+                    </Paper>
+                  </div>
+                )
+            }
+          {
+            !isConnected && this.showDescription(state, description) && (
+              <Paper className="server-connect__description">
+                {description}
+              </Paper>
+            )
+          }
+      </div>
+    );
+  }
+}
+
+const ServerRooms = ({ rooms, joinedRooms, history, message, users}) => (
+  <div className="server-rooms">
+    <ThreePaneLayout
+      top={(
+        <Paper className="serverRoomWrapper overflow-scroll">
+          <Rooms rooms={rooms} joinedRooms={joinedRooms} history={history} />
+        </Paper>
+      )}
+
+      bottom={(
+        <Paper className="serverMessage overflow-scroll" dangerouslySetInnerHTML={{ __html: message }} />
+      )}
+
+      side={(
+        <Paper className="server-rooms__side overflow-scroll">
+          <div className="server-rooms__side-label">
+            Users connected to server: {users.length}
+          </div>
+          <VirtualList
+            itemKey={(index, data) => users[index].name }
+            items={ users.map(user => (
+              <ListItem button dense>
+                <UserDisplay user={user} />
+              </ListItem>
+            ) ) }
+          />
+        </Paper>
+      )}
+    />
+  </div>
+);
+
+const Connect = ({register}) => (
+  <div className="form-wrapper">
+    <ConnectForm onSubmit={AuthenticationService.connect} />
+    {/*{<Button variant="outlined" onClick={register}>Register</Button>}*/}
+  </div>
+);
+
+const Register = ({ onRegister, connect }) => (
+  <div className="form-wrapper">
+    <RegisterForm onSubmit={event => onRegister(event)} />
+    <Button variant="outlined" onClick={connect}>Connect</Button>
+  </div>
+);
+
+interface ServerProps {
+  message: string;
+  state: number;
+  description: string;
+  rooms: Room[];
+  joinedRooms: Room[];
+  users: User[];
+  history: any;
+}
+
+interface ServerState {
+  register: boolean;
+}
+
+const mapStateToProps = state => ({
+  message: ServerSelectors.getMessage(state),
+  state: ServerSelectors.getState(state),
+  description: ServerSelectors.getDescription(state),
+  rooms: RoomsSelectors.getRooms(state),
+  joinedRooms: RoomsSelectors.getJoinedRooms(state),
+  users: ServerSelectors.getUsers(state)
+});
+
+export default withRouter(connect(mapStateToProps)(Server));