Structure change (#4220)

* Structure change

* Remove duplicate folders from previous structure

* Cleanup websocket protocol

* Updating from based off PR

* Fixup - remove wrong files during conflict and get the websocket working

* renaming tsx to ts

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

webclient/src/components/Header/Header.css

@@ -0,0 +1,77 @@
+.Header {
+}
+
+.Header__logo {
+  display: flex;
+}
+
+.Header__logo img {
+  height: 40px;
+}
+
+.Header-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 5px;
+  color: white;
+}
+
+.Header-serverDetails {
+  font-size: 12px;
+}
+
+.Header-nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.Header-nav__items {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.Header-nav__item {
+  list-style: none;
+  margin: 0 10px;
+}
+
+.Header-account {
+    display: flex;
+    align-items: center;
+}
+
+.Header-account__name {
+  margin-right: 10px;
+  font-weight: bold;
+}
+
+.Header-account__indicator {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  background: red;
+  border: 2px solid;
+  border-radius: 50%;
+}
+
+.temp-subnav__rooms {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  padding: 5px;
+}
+
+.temp-chip {
+  margin-left: 5px;
+  text-decoration: none;
+}
+
+
+.temp-chip > div {
+  cursor: inherit;
+}
+

webclient/src/components/Header/Header.tsx

@@ -0,0 +1,118 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { NavLink, withRouter, generatePath } from "react-router-dom";
+import AppBar from "@material-ui/core/AppBar";
+import Chip from "@material-ui/core/Chip";
+import Toolbar from "@material-ui/core/Toolbar";
+import * as _ from "lodash";
+
+import {  RoomsSelectors, ServerSelectors } from "store";
+import { Room, User } from "types";
+
+import { AuthenticationService } from "../../websocket";
+import { RouteEnum } from "../../types";
+
+import "./Header.css";
+import logo from "./logo.png";
+
+class Header extends Component<HeaderProps> {
+  componentDidUpdate(prevProps) {
+    const currentRooms = this.props.joinedRooms;
+    const previousRooms = prevProps.joinedRooms;
+
+    if (currentRooms > previousRooms) {
+      const { roomId } = _.difference(currentRooms, previousRooms)[0];
+      this.props.history.push(generatePath(RouteEnum.ROOM, { roomId }));
+    }
+  }
+  render() {
+    const { joinedRooms, server, state, user } = this.props;
+
+    return (
+      <div>
+        {/*<header className="Header">*/}
+        <AppBar position="static">
+          <Toolbar variant="dense">
+            <NavLink to={RouteEnum.SERVER} className="Header__logo">
+              <img src={logo} alt="logo" />
+            </NavLink>
+            { AuthenticationService.isConnected(state) && (
+              <div className="Header-content">
+                <nav className="Header-nav">
+                  <ul className="Header-nav__items">
+                    {
+                      AuthenticationService.isModerator(user) && (
+                        <li className="Header-nav__item">
+                          <NavLink to={RouteEnum.LOGS}>
+                            <button>Logs</button>
+                          </NavLink>
+                        </li>
+                      )
+                    }
+                    <li className="Header-nav__item">
+                      <NavLink to={RouteEnum.SERVER} className="plain-link">
+                        Server ({server})
+                      </NavLink>
+                    </li>
+                    <NavLink to={RouteEnum.ACCOUNT} className="plain-link">
+                      <div className="Header-account">
+                        <span className="Header-account__name">
+                          {user.name}
+                        </span>
+                        <span className="Header-account__indicator"></span>
+                      </div>
+                    </NavLink>
+                  </ul>
+                </nav>
+              </div>
+            ) }
+          </Toolbar>
+        </AppBar>
+        <div className="temp-subnav">
+          {
+            !!joinedRooms.length && (
+              <Rooms rooms={joinedRooms} />
+            )
+          }
+          <div className="temp-subnav__games">
+          </div>
+          <div className="temp-subnav__chats">
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const Rooms = props => (
+  <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" />
+          </NavLink>
+        );
+        return rooms;
+      }, [])
+    }
+  </div>
+)
+
+interface HeaderProps {
+  state: number;
+  server: string;
+  user: User;
+  joinedRooms: Room[];
+  history: any;
+}
+
+const mapStateToProps = state => ({
+  state: ServerSelectors.getState(state),
+  server: ServerSelectors.getName(state),
+  user: ServerSelectors.getUser(state),
+  joinedRooms: RoomsSelectors.getJoinedRooms(state)
+});
+
+export default withRouter(connect(mapStateToProps)(Header));