Browse Source

fix(lint): linting errors

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
commit
22f4eb09d0
  1. 6
      app/components/Onboarding/Alias.js
  2. 70
      app/components/Onboarding/FormContainer.js
  3. 65
      app/components/Onboarding/Onboarding.js
  4. 4
      app/components/Onboarding/Syncing.js
  5. 2
      app/components/Onboarding/index.js
  6. 14
      app/containers/Root.js

6
app/components/Onboarding/Alias.js

@ -1,7 +1,5 @@
import React, { Component } from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Isvg from 'react-inlinesvg'
import zapLogo from 'icons/zap_logo.svg'
import styles from './Alias.scss' import styles from './Alias.scss'
const Alias = ({ alias, updateAlias }) => ( const Alias = ({ alias, updateAlias }) => (
@ -22,4 +20,4 @@ Alias.propTypes = {
updateAlias: PropTypes.func.isRequired updateAlias: PropTypes.func.isRequired
} }
export default Alias export default Alias

70
app/components/Onboarding/FormContainer.js

@ -1,57 +1,55 @@
import React, { Component } from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Isvg from 'react-inlinesvg' import Isvg from 'react-inlinesvg'
import zapLogo from 'icons/zap_logo.svg' import zapLogo from 'icons/zap_logo.svg'
import styles from './FormContainer.scss' import styles from './FormContainer.scss'
const FormContainer = ({ title, description, back, next, children }) => { const FormContainer = ({ title, description, back, next, children }) => (
return ( <div className={styles.container}>
<div className={styles.container}> <div className={styles.titleBar} />
<div className={styles.titleBar} />
<header className={styles.header}> <header className={styles.header}>
<section>
<Isvg src={zapLogo} />
</section>
<section />
</header>
<div className={styles.info}>
<h1>{title}</h1>
<p>{description}</p>
</div>
<div className={styles.content}>
{children}
</div>
<footer className={styles.footer}>
<div className={styles.buttonsContainer}>
<section> <section>
<Isvg src={zapLogo} /> {
back && <div onClick={back}>Back</div>
}
</section> </section>
<section> <section>
{
next && <div onClick={next}>Next</div>
}
</section> </section>
</header>
<div className={styles.info}>
<h1>{title}</h1>
<p>{description}</p>
</div> </div>
</footer>
</div>
)
<div className={styles.content}>
{children}
</div>
<footer className={styles.footer}>
<div className={styles.buttonsContainer}>
<section>
{
back && <div onClick={back}>Back</div>
}
</section>
<section>
{
next && <div onClick={next}>Next</div>
}
</section>
</div>
</footer>
</div>
)
}
FormContainer.propTypes = { FormContainer.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired, description: PropTypes.string.isRequired,
back: PropTypes.func, back: PropTypes.func,
next: PropTypes.func, next: PropTypes.func,
children: PropTypes.object.isRequired children: PropTypes.object.isRequired
} }
export default FormContainer export default FormContainer

65
app/components/Onboarding/Onboarding.js

@ -1,7 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Isvg from 'react-inlinesvg'
import zapLogo from 'icons/zap_logo.svg'
import LoadingBolt from 'components/LoadingBolt' import LoadingBolt from 'components/LoadingBolt'
@ -9,42 +7,37 @@ import FormContainer from './FormContainer'
import Alias from './Alias' import Alias from './Alias'
import styles from './Onboarding.scss' import styles from './Onboarding.scss'
const Onboarding = ({
class Onboarding extends Component { onboarding: {
render() { step,
const { alias
onboarding: { },
step, submit,
alias aliasProps
}, }) => {
submit, const renderStep = () => {
aliasProps switch (step) {
} = this.props case 1:
return (
const renderStep = () => { <FormContainer
switch(step) { title={'1. What should we call you?'}
case 1: description={'Set your nickname to help others connect with you on the Lightning Network'}
return ( back={null}
<FormContainer next={() => submit(alias)}
title={'1. What should we call you?'} >
description={'Set your nickname to help others connect with you on the Lightning Network'} <Alias {...aliasProps} />
back={null} </FormContainer>
next={() => submit(alias)} )
> default:
<Alias {...aliasProps} /> return <LoadingBolt />
</FormContainer>
)
default:
return <LoadingBolt />
}
} }
return (
<div className={styles.container}>
{renderStep()}
</div>
)
} }
return (
<div className={styles.container}>
{renderStep()}
</div>
)
} }
Onboarding.propTypes = { Onboarding.propTypes = {

4
app/components/Onboarding/Syncing.js

@ -16,7 +16,7 @@ class Syncing extends Component {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.titleBar} /> <div className={styles.titleBar} />
<div className={styles.content}> <div className={styles.content}>
<header> <header>
<Isvg className={styles.bitcoinLogo} src={zapLogo} /> <Isvg className={styles.bitcoinLogo} src={zapLogo} />
@ -26,7 +26,7 @@ class Syncing extends Component {
<div className={styles.progressBar}> <div className={styles.progressBar}>
<div className={styles.progress} style={{ width: isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }} /> <div className={styles.progress} style={{ width: isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }} />
</div> </div>
<h4>{isNaN(parseInt(syncPercentage)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}</h4> <h4>{isNaN(parseInt(syncPercentage, 10)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}</h4>
</section> </section>
</div> </div>
</div> </div>

2
app/components/Onboarding/index.js

@ -1,3 +1,3 @@
import Onboarding from './Onboarding' import Onboarding from './Onboarding'
export default Onboarding export default Onboarding

14
app/containers/Root.js

@ -50,14 +50,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
const Root = ({ const Root = ({
store, store,
history, history,
lnd, lnd,
onboarding, onboarding,
submit, submit,
aliasProps, aliasProps,
syncingProps, syncingProps
updateAlias,
changeStep,
}) => { }) => {
// If we are syncing show the syncing screen // If we are syncing show the syncing screen
if (!onboarding.onboarded) { if (!onboarding.onboarded) {
@ -90,8 +88,14 @@ const Root = ({
Root.propTypes = { Root.propTypes = {
store: PropTypes.object.isRequired, store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired, history: PropTypes.object.isRequired,
lnd: PropTypes.object.isRequired,
onboarding: PropTypes.object.isRequired, onboarding: PropTypes.object.isRequired,
syncingProps: PropTypes.object.isRequired syncingProps: PropTypes.object.isRequired,
aliasProps: PropTypes.object.isRequired,
submit: PropTypes.func.isRequired,
updateAlias: PropTypes.func.isRequired,
changeStep: PropTypes.func.isRequired
} }
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Root) export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Root)

Loading…
Cancel
Save