wip - add/edit server with modal

README.md

@@ -8,7 +8,11 @@
 - `yarn run dev` - compile javascript
 - `yarn start` - start electron app
 
-## Prototype 4 10/29/2017 - Server Edit Modal
+## TODO
+- Add modals for server editing
+- Remove/edit servers in the list
+
+## Prototype 4 10/26/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/Wrapper/Wrapper.scss

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

app/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 '../';
+import { AppState } from '../state/AppState';
+import { Content, Header, ServerList, SubHeader } from '../components';
 
 import './Wrapper.scss';
 

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 './components';
+import { Wrapper } from './Wrapper/Wrapper';
 import 'babel-polyfill';
 
 // base styling

app/components/Header/Header.scss

@@ -47,18 +47,6 @@
   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,30 +33,19 @@ export class Header extends React.Component<Props, any> {
     remote.getCurrentWindow().minimize();
   }
 
-  private openReleases(): void {
+  private openGithub(): 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' }}>{VERSION}</span>
+          <span style={{ fontSize: '10px' }}>v{VERSION}</span>
         </div>
         <div className="header__draggable-region"></div>
-        <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"/>
+        <i className="fa fa-lg fa-github header-icon"  onClick={this.openGithub.bind(this)}/>
         <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;
-  width: 250px;
+  min-width: 200px;
   border-right: 1px solid $dark-blue--3;
 
   .server-list-heading {
@@ -12,6 +12,15 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px;
+
+    .fa {
+      cursor: pointer;
+      color: $gray;
+
+      &:hover {
+        color: $gray--1;
+      }
+    }
   }
 
   .item-container {
@@ -22,43 +31,20 @@
   .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;
 
-    .edit-button {
-      opacity: 0;
-    }
-
-    &:hover {
-      .edit-button {
-        opacity: 1;
-      }
-    }
-
-    &:hover,
-    &.selected {
+    &: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;
@@ -93,17 +79,8 @@
   }
 
   .button-group {
-    display: flex;
-    justify-content: space-between;
+    align-self: flex-end;
+    justify-content: flex-end;
   }
 
-  .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, ServerType } from '../../state/AppState';
+import { AppState } from '../../state/AppState';
 import { toast } from '../../util';
 import { Modal } from '../Modal/Modal';
 
@@ -14,31 +14,16 @@ 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.defaultState;
-  }
-
-  private get defaultState(): State {
-    return {
+    this.state = {
       showModal: false,
-      editModal: false,
-      editServerIndex: undefined,
-      modalTitle: '',
-      modalServerName: '',
-      modalRealmList: '',
-      modalWebsiteURL: '',
     };
   }
 
@@ -84,129 +69,46 @@ 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, 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 key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index)}>
+          {server.name}
         </div>
       );
     });
   }
 
   private renderModal(): any {
-    const { showModal, editModal, modalTitle, modalServerName, modalRealmList, modalWebsiteURL } = this.state;
-
     return (
-      <Modal isOpen={showModal} onClose={this.modalOnCancel.bind(this)} title={modalTitle}>
+      <Modal
+        isOpen={this.state.showModal}
+        onClose={() => this.setState({ showModal: false })}
+        title="Add a server"
+      >
         <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 })}
-              />
+              <input className="input" placeholder="Awesome Server Name"/>
             </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 })}
-              />
+              <input className="input" placeholder="logon.server.com"/>
             </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 })}
-              />
+              <input className="input" placeholder="https://www.awesomeserver.com"/>
             </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>
+            <button className="button" onClick={() => this.setState({ showModal: false })}>Cancel</button>
+            <button className="button button--success">Save</button>
           </div>
+
         </div>
       </Modal>
     );
@@ -220,7 +122,7 @@ export class ServerList extends React.Component<Props, State> {
         {this.renderModal()}
         <div className="server-list-heading">
           <div>Servers</div>
-          <i className="fa fa-plus edit-button" onClick={this.addServerClick.bind(this)} />
+          <i className="fa fa-plus" onClick={() => this.setState({ showModal: true })}/>
         </div>
         <div className="item-container">{this.renderItems()}</div>
         <div className="start-button-container">

app/components/index.ts

@@ -2,4 +2,3 @@ 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,16 +31,6 @@ a {
   }
 }
 
-.error {
-  color: $red;
-}
-
-.ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .input {
   padding: 10px;
   border: 0;

app/state/AppState.ts

@@ -3,8 +3,6 @@ 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;
@@ -29,7 +27,6 @@ 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();
@@ -51,18 +48,10 @@ 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, persist: boolean = false): void {
+  public setSelectedServerIndex(index: number): void {
     this.selectedExpansion.selectedServerIndex = index;
-    if (persist) {
-      this.persistState();
-    }
+    this.persistState();
   }
 
   @action
@@ -77,61 +66,10 @@ 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 process for application
+  // bootstrap application
+  // creates directory and persistent store in appData
   @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);
     }
@@ -156,16 +94,6 @@ 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: 'logon.elysium-project.org',
+          realmlist: '',
           website: 'https://www.elysium-project.org',
         },
         {

app/util/index.ts

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

app/util/versioning/versioning.ts

@@ -1,28 +0,0 @@
-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.3",
+  "version": "0.0.2",
   "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": "npm run build && electron-builder"
+    "dist": "electron-builder"
   },
   "build": {
     "appId": "PS Launcher",
@@ -35,8 +35,7 @@
   "author": "Mitchell Gerber",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.17.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.21.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-polyfill": "^6.26.0",

yarn.lock

@@ -393,13 +393,6 @@ 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"
@@ -416,7 +409,7 @@ babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-core@^6.26.0:
+babel-core@^6.21.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:
@@ -2005,7 +1998,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.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -2778,12 +2771,6 @@ 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"