Use ES6 classes instead of React.createClass and editing prototypes

js/actions/ReportActions.js

@@ -87,7 +87,7 @@ function select(report, seriesTraversal) {
 
 		// Add back in any values from the current level
 		if (series.hasOwnProperty('Values'))
-			flattenedSeries[report.topLevelAccountName] = series.Values;
+			flattenedSeries[Report.topLevelAccountName()] = series.Values;
 
 		var flattenedReport = new Report();
 

js/components/AccountCombobox.js

@@ -4,24 +4,25 @@ var Combobox = require('react-widgets').Combobox;
 
 var getAccountDisplayList = require('../utils').getAccountDisplayList;
 
-module.exports = React.createClass({
+class AccountCombobox extends React.Component {
-	displayName: "AccountCombobox",
+	constructor() {
-	getDefaultProps: function() {
+		super();
-		return {
+		this.onAccountChange = this.handleAccountChange.bind(this);
+		this.defaultProps = {
 			includeRoot: true,
 			disabled: false,
 			rootName: "New Top-level Account"
-		};
+		}
-	},
+	}
-	handleAccountChange: function(account) {
+	handleAccountChange(account) {
 		if (this.props.onChange != null &&
 				account.hasOwnProperty('AccountId') &&
 				(this.props.accounts.hasOwnProperty([account.AccountId]) ||
 				 account.AccountId == -1)) {
 			this.props.onChange(account)
 		}
-	},
+	}
-	render: function() {
+	render() {
 		var accounts = getAccountDisplayList(this.props.accounts, this.props.accountChildren, this.props.includeRoot, this.props.rootName);
 		var className = "";
 		if (this.props.className)
@@ -32,7 +33,7 @@ module.exports = React.createClass({
 				valueField='AccountId'
 				textField='Name'
 				defaultValue={this.props.value}
-				onChange={this.handleAccountChange}
+				onChange={this.onAccountChange}
 				ref="account"
 				disabled={this.props.disabled}
 				suggest
@@ -40,4 +41,6 @@ module.exports = React.createClass({
 				className={className} />
 	   );
 	}
-});
+}
+
+module.exports = AccountCombobox;

js/components/AccountRegister.js

@@ -46,8 +46,12 @@ var getAccountDisplayName = require('../utils').getAccountDisplayName;
 
 var AccountCombobox = require('./AccountCombobox');
 
-const TransactionRow = React.createClass({
+class TransactionRow extends React.Component {
-	handleClick: function(e) {
+	constructor() {
+		super();
+		this.onClick = this.handleClick.bind(this);
+	}
+	handleClick(e) {
 		const refs = ["date", "number", "description", "account", "status", "amount"];
 		for (var ref in refs) {
 			if (this.refs[refs[ref]] == e.target) {
@@ -55,8 +59,8 @@ const TransactionRow = React.createClass({
 				return;
 			}
 		}
-	},
+	}
-	render: function() {
+	render() {
 		var date = this.props.transaction.Date;
 		var dateString = date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate();
 		var number = ""
@@ -97,19 +101,25 @@ const TransactionRow = React.createClass({
 
 		return (
 			<tr>
-				<td ref="date" onClick={this.handleClick}>{dateString}</td>
+				<td ref="date" onClick={this.onClick}>{dateString}</td>
-				<td ref="number" onClick={this.handleClick}>{number}</td>
+				<td ref="number" onClick={this.onClick}>{number}</td>
-				<td ref="description" onClick={this.handleClick}>{this.props.transaction.Description}</td>
+				<td ref="description" onClick={this.onClick}>{this.props.transaction.Description}</td>
-				<td ref="account" onClick={this.handleClick}>{accountName}</td>
+				<td ref="account" onClick={this.onClick}>{accountName}</td>
-				<td ref="status" onClick={this.handleClick}>{status}</td>
+				<td ref="status" onClick={this.onClick}>{status}</td>
-				<td ref="amount" onClick={this.handleClick}>{amount}</td>
+				<td ref="amount" onClick={this.onClick}>{amount}</td>
 				<td>{balance}</td>
 			</tr>);
 	}
-});
+}
+
+class AmountInput extends React.Component {
+	getInitialState(props) {
+		if (!props)
+			return {
+				LastGoodAmount: "0",
+				Amount: "0"
+			}
 
-const AmountInput = React.createClass({
-	_getInitialState: function(props) {
 		// Ensure we can edit this without screwing up other copies of it
 		var a;
 		if (props.security)
@@ -121,21 +131,23 @@ const AmountInput = React.createClass({
 			LastGoodAmount: a,
 			Amount: a
 		};
-	},
+	}
-	getInitialState: function() {
+	constructor() {
-		 return this._getInitialState(this.props);
+		super();
-	},
+		this.onChange = this.handleChange.bind(this);
-	componentWillReceiveProps: function(nextProps) {
+		this.state = this.getInitialState();
+	}
+	componentWillReceiveProps(nextProps) {
 		if ((!nextProps.value.eq(this.props.value) &&
 				!nextProps.value.eq(this.getValue())) ||
 				nextProps.security !== this.props.security) {
-			this.setState(this._getInitialState(nextProps));
+			this.setState(this.getInitialState(nextProps));
 		}
-	},
+	}
-	componentDidMount: function() {
+	componentDidMount() {
-		ReactDOM.findDOMNode(this.refs.amount).onblur = this.onBlur;
+		ReactDOM.findDOMNode(this.refs.amount).onblur = this.handleBlur.bind(this);
-	},
+	}
-	onBlur: function() {
+	handleBlur() {
 		var a;
 		if (this.props.security)
 			a = (new Big(this.getValue())).toFixed(this.props.security.Precision);
@@ -144,13 +156,13 @@ const AmountInput = React.createClass({
 		this.setState({
 			Amount: a
 		});
-	},
+	}
-	onChange: function() {
+	handleChange() {
 		this.setState({Amount: ReactDOM.findDOMNode(this.refs.amount).value});
 		if (this.props.onChange)
 			this.props.onChange();
-	},
+	}
-	getValue: function() {
+	getValue() {
 		try {
 			var value = ReactDOM.findDOMNode(this.refs.amount).value;
 			var ret = new Big(value);
@@ -159,8 +171,8 @@ const AmountInput = React.createClass({
 		} catch(err) {
 			return new Big(this.state.LastGoodAmount);
 		}
-	},
+	}
-	render: function() {
+	render() {
 		var symbol = "?";
 		if (this.props.security)
 			symbol = this.props.security.Symbol;
@@ -177,37 +189,54 @@ const AmountInput = React.createClass({
 			</FormGroup>
 		);
 	}
-});
+}
 
-const AddEditTransactionModal = React.createClass({
+class AddEditTransactionModal extends React.Component {
-	_getInitialState: function(props) {
+	getInitialState(props) {
 		// Ensure we can edit this without screwing up other copies of it
-		var t = props.transaction.deepCopy();
+		if (props)
+			var t = props.transaction.deepCopy();
+		else
+			var t = new Transaction();
+
 		return {
 			errorAlert: [],
 			transaction: t
 		};
-	},
+	}
-	getInitialState: function() {
+	constructor() {
-		 return this._getInitialState(this.props);
+		super();
-	},
+		this.state = this.getInitialState();
-	componentWillReceiveProps: function(nextProps) {
+		this.onCancel = this.handleCancel.bind(this);
+		this.onDescriptionChange = this.handleDescriptionChange.bind(this);
+		this.onDateChange = this.handleDateChange.bind(this);
+		this.onAddSplit = this.handleAddSplit.bind(this);
+		this.onDeleteSplit = this.handleDeleteSplit.bind(this);
+		this.onUpdateNumber = this.handleUpdateNumber.bind(this);
+		this.onUpdateStatus = this.handleUpdateStatus.bind(this);
+		this.onUpdateMemo = this.handleUpdateMemo.bind(this);
+		this.onUpdateAccount = this.handleUpdateAccount.bind(this);
+		this.onUpdateAmount = this.handleUpdateAmount.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+		this.onDelete = this.handleDelete.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
 		if (nextProps.show && !this.props.show) {
-			this.setState(this._getInitialState(nextProps));
+			this.setState(this.getInitialState(nextProps));
 		}
-	},
+	}
-	handleCancel: function() {
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleDescriptionChange: function() {
+	handleDescriptionChange() {
 		this.setState({
 			transaction: react_update(this.state.transaction, {
 				Description: {$set: ReactDOM.findDOMNode(this.refs.description).value}
 			})
 		});
-	},
+	}
-	handleDateChange: function(date, string) {
+	handleDateChange(date, string) {
 		if (date == null)
 			return;
 		this.setState({
@@ -215,8 +244,8 @@ const AddEditTransactionModal = React.createClass({
 				Date: {$set: date}
 			})
 		});
-	},
+	}
-	handleAddSplit: function() {
+	handleAddSplit() {
 		var split = new Split();
 		split.Status = SplitStatus.Entered;
 		this.setState({
@@ -224,15 +253,15 @@ const AddEditTransactionModal = React.createClass({
 				Splits: {$push: [split]}
 			})
 		});
-	},
+	}
-	handleDeleteSplit: function(split) {
+	handleDeleteSplit(split) {
 		this.setState({
 			transaction: react_update(this.state.transaction, {
 				Splits: {$splice: [[split, 1]]}
 			})
 		});
-	},
+	}
-	handleUpdateNumber: function(split) {
+	handleUpdateNumber(split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
 			Number: {$set: ReactDOM.findDOMNode(this.refs['number-'+split]).value}
@@ -240,8 +269,8 @@ const AddEditTransactionModal = React.createClass({
 		this.setState({
 			transaction: transaction
 		});
-	},
+	}
-	handleUpdateStatus: function(status, split) {
+	handleUpdateStatus(status, split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
 			Status: {$set: status.StatusId}
@@ -249,8 +278,8 @@ const AddEditTransactionModal = React.createClass({
 		this.setState({
 			transaction: transaction
 		});
-	},
+	}
-	handleUpdateMemo: function(split) {
+	handleUpdateMemo(split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
 			Memo: {$set: ReactDOM.findDOMNode(this.refs['memo-'+split]).value}
@@ -258,8 +287,8 @@ const AddEditTransactionModal = React.createClass({
 		this.setState({
 			transaction: transaction
 		});
-	},
+	}
-	handleUpdateAccount: function(account, split) {
+	handleUpdateAccount(account, split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
 			SecurityId: {$set: -1},
@@ -268,8 +297,8 @@ const AddEditTransactionModal = React.createClass({
 		this.setState({
 			transaction: transaction
 		});
-	},
+	}
-	handleUpdateAmount: function(split) {
+	handleUpdateAmount(split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
 			Amount: {$set: new Big(this.refs['amount-'+split].getValue())}
@@ -277,8 +306,8 @@ const AddEditTransactionModal = React.createClass({
 		this.setState({
 			transaction: transaction
 		});
-	},
+	}
-	handleSubmit: function() {
+	handleSubmit() {
 		var errorString = ""
 		var imbalancedSecurityList = this.state.transaction.imbalancedSplitSecurities(this.props.accounts);
 		if (imbalancedSecurityList.length > 0)
@@ -299,19 +328,19 @@ const AddEditTransactionModal = React.createClass({
 
 		if (this.props.onSubmit != null)
 			this.props.onSubmit(this.state.transaction);
-	},
+	}
-	handleDelete: function() {
+	handleDelete() {
 		if (this.props.onDelete != null)
 			this.props.onDelete(this.state.transaction);
-	},
+	}
-	render: function() {
+	render() {
 		var editing = this.props.transaction != null && this.props.transaction.isTransaction();
 		var headerText = editing ? "Edit" : "Create New";
 		var buttonText = editing ? "Save Changes" : "Create Transaction";
 		var deleteButton = [];
 		if (editing) {
 			deleteButton = (
-				<Button key={1} onClick={this.handleDelete} bsStyle="danger">Delete Transaction</Button>
+				<Button key={1} onClick={this.onDelete} bsStyle="danger">Delete Transaction</Button>
 		   );
 		}
 
@@ -320,7 +349,7 @@ const AddEditTransactionModal = React.createClass({
 		for (i = 0; i < imbalancedSecurityList.length; i++)
 			imbalancedSecurityMap[imbalancedSecurityList[i]] = i;
 
-		splits = [];
+		var splits = [];
 		for (var i = 0; i < this.state.transaction.Splits.length; i++) {
 			var self = this;
 			var s = this.state.transaction.Splits[i];
@@ -341,27 +370,27 @@ const AddEditTransactionModal = React.createClass({
 			// Define all closures for calling split-updating functions
 			var deleteSplitFn = (function() {
 				var j = i;
-				return function() {self.handleDeleteSplit(j);};
+				return function() {self.onDeleteSplit(j);};
 			})();
 			var updateNumberFn = (function() {
 				var j = i;
-				return function() {self.handleUpdateNumber(j);};
+				return function() {self.onUpdateNumber(j);};
 			})();
 			var updateStatusFn = (function() {
 				var j = i;
-				return function(status) {self.handleUpdateStatus(status, j);};
+				return function(status) {self.onUpdateStatus(status, j);};
 			})();
 			var updateMemoFn = (function() {
 				var j = i;
-				return function() {self.handleUpdateMemo(j);};
+				return function() {self.onUpdateMemo(j);};
 			})();
 			var updateAccountFn = (function() {
 				var j = i;
-				return function(account) {self.handleUpdateAccount(account, j);};
+				return function(account) {self.onUpdateAccount(account, j);};
 			})();
 			var updateAmountFn = (function() {
 				var j = i;
-				return function() {self.handleUpdateAmount(j);};
+				return function() {self.onUpdateAmount(j);};
 			})();
 
 			var deleteSplitButton = [];
@@ -415,20 +444,20 @@ const AddEditTransactionModal = React.createClass({
 		}
 
 		return (
-			<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
+			<Modal show={this.props.show} onHide={this.onCancel} bsSize="large">
 				<Modal.Header closeButton>
 					<Modal.Title>{headerText} Transaction</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 				<Form horizontal
-						onSubmit={this.handleSubmit}>
+						onSubmit={this.onSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Date</Col>
 						<Col xs={10}>
 						<DateTimePicker
 							time={false}
 							defaultValue={this.state.transaction.Date}
-							onChange={this.handleDateChange} />
+							onChange={this.onDateChange} />
 						</Col>
 					</FormGroup>
 					<FormGroup>
@@ -436,7 +465,7 @@ const AddEditTransactionModal = React.createClass({
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.transaction.Description}
-							onChange={this.handleDescriptionChange}
+							onChange={this.onDescriptionChange}
 							ref="description"/>
 						</Col>
 					</FormGroup>
@@ -451,7 +480,7 @@ const AddEditTransactionModal = React.createClass({
 					{splits}
 					<Row>
 						<span className="col-xs-11"></span>
-						<Col xs={1}><Button onClick={this.handleAddSplit}
+						<Col xs={1}><Button onClick={this.onAddSplit}
 								bsStyle="success">
 								<Glyphicon glyph='plus-sign' /></Button></Col>
 					</Row>
@@ -461,15 +490,15 @@ const AddEditTransactionModal = React.createClass({
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup>
-						<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
+						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
 						{deleteButton}
-						<Button onClick={this.handleSubmit} bsStyle="success">{buttonText}</Button>
+						<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
 					</ButtonGroup>
 				</Modal.Footer>
 			</Modal>
 		);
 	}
-});
+}
 
 const ImportType = {
 	OFX: 1,
@@ -485,8 +514,8 @@ for (var type in ImportType) {
    }
 }
 
-const ImportTransactionsModal = React.createClass({
+class ImportTransactionsModal extends React.Component {
-	getInitialState: function() {
+	getInitialState() {
 		var startDate = new Date();
 		startDate.setMonth(startDate.getMonth() - 1);
 		return {
@@ -496,41 +525,56 @@ const ImportTransactionsModal = React.createClass({
 			endDate: new Date(),
 			password: "",
 		};
-	},
+	}
-	handleCancel: function() {
+	constructor() {
-		this.setState(this.getInitialState());
+		super();
+		this.state = this.getInitialState();
+		this.onCancel = this.handleCancel.bind(this);
+		this.onImportChange = this.handleImportChange.bind(this);
+		this.onTypeChange = this.handleTypeChange.bind(this);
+		this.onPasswordChange = this.handlePasswordChange.bind(this);
+		this.onStartDateChange = this.handleStartDateChange.bind(this);
+		this.onEndDateChange = this.handleEndDateChange.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+		this.onImportTransactions = this.handleImportTransactions.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.show && !this.props.show) {
+			this.setState(this.getInitialState());
+		}
+	}
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleImportChange: function() {
+	handleImportChange() {
 		this.setState({importFile: ReactDOM.findDOMNode(this.refs.importfile).value});
-	},
+	}
-	handleTypeChange: function(type) {
+	handleTypeChange(type) {
 		this.setState({importType: type.TypeId});
-	},
+	}
-	handlePasswordChange: function() {
+	handlePasswordChange() {
 		this.setState({password: ReactDOM.findDOMNode(this.refs.password).value});
-	},
+	}
-	handleStartDateChange: function(date, string) {
+	handleStartDateChange(date, string) {
 		if (date == null)
 			return;
 		this.setState({
 			startDate: date
 		});
-	},
+	}
-	handleEndDateChange: function(date, string) {
+	handleEndDateChange(date, string) {
 		if (date == null)
 			return;
 		this.setState({
 			endDate: date
 		});
-	},
+	}
-	handleSubmit: function() {
+	handleSubmit() {
-		this.setState(this.getInitialState());
 		if (this.props.onSubmit != null)
 			this.props.onSubmit(this.props.account);
-	},
+	}
-	handleImportTransactions: function() {
+	handleImportTransactions() {
 		if (this.state.importType == ImportType.OFX) {
 			this.props.onImportOFX(this.props.account, this.state.password, this.state.startDate, this.state.endDate);
 		} else if (this.state.importType == ImportType.OFXFile) {
@@ -538,8 +582,8 @@ const ImportTransactionsModal = React.createClass({
 		} else if (this.state.importType == ImportType.Gnucash) {
 			this.props.onImportGnucash(ReactDOM.findDOMNode(this.refs.importfile));
 		}
-	},
+	}
-	render: function() {
+	render() {
 		var accountNameLabel = "Performing global import:"
 		if (this.props.account != null && this.state.importType != ImportType.Gnucash)
 			accountNameLabel = "Importing to '" + getAccountDisplayName(this.props.account, this.props.accounts) + "' account:";
@@ -565,10 +609,10 @@ const ImportTransactionsModal = React.createClass({
 		var button2 = [];
 		if (!this.props.imports.importFinished && !this.props.imports.importFailed) {
 			var importingDisabled = this.props.imports.importing || (this.state.importType != ImportType.OFX && this.state.importFile == "") || (this.state.importType == ImportType.OFX && this.state.password == "");
-			button1 = (<Button onClick={this.handleCancel} disabled={this.props.imports.importing} bsStyle="warning">Cancel</Button>);
+			button1 = (<Button onClick={this.onCancel} disabled={this.props.imports.importing} bsStyle="warning">Cancel</Button>);
-			button2 = (<Button onClick={this.handleImportTransactions} disabled={importingDisabled} bsStyle="success">Import</Button>);
+			button2 = (<Button onClick={this.onImportTransactions} disabled={importingDisabled} bsStyle="success">Import</Button>);
 		} else {
-			button1 = (<Button onClick={this.handleSubmit} disabled={this.props.imports.importing} bsStyle="success">OK</Button>);
+			button1 = (<Button onClick={this.onSubmit} disabled={this.props.imports.importing} bsStyle="success">OK</Button>);
 		}
 		var inputDisabled = (this.props.imports.importing || this.props.imports.importFailed || this.props.imports.importFinished) ? true : false;
 
@@ -588,7 +632,7 @@ const ImportTransactionsModal = React.createClass({
 							value={this.state.password}
 							placeholder="Password..."
 							ref="password"
-							onChange={this.handlePasswordChange} />
+							onChange={this.onPasswordChange} />
 					</Col>
 				</FormGroup>
 				<FormGroup>
@@ -597,7 +641,7 @@ const ImportTransactionsModal = React.createClass({
 					<DateTimePicker
 						time={false}
 						defaultValue={this.state.startDate}
-						onChange={this.handleStartDateChange} />
+						onChange={this.onStartDateChange} />
 					</Col>
 				</FormGroup>
 				<FormGroup>
@@ -606,7 +650,7 @@ const ImportTransactionsModal = React.createClass({
 					<DateTimePicker
 						time={false}
 						defaultValue={this.state.endDate}
-						onChange={this.handleEndDateChange} />
+						onChange={this.onEndDateChange} />
 					</Col>
 				</FormGroup>
 				</div>
@@ -620,7 +664,7 @@ const ImportTransactionsModal = React.createClass({
 						ref="importfile"
 						disabled={inputDisabled}
 						value={this.state.importFile}
-						onChange={this.handleImportChange} />
+						onChange={this.onImportChange} />
 					<HelpBlock>Select a file to upload.</HelpBlock>
 					</Col>
 				</FormGroup>
@@ -628,12 +672,12 @@ const ImportTransactionsModal = React.createClass({
 		}
 
 		return (
-			<Modal show={this.props.show} onHide={this.handleCancel}>
+			<Modal show={this.props.show} onHide={this.onCancel}>
 				<Modal.Header closeButton>
 					<Modal.Title>Import Transactions</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-				<Form horizontal onSubmit={this.handleImportTransactions}
+				<Form horizontal onSubmit={this.onImportTransactions}
 						encType="multipart/form-data"
 						ref="importform">
 					<FormGroup>
@@ -648,7 +692,7 @@ const ImportTransactionsModal = React.createClass({
 						data={ImportTypeList}
 						valueField='TypeId'
 						textField='Name'
-						onSelect={this.handleTypeChange}
+						onSelect={this.onTypeChange}
 						defaultValue={this.state.importType}
 						disabled={disabledTypes}
 						ref="importtype" />
@@ -668,40 +712,47 @@ const ImportTransactionsModal = React.createClass({
 			</Modal>
 		);
 	}
-});
+}
 
-module.exports = React.createClass({
+class AccountRegister extends React.Component {
-	displayName: "AccountRegister",
+	constructor() {
-	getInitialState: function() {
+		super();
-		return {
+		this.state = {
 			newTransaction: null,
 			height: 0
 		};
-	},
+		this.onEditTransaction = this.handleEditTransaction.bind(this);
-	resize: function() {
+		this.onEditingCancel = this.handleEditingCancel.bind(this);
+		this.onNewTransactionClicked = this.handleNewTransactionClicked.bind(this);
+		this.onSelectPage = this.handleSelectPage.bind(this);
+		this.onImportComplete = this.handleImportComplete.bind(this);
+		this.onUpdateTransaction = this.handleUpdateTransaction.bind(this);
+		this.onDeleteTransaction = this.handleDeleteTransaction.bind(this);
+	}
+	resize() {
 		var div = ReactDOM.findDOMNode(this);
 		this.setState({height: div.parentElement.clientHeight - 64});
-	},
+	}
-	componentWillReceiveProps: function(nextProps) {
+	componentWillReceiveProps(nextProps) {
 		if (!nextProps.transactionPage.upToDate && nextProps.selectedAccount != -1) {
 			nextProps.onFetchTransactionPage(nextProps.accounts[nextProps.selectedAccount], nextProps.transactionPage.pageSize, nextProps.transactionPage.page);
 		}
-	},
+	}
-	componentDidMount: function() {
+	componentDidMount() {
 		this.resize();
 		var self = this;
 		$(window).resize(function() {self.resize();});
-	},
+	}
-	handleEditTransaction: function(transaction) {
+	handleEditTransaction(transaction) {
 		this.props.onSelectTransaction(transaction.TransactionId);
-	},
+	}
-	handleEditingCancel: function() {
+	handleEditingCancel() {
 		this.setState({
 			newTransaction: null
 		});
 		this.props.onUnselectTransaction();
-	},
+	}
-	handleNewTransactionClicked: function() {
+	handleNewTransactionClicked() {
 		var newTransaction = new Transaction();
 		newTransaction.Date = new Date();
 		newTransaction.Splits.push(new Split());
@@ -713,14 +764,8 @@ module.exports = React.createClass({
 		this.setState({
 			newTransaction: newTransaction
 		});
-	},
+	}
-	ajaxError: function(jqXHR, status, error) {
+	handleSelectPage(eventKey) {
-		var e = new Error();
-		e.ErrorId = 5;
-		e.ErrorString = "Request Failed: " + status + error;
-		this.setState({error: e});
-	},
-	handleSelectPage: function(eventKey) {
 		var newpage = eventKey - 1;
 		// Don't do pages that don't make sense
 		if (newpage < 0)
@@ -732,17 +777,17 @@ module.exports = React.createClass({
 				this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, newpage);
 			}
 		}
-	},
+	}
-	handleImportComplete: function() {
+	handleImportComplete() {
 		this.props.onCloseImportModal();
 		this.props.onFetchAllAccounts();
 		this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, this.props.transactionPage.page);
-	},
+	}
-	handleDeleteTransaction: function(transaction) {
+	handleDeleteTransaction(transaction) {
 		this.props.onDeleteTransaction(transaction);
 		this.props.onUnselectTransaction();
-	},
+	}
-	handleUpdateTransaction: function(transaction) {
+	handleUpdateTransaction(transaction) {
 		if (transaction.TransactionId != -1) {
 			this.props.onUpdateTransaction(transaction);
 		} else {
@@ -752,10 +797,10 @@ module.exports = React.createClass({
 		this.setState({
 			newTransaction: null
 		});
-	},
+	}
-	render: function() {
+	render() {
 		var name = "Please select an account";
-		register = [];
+		var register = [];
 
 		if (this.props.selectedAccount != -1) {
 			name = this.props.accounts[this.props.selectedAccount].Name;
@@ -815,9 +860,9 @@ module.exports = React.createClass({
 					transaction={selectedTransaction}
 					accounts={this.props.accounts}
 					accountChildren={this.props.accountChildren}
-					onCancel={this.handleEditingCancel}
+					onCancel={this.onEditingCancel}
-					onSubmit={this.handleUpdateTransaction}
+					onSubmit={this.onUpdateTransaction}
-					onDelete={this.handleDeleteTransaction}
+					onDelete={this.onDeleteTransaction}
 					securities={this.props.securities} />
 				<ImportTransactionsModal
 					imports={this.props.imports}
@@ -826,7 +871,7 @@ module.exports = React.createClass({
 					accounts={this.props.accounts}
 					onCancel={this.props.onCloseImportModal}
 					onHide={this.props.onCloseImportModal}
-					onSubmit={this.handleImportComplete}
+					onSubmit={this.onImportComplete}
 					onImportOFX={this.props.onImportOFX}
 					onImportOFXFile={this.props.onImportOFXFile}
 					onImportGnucash={this.props.onImportGnucash} />
@@ -840,11 +885,11 @@ module.exports = React.createClass({
 						items={this.props.transactionPage.numPages}
 						maxButtons={Math.min(5, this.props.transactionPage.numPages)}
 						activePage={this.props.transactionPage.page + 1}
-						onSelect={this.handleSelectPage} />
+						onSelect={this.onSelectPage} />
 					</ButtonGroup>
 					<ButtonGroup>
 					<Button
-							onClick={this.handleNewTransactionClicked}
+							onClick={this.onNewTransactionClicked}
 							bsStyle="success"
 							disabled={disabled}>
 						<Glyphicon glyph='plus-sign' /> New Transaction
@@ -861,4 +906,6 @@ module.exports = React.createClass({
 			</div>
 		);
 	}
-});
+}
+
+module.exports = AccountRegister;

js/components/AccountSettingsModal.js

@@ -14,27 +14,32 @@ var Col = ReactBootstrap.Col;
 
 var User = require('../models').User;
 
-module.exports = React.createClass({
+class AccountSettingsModal extends React.Component {
-	displayName: "AccountSettingsModal",
+	_getInitialState(props) {
-	_getInitialState: function(props) {
+		return {
-		return {error: "",
+			error: "",
-			name: props.user.Name,
+			name: props ? props.user.Name: "",
-			username: props.user.Username,
+			username: props ? props.user.Username : "",
-			email: props.user.Email,
+			email: props ? props.user.Email : "",
 			password: models.BogusPassword,
 			confirm_password: models.BogusPassword,
 			passwordChanged: false,
-			initial_password: models.BogusPassword};
+			initial_password: models.BogusPassword
-	},
+		};
-	getInitialState: function() {
+	}
-		 return this._getInitialState(this.props);
+	constructor() {
-	},
+		super();
-	componentWillReceiveProps: function(nextProps) {
+		this.state = this._getInitialState();
+		this.onCancel = this.handleCancel.bind(this);
+		this.onChange = this.handleChange.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
 		if (nextProps.show && !this.props.show) {
 			this.setState(this._getInitialState(nextProps));
 		}
-	},
+	}
-	passwordValidationState: function() {
+	passwordValidationState() {
 		if (this.state.passwordChanged) {
 			if (this.state.password.length >= 10)
 				return "success";
@@ -43,20 +48,20 @@ module.exports = React.createClass({
 			else
 				return "error";
 		}
-	},
+	}
-	confirmPasswordValidationState: function() {
+	confirmPasswordValidationState() {
 		if (this.state.confirm_password.length > 0) {
 			if (this.state.confirm_password == this.state.password)
 				return "success";
 			else
 				return "error";
 		}
-	},
+	}
-	handleCancel: function() {
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleChange: function() {
+	handleChange() {
 		if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
 			this.setState({passwordChanged: true});
 		this.setState({
@@ -66,8 +71,8 @@ module.exports = React.createClass({
 			password: ReactDOM.findDOMNode(this.refs.password).value,
 			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
 		});
-	},
+	}
-	handleSubmit: function(e) {
+	handleSubmit(e) {
 		var u = new User();
 		e.preventDefault();
 
@@ -87,22 +92,22 @@ module.exports = React.createClass({
 
 		this.props.onUpdateUser(u);
 		this.props.onSubmit();
-	},
+	}
-	render: function() {
+	render() {
 		return (
-			<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
+			<Modal show={this.props.show} onHide={this.onCancel} bsSize="large">
 				<Modal.Header closeButton>
 					<Modal.Title>Edit Account Settings</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 				<span color="red">{this.state.error}</span>
-				<Form horizontal onSubmit={this.handleSubmit}>
+				<Form horizontal onSubmit={this.onSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Name</Col>
 						<Col xs={10}>
 						<FormControl type="text"
 								value={this.state.name}
-								onChange={this.handleChange}
+								onChange={this.onChange}
 								ref="name"/>
 						</Col>
 					</FormGroup>
@@ -111,7 +116,7 @@ module.exports = React.createClass({
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.username}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="username"/>
 						</Col>
 					</FormGroup>
@@ -120,7 +125,7 @@ module.exports = React.createClass({
 						<Col xs={10}>
 						<FormControl type="email"
 							value={this.state.email}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="email"/>
 						</Col>
 					</FormGroup>
@@ -129,7 +134,7 @@ module.exports = React.createClass({
 						<Col xs={10}>
 						<FormControl type="password"
 							value={this.state.password}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="password"/>
 						<FormControl.Feedback/>
 						</Col>
@@ -139,7 +144,7 @@ module.exports = React.createClass({
 						<Col xs={10}>
 						<FormControl type="password"
 							value={this.state.confirm_password}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="confirm_password"/>
 						<FormControl.Feedback/>
 						</Col>
@@ -148,11 +153,13 @@ module.exports = React.createClass({
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup>
-						<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
+						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
-						<Button onClick={this.handleSubmit} bsStyle="success">Save Settings</Button>
+						<Button onClick={this.onSubmit} bsStyle="success">Save Settings</Button>
 					</ButtonGroup>
 				</Modal.Footer>
 			</Modal>
 		);
 	}
-});
+}
+
+module.exports = AccountSettingsModal;

js/components/AccountsTab.js

@@ -33,8 +33,8 @@ var AccountTypeList = models.AccountTypeList;
 var AccountCombobox = require('./AccountCombobox');
 var AccountRegister = require('./AccountRegister');
 
-const AddEditAccountModal = React.createClass({
+class AddEditAccountModal extends React.Component {
-	getInitialState: function() {
+	getInitialState(props) {
 		var s = {
 			accountid: -1,
 			security: 1,
@@ -54,36 +54,54 @@ const AddEditAccountModal = React.createClass({
 			ofxversion: "",
 			ofxnoindent: false,
 		};
-		if (this.props.editAccount != null) {
+		if (!props) {
-			s.accountid = this.props.editAccount.AccountId;
+			return s;
-			s.name = this.props.editAccount.Name;
+		} else if (props.editAccount != null) {
-			s.security = this.props.editAccount.SecurityId;
+			s.accountid = props.editAccount.AccountId;
-			s.parentaccountid = this.props.editAccount.ParentAccountId;
+			s.name = props.editAccount.Name;
-			s.type = this.props.editAccount.Type;
+			s.security = props.editAccount.SecurityId;
-			s.ofxurl = this.props.editAccount.OFXURL;
+			s.parentaccountid = props.editAccount.ParentAccountId;
-			s.ofxorg = this.props.editAccount.OFXORG;
+			s.type = props.editAccount.Type;
-			s.ofxfid = this.props.editAccount.OFXFID;
+			s.ofxurl = props.editAccount.OFXURL;
-			s.ofxuser = this.props.editAccount.OFXUser;
+			s.ofxorg = props.editAccount.OFXORG;
-			s.ofxbankid = this.props.editAccount.OFXBankID;
+			s.ofxfid = props.editAccount.OFXFID;
-			s.ofxacctid = this.props.editAccount.OFXAcctID;
+			s.ofxuser = props.editAccount.OFXUser;
-			s.ofxaccttype = this.props.editAccount.OFXAcctType;
+			s.ofxbankid = props.editAccount.OFXBankID;
-			s.ofxclientuid = this.props.editAccount.OFXClientUID;
+			s.ofxacctid = props.editAccount.OFXAcctID;
-			s.ofxappid = this.props.editAccount.OFXAppID;
+			s.ofxaccttype = props.editAccount.OFXAcctType;
-			s.ofxappver = this.props.editAccount.OFXAppVer;
+			s.ofxclientuid = props.editAccount.OFXClientUID;
-			s.ofxversion = this.props.editAccount.OFXVersion;
+			s.ofxappid = props.editAccount.OFXAppID;
-			s.ofxnoindent = this.props.editAccount.OFXNoIndent;
+			s.ofxappver = props.editAccount.OFXAppVer;
-		} else if (this.props.initialParentAccount != null) {
+			s.ofxversion = props.editAccount.OFXVersion;
-			s.security = this.props.initialParentAccount.SecurityId;
+			s.ofxnoindent = props.editAccount.OFXNoIndent;
-			s.parentaccountid = this.props.initialParentAccount.AccountId;
+		} else if (props.initialParentAccount != null) {
-			s.type = this.props.initialParentAccount.Type;
+			s.security = props.initialParentAccount.SecurityId;
+			s.parentaccountid = props.initialParentAccount.AccountId;
+			s.type = props.initialParentAccount.Type;
 		}
 		return s;
-	},
+	}
-	handleCancel: function() {
+	constructor() {
+		super();
+		this.state = this.getInitialState();
+		this.onCancel = this.handleCancel.bind(this);
+		this.onChange = this.handleChange.bind(this);
+		this.onNoIndentClick = this.handleNoIndentClick.bind(this);
+		this.onSecurityChange = this.handleSecurityChange.bind(this);
+		this.onTypeChange = this.handleTypeChange.bind(this);
+		this.onParentChange = this.handleParentChange.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.show && !this.props.show) {
+			this.setState(this.getInitialState(nextProps));
+		}
+	}
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleChange: function() {
+	handleChange() {
 		this.setState({
 			name: ReactDOM.findDOMNode(this.refs.name).value,
 			ofxurl: ReactDOM.findDOMNode(this.refs.ofxurl).value,
@@ -98,27 +116,27 @@ const AddEditAccountModal = React.createClass({
 			ofxappver: ReactDOM.findDOMNode(this.refs.ofxappver).value,
 			ofxversion: ReactDOM.findDOMNode(this.refs.ofxversion).value,
 		});
-	},
+	}
 
-	handleNoIndentClick: function() {
+	handleNoIndentClick() {
 		this.setState({ofxnoindent: !this.state.ofxnoindent});
-	},
+	}
-	handleSecurityChange: function(security) {
+	handleSecurityChange(security) {
 		if (security.hasOwnProperty('SecurityId'))
 			this.setState({
 				security: security.SecurityId
 			});
-	},
+	}
-	handleTypeChange: function(type) {
+	handleTypeChange(type) {
 		if (type.hasOwnProperty('TypeId'))
 			this.setState({
 				type: type.TypeId
 			});
-	},
+	}
-	handleParentChange: function(parentAccount) {
+	handleParentChange(parentAccount) {
 		this.setState({parentaccountid: parentAccount.AccountId});
-	},
+	}
-	handleSubmit: function() {
+	handleSubmit() {
 		var a = new Account();
 
 		if (this.props.editAccount != null)
@@ -143,13 +161,8 @@ const AddEditAccountModal = React.createClass({
 
 		if (this.props.onSubmit != null)
 			this.props.onSubmit(a);
-	},
+	}
-	componentWillReceiveProps: function(nextProps) {
+	render() {
-		if (nextProps.show && !this.props.show) {
-			this.setState(this.getInitialState());
-		}
-	},
-	render: function() {
 		var headerText = (this.props.editAccount != null) ? "Edit" : "Create New";
 		var buttonText = (this.props.editAccount != null) ? "Save Changes" : "Create Account";
 		var rootName = (this.props.editAccount != null) ? "Top-level Account" : "New Top-level Account";
@@ -165,7 +178,7 @@ const AddEditAccountModal = React.createClass({
 							componentClass="select"
 							placeholder="select"
 							value={this.state.ofxaccttype}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxaccttype">
 						<option value="CHECKING">Checking</option>
 						<option value="SAVINGS">Savings</option>
@@ -180,20 +193,20 @@ const AddEditAccountModal = React.createClass({
 		}
 		var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false;
 		return (
-			<Modal show={this.props.show} onHide={this.handleCancel}>
+			<Modal show={this.props.show} onHide={this.onCancel}>
 				<Modal.Header closeButton>
 					<Modal.Title>{headerText} Account</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 				<Tabs defaultActiveKey={1} id="editAccountTabs">
 					<Tab eventKey={1} title="General">
-					<Form horizontal onSubmit={this.handleSubmit}>
+					<Form horizontal onSubmit={this.onSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Name</Col>
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.name}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="name"/>
 						</Col>
 					</FormGroup>
@@ -205,7 +218,7 @@ const AddEditAccountModal = React.createClass({
 							accountChildren={this.props.accountChildren}
 							value={this.state.parentaccountid}
 							rootName={rootName}
-							onChange={this.handleParentChange}
+							onChange={this.onParentChange}
 							ref="parent" />
 						</Col>
 					</FormGroup>
@@ -218,7 +231,7 @@ const AddEditAccountModal = React.createClass({
 							valueField='SecurityId'
 							textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
 							defaultValue={this.state.security}
-							onChange={this.handleSecurityChange}
+							onChange={this.onSecurityChange}
 							ref="security" />
 						</Col>
 					</FormGroup>
@@ -231,20 +244,20 @@ const AddEditAccountModal = React.createClass({
 							valueField='TypeId'
 							textField='Name'
 							defaultValue={this.state.type}
-							onChange={this.handleTypeChange}
+							onChange={this.onTypeChange}
 							ref="type" />
 						</Col>
 					</FormGroup>
 					</Form>
 					</Tab>
 					<Tab eventKey={2} title="Sync (OFX)">
-					<Form horizontal onSubmit={this.handleSubmit}>
+					<Form horizontal onSubmit={this.onSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>OFX URL</Col>
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.ofxurl}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxurl"/>
 						</Col>
 					</FormGroup>
@@ -253,7 +266,7 @@ const AddEditAccountModal = React.createClass({
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.ofxorg}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxorg"/>
 						</Col>
 					</FormGroup>
@@ -262,7 +275,7 @@ const AddEditAccountModal = React.createClass({
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.ofxfid}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxfid"/>
 						</Col>
 					</FormGroup>
@@ -271,7 +284,7 @@ const AddEditAccountModal = React.createClass({
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.ofxuser}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxuser"/>
 						</Col>
 					</FormGroup>
@@ -281,7 +294,7 @@ const AddEditAccountModal = React.createClass({
 						<FormControl type="text"
 							disabled={bankIdDisabled}
 							value={this.state.ofxbankid}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxbankid"/>
 						</Col>
 					</FormGroup>
@@ -290,7 +303,7 @@ const AddEditAccountModal = React.createClass({
 						<Col xs={10}>
 						<FormControl type="text"
 							value={this.state.ofxacctid}
-							onChange={this.handleChange}
+							onChange={this.onChange}
 							ref="ofxacctid"/>
 						</Col>
 					</FormGroup>
@@ -301,7 +314,7 @@ const AddEditAccountModal = React.createClass({
 							<Col xs={10}>
 							<FormControl type="text"
 								value={this.state.ofxclientuid}
-								onChange={this.handleChange}
+								onChange={this.onChange}
 								ref="ofxclientuid"/>
 							</Col>
 						</FormGroup>
@@ -310,7 +323,7 @@ const AddEditAccountModal = React.createClass({
 							<Col xs={10}>
 							<FormControl type="text"
 								value={this.state.ofxappid}
-								onChange={this.handleChange}
+								onChange={this.onChange}
 								ref="ofxappid"/>
 							</Col>
 						</FormGroup>
@@ -319,7 +332,7 @@ const AddEditAccountModal = React.createClass({
 							<Col xs={10}>
 							<FormControl type="text"
 								value={this.state.ofxappver}
-								onChange={this.handleChange}
+								onChange={this.onChange}
 								ref="ofxappver"/>
 							</Col>
 						</FormGroup>
@@ -328,7 +341,7 @@ const AddEditAccountModal = React.createClass({
 							<Col xs={10}>
 							<FormControl type="text"
 								value={this.state.ofxversion}
-								onChange={this.handleChange}
+								onChange={this.onChange}
 								ref="ofxversion"/>
 							</Col>
 						</FormGroup>
@@ -336,7 +349,7 @@ const AddEditAccountModal = React.createClass({
 							<Col xsOffset={2} xs={10}>
 							<Checkbox
 								checked={this.state.ofxnoindent ? "checked" : ""}
-								onClick={this.handleNoIndentClick}>
+								onClick={this.onNoIndentClick}>
 									Don't indent OFX request files
 							</Checkbox>
 							</Col>
@@ -348,40 +361,58 @@ const AddEditAccountModal = React.createClass({
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup className="pull-right">
-						<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
+						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
-						<Button onClick={this.handleSubmit} bsStyle="success">{buttonText}</Button>
+						<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
 					</ButtonGroup>
 				</Modal.Footer>
 			</Modal>
 		);
 	}
-});
+}
 
 
-const DeleteAccountModal = React.createClass({
+class DeleteAccountModal extends React.Component {
-	getInitialState: function() {
+	getInitialState(props) {
-		if (this.props.initialAccount != null)
+		if (!props)
-			var accountid = this.props.initialAccount.AccountId;
+			var accountid = -1;
-		else if (this.props.accounts.length > 0)
+		else if (props.initialAccount != null)
-			var accountid = this.props.accounts[0].AccountId;
+			var accountid = props.initialAccount.AccountId;
+		else if (props.accounts.length > 0)
+			var accountid = props.accounts[0].AccountId;
 		else
 			var accountid = -1;
-		return {error: "",
+
+		return {
+			error: "",
 			accountid: accountid,
 			checked: false,
-			show: false};
+			show: false
-	},
+		};
-	handleCancel: function() {
+	}
+	constructor() {
+		super();
+		this.state = this.getInitialState();
+		this.onCancel = this.handleCancel.bind(this);
+		this.onChange = this.handleChange.bind(this);
+		this.onCheckboxClick = this.handleCheckboxClick.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.show && !this.props.show) {
+			this.setState(this.getInitialState(nextProps));
+		}
+	}
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleChange: function(account) {
+	handleChange(account) {
 		this.setState({accountid: account.AccountId});
-	},
+	}
-	handleCheckboxClick: function() {
+	handleCheckboxClick() {
 		this.setState({checked: !this.state.checked});
-	},
+	}
-	handleSubmit: function() {
+	handleSubmit() {
 		if (this.props.accounts.hasOwnProperty(this.state.accountid)) {
 			if (this.state.checked) {
 				if (this.props.onSubmit != null)
@@ -392,13 +423,8 @@ const DeleteAccountModal = React.createClass({
 		} else {
 			this.setState({error: "You must select an account."});
 		}
-	},
+	}
-	componentWillReceiveProps: function(nextProps) {
+	render() {
-		if (nextProps.show && !this.props.show) {
-			this.setState(this.getInitialState());
-		}
-	},
-	render: function() {
 		var checkbox = [];
 		if (this.props.accounts.hasOwnProperty(this.state.accountid)) {
 			var parentAccountId = this.props.accounts[this.state.accountid].ParentAccountId;
@@ -412,7 +438,7 @@ const DeleteAccountModal = React.createClass({
 				<Col xsOffset={2} sm={10}>
 				<Checkbox
 					checked={this.state.checked ? "checked" : ""}
-					onClick={this.handleCheckboxClick}>
+					onClick={this.onCheckboxClick}>
 					{warningString}
 				</Checkbox>
 				</Col>
@@ -428,14 +454,14 @@ const DeleteAccountModal = React.createClass({
 		return (
 			<Modal
 				show={this.props.show}
-				onHide={this.handleCancel}
+				onHide={this.onCancel}
 				ref="modal">
 				<Modal.Header closeButton>
 					<Modal.Title>Delete Account</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 				{warning}
-				<Form horizontal onSubmit={this.handleSubmit}>
+				<Form horizontal onSubmit={this.onSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Delete Account</Col>
 						<Col xs={10}>
@@ -444,7 +470,7 @@ const DeleteAccountModal = React.createClass({
 							accounts={this.props.accounts}
 							accountChildren={this.props.accountChildren}
 							value={this.state.accountid}
-							onChange={this.handleChange}/>
+							onChange={this.onChange}/>
 						</Col>
 					</FormGroup>
 					{checkbox}
@@ -452,32 +478,36 @@ const DeleteAccountModal = React.createClass({
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup className="pull-right">
-						<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
+						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
-						<Button onClick={this.handleSubmit} bsStyle="success">Delete Account</Button>
+						<Button onClick={this.onSubmit} bsStyle="success">Delete Account</Button>
 					</ButtonGroup>
 				</Modal.Footer>
 			</Modal>
 		);
 	}
-});
+}
 
-const AccountTreeNode = React.createClass({
+class AccountTreeNode extends React.Component {
-	getInitialState: function() {
+	constructor() {
-		return {expanded: false};
+		super();
-	},
+		this.state = {expanded: false};
-	handleToggle: function(e) {
+		this.onToggle = this.handleToggle.bind(this);
+		this.onChildSelect = this.handleChildSelect.bind(this);
+		this.onSelect = this.handleSelect.bind(this);
+	}
+	handleToggle(e) {
 		e.preventDefault();
 		this.setState({expanded:!this.state.expanded});
-	},
+	}
-	handleChildSelect: function(account) {
+	handleChildSelect(account) {
 		if (this.props.onSelect != null)
 			this.props.onSelect(account);
-	},
+	}
-	handleSelect: function() {
+	handleSelect() {
 		if (this.props.onSelect != null)
 			this.props.onSelect(this.props.account);
-	},
+	}
-	render: function() {
+	render() {
 		var glyph = this.state.expanded ? 'minus' : 'plus';
 		var active = (this.props.selectedAccount != -1 &&
 			this.props.account.AccountId == this.props.selectedAccount);
@@ -493,14 +523,14 @@ const AccountTreeNode = React.createClass({
 					selectedAccount={self.props.selectedAccount}
 					accounts={self.props.accounts}
 					accountChildren={self.props.accountChildren}
-					onSelect={self.handleChildSelect}/>
+					onSelect={self.onChildSelect}/>
 		   );
 		});
 		var accounttreeClasses = "accounttree"
 		var expandButton = [];
 		if (children.length > 0) {
 			expandButton.push((
-				<Button onClick={this.handleToggle}
+				<Button onClick={this.onToggle}
 						key={1}
 						bsSize="xsmall"
 						bsStyle="link"
@@ -514,7 +544,7 @@ const AccountTreeNode = React.createClass({
 		return (
 			<div className={accounttreeClasses}>
 				{expandButton}
-				<Button onClick={this.handleSelect}
+				<Button onClick={this.onSelect}
 						bsStyle={buttonStyle}
 						className="accounttree-name">
 					{this.props.account.Name}
@@ -527,27 +557,29 @@ const AccountTreeNode = React.createClass({
 			</div>
 		);
 	}
-});
+}
 
-const AccountTree = React.createClass({
+class AccountTree extends React.Component {
-	getInitialState: function() {
+	constructor() {
-		return {height: 0};
+		super();
-	},
+		this.state = {height: 0};
-	handleSelect: function(account) {
+		this.onSelect = this.handleSelect.bind(this);
+	}
+	handleSelect(account) {
 		if (this.props.onSelect != null) {
 			this.props.onSelect(account);
 		}
-	},
+	}
-	resize: function() {
+	resize() {
 		var div = ReactDOM.findDOMNode(this);
 		this.setState({height: div.parentElement.clientHeight - 73});
-	},
+	}
-	componentDidMount: function() {
+	componentDidMount() {
 		this.resize();
 		var self = this;
 		$(window).resize(function() {self.resize();});
-	},
+	}
-	render: function() {
+	render() {
 		var accounts = this.props.accounts;
 
 		var children = [];
@@ -560,7 +592,7 @@ const AccountTree = React.createClass({
 					selectedAccount={this.props.selectedAccount}
 					accounts={this.props.accounts}
 					accountChildren={this.props.accountChildren}
-					onSelect={this.handleSelect}/>));
+					onSelect={this.onSelect}/>));
 			}
 		}
 
@@ -572,55 +604,65 @@ const AccountTree = React.createClass({
 			</div>
 		);
 	}
-});
+}
 
-module.exports = React.createClass({
+class AccountsTab extends React.Component {
-	displayName: "AccountsTab",
+	constructor() {
-	getInitialState: function() {
+		super();
-		return {
+		this.state = {
 			creatingNewAccount: false,
 			editingAccount: false,
 			deletingAccount: false
 		};
-	},
+		this.onNewAccount = this.handleNewAccount.bind(this);
-	handleNewAccount: function() {
+		this.onEditAccount = this.handleEditAccount.bind(this);
+		this.onDeleteAccount = this.handleDeleteAccount.bind(this);
+		this.onCreationCancel = this.handleCreationCancel.bind(this);
+		this.onEditingCancel = this.handleEditingCancel.bind(this);
+		this.onDeletionCancel = this.handleDeletionCancel.bind(this);
+		this.onCreateAccount = this.handleCreateAccount.bind(this);
+		this.onUpdateAccount = this.handleUpdateAccount.bind(this);
+		this.onRemoveAccount = this.handleRemoveAccount.bind(this);
+		this.onAccountSelected = this.handleAccountSelected.bind(this);
+	}
+	handleNewAccount() {
 		this.setState({creatingNewAccount: true});
-	},
+	}
-	handleEditAccount: function() {
+	handleEditAccount() {
 		this.setState({editingAccount: true});
-	},
+	}
-	handleDeleteAccount: function() {
+	handleDeleteAccount() {
 		this.setState({deletingAccount: true});
-	},
+	}
-	handleCreationCancel: function() {
+	handleCreationCancel() {
 		this.setState({creatingNewAccount: false});
-	},
+	}
-	handleEditingCancel: function() {
+	handleEditingCancel() {
 		this.setState({editingAccount: false});
-	},
+	}
-	handleDeletionCancel: function() {
+	handleDeletionCancel() {
 		this.setState({deletingAccount: false});
-	},
+	}
-	handleCreateAccount: function(account) {
+	handleCreateAccount(account) {
 		if (this.props.onCreateAccount != null)
 			this.props.onCreateAccount(account);
 		this.setState({creatingNewAccount: false});
-	},
+	}
-	handleUpdateAccount: function(account) {
+	handleUpdateAccount(account) {
 		if (this.props.onUpdateAccount != null)
 			this.props.onUpdateAccount(account);
 		this.setState({editingAccount: false});
-	},
+	}
-	handleRemoveAccount: function(account) {
+	handleRemoveAccount(account) {
 		if (this.props.onDeleteAccount != null)
 			this.props.onDeleteAccount(account);
 		this.setState({deletingAccount: false});
-	},
+	}
-	handleAccountSelected: function(account) {
+	handleAccountSelected(account) {
 		this.props.onSelectAccount(account.AccountId);
 		this.props.onFetchTransactionPage(account, 20, 0);
-	},
+	}
-	render: function() {
+	render() {
 		var disabled = (this.props.selectedAccount == -1) ? true : false;
 
 		var selectedAccount = null;
@@ -635,36 +677,36 @@ module.exports = React.createClass({
 						initialParentAccount={selectedAccount}
 						accounts={this.props.accounts}
 						accountChildren={this.props.accountChildren}
-						onCancel={this.handleCreationCancel}
+						onCancel={this.onCreationCancel}
-						onSubmit={this.handleCreateAccount}
+						onSubmit={this.onCreateAccount}
 						security_list={this.props.security_list}/>
 					<AddEditAccountModal
 						show={this.state.editingAccount}
 						editAccount={selectedAccount}
 						accounts={this.props.accounts}
 						accountChildren={this.props.accountChildren}
-						onCancel={this.handleEditingCancel}
+						onCancel={this.onEditingCancel}
-						onSubmit={this.handleUpdateAccount}
+						onSubmit={this.onUpdateAccount}
 						security_list={this.props.security_list}/>
 					<DeleteAccountModal
 						show={this.state.deletingAccount}
 						initialAccount={selectedAccount}
 						accounts={this.props.accounts}
 						accountChildren={this.props.accountChildren}
-						onCancel={this.handleDeletionCancel}
+						onCancel={this.onDeletionCancel}
-						onSubmit={this.handleRemoveAccount}/>
+						onSubmit={this.onRemoveAccount}/>
 					<AccountTree
 						accounts={this.props.accounts}
 						accountChildren={this.props.accountChildren}
 						selectedAccount={this.props.selectedAccount}
-						onSelect={this.handleAccountSelected}/>
+						onSelect={this.onAccountSelected}/>
 					<ButtonGroup className="account-buttongroup">
-						<Button onClick={this.handleNewAccount} bsStyle="success">
+						<Button onClick={this.onNewAccount} bsStyle="success">
 							<Glyphicon glyph='plus-sign' /></Button>
-						<Button onClick={this.handleEditAccount}
+						<Button onClick={this.onEditAccount}
 								bsStyle="primary" disabled={disabled}>
 							<Glyphicon glyph='cog' /></Button>
-						<Button onClick={this.handleDeleteAccount}
+						<Button onClick={this.onDeleteAccount}
 								bsStyle="danger" disabled={disabled}>
 							<Glyphicon glyph='trash' /></Button>
 					</ButtonGroup>
@@ -694,4 +736,6 @@ module.exports = React.createClass({
 			</Row></Grid>
 		);
 	}
-});
+}
+
+module.exports = AccountsTab;

js/components/MoneyGoApp.js

@@ -13,36 +13,34 @@ var AccountsTabContainer = require('../containers/AccountsTabContainer');
 var SecuritiesTabContainer = require('../containers/SecuritiesTabContainer');
 var ReportsTabContainer = require('../containers/ReportsTabContainer');
 
-module.exports = React.createClass({
+class MoneyGoApp extends React.Component {
-	displayName: "MoneyGoApp",
+	constructor() {
-	getInitialState: function() {
+		super();
-		return {
+		this.state = {
 			showNewUserModal: false,
 			showAccountSettingsModal: false
 		};
-	},
+		this.onShowSettings = this.handleShowSettings.bind(this);
-	componentDidMount: function() {
+		this.onHideSettings = this.handleHideSettings.bind(this);
+		this.onShowNewUser = this.handleShowNewUser.bind(this);
+		this.onHideNewUser = this.handleHideNewUser.bind(this);
+	}
+	componentDidMount() {
 		this.props.tryResumingSession();
-	},
+	}
-	handleAccountSettings: function() {
+	handleShowSettings() {
 		this.setState({showAccountSettingsModal: true});
-	},
+	}
-	handleSettingsSubmitted: function(user) {
+	handleHideSettings(user) {
 		this.setState({showAccountSettingsModal: false});
-	},
+	}
-	handleSettingsCanceled: function() {
+	handleShowNewUser() {
-		this.setState({showAccountSettingsModal: false});
-	},
-	handleCreateNewUser: function() {
 		this.setState({showNewUserModal: true});
-	},
+	}
-	handleNewUserCreated: function() {
+	handleHideNewUser() {
 		this.setState({showNewUserModal: false});
-	},
+	}
-	handleNewUserCanceled: function() {
+	render() {
-		this.setState({showNewUserModal: false});
-	},
-	render: function() {
 		var mainContent;
 		if (this.props.user.isUser())
 			mainContent = (
@@ -74,18 +72,20 @@ module.exports = React.createClass({
 		return (
 			<div className="fullheight ui">
 				<TopBarContainer
-					onCreateNewUser={this.handleCreateNewUser}
+					onCreateNewUser={this.onShowNewUser}
-					onAccountSettings={this.handleAccountSettings} />
+					onAccountSettings={this.onShowSettings} />
 				{mainContent}
 				<NewUserModalContainer
 					show={this.state.showNewUserModal}
-					onSubmit={this.handleNewUserCreated}
+					onSubmit={this.onHideNewUser}
-					onCancel={this.handleNewUserCanceled}/>
+					onCancel={this.onHideNewUser}/>
 				<AccountSettingsModalContainer
 					show={this.state.showAccountSettingsModal}
-					onSubmit={this.handleSettingsSubmitted}
+					onSubmit={this.onHideSettings}
-					onCancel={this.handleSettingsCanceled}/>
+					onCancel={this.onHideSettings}/>
 			</div>
 		);
 	}
-});
+}
+
+module.exports = MoneyGoApp;

js/components/NewUserModal.js

@@ -14,19 +14,21 @@ var ButtonGroup = ReactBootstrap.ButtonGroup;
 var models = require('../models');
 var User = models.User;
 
-module.exports = React.createClass({
+class NewUserModal extends React.Component {
-	displayName: "NewUserModal",
+	constructor() {
-	getInitialState: function() {
+		super();
-		return {error: "",
+		this.state = {
+			error: "",
 			name: "",
 			username: "",
 			email: "",
 			password: "",
 			confirm_password: "",
 			passwordChanged: false,
-			initial_password: ""};
+			initial_password: ""
-	},
+		};
-	passwordValidationState: function() {
+	}
+	passwordValidationState() {
 		if (this.state.passwordChanged) {
 			if (this.state.password.length >= 10)
 				return "success";
@@ -35,20 +37,20 @@ module.exports = React.createClass({
 			else
 				return "error";
 		}
-	},
+	}
-	confirmPasswordValidationState: function() {
+	confirmPasswordValidationState() {
 		if (this.state.confirm_password.length > 0) {
 			if (this.state.confirm_password == this.state.password)
 				return "success";
 			else
 				return "error";
 		}
-	},
+	}
-	handleCancel: function() {
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleChange: function() {
+	handleChange() {
 		if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
 			this.setState({passwordChanged: true});
 		this.setState({
@@ -58,8 +60,8 @@ module.exports = React.createClass({
 			password: ReactDOM.findDOMNode(this.refs.password).value,
 			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
 		});
-	},
+	}
-	handleSubmit: function(e) {
+	handleSubmit(e) {
 		var u = new User();
 		var error = "";
 		e.preventDefault();
@@ -76,8 +78,8 @@ module.exports = React.createClass({
 		this.props.createNewUser(u);
 		if (this.props.onSubmit != null)
 			this.props.onSubmit(u);
-	},
+	}
-	render: function() {
+	render() {
 		return (
 			<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
 				<Modal.Header closeButton>
@@ -146,4 +148,6 @@ module.exports = React.createClass({
 			</Modal>
 		);
 	}
-});
+}
+
+module.exports = NewUserModal;

js/components/PieChart.js

@@ -1,9 +1,8 @@
 var d3 = require('d3');
 var React = require('react');
 
-var Slice = React.createClass({
+class Slice extends React.Component {
-	displayName: "Slice",
+	render() {
-	render: function() {
 		if (this.props.angle > Math.PI*2 - 0.00001) {
 			var slice = (<circle cx={this.props.cx} cy={this.props.cy} r={this.props.radius}
 				className={this.props.className}
@@ -15,7 +14,7 @@ var Slice = React.createClass({
 			var large_arc_flag = this.props.angle > Math.PI ? 1 : 0;
 			var rotateDegrees = this.props.startAngle * 180 / Math.PI;
 
-			slice = (<path d={"M" + center + " l " + this.props.radius + " 0 a " + this.props.radius + " " + this.props.radius + ", 0, " + large_arc_flag + ", 1, " + dx + " " + dy + " Z"}
+			var slice = (<path d={"M" + center + " l " + this.props.radius + " 0 a " + this.props.radius + " " + this.props.radius + ", 0, " + large_arc_flag + ", 1, " + dx + " " + dy + " Z"}
 						className={this.props.className}
 						onClick={this.props.onClick} />);
 		}
@@ -26,11 +25,10 @@ var Slice = React.createClass({
 			</g>
 		);
 	}
-});
+}
 
-module.exports = React.createClass({
+class PieChart extends React.Component {
-	displayName: "PieChart",
+	sortedSeries(series) {
-	sortedSeries: function(series) {
 		// Return an array of the series names, from highest to lowest sums (in
 		// absolute terms)
 
@@ -49,13 +47,13 @@ module.exports = React.createClass({
 		});
 
 		return [seriesNames, seriesValues];
-	},
+	}
-	render: function() {
+	render() {
-		height = 400;
+		var height = 400;
-		width = 600;
+		var width = 600;
-		legendWidth = 100;
+		var legendWidth = 100;
-		xMargin = 70;
+		var xMargin = 70;
-		yMargin = 70;
+		var yMargin = 70;
 		height -= yMargin*2;
 		width -= xMargin*2;
 		var radius = Math.min(height, width)/2;
@@ -133,4 +131,6 @@ module.exports = React.createClass({
 			</svg>
 		);
 	}
-});
+}
+
+module.exports = PieChart;

js/components/ReportsTab.js

@@ -7,27 +7,30 @@ var Panel = ReactBootstrap.Panel;
 
 var StackedBarChart = require('../components/StackedBarChart');
 
-module.exports = React.createClass({
+var models = require('../models')
-	displayName: "ReportsTab",
+var Report = models.Report;
-	getInitialState: function() {
+
-		return { };
+class ReportsTab extends React.Component {
-	},
+	constructor() {
-	componentWillMount: function() {
+		super();
+		this.onSelectSeries = this.handleSelectSeries.bind(this);
+	}
+	componentWillMount() {
 		this.props.onFetchReport("monthly_expenses");
-	},
+	}
-	componentWillReceiveProps: function(nextProps) {
+	componentWillReceiveProps(nextProps) {
 		if (nextProps.reports['monthly_expenses'] && !nextProps.selectedReport.report) {
 			this.props.onSelectReport(nextProps.reports['monthly_expenses'], []);
 		}
-	},
+	}
-	onSelectSeries: function(series) {
+	handleSelectSeries(series) {
-		if (series == this.props.selectedReport.report.topLevelAccountName)
+		if (series == Report.topLevelAccountName())
 			return;
 		var seriesTraversal = this.props.selectedReport.seriesTraversal.slice();
 		seriesTraversal.push(series);
 		this.props.onSelectReport(this.props.reports[this.props.selectedReport.report.ReportId], seriesTraversal);
-	},
+	}
-	render: function() {
+	render() {
 		var report = [];
 		if (this.props.selectedReport.report) {
 			var titleTracks = [];
@@ -86,4 +89,6 @@ module.exports = React.createClass({
 			</div>
 		);
 	}
-});
+}
+
+module.exports = ReportsTab;

js/components/SecuritiesTab.js

@@ -25,11 +25,15 @@ var Security = models.Security;
 var SecurityType = models.SecurityType;
 var SecurityTypeList = models.SecurityTypeList;
 
-const SecurityTemplatePanel = React.createClass({
+class SecurityTemplatePanel extends React.Component {
-	handleSearchChange: function(){
+	constructor() {
+		super();
+		this.onSearchChange = this.handleSearchChange.bind(this);
+	}
+	handleSearchChange() {
 		this.props.onSearchTemplates(ReactDOM.findDOMNode(this.refs.search).value, 0, this.props.maxResults + 1);
-	},
+	}
-	renderTemplateList: function() {
+	renderTemplateList() {
 		var templates = this.props.securityTemplates;
 		if (this.props.search != "") {
 			var items = [];
@@ -70,23 +74,23 @@ const SecurityTemplatePanel = React.createClass({
 				</div>
 			);
 		}
-	},
+	}
-	render: function() {
+	render() {
 		return (
 			<Panel collapsible header="Populate Security from Template...">
 				<FormControl type="text"
 					placeholder="Search..."
 					value={this.props.search}
-					onChange={this.handleSearchChange}
+					onChange={this.onSearchChange}
 					ref="search"/>
 				{this.renderTemplateList()}
 			</Panel>
 		);
 	}
-});
+}
 
-const AddEditSecurityModal = React.createClass({
+class AddEditSecurityModal extends React.Component {
-	getInitialState: function() {
+	getInitialState(props) {
 		var s = {
 			securityid: -1,
 			name: "",
@@ -96,18 +100,36 @@ const AddEditSecurityModal = React.createClass({
 			type: 1,
 			alternateid: ""
 		};
-		if (this.props.editSecurity != null) {
+		if (props && props.editSecurity != null) {
-			s.securityid = this.props.editSecurity.SecurityId;
+			s.securityid = props.editSecurity.SecurityId;
-			s.name = this.props.editSecurity.Name;
+			s.name = props.editSecurity.Name;
-			s.description = this.props.editSecurity.Description;
+			s.description = props.editSecurity.Description;
-			s.symbol = this.props.editSecurity.Symbol;
+			s.symbol = props.editSecurity.Symbol;
-			s.precision = this.props.editSecurity.Precision;
+			s.precision = props.editSecurity.Precision;
-			s.type = this.props.editSecurity.Type;
+			s.type = props.editSecurity.Type;
-			s.alternateid = this.props.editSecurity.AlternateId;
+			s.alternateid = props.editSecurity.AlternateId;
 		}
 		return s;
-	},
+	}
-	onSelectTemplate: function(template) {
+	constructor() {
+		super();
+		this.state = this.getInitialState();
+		this.onSelectTemplate = this.handleSelectTemplate.bind(this);
+		this.onCancel = this.handleCancel.bind(this);
+		this.onNameChange = this.handleNameChange.bind(this);
+		this.onDescriptionChange = this.handleDescriptionChange.bind(this);
+		this.onSymbolChange = this.handleSymbolChange.bind(this);
+		this.onPrecisionChange = this.handlePrecisionChange.bind(this);
+		this.onTypeChange = this.handleTypeChange.bind(this);
+		this.onAlternateIdChange = this.handleAlternateIdChange.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.show && !this.props.show) {
+			this.setState(this.getInitialState(nextProps));
+		}
+	}
+	handleSelectTemplate(template) {
 		this.setState({
 			name: template.Name,
 			description: template.Description,
@@ -116,43 +138,43 @@ const AddEditSecurityModal = React.createClass({
 			type: template.Type,
 			alternateid: template.AlternateId 
 		});
-	},
+	}
-	handleCancel: function() {
+	handleCancel() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
-	},
+	}
-	handleNameChange: function() {
+	handleNameChange() {
 		this.setState({
 			name: ReactDOM.findDOMNode(this.refs.name).value,
 		});
-	},
+	}
-	handleDescriptionChange: function() {
+	handleDescriptionChange() {
 		this.setState({
 			description: ReactDOM.findDOMNode(this.refs.description).value,
 		});
-	},
+	}
-	handleSymbolChange: function() {
+	handleSymbolChange() {
 		this.setState({
 			symbol: ReactDOM.findDOMNode(this.refs.symbol).value,
 		});
-	},
+	}
-	handlePrecisionChange: function() {
+	handlePrecisionChange() {
 		this.setState({
 			precision: +ReactDOM.findDOMNode(this.refs.precision).value,
 		});
-	},
+	}
-	handleTypeChange: function(type) {
+	handleTypeChange(type) {
 		if (type.hasOwnProperty('TypeId'))
 			this.setState({
 				type: type.TypeId
 			});
-	},
+	}
-	handleAlternateIdChange: function() {
+	handleAlternateIdChange() {
 		this.setState({
 			alternateid: ReactDOM.findDOMNode(this.refs.alternateid).value,
 		});
-	},
+	}
-	handleSubmit: function() {
+	handleSubmit() {
 		var s = new Security();
 
 		if (this.props.editSecurity != null)
@@ -166,18 +188,13 @@ const AddEditSecurityModal = React.createClass({
 
 		if (this.props.onSubmit != null)
 			this.props.onSubmit(s);
-	},
+	}
-	componentWillReceiveProps: function(nextProps) {
+	render() {
-		if (nextProps.show && !this.props.show) {
-			this.setState(this.getInitialState());
-		}
-	},
-	render: function() {
 		var headerText = (this.props.editSecurity != null) ? "Edit" : "Create New";
 		var buttonText = (this.props.editSecurity != null) ? "Save Changes" : "Create Security";
 		var alternateidname = (this.state.type == SecurityType.Currency) ? "ISO 4217 Code" : "CUSIP";
 		return (
-			<Modal show={this.props.show} onHide={this.handleCancel}>
+			<Modal show={this.props.show} onHide={this.onCancel}>
 				<Modal.Header closeButton>
 					<Modal.Title>{headerText} Security</Modal.Title>
 				</Modal.Header>
@@ -188,13 +205,13 @@ const AddEditSecurityModal = React.createClass({
 					onSearchTemplates={this.props.onSearchTemplates}
 					maxResults={15}
 					onSelectTemplate={this.onSelectTemplate} />
-				<Form horizontal onSubmit={this.handleSubmit}>
+				<Form horizontal onSubmit={this.onSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={3}>Name</Col>
 						<Col xs={9}>
 						<FormControl type="text"
 							value={this.state.name}
-							onChange={this.handleNameChange}
+							onChange={this.onNameChange}
 							ref="name"/>
 						</Col>
 					</FormGroup>
@@ -203,7 +220,7 @@ const AddEditSecurityModal = React.createClass({
 						<Col xs={9}>
 						<FormControl type="text"
 							value={this.state.description}
-							onChange={this.handleDescriptionChange}
+							onChange={this.onDescriptionChange}
 							ref="description"/>
 						</Col>
 					</FormGroup>
@@ -212,7 +229,7 @@ const AddEditSecurityModal = React.createClass({
 						<Col xs={9}>
 						<FormControl type="text"
 							value={this.state.symbol}
-							onChange={this.handleSymbolChange}
+							onChange={this.onSymbolChange}
 							ref="symbol"/>
 						</Col>
 					</FormGroup>
@@ -222,7 +239,7 @@ const AddEditSecurityModal = React.createClass({
 						<FormControl componentClass="select"
 							placeholder={this.state.precision}
 							value={this.state.precision}
-							onChange={this.handlePrecisionChange}
+							onChange={this.onPrecisionChange}
 							ref="precision">
 								<option value={0}>1</option>
 								<option value={1}>0.1 (1/10)</option>
@@ -242,7 +259,7 @@ const AddEditSecurityModal = React.createClass({
 							valueField='TypeId'
 							textField='Name'
 							value={this.state.type}
-							onChange={this.handleTypeChange}
+							onChange={this.onTypeChange}
 							ref="type" />
 						</Col>
 					</FormGroup>
@@ -251,7 +268,7 @@ const AddEditSecurityModal = React.createClass({
 						<Col xs={9}>
 						<FormControl type="text"
 							value={this.state.alternateid}
-							onChange={this.handleAlternateIdChange}
+							onChange={this.onAlternateIdChange}
 							ref="alternateid"/>
 						</Col>
 					</FormGroup>
@@ -259,17 +276,17 @@ const AddEditSecurityModal = React.createClass({
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup className="pull-right">
-						<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
+						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
-						<Button onClick={this.handleSubmit} bsStyle="success">{buttonText}</Button>
+						<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
 					</ButtonGroup>
 				</Modal.Footer>
 			</Modal>
 		);
 	}
-});
+}
 
-const DeletionFailedModal = React.createClass({
+class DeletionFailedModal extends React.Component {
-	render: function() {
+	render() {
 		return (
 			<Modal show={this.props.show} onHide={this.props.onClose}>
 				<Modal.Header closeButton>
@@ -286,10 +303,10 @@ const DeletionFailedModal = React.createClass({
 			</Modal>
 		);
 	}
-});
+}
 
-const SecurityList = React.createClass({
+class SecurityList extends React.Component {
-	render: function() {
+	render() {
 		var children = [];
 		var self = this;
 		for (var securityId in this.props.securities) {
@@ -314,55 +331,64 @@ const SecurityList = React.createClass({
 			</div>
 		);
 	}
-});
+}
 
-module.exports = React.createClass({
+class SecuritiesTab extends React.Component {
-	displayName: "SecuritiesTab",
+	constructor() {
-	getInitialState: function() {
+		super();
-		return {
+		this.state = {
 			creatingNewSecurity: false,
 			editingSecurity: false,
 			deletionFailedModal: false
 		};
-	},
+		this.onSelectSecurity = this.handleSelectSecurity.bind(this);
-	componentWillReceiveProps: function(nextProps) {
+		this.onNewSecurity = this.handleNewSecurity.bind(this);
+		this.onEditSecurity = this.handleEditSecurity.bind(this);
+		this.onDeleteSecurity = this.handleDeleteSecurity.bind(this);
+		this.onCreationCancel = this.handleCreationCancel.bind(this);
+		this.onCreationSubmit = this.handleCreationSubmit.bind(this);
+		this.onEditingCancel = this.handleEditingCancel.bind(this);
+		this.onEditingSubmit = this.handleEditingSubmit.bind(this);
+		this.onCloseDeletionFailed = this.handleCloseDeletionFailed.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
 		if (nextProps.selectedSecurity == -1 && nextProps.security_list.length > 0) {
 			nextProps.onSelectSecurity(nextProps.security_list[0].SecurityId);
 		}
-	},
+	}
-	handleSelectSecurity: function(security) {
+	handleSelectSecurity(security) {
 		this.props.onSelectSecurity(security.SecurityId);
-	},
+	}
-	handleNewSecurity: function() {
+	handleNewSecurity() {
 		this.setState({creatingNewSecurity: true});
-	},
+	}
-	handleEditSecurity: function() {
+	handleEditSecurity() {
 		this.setState({editingSecurity: true});
-	},
+	}
-	handleDeleteSecurity: function() {
+	handleDeleteSecurity() {
 		if (this.props.selectedSecurityAccounts.length == 0)
 			this.props.onDeleteSecurity(this.props.securities[this.props.selectedSecurity]);
 		else
 			this.setState({deletionFailedModal: true});
-	},
+	}
-	handleCreationCancel: function() {
+	handleCreationCancel() {
 		this.setState({creatingNewSecurity: false});
-	},
+	}
-	handleCreationSubmit: function(security) {
+	handleCreationSubmit(security) {
 		this.setState({creatingNewSecurity: false});
 		this.props.onCreateSecurity(security);
-	},
+	}
-	handleEditingCancel: function() {
+	handleEditingCancel() {
 		this.setState({editingSecurity: false});
-	},
+	}
-	handleEditingSubmit: function(security) {
+	handleEditingSubmit(security) {
 		this.setState({editingSecurity: false});
 		this.props.onUpdateSecurity(security);
-	},
+	}
-	closeDeletionFailedModal: function() {
+	handleCloseDeletionFailed() {
 		this.setState({deletionFailedModal: false});
-	},
+	}
-	render: function() {
+	render() {
 		var noSecuritySelected = this.props.selectedSecurity == -1;
 
 		var selectedSecurity = -1;
@@ -373,25 +399,25 @@ module.exports = React.createClass({
 			<div>
 			<AddEditSecurityModal
 				show={this.state.creatingNewSecurity}
-				onCancel={this.handleCreationCancel}
+				onCancel={this.onCreationCancel}
-				onSubmit={this.handleCreationSubmit}
+				onSubmit={this.onCreationSubmit}
 				onSearchTemplates={this.props.onSearchTemplates}
 				securityTemplates={this.props.securityTemplates} />
 			<AddEditSecurityModal
 				show={this.state.editingSecurity}
 				editSecurity={selectedSecurity}
-				onCancel={this.handleEditingCancel}
+				onCancel={this.onEditingCancel}
-				onSubmit={this.handleEditingSubmit}
+				onSubmit={this.onEditingSubmit}
 				onSearchTemplates={this.props.onSearchTemplates}
 				securityTemplates={this.props.securityTemplates} />
 			<DeletionFailedModal
 				show={this.state.deletionFailedModal}
 				deletingSecurity={selectedSecurity}
-				onClose={this.closeDeletionFailedModal}
+				onClose={this.onCloseDeletionFailed}
 				securityAccounts={this.props.selectedSecurityAccounts} />
 			<ButtonToolbar>
 			<ButtonGroup>
-				<Button onClick={this.handleNewSecurity} bsStyle="success"><Glyphicon glyph='plus-sign'/> New Security</Button>
+				<Button onClick={this.onNewSecurity} bsStyle="success"><Glyphicon glyph='plus-sign'/> New Security</Button>
 			</ButtonGroup>
 			<ButtonGroup>
 				<Combobox
@@ -399,16 +425,18 @@ module.exports = React.createClass({
 					valueField='SecurityId'
 					textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
 					value={selectedSecurity}
-					onChange={this.handleSelectSecurity}
+					onChange={this.onSelectSecurity}
 					suggest
 					filter='contains'
 					ref="security" />
 			</ButtonGroup>
 			<ButtonGroup>
-				<Button onClick={this.handleEditSecurity} bsStyle="primary" disabled={noSecuritySelected}><Glyphicon glyph='cog'/> Edit Security</Button>
+				<Button onClick={this.onEditSecurity} bsStyle="primary" disabled={noSecuritySelected}><Glyphicon glyph='cog'/> Edit Security</Button>
-				<Button onClick={this.handleDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button>
+				<Button onClick={this.onDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button>
 			</ButtonGroup></ButtonToolbar>
 			</div>
 		);
 	}
-});
+}
+
+module.exports = SecuritiesTab;

js/components/StackedBarChart.js

@@ -1,9 +1,8 @@
 var d3 = require('d3');
 var React = require('react');
 
-module.exports = React.createClass({
+class StackedBarChart extends React.Component {
-	displayName: "StackedBarChart",
+	calcMinMax(series) {
-	calcMinMax: function(series) {
 		var children = [];
 		for (var child in series) {
 			if (series.hasOwnProperty(child))
@@ -28,8 +27,8 @@ module.exports = React.createClass({
 		}
 
 		return [Math.min.apply(Math, negativeValues), Math.max.apply(Math, positiveValues)];
-	},
+	}
-	sortedSeries: function(series) {
+	sortedSeries(series) {
 		// Return an array of the series names, from highest to lowest sums (in
 		// absolute terms)
 
@@ -48,21 +47,21 @@ module.exports = React.createClass({
 		});
 
 		return seriesNames;
-	},
+	}
-	calcAxisMarkSeparation: function(minMax, height, ticksPerHeight) {
+	calcAxisMarkSeparation(minMax, height, ticksPerHeight) {
 		var targetTicks = height / ticksPerHeight;
 		var range = minMax[1]-minMax[0];
 		var rangePerTick = range/targetTicks;
 		var roundOrder = Math.floor(Math.log(rangePerTick) / Math.LN10);
 		var roundTo = Math.pow(10, roundOrder);
 		return Math.ceil(rangePerTick/roundTo)*roundTo;
-	},
+	}
-	render: function() {
+	render() {
-		height = 400;
+		var height = 400;
-		width = 600;
+		var width = 1000;
-		legendWidth = 100;
+		var legendWidth = 100;
-		xMargin = 70;
+		var xMargin = 70;
-		yMargin = 70;
+		var yMargin = 70;
 		height -= yMargin*2;
 		width -= xMargin*2;
 
@@ -189,4 +188,6 @@ module.exports = React.createClass({
 			</svg>
 		);
 	}
-});
+}
+
+module.exports =  StackedBarChart;

js/components/TopBar.js

@@ -14,36 +14,39 @@ var ReactDOM = require('react-dom');
 
 var User = require('../models').User;
 
-const LoginBar = React.createClass({
+class LoginBar extends React.Component {
-	getInitialState: function() {
+	constructor() {
-		return {username: '', password: ''};
+		super();
-	},
+		this.state = {username: '', password: ''};
-	onUsernameChange: function(e) {
+		this.onSubmit = this.handleSubmit.bind(this);
+		this.onNewUserSubmit = this.handleNewUserSubmit.bind(this);
+	}
+	onUsernameChange(e) {
 		this.setState({username: e.target.value});
-	},
+	}
-	onPasswordChange: function(e) {
+	onPasswordChange(e) {
 		this.setState({password: e.target.value});
-	},
+	}
-	handleSubmit: function(e) {
+	handleSubmit(e) {
 		var user = new User();
 		e.preventDefault();
 		user.Username = ReactDOM.findDOMNode(this.refs.username).value;
 		user.Password = ReactDOM.findDOMNode(this.refs.password).value;
 		this.props.onLogin(user);
-	},
+	}
-	handleNewUserSubmit: function(e) {
+	handleNewUserSubmit(e) {
 		e.preventDefault();
 		this.props.onCreateNewUser();
-	},
+	}
-	render: function() {
+	render() {
 		return (
-			<form onSubmit={this.handleSubmit}>
+			<form onSubmit={this.onSubmit}>
 			<FormGroup>
 				<Row>
 					<Col xs={4}></Col>
 					<Col xs={2}>
 						<Button bsStyle="link"
-							onClick={this.handleNewUserSubmit}>Create New User</Button>
+							onClick={this.onNewUserSubmit}>Create New User</Button>
 					</Col>
 					<Col xs={2}>
 						<FormControl type="text"
@@ -64,18 +67,22 @@ const LoginBar = React.createClass({
 			</form>
 		);
 	}
-});
+}
 
-const LogoutBar = React.createClass({
+class LogoutBar extends React.Component {
-	handleOnSelect: function(key) {
+	constructor() {
+		super();
+		this.onSelect = this.handleOnSelect.bind(this);
+	}
+	handleOnSelect(key) {
 		if (key == 1) {
 			if (this.props.onAccountSettings != null)
 				this.props.onAccountSettings();
 		} else if (key == 2) {
 			this.props.onLogout();
 		}
-	},
+	}
-	render: function() {
+	render() {
 		var signedInString = "Signed in as "+this.props.user.Name;
 		return (
 			<FormGroup>
@@ -84,7 +91,7 @@ const LogoutBar = React.createClass({
 					<Col xs={6}></Col>
 					<Col xs={4}>
 						<div className="pull-right">
-						<DropdownButton id="logout-settings-dropdown" title={signedInString} onSelect={this.handleOnSelect} bsStyle="info">
+						<DropdownButton id="logout-settings-dropdown" title={signedInString} onSelect={this.onSelect} bsStyle="info">
 							<MenuItem eventKey={1}>Account Settings</MenuItem>
 							<MenuItem eventKey={2}>Logout</MenuItem>
 						</DropdownButton>
@@ -94,11 +101,10 @@ const LogoutBar = React.createClass({
 			</FormGroup>
 		);
 	}
-});
+}
 
-module.exports = React.createClass({
+class TopBar extends React.Component {
-	displayName: "TopBar",
+	render() {
-	render: function() {
 		var barContents;
 		var errorAlert;
 		if (!this.props.user.isUser())
@@ -120,4 +126,6 @@ module.exports = React.createClass({
 			</div>
 		);
 	}
-});
+}
+
+module.exports = TopBar;