-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
code style: add feross/standard linter. fixes #2.
- Loading branch information
Showing
10 changed files
with
226 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| node_modules | ||
| compiled.js | ||
| npm-debug.log |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div> | ||
| <MainMenu onResetClick={this.handleReset}></MainMenu> | ||
| <MainMenu onResetClick={this.handleReset} /> | ||
|
|
||
| <div className="main-wrapper container"> | ||
| <CurrencySelection currency={this.state.currency} onCurrencyChange={this.handleCurrencyChange}> | ||
| </CurrencySelection> | ||
| <div className='main-wrapper container'> | ||
| <CurrencySelection currency={this.state.currency} onCurrencyChange={this.handleCurrencyChange} /> | ||
|
|
||
| <Balance currency={this.state.currency} balance={this.state.balance}></Balance> | ||
| <Balance currency={this.state.currency} balance={this.state.balance} /> | ||
|
|
||
| <TransactionAction | ||
| currency={this.state.currency} | ||
| balance={this.state.balance} | ||
| onNewTransaction={this.handleNewTransaction} | ||
| > | ||
| </TransactionAction> | ||
| /> | ||
|
|
||
| <TransactionHistory currency={this.state.currency} transactions={this.state.transactions}> | ||
| </TransactionHistory> | ||
| <TransactionHistory currency={this.state.currency} transactions={this.state.transactions} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| }); | ||
| }) | ||
|
|
||
| module.exports = App; | ||
| module.exports = App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <h1 className="lead"> | ||
| Balance: <span className="smaller"><i className={classesCurrency}></i></span> | ||
| <h1 className='lead'> | ||
| Balance: <span className='smaller'><i className={classesCurrency}></i></span> | ||
| {accounting.formatMoney(this.props.balance, '')} | ||
| </h1> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| }); | ||
| }) | ||
|
|
||
| module.exports = Balance; | ||
| module.exports = Balance |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Button active={currentCurrency === currencyButton} | ||
| href='#' | ||
| onClick={this.handleClick.bind(this, currencyButton)} | ||
| > | ||
| <i className={classesCurrency}></i> {currencyButton} | ||
| </Button> | ||
| ); | ||
| ) | ||
| }, | ||
|
|
||
| render() { | ||
| render () { | ||
| return ( | ||
| <ButtonGroup justified> | ||
| {this.renderCurrencyButton('GBP', this.props.currency)} | ||
| {this.renderCurrencyButton('EUR', this.props.currency)} | ||
| {this.renderCurrencyButton('BTC', this.props.currency)} | ||
| </ButtonGroup> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| }); | ||
| }) | ||
|
|
||
| module.exports = CurrencySelection; | ||
| module.exports = CurrencySelection |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,25 @@ | ||
| 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 ( | ||
| <Navbar brand='Wallet' toggleNavKey={0}> | ||
| <Nav eventKey={0}> | ||
| <NavItem eventKey={2} href='#' onClick={this.props.onResetClick}>Reset</NavItem> | ||
| <NavItem eventKey={3} href='https://github.com/mehl321/wallet/'>View source</NavItem> | ||
| </Nav> | ||
| </Navbar> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| }); | ||
| }) | ||
|
|
||
| module.exports = MainMenu; | ||
| module.exports = MainMenu |
Oops, something went wrong.