Skip to content

Commit

Permalink
refactor crawler forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@fazo96
fazo96 committed Oct 5, 2018
1 parent 6f86986 commit 8c07e16
Show file tree
Hide file tree
Showing 11 changed files with 233 additions and 439 deletions.
128 changes: 42 additions & 86 deletions src/containers/ImportReviews/businessCrawlerForm/TripadvisorForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { Grid } from '@material-ui/core'
import CustomInput from 'components/MaterialDashboardPro/CustomInput'
import CustomInput from 'components/Form/CustomInput'
import { Field } from 'redux-form'
import { InputAdornment, withStyles } from '@material-ui/core'

import FaceIcon from '@material-ui/icons/Face';
Expand All @@ -14,38 +15,6 @@ const style = {
}

class TripadvisorForm extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
isProfileUrlValid: false,
profileUrl: '',
user: '',
pass: ''
}
}

handleProfileUrlChange = (e) => {
this.setState({
isProfileUrlValid: (e.target.value.length > 0 && this.isTripadvisorProfileUrlValid(e.target.value)),
profileUrl: e.target.value
}, this.callChangeHandler)
}

handleUserChange = (e) => {
this.setState({
user: e.target.value
}, this.callChangeHandler)
}

handlePasswordChange = (e) => {
this.setState({
pass: e.target.value
}, this.callChangeHandler)
}

callChangeHandler = () => {
this.props.onChange(this.state.profileUrl, this.state.user, this.state.pass)
}

render() {
const { classes } = this.props
Expand All @@ -56,17 +25,13 @@ class TripadvisorForm extends React.Component {
<Grid item xs={12} md={8} className={classes.gridRow}>
<h5>Import TripAdvisor reviews <small>(coming soon)</small></h5>

<CustomInput
success={this.state.isProfileUrlValid}
error={this.state.profileUrl && !this.state.isProfileUrlValid}
<Field
component={CustomInput}
labelText='TripAdvisor profile URL'
id='tripadvisor-url'
name='tripadvisor-url'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
value: this.state.profileUrl,
onChange: this.handleProfileUrlChange,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<FaceIcon className={classes.inputAdornmentIcon} />
Expand All @@ -87,56 +52,47 @@ class TripadvisorForm extends React.Component {
renderLogin() {
const { classes } = this.props

if (this.state.isProfileUrlValid) {
return (
<Grid item xs={12} md={8} className={classes.gridRow}>
<Grid container justify='space-between' spacing={8} style={{ marginTop: -24 }}>
<Grid item xs={12} md={6} className={classes.gridRow}>
<CustomInput
success={this.state.emailState === 'success'}
error={this.state.emailState === 'error'}
labelText='TripAdvisor e-mail'
id='tripadvisor-email'
name='tripadvisor-email'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
value: this.state.user,
onChange: this.handleUserChange,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<EmailIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>
return (
<Grid item xs={12} md={8} className={classes.gridRow}>
<Grid container justify='space-between' spacing={8} style={{ marginTop: -24 }}>
<Grid item xs={12} md={6} className={classes.gridRow}>
<Field
component={CustomInput}
labelText='TripAdvisor e-mail'
id='tripadvisor-email'
name='tripadvisor-email'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<EmailIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>

<Grid item xs={12} sm={12} md={6} className={classes.gridRow}>
<CustomInput
success={this.state.emailState === 'success'}
error={this.state.emailState === 'error'}
labelText='TripAdvisor password'
id='tripadvisor-password'
name='tripadvisor-password'
formControlProps={{ fullWidth: true }}
inputProps={{
type: 'password',
disabled: true,
value: this.state.pass,
onChange: this.handlePasswordChange,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<HttpsIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>
<Grid item xs={12} sm={12} md={6} className={classes.gridRow}>
<Field
component={CustomInput}
labelText='TripAdvisor password'
name='tripadvisor-password'
formControlProps={{ fullWidth: true }}
inputProps={{
type: 'password',
disabled: true,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<HttpsIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>
</Grid>
)
}
</Grid>
)
}

/**
Expand Down
127 changes: 41 additions & 86 deletions src/containers/ImportReviews/businessCrawlerForm/YelpForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { Grid } from '@material-ui/core'
import CustomInput from 'components/MaterialDashboardPro/CustomInput'
import CustomInput from 'components/Form/CustomInput'
import { Field } from 'redux-form'
import { InputAdornment, withStyles } from '@material-ui/core'

import FaceIcon from '@material-ui/icons/Face';
Expand All @@ -14,38 +15,6 @@ const style = {
}

class YelpForm extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
isProfileUrlValid: false,
profileUrl: '',
user: '',
pass: ''
}
}

handleProfileUrlChange = (e) => {
this.setState({
isProfileUrlValid: (e.target.value.length > 0 && this.isYelpProfileUrlValid(e.target.value)),
profileUrl: e.target.value
}, this.callChangeHandler)
}

handleUserChange = (e) => {
this.setState({
user: e.target.value
}, this.callChangeHandler)
}

handlePasswordChange = (e) => {
this.setState({
pass: e.target.value
}, this.callChangeHandler)
}

callChangeHandler = () => {
this.props.onChange(this.state.profileUrl, this.state.user, this.state.pass)
}

render() {
const { classes } = this.props
Expand All @@ -56,17 +25,13 @@ class YelpForm extends React.Component {
<Grid item xs={12} md={8} className={classes.gridRow}>
<h5>Import Yelp reviews <small>(coming soon)</small></h5>

<CustomInput
success={this.state.isProfileUrlValid}
error={this.state.profileUrl && !this.state.isProfileUrlValid}
<Field
component={CustomInput}
labelText='Yelp profile URL'
id='yelp-url'
name='yelp-url'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
value: this.state.profileUrl,
onChange: this.handleProfileUrlChange,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<FaceIcon className={classes.inputAdornmentIcon} />
Expand All @@ -87,56 +52,46 @@ class YelpForm extends React.Component {
renderLogin() {
const { classes } = this.props

if (this.state.isProfileUrlValid) {
return (
<Grid item xs={12} md={8} className={classes.gridRow}>
<Grid container justify='space-between' spacing={8} style={{ marginTop: -24 }}>
<Grid item xs={12} md={6} className={classes.gridRow}>
<CustomInput
success={this.state.emailState === 'success'}
error={this.state.emailState === 'error'}
labelText='Yelp e-mail'
id='yelp-email'
name='yelp-email'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
value: this.state.user,
onChange: this.handleUserChange,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<EmailIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>
return (
<Grid item xs={12} md={8} className={classes.gridRow}>
<Grid container justify='space-between' spacing={8} style={{ marginTop: -24 }}>
<Grid item xs={12} md={6} className={classes.gridRow}>
<Field
component={CustomInput}
labelText='Yelp e-mail'
name='yelp-email'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<EmailIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>

<Grid item xs={12} sm={12} md={6} className={classes.gridRow}>
<CustomInput
success={this.state.emailState === 'success'}
error={this.state.emailState === 'error'}
labelText='Yelp password'
id='yelp-password'
name='yelp-password'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
type: 'password',
value: this.state.pass,
onChange: this.handlePasswordChange,
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<HttpsIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>
<Grid item xs={12} sm={12} md={6} className={classes.gridRow}>
<Field
component={CustomInput}
labelText='Yelp password'
name='yelp-password'
formControlProps={{ fullWidth: true }}
inputProps={{
disabled: true,
type: 'password',
endAdornment: (
<InputAdornment position='end' className={classes.inputAdornment}>
<HttpsIcon className={classes.inputAdornmentIcon} />
</InputAdornment>
)
}}
/>
</Grid>
</Grid>
)
}
</Grid>
)
}

/**
Expand Down
51 changes: 9 additions & 42 deletions src/containers/ImportReviews/businessCrawlerForm/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import React from 'react';
// components
import { LinearProgress, Grid } from '@material-ui/core'

import { Grid } from '@material-ui/core'
// styles
import regularFormsStyle from 'styles/material-dashboard-pro-react/views/regularFormsStyle';
import { withStyles } from '@material-ui/core'

// redux
import { connect } from 'react-redux'

// redux form
import { reduxForm } from 'redux-form'

// Forms
import YelpForm from './YelpForm';
import TripadvisorForm from './TripadvisorForm';

Expand Down Expand Up @@ -40,39 +33,13 @@ const style = {
class BusinessCrawlerForm extends React.Component {

render () {
const { handleSubmit, crawlerRunning } = this.props

if (crawlerRunning) {
return (
<Grid container justify='center'>
<Grid item xs={12} md={12} >
<LinearProgress size={100} />
</Grid>
</Grid>
)
} else {
return (
<span>
<form onSubmit={handleSubmit}>
<Grid container justify='center'>
<YelpForm onChange={(url, user, pass) => this.props.onChange("yelp", url, user, pass)} />
<TripadvisorForm onChange={(url, user, pass) => this.props.onChange("tripadvisor", url, user, pass)} />
</Grid>
</form>
</span>
)
}
return (
<Grid container justify='center'>
<YelpForm />
<TripadvisorForm />
</Grid>
)
}
}

const mapStateToProps = store => ({
})

const mapDispatchToProps = {
}

const BusinessCrawlerReduxForm = reduxForm({
form: 'businessCrawlerForm'
})(BusinessCrawlerForm)

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(style)(BusinessCrawlerReduxForm))
export default withStyles(style)(BusinessCrawlerForm)
Loading

0 comments on commit 8c07e16

Please sign in to comment.