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

@@ -0,0 +1,49 @@
+.account {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  padding: 5px;
+}
+
+.account-column {
+  display: flex;
+  flex-direction: column;
+  width: 33%;
+}
+
+
+.account-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+}
+
+.account-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+
+.account-details__actions {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.account-details p {
+  margin-bottom: 10px;
+}
+
+.account-details button {
+  margin-top: 10px;
+  font-size: 10px;
+}
+
+.account-details img {
+  width: 100%;
+  margin-bottom: 20px;
+}

webclient/src/containers/Account/Account.tsx

@@ -0,0 +1,116 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import Button from "@material-ui/core/Button";
+import ListItem from "@material-ui/core/ListItem";
+import Paper from "@material-ui/core/Paper";
+
+import { UserDisplay, VirtualList, AuthGuard } from "components";
+import { AuthenticationService, SessionService } from "websocket";
+import { ServerSelectors } from "store";
+import { User } from 'types';
+
+import AddToBuddies from './AddToBuddies';
+import AddToIgnore from './AddToIgnore';
+
+import "./Account.css";
+
+class Account extends Component<AccountProps> {
+  handleAddToBuddies({ userName }) {
+    SessionService.addToBuddyList(userName);
+  }
+
+  handleAddToIgnore({ userName }) {
+    SessionService.addToIgnoreList(userName);
+  }
+
+  render() {
+    console.log(this.props);
+
+    const { buddyList, ignoreList, serverName, serverVersion, user } = this.props;
+    const { country, realName, name, userLevel, accountageSecs, avatarBmp } = user;
+
+    var url = URL.createObjectURL(new Blob([avatarBmp], {'type': 'image/png'}));
+
+    return (
+      <div className="account">
+        <AuthGuard />
+        <div className="account-column">
+          <Paper className="account-list">
+            <div className="">
+              Buddies Online: ?/{buddyList.length}
+            </div>
+            <VirtualList
+              itemKey={(index, data) => buddyList[index].name }
+              items={ buddyList.map(user => (
+                <ListItem button dense>
+                  <UserDisplay user={user} />
+                </ListItem>
+              ) ) }
+            />
+            <div className="" style={{borderTop: "1px solid"}}>
+              <AddToBuddies onSubmit={this.handleAddToBuddies} />
+            </div>
+          </Paper>
+        </div>
+        <div className="account-column">
+          <Paper className="account-list overflow-scroll">
+            <div className="">
+              Ignored Users Online: ?/{ignoreList.length}
+            </div>
+            <VirtualList
+              itemKey={(index, data) => ignoreList[index].name }
+              items={ ignoreList.map(user => (
+                <ListItem button dense>
+                  <UserDisplay user={user} />
+                </ListItem>
+              ) ) }
+            />
+            <div className="" style={{borderTop: "1px solid"}}>
+              <AddToIgnore onSubmit={this.handleAddToIgnore} />
+            </div>
+          </Paper>
+        </div>
+        <div className="account-column overflow-scroll">
+          <Paper className="account-details" style={{margin: "0 0 5px 0"}}>
+            <img src={url} alt={name} />
+            <p><strong>{name}</strong></p>
+            <p>Location: ({country.toUpperCase()})</p>
+            <p>User Level: {userLevel}</p>
+            <p>Account Age: {accountageSecs}</p>
+            <p>Real Name: {realName}</p>
+            <div className="account-details__actions">
+              <Button size="small" color="primary" variant="contained">Edit</Button>
+              <Button size="small" color="primary" variant="contained">Change<br />Password</Button>
+              <Button size="small" color="primary" variant="contained">Change<br />Avatar</Button>
+            </div>
+          </Paper>
+          <Paper className="account-details">
+            <p>Server Name: {serverName}</p>
+            <p>Server Version: {serverVersion}</p>
+            <Button color="primary" variant="contained" onClick={() => AuthenticationService.disconnect()}>Disconnect</Button>
+          </Paper>
+        </div>
+      </div>  
+    )
+  }
+}
+
+interface AccountProps {
+  buddyList: User[];
+  ignoreList: User[];
+  serverName: string;
+  serverVersion: string;
+  user: User;
+}
+
+const mapStateToProps = state => ({
+  buddyList: ServerSelectors.getBuddyList(state),
+  ignoreList: ServerSelectors.getIgnoreList(state),
+  serverName: ServerSelectors.getName(state),
+  serverVersion: ServerSelectors.getVersion(state),
+  user: ServerSelectors.getUser(state),
+});
+
+export default connect(mapStateToProps)(Account);

webclient/src/containers/Account/AddToBuddies.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line
+import React from "react";
+import { connect } from "react-redux";
+import { Form, reduxForm } from "redux-form"
+
+import { InputAction } from 'components';
+
+const AddToBuddies = ({ handleSubmit }) => (
+  <Form onSubmit={handleSubmit}>
+    <InputAction action="Add" label="Add to Buddies" name="userName" />
+  </Form>
+);
+
+const propsMap = {
+  form: "addToBuddies"
+};
+
+export default connect()(reduxForm(propsMap)(AddToBuddies));

webclient/src/containers/Account/AddToIgnore.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line
+import React from "react";
+import { connect } from "react-redux";
+import { Form, reduxForm } from "redux-form"
+
+import { InputAction } from 'components';
+
+const AddToIgnore = ({ handleSubmit }) => (
+  <Form onSubmit={handleSubmit}>
+    <InputAction action="Add" label="Add to Ignore" name="userName" />
+  </Form>
+);
+
+const propsMap = {
+  form: "addToIgnore"
+};
+
+export default connect()(reduxForm(propsMap)(AddToIgnore));

webclient/src/containers/App/AppShell.css

@@ -0,0 +1,10 @@
+.AppShell,
+.AppShell-routes {
+  height: 100%;
+}
+
+.AppShell {
+  display: flex;
+  flex-direction: column;
+   min-width: 768px;
+}

webclient/src/containers/App/AppShell.tsx

@@ -0,0 +1,37 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { Provider } from "react-redux";
+import { MemoryRouter as Router } from "react-router-dom";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { store } from "store";
+import { Header } from 'components';
+import Routes from "./AppShellRoutes";
+
+import "./AppShell.css";
+
+class AppShell extends Component {
+  componentDidMount() {
+    // @TODO (1)
+    window.onbeforeunload = () => true;
+  }
+
+  handleContextMenu(event) {
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <Provider store={store}>
+        <CssBaseline />
+        <div className="AppShell" onContextMenu={this.handleContextMenu}>
+          <Router>
+            <Header />
+            <Routes />
+          </Router>
+        </div>
+      </Provider>
+    );
+  }
+}
+
+export default AppShell;

webclient/src/containers/App/AppShellRoutes.tsx

@@ -0,0 +1,29 @@
+  import React from "react";
+import { Redirect, Route, Switch } from "react-router-dom";
+
+import { RouteEnum } from "types";
+import { Account } from "containers";
+import { 
+  Decks, 
+  Game, 
+  Player, 
+  Room, 
+  Server, 
+  Logs } from "components";
+
+const Routes = () => (
+  <div className="AppShell-routes overflow-scroll">
+    <Switch>
+      <Route path={RouteEnum.ACCOUNT} render={() => <Account />} />
+      <Route path={RouteEnum.DECKS} render={() => <Decks />} />
+      <Route path={RouteEnum.GAME} render={() => <Game />} />
+      <Route path={RouteEnum.LOGS} render={() => <Logs />} />
+      <Route path={RouteEnum.PLAYER} render={() => <Player />} />
+      {<Route path={RouteEnum.ROOM} render={() => <Room />} />}
+      <Route path={RouteEnum.SERVER} render={() => <Server />} />
+      <Redirect from="/" to={RouteEnum.SERVER} />
+    </Switch>
+  </div>
+);
+
+export default Routes;

webclient/src/containers/index.ts

@@ -0,0 +1,2 @@
+export { default as AppShell } from './App/AppShell';
+export { default as Account } from './Account/Account';