Minor QOL + Performance Fixes

package.json

@@ -58,6 +58,7 @@
     "electron-store": "^1.3.0",
     "material-ui": "^0.20.2",
     "react": "^16.7.0",
+    "react-countdown": "^2.2.1",
     "react-dnd": "^7.0.2",
     "react-dom": "^16.7.0",
     "react-router-dom": "^4.3.1",

src/components/skillbrowser/CharacterSelector.jsx

@@ -19,7 +19,10 @@ export default class CharacterSelector extends React.Component {
         Object.keys(allChars).forEach((char) => {
             this.chars.push(<MenuItem key={char} value={char} primaryText={allChars[char].name} />);
         });
-        this.chars.sort((a, b) => a.props.primaryText.localeCompare(b.props.primaryText));
+
+        // Make sure characters with numbers in names get sorted correctly ([1, 2, 11], not [1, 11, 2])
+        var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: "base"});
+        this.chars.sort((a, b) => collator.compare(a.props.primaryText, b.props.primaryText));
     }
 
     handleCharacterChange(event, index, value) {

src/components/tables/CharactersOverviewTable.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import {Redirect} from 'react-router';
 
 import Character from '../../models/Character';
-import DateTimeHelper from '../../helpers/DateTimeHelper';
+import EveCountdownTimer from '../widgets/EveCountdownTimer';
 
 import Avatar from 'material-ui/Avatar';
 import {Table, TableBody, TableRow, TableRowColumn} from 'material-ui/Table';
@@ -24,32 +24,18 @@ export default class CharactersOverviewTable extends React.Component {
         super(props);
         this.state = {
             characters: Object.values(Character.getAll()).sort((a, b) => b.getTotalSp() - a.getTotalSp()),
-            ticking: true,
             redirectPath: undefined
         };
     }
 
     componentDidMount() {
-        this.timerId = setInterval(
-            () => this.tick(),
-            1000
-        );
-
         this.subscriberId = Character.subscribe(this);
     }
 
     componentWillUnmount() {
-        clearInterval(this.timerId);
-
         Character.unsubscribe(this.subscriberId);
     }
 
-    tick() {
-        if (this.state.ticking) {
-            this.forceUpdate();
-        }
-    }
-
     handleClick(e, characterId) {
         let path = '/characters/' + characterId;
 
@@ -116,7 +102,7 @@ export default class CharactersOverviewTable extends React.Component {
 
                                 <TableRowColumn>
                                     {currentSkill !== undefined ? `${currentSkill.skill_name} ${currentSkill.finished_level}` : "Not Training"}<br/>
-                                    {currentSkill !== undefined ? DateTimeHelper.timeUntil(new Date(currentSkill.finish_date)) : ""}
+                                    {currentSkill !== undefined ? <EveCountdownTimer endDate={new Date(currentSkill.finish_date)} /> : ""}
                                 </TableRowColumn>
                             </TableRow>
                         );

src/components/tables/SpFarmingTable.jsx

@@ -6,7 +6,7 @@ import {Redirect} from 'react-router';
 import Character from '../../models/Character';
 import FarmCharacter from '../../models/FarmCharacter';
 import FarmHelper from '../../helpers/FarmHelper';
-import DateTimeHelper from '../../helpers/DateTimeHelper';
+import EveCountdownTimer from '../widgets/EveCountdownTimer';
 
 import Avatar from 'material-ui/Avatar';
 import {Table, TableHeader, TableHeaderColumn, TableBody, TableRow, TableRowColumn} from 'material-ui/Table';
@@ -28,33 +28,34 @@ export default class SpFarmingTable extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            characters: FarmCharacter.getAll(),
-            ticking: true,
+            characters: Object.values(FarmCharacter.getAll()).sort((a, b) => {
+                var charA = Character.get(a.id);
+                var charB = Character.get(b.id);
+
+                var countSort = charB.getInjectorsReady(b.baseSp) - charA.getInjectorsReady(a.baseSp);  // Descending
+
+                const MAX_DATE = new Date(8640000000000000);
+                var nextCharB = charB.getNextInjectorDate(b.baseSp) || MAX_DATE;
+                var nextCharA = charA.getNextInjectorDate(a.baseSp) || MAX_DATE;
+                var timeSort = nextCharA - nextCharB;  // Ascending
+
+                return countSort || timeSort || MAX_DATE;
+            }),
+            injectorsReady: Object.values(FarmCharacter.getAll()).reduce((count, char) => {
+                return count + (Character.get(char.id).getInjectorsReady(char.baseSp));
+            }, 0),
             redirectPath: undefined
         };
     }
 
     componentDidMount() {
-        this.timerId = setInterval(
-            () => this.tick(),
-            1000
-        );
-
         this.subscriberId = FarmCharacter.subscribe(this);
     }
 
     componentWillUnmount() {
-        clearInterval(this.timerId);
-
         FarmCharacter.unsubscribe(this.subscriberId);
     }
 
-    tick() {
-        if (this.state.ticking) {
-            this.forceUpdate();
-        }
-    }
-
     handleClick(e, characterId) {
         let path = '/characters/' + characterId;
 
@@ -67,7 +68,16 @@ export default class SpFarmingTable extends React.Component {
         FarmHelper.deleteFarm(characterId);
 
         this.forceUpdate();
-    };
+    }
+
+    renderSpHour(char)
+    {
+        const spHour = char.getCurrentSpPerHour();
+        const maxSpHour = char.getMaxSpPerHour();
+        const spWarning = `Not training at max speed!  Could be ${maxSpHour.toLocaleString()} SP/hour`;
+
+        return (<span>{spHour < maxSpHour && <span title={spWarning}>⚠ </span>}{spHour.toLocaleString()}</span>);
+    }
 
     render() {
         if (this.state.redirectPath !== undefined) {
@@ -89,7 +99,7 @@ export default class SpFarmingTable extends React.Component {
                             Total SP
                         </TableHeaderColumn>
                         <TableHeaderColumn>
-                            Injectors Ready<br/>
+                            {this.state.injectorsReady} Injectors Ready<br/>
                             Time Until Next Injector
                         </TableHeaderColumn>
                         <TableHeaderColumn>
@@ -139,12 +149,12 @@ export default class SpFarmingTable extends React.Component {
 
                                 <TableRowColumn>
                                     {char.getInjectorsReady(farmChar.baseSp)}<br/>
-                                    {DateTimeHelper.timeUntil(char.getNextInjectorDate(farmChar.baseSp))}
+                                    {<EveCountdownTimer endDate={char.getNextInjectorDate(farmChar.baseSp)} />}
                                 </TableRowColumn>
 
                                 <TableRowColumn>
-                                    {currentSkill !== undefined ? char.getCurrentSpPerHour() : "Not Training"}<br/>
-                                    {currentSkill !== undefined ? DateTimeHelper.timeUntil(new Date(char.getLastSkill().finish_date)) : ""}
+                                    {currentSkill !== undefined ?  this.renderSpHour(char) : "Not Training"}<br/>
+                                    {currentSkill !== undefined ? <EveCountdownTimer endDate={new Date(char.getLastSkill().finish_date)} /> : ""}
                                 </TableRowColumn>
 
                                 <TableRowColumn style={{width: 20, textAlign: 'right', paddingRight: 40}}>

src/components/widgets/EveCountdownTimer.jsx

@@ -0,0 +1,32 @@
+'use strict';
+
+import React from 'react';
+import Countdown from "react-countdown";
+
+
+import DateTimeHelper from '../../helpers/DateTimeHelper';
+
+
+export default class EveCountdownTimer extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            endDate: props.endDate || new Date(),
+            intervalDelay: props.intervalDelay || 4500,
+        };
+    }
+
+    renderEveTimer(totalMilliseconds, completed) {
+        return completed ? null : DateTimeHelper.niceCountdown(totalMilliseconds);
+    }
+
+    render() {
+        return (
+            <Countdown
+                date={this.state.endDate}
+                intervalDelay={this.state.intervalDelay}
+                renderer={({total, completed}) => this.renderEveTimer(total, completed)}
+            />
+        );
+    }
+}