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));