add/update/delete servers

app/app.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'mobx-react';
 import AppState from './state/AppState';
-import { Wrapper } from './Wrapper/Wrapper';
+import { Wrapper } from './components';
 import 'babel-polyfill';
 
 // base styling

app/components/Header/Header.tsx

@@ -41,7 +41,6 @@ export class Header extends React.Component<Props, any> {
     return (
       <div className="header">
         <div className="header__version">
-          {/* <i className="fa fa-2x fa-github"/> */}
           <img src={headerIcon}/>
           <span style={{ fontSize: '10px' }}>v{VERSION}</span>
         </div>

app/components/Modal/Modal.scss

@@ -0,0 +1,50 @@
+@import '../../scss/variables';
+
+.CustomModal--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.CustomModal__base {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.CustomModal__content {
+  height: 400px;
+  width: 400px;
+  background: $dark-blue--1;
+  border-radius: 4px;
+  z-index: 200;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.CustomModal__overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: $dark-blue;
+  opacity: 0.8;
+}
+
+.CustomModal__header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  background: $dark-blue--2;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}

app/components/Modal/Modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import './Modal.scss';
+
+interface Props {
+  isOpen: boolean;
+  title: string;
+  onClose?(): any;
+}
+
+export class Modal extends React.Component<Props, any> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render(): any {
+    const { isOpen, onClose, title } = this.props;
+
+    const hiddenClass = !isOpen ? 'CustomModal--hidden' : '';
+
+    return (
+      <div className={'CustomModal__base ' + hiddenClass}>
+        <div className="CustomModal__content">
+          <div className="CustomModal__header">
+            <h3>{title}</h3>
+          </div>
+          {this.props.children}
+        </div>
+        <div className="CustomModal__overlay" onClick={onClose.bind(this)} />
+      </div>
+    );
+  }
+}

app/components/ServerList/ServerList.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   background: $dark-blue;
-  min-width: 200px;
+  width: 250px;
   border-right: 1px solid $dark-blue--3;
 
   .server-list-heading {
@@ -12,15 +12,6 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px;
-
-    .fa {
-      cursor: pointer;
-      color: $gray;
-
-      &:hover {
-        color: $gray--1;
-      }
-    }
   }
 
   .item-container {
@@ -31,20 +22,43 @@
   .list-item {
     cursor: pointer;
     height: 50px;
-    line-height: 50px;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     background: $dark-blue;
     transition: all 0.2s linear;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
+    padding: 0 10px;
 
-    &:hover, &.selected {
+    .edit-button {
+      opacity: 0;
+    }
+
+    &:hover {
+      .edit-button {
+        opacity: 1;
+      }
+    }
+
+    &:hover,
+    &.selected {
       background: $dark-blue--1;
       color: lighten($white, 10%);
       border-left-color: $blue;
     }
   }
 
+  .edit-button {
+    cursor: pointer;
+    color: $gray;
+
+    &:hover {
+      color: $gray--1;
+    }
+  }
+
   .start-button-container {
     height: 100px;
     padding: 10px;
@@ -71,4 +85,25 @@
     }
   }
 
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    flex: 1;
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .delete-button {
+    align-self: center;
+    color: $red;
+    cursor: pointer;
+
+    &:hover {
+      color: lighten($red, 5%);
+    }
+  }
 }

app/components/ServerList/ServerList.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import fs from 'fs';
 import { exec } from 'child_process';
 import { inject, observer } from 'mobx-react';
-import { AppState } from '../../state/AppState';
+import { AppState, ServerType } from '../../state/AppState';
 import { toast } from '../../util';
+import { Modal } from '../Modal/Modal';
 
 import './ServerList.scss';
 
@@ -11,23 +12,34 @@ interface Props {
   AppState?: AppState;
 }
 
+interface State {
+  showModal: boolean;
+  editModal: boolean;
+  editServerIndex: number;
+  modalTitle: string;
+  modalServerName: string;
+  modalRealmList: string;
+  modalWebsiteURL: string;
+}
+
 @inject('AppState')
 @observer
-export class ServerList extends React.Component<Props, any> {
+export class ServerList extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
+    this.state = this.defaultState;
   }
 
-  private renderItems(): any {
-    const { AppState } = this.props;
-    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
-      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
-      return (
-        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index)}>
-          {server.name}
-        </div>
-      );
-    });
+  private get defaultState(): State {
+    return {
+      showModal: false,
+      editModal: false,
+      editServerIndex: undefined,
+      modalTitle: '',
+      modalServerName: '',
+      modalRealmList: '',
+      modalWebsiteURL: '',
+    };
   }
 
   private async play(): Promise<void> {
@@ -72,14 +84,143 @@ export class ServerList extends React.Component<Props, any> {
     });
   }
 
+  private modalOnCancel(): void {
+    this.setState(this.defaultState);
+  }
+
+  private modalOnDelete(): void {
+    if (confirm('Are you sure you want to delete this server?')) {
+      this.props.AppState.deleteServer(this.state.editServerIndex);
+      this.setState(this.defaultState);
+    }
+  }
+
+  private modalOnSave(): void {
+    const { modalServerName, modalRealmList, modalWebsiteURL } = this.state;
+
+    if (modalServerName === '' || modalRealmList === '' || modalWebsiteURL === '') {
+      toast.error('All fields are required');
+      return;
+    }
+
+    const newServer: ServerType = {
+      name: modalServerName,
+      realmlist: modalRealmList,
+      website: modalWebsiteURL,
+    };
+
+    // edit server
+    if (this.state.editModal) {
+      this.props.AppState.editServer(this.state.editServerIndex, newServer);
+      toast.success('Saved');
+      this.setState(this.defaultState);
+    } else { // else add new server
+      if (!this.props.AppState.addServer(newServer)) {
+        toast.error('Server already exists');
+      } else {
+        toast.success('Saved');
+        this.setState(this.defaultState);
+      }
+    }
+  }
+
+  private addServerClick(): void {
+    this.setState({
+      showModal: true,
+      editModal: false,
+      modalTitle: 'New Server',
+    });
+  }
+
+  private editServerClick(serverIndex: number): void {
+    const server = this.props.AppState.selectedExpansion.servers[serverIndex];
+    this.setState({
+      showModal: true,
+      editModal: true,
+      editServerIndex: serverIndex,
+      modalTitle: server.name,
+      modalServerName: server.name,
+      modalRealmList: server.realmlist,
+      modalWebsiteURL: server.website,
+    });
+  }
+
+  private renderItems(): any {
+    const { AppState } = this.props;
+    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
+      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
+      return (
+        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index, true)}>
+          <div className="ellipsis" title={server.name}>{server.name}</div>
+          <i className="fa fa-pencil-square-o edit-button" title="Edit" onClick={() => this.editServerClick(index)}/>
+        </div>
+      );
+    });
+  }
+
+  private renderModal(): any {
+    const { showModal, editModal, modalTitle, modalServerName, modalRealmList, modalWebsiteURL } = this.state;
+
+    return (
+      <Modal isOpen={showModal} onClose={this.modalOnCancel.bind(this)} title={modalTitle}>
+        <div className="modal-content">
+          <div style={{ flex: 1 }}>
+            <div className="form-group">
+              <label className="form-group__label">Server Name</label>
+              <input
+                className="input"
+                placeholder="Name"
+                value={modalServerName}
+                onChange={e => this.setState({ modalServerName: e.target.value })}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-group__label">Realm List</label>
+              <input
+                className="input"
+                placeholder="logon.server.com"
+                value={modalRealmList}
+                onChange={e => this.setState({ modalRealmList: e.target.value })}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-group__label">Website URL</label>
+              <input
+                className="input"
+                placeholder="https://www.server.com"
+                value={modalWebsiteURL}
+                onChange={e => this.setState({ modalWebsiteURL: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="button-group">
+            <div style={{ display: 'flex' }}>
+              {editModal && <i className="fa fa-trash fa-lg delete-button" onClick={() => this.modalOnDelete()}/>}
+            </div>
+            <div>
+              <button className="button" onClick={this.modalOnCancel.bind(this)}>
+                Cancel
+              </button>
+              <button className="button button--success" onClick={this.modalOnSave.bind(this)}>
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
   public render(): any {
     const { selectedServer } = this.props.AppState;
 
     return (
       <div className="server-list">
+        {this.renderModal()}
         <div className="server-list-heading">
           <div>Servers</div>
-          <i className="fa fa-plus" />
+          <i className="fa fa-plus edit-button" onClick={this.addServerClick.bind(this)} />
         </div>
         <div className="item-container">{this.renderItems()}</div>
         <div className="start-button-container">

app/components/Wrapper/Wrapper.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables.scss';
+@import '../../scss/variables.scss';
 
 .wrapper {
   display: flex;

app/components/Wrapper/Wrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { AppState } from '../state/AppState';
-import { Content, Header, ServerList, SubHeader } from '../components';
+import { AppState } from '../../state/AppState';
+import { Content, Header, ServerList, SubHeader } from '../';
 
 import './Wrapper.scss';
 

app/components/index.ts

@@ -2,3 +2,4 @@ export * from './Content/Content';
 export * from './Header/Header';
 export * from './ServerList/ServerList';
 export * from './SubHeader/SubHeader';
+export * from './Wrapper/Wrapper';

app/scss/style.scss

@@ -31,22 +31,82 @@ a {
   }
 }
 
-::-webkit-scrollbar-track
-{
-	border-radius: 10px;
+.error {
+  color: $red;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.input {
+  padding: 10px;
+  border: 0;
+  border-radius: 4px;
+  background: $dark-blue;
+  width: 100%;
+  color: $white;
+  border: 1px solid darken($dark-blue, 5%);
+
+  &::-webkit-input-placeholder {
+    color: $dark-blue--3;
+  }
+}
+
+.form-group {
+  & + & {
+    margin-top: 20px;
+  }
+}
+
+.form-group__label {
+  font-size: 12px;
+  line-height: 20px;
+  color: $gray;
+  padding-left: 5px;
+}
+
+.button {
+  border: 0;
+  padding: 10px;
+  border-radius: 4px;
+  background: darken($gray, 5%);
+  transition: all 0.2s linear;
+  color: $white;
+  cursor: pointer;
+
+  &:hover {
+    background: $gray;
+  }
+
+  & + & {
+    margin-left: 5px;
+  }
+}
+
+.button--success {
+  background: $blue;
+
+  &:hover {
+    background: $blue--lighter;
+  }
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
   background-color: none;
 }
 
-::-webkit-scrollbar
-{
-	width: 5px;
-	height: 5px;
-	background-color: none;
-	border-radius: 10px;
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: none;
+  border-radius: 10px;
 }
 
-::-webkit-scrollbar-thumb
-{
-	border-radius: 10px;
-	background-color: darken($dark-blue, 5%);
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: darken($dark-blue, 5%);
 }

app/state/AppState.ts

@@ -48,10 +48,18 @@ export class AppState {
     return this.selectedExpansion.servers[index];
   }
 
+
+  /**
+   * @param {number} index 
+   * @param {boolean} [persist=true] flag whether to persist after setting server index
+   * @memberof AppState
+   */
   @action
-  public setSelectedServerIndex(index: number): void {
+  public setSelectedServerIndex(index: number, persist: boolean = false): void {
     this.selectedExpansion.selectedServerIndex = index;
-    this.persistState();
+    if (persist) {
+      this.persistState();
+    }
   }
 
   @action
@@ -66,6 +74,50 @@ export class AppState {
     this.persistState();
   }
 
+  /**
+   * @param {ServerType} server 
+   * @returns {boolean} returns whether or not the server was added to the list
+   * @memberof AppState
+   */
+  @action
+  public addServer(server: ServerType): boolean {
+
+    // check if server already exists
+    if (_.some(this.selectedExpansion.servers, s => s.name === server.name)) {
+      return false;
+    }
+
+    // push server into list
+    const index = this.selectedExpansion.servers.push(server) - 1;
+
+    // setting selected server index persists state
+    this.setSelectedServerIndex(index);
+    this.persistState();
+    return true;
+  }
+
+  @action
+  public deleteServer(serverIndex: number): void {
+    if (this.selectedExpansion.selectedServerIndex === serverIndex) {
+      this.setSelectedServerIndex(0);
+    }
+
+    // remove server from list
+    this.selectedExpansion.servers.splice(serverIndex, 1);
+    this.persistState();
+  }
+
+  /**
+   * edit server info and persist state
+   * @param {number} serverIndex index of server in array
+   * @memberof AppState
+   */
+  @action
+  public editServer(serverIndex: number, newServer: ServerType): void {
+    this.selectedExpansion.servers[serverIndex] = newServer;
+    this.persistState();
+  }
+
   // bootstrap application
   // creates directory and persistent store in appData
   @action

app/state/persistent-state-seed.ts

@@ -11,7 +11,7 @@ export const persistentStateSeed = (): any => {
         },
         {
           name: 'Elysium',
-          realmlist: '',
+          realmlist: 'logon.elysium-project.org',
           website: 'https://www.elysium-project.org',
         },
         {