From 1a185683a899d357b1d16df82faa2db358a48b85 Mon Sep 17 00:00:00 2001 From: Guilhem Soulas Date: Thu, 3 Sep 2015 18:59:15 +0200 Subject: [PATCH] code style: add feross/standard linter. fixes #2. --- .gitignore | 1 + components/App.jsx | 100 ++++++++++++++-------------- components/Balance.jsx | 27 +++++--- components/CurrencySelection.jsx | 33 +++++---- components/MainMenu.jsx | 17 +++-- components/TransactionAction.jsx | 107 ++++++++++++++++-------------- components/TransactionHistory.jsx | 27 ++++---- components/TransactionItem.jsx | 28 +++++--- npm-debug.log | 35 ++++++++++ package.json | 11 ++- 10 files changed, 226 insertions(+), 160 deletions(-) create mode 100644 npm-debug.log diff --git a/.gitignore b/.gitignore index ada23f0..3eb1348 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules compiled.js +npm-debug.log diff --git a/components/App.jsx b/components/App.jsx index 3a72f46..5cfce92 100644 --- a/components/App.jsx +++ b/components/App.jsx @@ -1,119 +1,115 @@ -let React = require('react'); -let Immutable= require('immutable'); -let fx = require('money'); +let React = require('react') +let Immutable = require('immutable') +let fx = require('money') -let MainMenu = require('./MainMenu'); -let CurrencySelection = require('./CurrencySelection'); -let Balance = require('./Balance'); -let TransactionAction = require('./TransactionAction'); -let TransactionHistory = require('./TransactionHistory'); +let MainMenu = require('./MainMenu') +let CurrencySelection = require('./CurrencySelection') +let Balance = require('./Balance') +let TransactionAction = require('./TransactionAction') +let TransactionHistory = require('./TransactionHistory') -fx.base = 'GBP'; +fx.base = 'GBP' fx.rates = { 'BTC': 0.0073, - 'EUR': 1.36, + 'EUR': 1.36 } // the App component contains all the other components let App = React.createClass({ - getInitialState() { + getInitialState () { + let transactions = localStorage.transactions + ? Immutable.List(JSON.parse(localStorage.transactions)) + : Immutable.List() - let transactions = localStorage.transactions ? - Immutable.List(JSON.parse(localStorage.transactions)) : - Immutable.List(); - - let currency = localStorage.currency ? JSON.parse(localStorage.currency) : 'GBP'; - let balance = this.getNewBalance(transactions, currency); + let currency = localStorage.currency ? JSON.parse(localStorage.currency) : 'GBP' + let balance = this.getNewBalance(transactions, currency) return { currency: currency, transactions: transactions, - balance: balance, - }; + balance: balance + } }, // update local storage when currency, balance or transactions change - componentWillUpdate(nextProps, nextState) { + componentWillUpdate (nextProps, nextState) { if (localStorage.currency !== nextState.currency) { - localStorage.currency = JSON.stringify(nextState.currency); + localStorage.currency = JSON.stringify(nextState.currency) } if (localStorage.transactions !== nextState.transactions) { - localStorage.transactions = JSON.stringify(nextState.transactions.toJS()); + localStorage.transactions = JSON.stringify(nextState.transactions.toJS()) } if (localStorage.balance !== nextState.balance) { - localStorage.balance = JSON.stringify(nextState.balance); + localStorage.balance = JSON.stringify(nextState.balance) } }, // reset everything - handleReset() { - localStorage.clear(); - this.setState(this.getInitialState()); + handleReset () { + localStorage.clear() + this.setState(this.getInitialState()) }, // update currency state and recalculate the balance - handleCurrencyChange(currency) { - let balance = this.getNewBalance(this.state.transactions, currency); + handleCurrencyChange (currency) { + let balance = this.getNewBalance(this.state.transactions, currency) this.setState({ currency: currency, - balance: balance, - }); + balance: balance + }) }, // add and save new transaction // recalculate balance - handleNewTransaction(transaction) { - transaction.currency = this.state.currency; + handleNewTransaction (transaction) { + transaction.currency = this.state.currency - let transacs = this.state.transactions.unshift(transaction); + let transacs = this.state.transactions.unshift(transaction) - let balance = this.getNewBalance(transacs, this.state.currency); + let balance = this.getNewBalance(transacs, this.state.currency) this.setState({ transactions: transacs, - balance: balance, - }); + balance: balance + }) }, // return recalculated balance - getNewBalance(transactions, currency) { + getNewBalance (transactions, currency) { return transactions.reduce((previous, current) => { return previous + fx.convert( current.amount, {from: current.currency, to: currency} - ); - }, 0); + ) + }, 0) }, - render() { + render () { return (
- + -
- - +
+ - + - + /> - - +
- ); + ) } -}); +}) -module.exports = App; +module.exports = App diff --git a/components/Balance.jsx b/components/Balance.jsx index cd53b89..08fffea 100644 --- a/components/Balance.jsx +++ b/components/Balance.jsx @@ -1,22 +1,27 @@ -let React = require('react'); -let classNames = require('classnames'); -let accounting = require('accounting'); +let React = require('react') +let classNames = require('classnames') +let accounting = require('accounting') // balance display component let Balance = React.createClass({ - render() { - let faCurrency = 'fa-' + this.props.currency.toLowerCase(); - let classesCurrency = classNames('fa', faCurrency); + propTypes: { + balance: React.PropTypes.number, + currency: React.PropTypes.string + }, + + render () { + let faCurrency = 'fa-' + this.props.currency.toLowerCase() + let classesCurrency = classNames('fa', faCurrency) return ( -

- Balance:   +

+ Balance:   {accounting.formatMoney(this.props.balance, '')}

- ); + ) } -}); +}) -module.exports = Balance; +module.exports = Balance diff --git a/components/CurrencySelection.jsx b/components/CurrencySelection.jsx index 73fef25..aab1245 100644 --- a/components/CurrencySelection.jsx +++ b/components/CurrencySelection.jsx @@ -1,40 +1,45 @@ -let React = require('react'); +let React = require('react') -let classNames = require('classnames'); +let classNames = require('classnames') -let {ButtonGroup, Button} = require('react-bootstrap'); +let {ButtonGroup, Button} = require('react-bootstrap') // currency selection component let CurrencySelection = React.createClass({ - handleClick(currency) { - this.props.onCurrencyChange(currency); + propTypes: { + onCurrencyChange: React.PropTypes.func, + currency: React.PropTypes.string }, - renderCurrencyButton(currencyButton, currentCurrency) { - let faCurrency = 'fa-' + currencyButton.toLowerCase(); - let classesCurrency = classNames('fa', 'fa-fw', faCurrency); + handleClick (currency) { + this.props.onCurrencyChange(currency) + }, + + renderCurrencyButton (currencyButton, currentCurrency) { + let faCurrency = 'fa-' + currencyButton.toLowerCase() + let classesCurrency = classNames('fa', 'fa-fw', faCurrency) - return( + return ( - ); + ) }, - render() { + render () { return ( {this.renderCurrencyButton('GBP', this.props.currency)} {this.renderCurrencyButton('EUR', this.props.currency)} {this.renderCurrencyButton('BTC', this.props.currency)} - ); + ) } -}); +}) -module.exports = CurrencySelection; +module.exports = CurrencySelection diff --git a/components/MainMenu.jsx b/components/MainMenu.jsx index b939c1d..fefea01 100644 --- a/components/MainMenu.jsx +++ b/components/MainMenu.jsx @@ -1,10 +1,15 @@ -let React = require('react'); +let React = require('react') -let {Navbar, Nav, NavItem} = require('react-bootstrap'); +let {Navbar, Nav, NavItem} = require('react-bootstrap') // top menu let MainMenu = React.createClass({ - render() { + + propTypes: { + onResetClick: React.PropTypes.func + }, + + render () { return ( - ); + ) } -}); +}) -module.exports = MainMenu; +module.exports = MainMenu diff --git a/components/TransactionAction.jsx b/components/TransactionAction.jsx index ed14f8e..63663f1 100644 --- a/components/TransactionAction.jsx +++ b/components/TransactionAction.jsx @@ -1,143 +1,148 @@ -let React = require('react'); +let React = require('react') -let {Grid, Row, Col, Input, Button} = require('react-bootstrap'); +let {Row, Col, Input, Button} = require('react-bootstrap') -let classNames = require('classnames'); -let accounting = require('accounting'); +let classNames = require('classnames') +let accounting = require('accounting') -const DEPOSIT = 'deposit'; -const WITHDRAWAL = 'withdrawal'; +const DEPOSIT = 'deposit' +const WITHDRAWAL = 'withdrawal' // component to deposit or withdraw money let TransactionAction = React.createClass({ - getInitialState() { + propTypes: { + currency: React.PropTypes.string, + balance: React.PropTypes.number, + onNewTransaction: React.PropTypes.func + }, + + getInitialState () { return { depositValue: '', - withdrawalValue: '', - }; + withdrawalValue: '' + } }, // check amount not null number // impossible to withdraw more than balance amount - isAmountValid(amount, type) { - let amountRegex = /^\d*(\.\d*){0,1}$/; + isAmountValid (amount, type) { + let amountRegex = /^\d*(\.\d*){0,1}$/ if (amountRegex.test(amount) && accounting.unformat(amount) > 0) { return type === DEPOSIT || - (type === WITHDRAWAL && amount <= this.props.balance); + (type === WITHDRAWAL && amount <= this.props.balance) } else { - return false; + return false } - }, // return 'error' if an amount has been entered but is invalid - handleValidAmountStyling(type) { - let typeName = type + 'Value'; - let fieldValue = this.state[typeName]; + handleValidAmountStyling (type) { + let typeName = type + 'Value' + let fieldValue = this.state[typeName] if (fieldValue && !this.isAmountValid(fieldValue, type)) { - return 'error'; + return 'error' } }, // used to submit new transaction with 'enter' key - handleKeyboard(type, e) { - let typeName = type + 'Value'; + handleKeyboard (type, e) { + let typeName = type + 'Value' if (e.key === 'Enter' && this.isAmountValid(this.state[typeName], type)) { - this.handleNewTransaction(type); + this.handleNewTransaction(type) } }, // update inputs values - handleChange(type) { - let refName = type + 'Input'; - let stateName = type + 'Value'; - let state = {}; + handleChange (type) { + let refName = type + 'Input' + let stateName = type + 'Value' + let state = {} - state[stateName] = this.refs[refName].getValue(); + state[stateName] = this.refs[refName].getValue() - this.setState(state); + this.setState(state) }, // create transaction object - handleNewTransaction(type) { - let refName = type + 'Input'; + handleNewTransaction (type) { + let refName = type + 'Input' // clear inputs this.setState({ depositValue: '', - withdrawalValue: '', - }); + withdrawalValue: '' + }) let transaction = { - timestamp: Math.floor(Date.now() / 1000), - }; + timestamp: Math.floor(Date.now() / 1000) + } // add negative sign for withdrawals - let amount = accounting.unformat(this.refs[refName].getValue()); + let amount = accounting.unformat(this.refs[refName].getValue()) transaction.amount = type === DEPOSIT ? amount : -1 * amount - this.props.onNewTransaction(transaction); + this.props.onNewTransaction(transaction) }, - render() { - let faCurrency = 'fa-' + this.props.currency.toLowerCase(); - let classesCurrency = classNames('fa', faCurrency); + render () { + let faCurrency = 'fa-' + this.props.currency.toLowerCase() + let classesCurrency = classNames('fa', faCurrency) return (
} onChange={this.handleChange.bind(this, DEPOSIT)} onKeyDown={this.handleKeyboard.bind(this, DEPOSIT)} buttonAfter={ } - placeholder="Deposit" + placeholder='Deposit' style={{'zIndex': 10}} /> } onChange={this.handleChange.bind(this, WITHDRAWAL)} onKeyDown={this.handleKeyboard.bind(this, WITHDRAWAL)} buttonAfter={ } - placeholder="Withdraw" + placeholder='Withdraw' style={{'zIndex': 10}} />
- ); + ) } -}); +}) -module.exports = TransactionAction; +module.exports = TransactionAction diff --git a/components/TransactionHistory.jsx b/components/TransactionHistory.jsx index 0a985c9..8b0c4b5 100644 --- a/components/TransactionHistory.jsx +++ b/components/TransactionHistory.jsx @@ -1,13 +1,17 @@ -let React = require('react'); +let React = require('react') -let {Table} = require('react-bootstrap'); +let {Table} = require('react-bootstrap') -let TransactionItem = require('./TransactionItem'); +let TransactionItem = require('./TransactionItem') // container of the transaction items let TransactionHistory = React.createClass({ - render() { + propTypes: { + transactions: React.PropTypes.object + }, + + render () { let transactions = this.props.transactions.map((t, i) => { return ( - - ); - }); + /> + ) + }) // if no transactions, don't display an empty HTML table if (transactions.size === 0) { - return null; + return null } return ( @@ -42,9 +45,9 @@ let TransactionHistory = React.createClass({ - ); + ) } -}); +}) -module.exports = TransactionHistory; +module.exports = TransactionHistory diff --git a/components/TransactionItem.jsx b/components/TransactionItem.jsx index c8a8d56..c6ea3e7 100644 --- a/components/TransactionItem.jsx +++ b/components/TransactionItem.jsx @@ -1,16 +1,22 @@ -let React = require('react'); +let React = require('react') -let classNames = require('classnames'); -let moment = require('moment'); -let accounting = require('accounting'); +let classNames = require('classnames') +let moment = require('moment') +let accounting = require('accounting') // display one transaction let TransactionItem = React.createClass({ - render() { - let typeClass; - let faCurrency = 'fa-' + this.props.currency.toLowerCase(); - let classesCurrency = classNames('fa', faCurrency); + propTypes: { + currency: React.PropTypes.string, + amount: React.PropTypes.number, + number: React.PropTypes.number, + timestamp: React.PropTypes.number + }, + + render () { + let faCurrency = 'fa-' + this.props.currency.toLowerCase() + let classesCurrency = classNames('fa', faCurrency) return ( 0 ? 'success' : 'danger'}> @@ -20,9 +26,9 @@ let TransactionItem = React.createClass({ {moment.unix(this.props.timestamp).format('lll')} - ); + ) } -}); +}) -module.exports = TransactionItem; +module.exports = TransactionItem diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000..ce929fd --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,35 @@ +0 info it worked if it ends with ok +1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'lint' ] +2 info using npm@2.11.3 +3 info using node@v0.12.7 +4 verbose run-script [ 'prelint', 'lint', 'postlint' ] +5 info prelint Wallet@0.0.0 +6 info lint Wallet@0.0.0 +7 verbose unsafe-perm in lifecycle true +8 info Wallet@0.0.0 Failed to exec lint script +9 verbose stack Error: Wallet@0.0.0 lint: `standard ./**/*.js*` +9 verbose stack Exit status 1 +9 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16) +9 verbose stack at EventEmitter.emit (events.js:110:17) +9 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14) +9 verbose stack at ChildProcess.emit (events.js:110:17) +9 verbose stack at maybeClose (child_process.js:1015:16) +9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5) +10 verbose pkgid Wallet@0.0.0 +11 verbose cwd /Users/gui/www/wallet +12 error Darwin 14.5.0 +13 error argv "node" "/usr/local/bin/npm" "run" "lint" +14 error node v0.12.7 +15 error npm v2.11.3 +16 error code ELIFECYCLE +17 error Wallet@0.0.0 lint: `standard ./**/*.js*` +17 error Exit status 1 +18 error Failed at the Wallet@0.0.0 lint script 'standard ./**/*.js*'. +18 error This is most likely a problem with the Wallet package, +18 error not with npm itself. +18 error Tell the author that this fails on your system: +18 error standard ./**/*.js* +18 error You can get their info via: +18 error npm owner ls Wallet +18 error There is likely additional logging output above. +19 verbose exit [ 1, true ] diff --git a/package.json b/package.json index 8366b33..bdb254c 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "main": "main.js", "scripts": { "watch": "watchify -v -d -t babelify main.js --extension=.jsx -o compiled.js", - "build": "NODE_ENV=production browserify -t babelify --extension=.jsx main.js | uglifyjs > compiled.js" + "build": "NODE_ENV=production browserify -t babelify --extension=.jsx main.js | uglifyjs > compiled.js", + "lint": "standard ./**/*.js*" }, "author": "Guilhem Soulas", "license": "MIT", @@ -16,12 +17,16 @@ "moment": "2.10.6", "money": "0.2.0", "react": "0.13.3", - "react-bootstrap": "0.24.5" + "react-bootstrap": "0.24.5", + "standard": "5.2.1" }, "devDependencies": { "babelify": "6.2.0", "browserify": "11.0.1", "uglify-js": "2.4.24", "watchify": "3.3.1" + }, + "standard": { + "global": [ "localStorage" ] } -} +} \ No newline at end of file