From 8097306dceefda7e6e090b043042f63c9e617b61 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 20 May 2019 22:32:57 +0200 Subject: [PATCH 1/2] refactor --- src/app/components/Ticker.jsx | 41 +++-- src/app/screens/Preferences.jsx | 130 --------------- src/app/screens/Preferences/Accounts.jsx | 149 ++++++++++++++++++ .../index.css} | 0 src/app/screens/Preferences/index.jsx | 20 +++ src/main.js | 102 ++++++------ 6 files changed, 238 insertions(+), 204 deletions(-) delete mode 100644 src/app/screens/Preferences.jsx create mode 100644 src/app/screens/Preferences/Accounts.jsx rename src/app/screens/{Preferences.css => Preferences/index.css} (100%) create mode 100644 src/app/screens/Preferences/index.jsx diff --git a/src/app/components/Ticker.jsx b/src/app/components/Ticker.jsx index 5c68820..88ea657 100644 --- a/src/app/components/Ticker.jsx +++ b/src/app/components/Ticker.jsx @@ -10,14 +10,26 @@ const Item = posed.div(fadeIn) export default class Ticker extends PureComponent { static contextType = AppContext + items = activeStyle => + Object.keys(this.context.prices).map((key, i) => ( + + + + )) + render() { - const { - toggleCurrencies, - needsConfig, - currency, - prices, - accentColor - } = this.context + const { accentColor } = this.context const activeStyle = { backgroundColor: accentColor, @@ -27,20 +39,7 @@ export default class Ticker extends PureComponent { return ( ) } diff --git a/src/app/screens/Preferences.jsx b/src/app/screens/Preferences.jsx deleted file mode 100644 index 16e8193..0000000 --- a/src/app/screens/Preferences.jsx +++ /dev/null @@ -1,130 +0,0 @@ -import React, { PureComponent } from 'react' -import { Link } from '@reach/router' -import Store from 'electron-store' -import Blockies from 'react-blockies' -import ethereum_address from 'ethereum-address' -import posed, { PoseGroup } from 'react-pose' -import { AppContext } from '../store/createContext' -import './Preferences.css' -import { fadeIn } from '../components/Animations' - -const Item = posed.li(fadeIn) - -export default class Preferences extends PureComponent { - static contextType = AppContext - - store = new Store() - - state = { accounts: [], input: '', error: '' } - - componentDidMount() { - if (this.store.has('accounts')) { - this.setState({ accounts: this.store.get('accounts') }) - } - } - - handleInputChange = e => { - this.setState({ input: e.target.value }) - } - - handleSave = e => { - e.preventDefault() - - const { accounts, input } = this.state - - const isEmpty = input === '' - const isDuplicate = accounts.includes(input) - const isAddress = ethereum_address.isAddress(input) - - if (isEmpty) { - this.setState({ error: 'Please enter an address.' }) - return - } else if (isDuplicate) { - this.setState({ error: 'Address already added. Try another one.' }) - return - } else if (!isAddress) { - this.setState({ error: 'Not an Ethereum address. Try another one.' }) - return - } else { - const joined = [...accounts, input] - - this.store.set('accounts', joined) - this.setState({ accounts: joined, input: '', error: '' }) - this.context.setBalances() - } - } - - handleDelete = (e, account) => { - e.preventDefault() - - let array = this.state.accounts - array = array.filter(item => account !== item) - - const index = array.indexOf(account) - if (index > -1) { - array.splice(index, 1) - } - - this.store.set('accounts', array) - this.setState({ accounts: array }) - this.context.setBalances() - } - - render() { - const { accounts, input, error } = this.state - - return ( -
-

Preferences

{' '} - - × - -
-

Accounts

-

- Add Ethereum account addresses holding Ocean Tokens. -

-
    - - {accounts && - accounts.map(account => ( - -
    - - {account} -
    - - -     - ))} -     -
  • - - - -
    • -
- {error !== '' &&
{error}
} -
-
- ) - } -} diff --git a/src/app/screens/Preferences/Accounts.jsx b/src/app/screens/Preferences/Accounts.jsx new file mode 100644 index 0000000..ee9913a --- /dev/null +++ b/src/app/screens/Preferences/Accounts.jsx @@ -0,0 +1,149 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Blockies from 'react-blockies' +import posed, { PoseGroup } from 'react-pose' +import Store from 'electron-store' +import ethereum_address from 'ethereum-address' +import { AppContext } from '../../store/createContext' +import { fadeIn } from '../../components/Animations' + +const Item = posed.li(fadeIn) + +const AccountsList = ({ accounts, handleDelete }) => ( + + {accounts.map(account => ( + +
+ + {account} +
+ + + + ))} + +) + +AccountsList.propTypes = { + accounts: PropTypes.array.isRequired, + handleDelete: PropTypes.func.isRequired +} + +const AccountNew = ({ input, handleInputChange, handleSave, accentColor }) => ( +
  • + handleInputChange(e)} + className="preference__input" + /> + + +
    • +) + +AccountNew.propTypes = { + input: PropTypes.string.isRequired, + handleInputChange: PropTypes.func.isRequired, + handleSave: PropTypes.func.isRequired, + accentColor: PropTypes.string.isRequired +} + +export default class Accounts extends PureComponent { + static contextType = AppContext + + store = new Store() + + state = { accounts: [], input: '', error: '' } + + componentDidMount() { + if (this.store.has('accounts')) { + this.setState({ accounts: this.store.get('accounts') }) + } + } + + handleInputChange = e => { + this.setState({ input: e.target.value }) + } + + handleSave = e => { + e.preventDefault() + + const { accounts, input } = this.state + + const isEmpty = input === '' + const isDuplicate = accounts.includes(input) + const isAddress = ethereum_address.isAddress(input) + + if (isEmpty) { + this.setState({ error: 'Please enter an address.' }) + return + } else if (isDuplicate) { + this.setState({ error: 'Address already added. Try another one.' }) + return + } else if (!isAddress) { + this.setState({ error: 'Not an Ethereum address. Try another one.' }) + return + } else { + const joined = [...accounts, input] + + this.store.set('accounts', joined) + this.setState({ accounts: joined, input: '', error: '' }) + this.context.setBalances() + } + } + + handleDelete = (e, account) => { + e.preventDefault() + + let array = this.state.accounts + array = array.filter(item => account !== item) + + const index = array.indexOf(account) + if (index > -1) { + array.splice(index, 1) + } + + this.store.set('accounts', array) + this.setState({ accounts: array }) + this.context.setBalances() + } + + render() { + const { accentColor } = this.context + const { accounts, input, error } = this.state + + return ( +
    +

    Accounts

    +

    + Add Ethereum account addresses holding Ocean Tokens. +

    + + {error !== '' &&
    {error}
    } +
    + ) + } +} diff --git a/src/app/screens/Preferences.css b/src/app/screens/Preferences/index.css similarity index 100% rename from src/app/screens/Preferences.css rename to src/app/screens/Preferences/index.css diff --git a/src/app/screens/Preferences/index.jsx b/src/app/screens/Preferences/index.jsx new file mode 100644 index 0000000..14da3c6 --- /dev/null +++ b/src/app/screens/Preferences/index.jsx @@ -0,0 +1,20 @@ +import React, { PureComponent } from 'react' +import { Link } from '@reach/router' + +import './index.css' + +import Accounts from './Accounts' + +export default class Preferences extends PureComponent { + render() { + return ( +
    +

    Preferences

    {' '} + + × + + +
    + ) + } +} diff --git a/src/main.js b/src/main.js index 0e97786..7b7058c 100644 --- a/src/main.js +++ b/src/main.js @@ -20,6 +20,52 @@ if ( const width = 620 const height = 440 +const installDevTools = async mainWindow => { + if (isDev) { + const { + default: installExtension, + REACT_DEVELOPER_TOOLS + } = require('electron-devtools-installer') + + try { + const name = await installExtension(REACT_DEVELOPER_TOOLS) + console.log(`Added Extension: ${name}`) // eslint-disable-line no-console + + mainWindow.webContents.on('devtools-opened', () => + mainWindow.setSize(1024, 420, true) + ) + mainWindow.webContents.on('devtools-closed', () => + mainWindow.setSize(width, height, true) + ) + } catch (error) { + console.log('An error occurred: ', error) // eslint-disable-line no-console + } + } +} + +const createWindowEvents = mainWindow => { + mainWindow.on('enter-full-screen', () => + mainWindow.webContents.executeJavaScript( + 'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')' + ) + ) + mainWindow.on('leave-full-screen', () => + mainWindow.webContents.executeJavaScript( + 'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')' + ) + ) + mainWindow.on('blur', () => + mainWindow.webContents.executeJavaScript( + 'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')' + ) + ) + mainWindow.on('focus', () => + mainWindow.webContents.executeJavaScript( + 'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')' + ) + ) +} + const createWindow = async () => { const isDarkMode = systemPreferences.isDarkMode() @@ -47,19 +93,8 @@ const createWindow = async () => { : `file://${path.join(__dirname, '../build/index.html')}` ) - if (isDev) { - const { - default: installExtension, - REACT_DEVELOPER_TOOLS - } = require('electron-devtools-installer') - - try { - const name = await installExtension(REACT_DEVELOPER_TOOLS) - console.log(`Added Extension: ${name}`) // eslint-disable-line no-console - } catch (error) { - console.log('An error occurred: ', error) // eslint-disable-line no-console - } - } + createWindowEvents(mainWindow) + installDevTools(mainWindow) mainWindow.once('ready-to-show', () => { mainWindow.show() @@ -70,49 +105,10 @@ const createWindow = async () => { mainWindow = null }) - // - // Events - // - mainWindow.on('enter-full-screen', () => { - mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')' - ) - }) - - mainWindow.on('leave-full-screen', () => { - mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')' - ) - }) - - mainWindow.on('blur', () => { - mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')' - ) - }) - - mainWindow.on('focus', () => { - mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')' - ) - }) - - // Make window bigger automatically when devtools are opened - mainWindow.webContents.on('devtools-opened', () => { - mainWindow.setSize(1024, 420, true) - }) - - mainWindow.webContents.on('devtools-closed', () => { - mainWindow.setSize(width, height, true) - }) - // Load menubar buildMenu(mainWindow) - // Load touchbar - if (process.platform === 'darwin') { - touchBarWrapper(mainWindow) - } + process.platform === 'darwin' && touchBarWrapper(mainWindow) } app.on('ready', () => { From 191be877e472709ca7d3cc24aff9ba9d7665e875 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 20 May 2019 22:46:17 +0200 Subject: [PATCH 2/2] add codeclimate badge --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1bbaa02..652e8df 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@

    +