From 6e36ca3f948ed7246a15148baa2910e87fa2e444 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 27 Sep 2018 10:04:08 +0200
Subject: [PATCH] Users transmitted to parent component

---
 client/src/components/UserReferrals.js |   8 +-
 client/src/components/UserSearch.js    | 282 ++++++++++++-------------
 2 files changed, 140 insertions(+), 150 deletions(-)

diff --git a/client/src/components/UserReferrals.js b/client/src/components/UserReferrals.js
index ad7d8fe8c..28c83a2e7 100644
--- a/client/src/components/UserReferrals.js
+++ b/client/src/components/UserReferrals.js
@@ -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>
diff --git a/client/src/components/UserSearch.js b/client/src/components/UserSearch.js
index 217a11e63..30c38b8b4 100644
--- a/client/src/components/UserSearch.js
+++ b/client/src/components/UserSearch.js
@@ -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.