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 Isvg from 'react-inlinesvg'
import zapLogo from 'icons/zap_logo.svg'
import styles from './Alias.scss'
const Alias = ({ alias, updateAlias }) => (
@ -22,4 +20,4 @@ Alias.propTypes = {
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 Isvg from 'react-inlinesvg'
import zapLogo from 'icons/zap_logo.svg'
import styles from './FormContainer.scss'
const FormContainer = ({ title, description, back, next, children }) => {
return (
<div className={styles.container}>
<div className={styles.titleBar} />
const FormContainer = ({ title, description, back, next, children }) => (
<div className={styles.container}>
<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>
<Isvg src={zapLogo} />
{
back && <div onClick={back}>Back</div>
}
</section>
<section>
{
next && <div onClick={next}>Next</div>
}
</section>
</header>
<div className={styles.info}>
<h1>{title}</h1>
<p>{description}</p>
</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 = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
back: PropTypes.func,
next: PropTypes.func,
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 PropTypes from 'prop-types'
import Isvg from 'react-inlinesvg'
import zapLogo from 'icons/zap_logo.svg'
import LoadingBolt from 'components/LoadingBolt'
@ -9,42 +7,37 @@ import FormContainer from './FormContainer'
import Alias from './Alias'
import styles from './Onboarding.scss'
class Onboarding extends Component {
render() {
const {
onboarding: {
step,
alias
},
submit,
aliasProps
} = this.props
const renderStep = () => {
switch(step) {
case 1:
return (
<FormContainer
title={'1. What should we call you?'}
description={'Set your nickname to help others connect with you on the Lightning Network'}
back={null}
next={() => submit(alias)}
>
<Alias {...aliasProps} />
</FormContainer>
)
default:
return <LoadingBolt />
}
const Onboarding = ({
onboarding: {
step,
alias
},
submit,
aliasProps
}) => {
const renderStep = () => {
switch (step) {
case 1:
return (
<FormContainer
title={'1. What should we call you?'}
description={'Set your nickname to help others connect with you on the Lightning Network'}
back={null}
next={() => submit(alias)}
>
<Alias {...aliasProps} />
</FormContainer>
)
default:
return <LoadingBolt />
}
return (
<div className={styles.container}>
{renderStep()}
</div>
)
}
return (
<div className={styles.container}>
{renderStep()}
</div>
)
}
Onboarding.propTypes = {

4
app/components/Onboarding/Syncing.js

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

2
app/components/Onboarding/index.js

@ -1,3 +1,3 @@
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 = ({
store,
history,
lnd,
onboarding,
submit,
aliasProps,
syncingProps,
updateAlias,
changeStep,
syncingProps
}) => {
// If we are syncing show the syncing screen
if (!onboarding.onboarded) {
@ -90,8 +88,14 @@ const Root = ({
Root.propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
lnd: 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)

Loading…
Cancel
Save