Users transmitted to parent component
This commit is contained in:
Luis Fernando Molina committed
1 parent
13e116a1e2
commit
6e36ca3f94
2 files changed
+140
-150
No files matched your search
@@ -51,6 +51,12 @@ class UserReferrals extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
userSelected (user) {
|
||||
console.log(user)
|
||||
|
||||
this.setState({referrer: user.id})
|
||||
}
|
||||
|
||||
submitForm (e) {
|
||||
e.preventDefault()
|
||||
this.props.updateUserMutation({
|
||||
@@ -136,7 +142,7 @@ class UserReferrals extends Component {
|
||||
overall reputation within the project.
|
||||
</Typography>
|
||||
|
||||
<UserSearch selectButton />
|
||||
<UserSearch selectButton onSelect={this.userSelected.bind(this)} selectText="After that press the 'Select' button on the desired user to set it as your referrer. Bear in mind that this action can not be undone." />
|
||||
|
||||
</form>
|
||||
</Paper>
|
||||
|
||||
+133
-149
@@ -1,23 +1,23 @@
|
||||
import React, { Component } from 'react';
|
||||
import {graphql, compose} from 'react-apollo';
|
||||
import {getUsersBySearchFields} from '../queries/queries';
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getUsersBySearchFields} from '../queries/queries'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardActionArea from '@material-ui/core/CardActionArea';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import CardMedia from '@material-ui/core/CardMedia';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Card from '@material-ui/core/Card'
|
||||
import CardActionArea from '@material-ui/core/CardActionArea'
|
||||
import CardActions from '@material-ui/core/CardActions'
|
||||
import CardContent from '@material-ui/core/CardContent'
|
||||
import CardMedia from '@material-ui/core/CardMedia'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
|
||||
// components
|
||||
import UserProfile from './UserProfile';
|
||||
import UserProfile from './UserProfile'
|
||||
|
||||
// Images
|
||||
import PortraitImage from '../img/portrait.jpg'
|
||||
@@ -26,29 +26,29 @@ const styles = theme => ({
|
||||
card: {
|
||||
maxWidth: 150,
|
||||
minWidth: 150,
|
||||
paddingTop:'30',
|
||||
marginBottom:40
|
||||
paddingTop: '30',
|
||||
marginBottom: 40
|
||||
},
|
||||
media: {
|
||||
height: 0,
|
||||
paddingTop: '56.25%', // 16:9,
|
||||
marginTop:'30',
|
||||
marginTop: '30',
|
||||
minWidth: 300
|
||||
},
|
||||
typography: {
|
||||
maxWidth: 345,
|
||||
minWidth: 300,
|
||||
paddingTop:'30'
|
||||
paddingTop: '30'
|
||||
},
|
||||
appBar: {
|
||||
position: 'relative',
|
||||
appBar: {
|
||||
position: 'relative'
|
||||
},
|
||||
flex: {
|
||||
flex: 1,
|
||||
flex: 1
|
||||
},
|
||||
grid: {
|
||||
paddingTop: '30',
|
||||
marginTop:30
|
||||
marginTop: 30
|
||||
},
|
||||
inputField: {
|
||||
width: '80%',
|
||||
@@ -64,39 +64,31 @@ const styles = theme => ({
|
||||
margin: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 3
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
class UserSearch extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
alias: '',
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: ''
|
||||
lastName: ''
|
||||
}
|
||||
}
|
||||
|
||||
handleClickOpen = () => {
|
||||
this.setState({ open: true });
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
submitForm (e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.props.getUsersBySearchFields.variables.alias = this.state.alias;
|
||||
this.props.getUsersBySearchFields.variables.firstName = this.state.firstName;
|
||||
this.props.getUsersBySearchFields.variables.middleName = this.state.middleName;
|
||||
this.props.getUsersBySearchFields.variables.lastName = this.state.lastName;
|
||||
|
||||
this.props.getUsersBySearchFields.variables.alias = this.state.alias
|
||||
this.props.getUsersBySearchFields.variables.firstName = this.state.firstName
|
||||
this.props.getUsersBySearchFields.variables.middleName = this.state.middleName
|
||||
this.props.getUsersBySearchFields.variables.lastName = this.state.lastName
|
||||
|
||||
this.props.getUsersBySearchFields.refetch({})
|
||||
}
|
||||
}
|
||||
|
||||
handleTextField (e) {
|
||||
/*
|
||||
@@ -138,149 +130,141 @@ class UserSearch extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
selectButton(){
|
||||
|
||||
if (this.props.selectButton === true) {
|
||||
|
||||
return(
|
||||
<Button color="primary">
|
||||
Select
|
||||
</Button>
|
||||
)
|
||||
|
||||
} else {
|
||||
return(<div></div>)
|
||||
}
|
||||
}
|
||||
|
||||
selectText(){
|
||||
|
||||
selectText () {
|
||||
if (this.props.selectButton === true) {
|
||||
|
||||
return(<dummy>After that press the 'Select' button on the desired user to continue.</dummy>)
|
||||
|
||||
return (<dummy>{this.props.selectText}</dummy>)
|
||||
} else {
|
||||
return(<div></div>)
|
||||
return (<div />)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
displayUsers(){
|
||||
let data = this.props.getUsersBySearchFields;
|
||||
const { classes } = this.props;
|
||||
|
||||
if(data.loading){
|
||||
return ( <div> Loading Users... </div>);
|
||||
selectButton (user) {
|
||||
if (this.props.selectButton === true) {
|
||||
return (
|
||||
<Button id={user.id} ref={user.id} color='primary' onClick={() => {
|
||||
this.props.onSelect(user) // This sends the user to the parent component
|
||||
}}>
|
||||
Select
|
||||
</Button>
|
||||
)
|
||||
} else {
|
||||
if(data.usersSearch === undefined) {
|
||||
return ( <div> No Users to Display </div> )
|
||||
} else {
|
||||
|
||||
return data.usersSearch.map(user => {
|
||||
return (<div />)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
displayUsers () {
|
||||
let data = this.props.getUsersBySearchFields
|
||||
const { classes } = this.props
|
||||
|
||||
<Grid key={user.id} item>
|
||||
<Card className={classes.card} onClick={ (e) => {
|
||||
this.setState({ selected: user.id});
|
||||
if (data.loading) {
|
||||
return (<div> Loading Users... </div>)
|
||||
} else {
|
||||
if (data.usersSearch === undefined) {
|
||||
return (<div> No Users to Display </div>)
|
||||
} else {
|
||||
return data.usersSearch.map(user => {
|
||||
return (
|
||||
|
||||
<Grid key={user.id} item>
|
||||
<Card className={classes.card} onClick={(e) => {
|
||||
this.setState({ selected: user.id})
|
||||
}
|
||||
}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={PortraitImage}
|
||||
title="User Profile"
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={PortraitImage}
|
||||
title='User Profile'
|
||||
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="headline" component="h2">
|
||||
{user.alias}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Grid container justify="center" spacing={8}>
|
||||
<Grid item>
|
||||
{this.selectButton()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant='headline' component='h2'>
|
||||
{user.alias}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Grid container justify='center' spacing={8}>
|
||||
<Grid item>
|
||||
{this.selectButton(user)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
)
|
||||
});
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
|
||||
<div>
|
||||
<form onSubmit={this.submitForm.bind(this)}>
|
||||
|
||||
<Typography className={classes.formTypography} variant='body1' gutterBottom align='left'>
|
||||
<Typography className={classes.formTypography} variant='body1' gutterBottom align='left'>
|
||||
Use any of these fileds to search for users. {this.selectText()}
|
||||
</Typography>
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
error={this.state.aliasError}
|
||||
id='alias'
|
||||
type='text'
|
||||
value={this.state.alias}
|
||||
label='Alias'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
<TextField
|
||||
error={this.state.aliasError}
|
||||
id='alias'
|
||||
type='text'
|
||||
value={this.state.alias}
|
||||
label='Alias'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.firstNameError}
|
||||
id='firstName'
|
||||
type='text'
|
||||
value={this.state.firstName}
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
<TextField
|
||||
error={this.state.firstNameError}
|
||||
id='firstName'
|
||||
type='text'
|
||||
value={this.state.firstName}
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.middleNameError}
|
||||
id='middleName'
|
||||
type='text'
|
||||
value={this.state.middleName}
|
||||
label='Middle Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
<TextField
|
||||
error={this.state.middleNameError}
|
||||
id='middleName'
|
||||
type='text'
|
||||
value={this.state.middleName}
|
||||
label='Middle Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.lastNameError}
|
||||
id='lastName'
|
||||
type='text'
|
||||
value={this.state.lastName}
|
||||
label='Last Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
<TextField
|
||||
error={this.state.lastNameError}
|
||||
id='lastName'
|
||||
type='text'
|
||||
value={this.state.lastName}
|
||||
label='Last Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<Button variant='contained' color='secondary' className={classes.button} onClick={this.submitForm.bind(this)}>Search</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container className={classes.grid} justify="center" spacing={24}>
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<Button variant='contained' color='secondary' className={classes.button} onClick={this.submitForm.bind(this)}>Search</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
<Grid container className={classes.grid} justify='center' spacing={24}>
|
||||
{this.displayUsers()}
|
||||
</Grid>
|
||||
|
||||
</form>
|
||||
|
||||
);
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getUsersBySearchFields, {name: 'getUsersBySearchFields'}),
|
||||
withStyles(styles)
|
||||
) (UserSearch); // This technique binds more than one query to a single component.
|
||||
)(UserSearch) // This technique binds more than one query to a single component.
|
||||
Reference in new issue
Block a user