update server list

README.md

@@ -8,11 +8,7 @@
 - `yarn run dev` - compile javascript
 - `yarn start` - start electron app
 
-## TODO
-- Add modals for server editing
-- Remove/edit servers in the list
-
-## Prototype 4 10/26/2017 - Server Edit Modal
+## Prototype 4 10/29/2017 - Server Edit Modal
 ![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype4.png?raw=true "Prototype 4")
 
 ## Prototype 3 10/25/2017

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.scss

@@ -47,6 +47,18 @@
   font-size: 30px;
 }
 
+.header__update {
+  color: darken($green, 5%);
+
+  &:hover {
+    color: $green;
+  }
+
+  .fa {
+    margin-right: 0;
+  }
+}
+
 .header__version {
   span {
     font-size: 12px;

app/components/Header/Header.tsx

@@ -33,19 +33,30 @@ export class Header extends React.Component<Props, any> {
     remote.getCurrentWindow().minimize();
   }
 
-  private openGithub(): void {
+  private openReleases(): void {
     shell.openExternal('https://github.com/mgerb/ps-launcher/releases');
   }
 
+  private openBugReport(): void {
+    shell.openExternal('https://github.com/mgerb/ps-launcher/issues');
+  }
+
   public render(): any {
+    const { updateAvailable } = this.props.AppState;
+    const updateClass = updateAvailable ? 'header__update' : '';
+
     return (
       <div className="header">
         <div className="header__version">
           <img src={headerIcon}/>
-          <span style={{ fontSize: '10px' }}>v{VERSION}</span>
+          <span style={{ fontSize: '10px' }}>{VERSION}</span>
         </div>
         <div className="header__draggable-region"></div>
-        <i className="fa fa-lg fa-github header-icon"  onClick={this.openGithub.bind(this)}/>
+        <div className={'header-icon ' + updateClass} onClick={this.openReleases.bind(this)} title="Releases">
+          {updateAvailable && <span style={{ fontSize: '12px' }}>Update Available!</span>}
+          <i className="fa fa-lg fa-github"/>
+        </div>
+        <i className="fa fa-exclamation-triangle header-icon" onClick={this.openBugReport.bind(this)} title="Report a bug"/>
         <div className="header-icon header-icon--minimize" onClick={this.minimize.bind(this)}/>
         <div className="header-icon header-icon--maximize" onClick={this.maximize.bind(this)}/>
         <div className="header-icon header-icon--close" onClick={() => this.exit()}>×</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;
@@ -79,8 +93,17 @@
   }
 
   .button-group {
-    align-self: flex-end;
-    justify-content: flex-end;
+    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,7 +2,7 @@ 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';
 
@@ -14,16 +14,31 @@ interface Props {
 
 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, State> {
-
   constructor(props: Props) {
     super(props);
-    this.state = {
+    this.state = this.defaultState;
+  }
+
+  private get defaultState(): State {
+    return {
       showModal: false,
+      editModal: false,
+      editServerIndex: undefined,
+      modalTitle: '',
+      modalServerName: '',
+      modalRealmList: '',
+      modalWebsiteURL: '',
     };
   }
 
@@ -69,46 +84,129 @@ export class ServerList extends React.Component<Props, State> {
     });
   }
 
+  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)}>
-          {server.name}
+        <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={this.state.showModal}
-        onClose={() => this.setState({ showModal: false })}
-        title="Add a server"
-      >
+      <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="Awesome Server Name"/>
+              <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"/>
+              <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.awesomeserver.com"/>
+              <input
+                className="input"
+                placeholder="https://www.server.com"
+                value={modalWebsiteURL}
+                onChange={e => this.setState({ modalWebsiteURL: e.target.value })}
+              />
             </div>
           </div>
 
           <div className="button-group">
-            <button className="button" onClick={() => this.setState({ showModal: false })}>Cancel</button>
-            <button className="button button--success">Save</button>
+            <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>
     );
@@ -122,7 +220,7 @@ export class ServerList extends React.Component<Props, State> {
         {this.renderModal()}
         <div className="server-list-heading">
           <div>Servers</div>
-          <i className="fa fa-plus" onClick={() => this.setState({ showModal: true })}/>
+          <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,6 +31,16 @@ a {
   }
 }
 
+.error {
+  color: $red;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .input {
   padding: 10px;
   border: 0;

app/state/AppState.ts

@@ -3,6 +3,8 @@ import * as _ from 'lodash';
 import { action, computed, observable, runInAction } from 'mobx';
 import fs from 'fs';
 import { persistentStateSeed } from './persistent-state-seed';
+import { versioning } from '../util';
+import 'babel-polyfill';
 
 export interface ExpansionType {
   name: string;
@@ -27,6 +29,7 @@ export class AppState {
   @observable public expansions: { [key: string]: ExpansionType };
   @observable public isBootstrapped: boolean = false;
   @observable public selectedExpKey: string = 'vanilla';
+  @observable public updateAvailable: boolean = false;
 
   constructor() {
     this.bootstrap();
@@ -48,10 +51,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,10 +77,61 @@ export class AppState {
     this.persistState();
   }
 
-  // bootstrap application
-  // creates directory and persistent store in appData
+  /**
+   * @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 process for application
   @action
   private bootstrap(): void {
+
+    // start interval to check for updates
+    // 5 minutes
+    this.startVersionCheck();
+    setInterval(() => {
+      this.startVersionCheck();
+    }, 5 * 60000);
+
     if (!fs.statSync(this.appPath).isDirectory()) {
       fs.mkdirSync(this.appPath);
     }
@@ -94,6 +156,16 @@ export class AppState {
     });
   }
 
+  private async startVersionCheck(): Promise<void> {
+    const update = await versioning.checkForUpdates();
+
+    if (update) {
+      runInAction(() => {
+        this.updateAvailable = update;
+      });
+    }
+  }
+
   // save state of app to file in app data
   private persistState(): Promise<void> {
 

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',
         },
         {
@@ -234,13 +234,58 @@ export const persistentStateSeed = (): any => {
     },
     cata: {
       name: 'Cataclysm',
-      servers: [] as any,
-      directory: '',
-      selectedServerIndex: 0,
-    },
-    mop: {
-      name: 'Mists of Pandaria',
-      servers: [] as any,
+      servers: [
+        {
+          name: 'Atlantiss',
+          realmlist: 'play.atlantiss.eu',
+          website: 'https://atlantiss.eu/',
+        },
+        {
+          name: 'Eternal-WoW (Apocalypse',
+          realmlist: 'logon.eternal-wow.com',
+          website: 'http://eternal-wow.com/',
+        },
+        {
+          name: 'Firestorm (Deathwing)',
+          realmlist: 'cata.logon.firestorm-servers.com',
+          website: 'https://firestorm-servers.com/us/',
+        },
+        {
+          name: 'GPLP',
+          realmlist: '37.187.171.126',
+          website: 'http://guerrerosporlapaz.com/',
+        },
+        {
+          name: 'Monster WoW',
+          realmlist: 'logon.monster-wow.com',
+          website: 'https://monster-wow.com/',
+        },
+        {
+          name: 'Titans of WoW',
+          realmlist: 'wow.titansofwow.com',
+          website: 'https://www.titansofwow.com/',
+        },
+        {
+          name: 'TwinStar (Artemis)',
+          realmlist: 'wow.twinstar.cz',
+          website: 'http://www.twinstar.cz/?lang=en',
+        },
+        {
+          name: 'Warmane',
+          realmlist: 'logon.warmane.com',
+          website: 'https://www.warmane.com/',
+        },
+        {
+          name: 'WoW Circle',
+          realmlist: 'logon3.wowcircle.com',
+          website: 'http://wowcircle.com/en/',
+        },
+        {
+          name: 'WoWMortal (Destiny)',
+          realmlist: 'logon.wowmortal.com',
+          website: 'https://wowmortal.com/',
+        },
+      ] as any,
       directory: '',
       selectedServerIndex: 0,
     },

app/util/index.ts

@@ -1 +1,2 @@
 export * from './toast/toast';
+export * from './versioning/versioning';

app/util/versioning/versioning.ts

@@ -0,0 +1,28 @@
+import axios from 'axios';
+import * as _ from 'lodash';
+
+class Versioning {
+  private readonly releaseEndPoint: string = 'https://api.github.com/repos/mgerb/ps-launcher/releases';
+
+  public async checkForUpdates(): Promise<boolean> {
+    const res = await axios.get(this.releaseEndPoint);
+
+    return !!_.find(res.data, (release: any) => {
+      return this.parseVersion(release.tag_name) > this.parseVersion(VERSION);
+    });
+  }
+
+  
+  /**
+   * returns a number value for a version string matching '0.0.1'
+   * @param {string} version 
+   * @returns {*} 
+   * @memberof Versioning
+   */
+  public parseVersion(version: string): number {
+    const parts = version.split('.');
+    return _.sumBy(parts, p => parseInt(p, 10));
+  }
+}
+
+export const versioning = new Versioning();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps-launcher",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A seed for a simple react application with typescript.",
   "main": "main.js",
   "scripts": {
@@ -11,7 +11,7 @@
     "watch": "webpack --watch",
     "generate-icons": "electron-icon-maker -i ./app/assets/app-icon.png -o ./app/assets",
     "pack": "electron-builder --dir",
-    "dist": "electron-builder"
+    "dist": "npm run build && electron-builder"
   },
   "build": {
     "appId": "PS Launcher",
@@ -35,7 +35,8 @@
   "author": "Mitchell Gerber",
   "license": "MIT",
   "dependencies": {
-    "babel-core": "^6.21.0",
+    "axios": "^0.17.0",
+    "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-polyfill": "^6.26.0",

yarn.lock

@@ -393,6 +393,13 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.0.tgz#7da747916db803f761651d6091d708789b953c6a"
+  dependencies:
+    follow-redirects "^1.2.3"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -409,7 +416,7 @@ babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-core@^6.21.0, babel-core@^6.26.0:
+babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -1998,7 +2005,7 @@ debug@2.2.0:
   dependencies:
     ms "0.7.1"
 
-debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
+debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -2771,6 +2778,12 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+follow-redirects@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.5.tgz#ffd3e14cbdd5eaa72f61b6368c1f68516c2a26cc"
+  dependencies:
+    debug "^2.6.9"
+
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"