From e194bbe7b94560972acfc892f235facec056b76c Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 26 Sep 2018 09:01:17 +0200
Subject: [PATCH] User Search Page Added

---
 client/src/components/Search.js        |  54 ++------
 client/src/components/UserReferrals.js |  39 ++----
 client/src/components/UserSearch.js    | 182 +++++++++++++++++++++++++
 client/src/components/index0.js        |  21 +++
 4 files changed, 223 insertions(+), 73 deletions(-)
 create mode 100644 client/src/components/UserSearch.js
 create mode 100644 client/src/components/index0.js

diff --git a/client/src/components/Search.js b/client/src/components/Search.js
index 9f9c9c734..abc26baac 100644
--- a/client/src/components/Search.js
+++ b/client/src/components/Search.js
@@ -1,48 +1,12 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import React from 'react'
+import UserSearch from './UserSearch'
 
-class Search extends React.Component {
-  state = {
-    open: true,
-  };
-
-  handleClickOpen = () => {
-    this.setState({ open: true });
-  };
-
-  handleClose = () => {
-    this.setState({ open: false });
-  };
-
-  render() {
-    return (
-      <div>
-        <Dialog
-          open={this.state.open}
-          onClose={this.handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
-          <DialogContent>
-            <DialogContentText id="alert-dialog-description">
-              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
-              Close
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </div>
-    );
-  }
+const Browse = () => {
+  return (
+    <div>
+      <UserSearch />
+    </div>
+  )
 }
 
-export default Search;
+export default Browse
diff --git a/client/src/components/UserReferrals.js b/client/src/components/UserReferrals.js
index 72bafab0d..815df63d7 100644
--- a/client/src/components/UserReferrals.js
+++ b/client/src/components/UserReferrals.js
@@ -278,12 +278,16 @@ class UserReferrals extends Component {
     return (
       <Paper className={classes.root}>
         <Typography className={classes.typography} variant='headline' gutterBottom>
-              Profile Sheet
+              Referral Program
         </Typography>
         <form onSubmit={this.submitForm.bind(this)}>
 
           <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
-        Use this form to control the information you keep at the Advanced Algos system about yourself.
+        We know that a group often becomes more intelligent when the number of people in the group increases.
+        To incentivize members of the community to invite more people to join we have developed this referral
+        program in which you can specify who referred you to the project, and see the members who pointed at
+        you as their referrer. Later this information will be available at your user profile and add to your
+        overall reputation within the project.
         </Typography>
 
           <Grid container justify='center' >
@@ -293,37 +297,16 @@ class UserReferrals extends Component {
           </Grid>
 
           <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
-          This is your basic information we have gotten from the identity provider you used to sign up. This information can not be changed.
+          Use the search field to find the who referred you to the project.
           </Typography>
 
           <TextField
-            id='alias'
+            id='search'
             type='text'
-            value={this.state.alias}
-            label='Alias'
+            value={this.state.search}
+            label='Search'
             className={classes.inputField}
-            disabled />
-
-          <TextField
-            id='email'
-            type='text'
-            value={this.state.email}
-            label='Email'
-            className={classes.inputField}
-            disabled />
-
-          <FormControlLabel
-            disabled
-            className={classes.inputField}
-            control={
-              <Checkbox
-                id='emailVerified'
-                checked={this.rightCheckboxValue(this.state.emailVerified)}
-                color='primary'
-                      />
-                    }
-            label='Email Verified'
-                  />
+            />
 
           <Grid container justify='center' >
             <Grid item>
diff --git a/client/src/components/UserSearch.js b/client/src/components/UserSearch.js
new file mode 100644
index 000000000..9335c5145
--- /dev/null
+++ b/client/src/components/UserSearch.js
@@ -0,0 +1,182 @@
+import React, { Component } from 'react';
+import {graphql, compose} from 'react-apollo';
+import {getUsersQuery} 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 Paper from '@material-ui/core/Paper';
+
+// Full screen dialog imports (still Material UI)
+
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+
+import CloseIcon from '@material-ui/icons/Close';
+import Slide from '@material-ui/core/Slide';
+
+// components
+import UserProfile from './UserProfile';
+
+// Images
+import PortraitImage from '../img/portrait.jpg'
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    padding: 60,
+    margin: 2,
+  },
+  card: {
+    maxWidth: 345,
+    minWidth: 300,
+    paddingTop:'30'
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9,
+    marginTop:'30',
+    minWidth: 300
+  },
+  typography: {
+    maxWidth: 345,
+    minWidth: 300,
+    paddingTop:'30'
+  },
+   appBar: {
+  position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
+  grid: {
+    paddingTop: '30',
+    marginTop:'30'
+  },
+});
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+class UserSearch extends Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      selected: null,
+      open: false
+    }
+  }
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  displayUsers(){
+    let data = this.props.getUsersQuery;
+    const { classes } = this.props;
+
+    if(data.loading){
+      return ( <div> Loading Users... </div>);
+    } else {
+      return data.users.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"
+
+                />
+                <CardContent>
+                  <Typography gutterBottom variant="headline" component="h2">
+                    {user.alias}
+                  </Typography>
+                  <Typography className={classes.typography} gutterBottom>
+                    {user.bio}
+                  </Typography>
+                </CardContent>
+              </CardActionArea>
+              <CardActions>
+                <Grid container justify="center" spacing={8}>
+                   <Grid item>
+                     <Button onClick={this.handleClickOpen}>User Profile</Button>
+                     <Dialog
+                       fullScreen
+                       open={this.state.open}
+                       onClose={this.handleClose}
+                       TransitionComponent={Transition}
+                     >
+                       <AppBar className={classes.appBar}>
+                         <Toolbar>
+                           <IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
+                             <CloseIcon />
+                           </IconButton>
+                           <Typography variant="title" color="inherit" className={classes.flex}>
+                             User Profile
+                           </Typography>
+                           <Button color="inherit" onClick={this.handleClose}>
+                             Close
+                           </Button>
+                         </Toolbar>
+                       </AppBar>
+                         <UserProfile userId={this.state.selected}/>
+                     </Dialog>
+                   </Grid>
+                   <Grid item>
+                     <Button disabled color="primary">
+                       Extended Profile
+                     </Button>
+                   </Grid>
+                </Grid>
+              </CardActions>
+            </Card>
+          </Grid>
+        )
+      });
+    }
+  }
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <Paper className={classes.root}>
+        <Grid container justify="center" spacing={24}>
+          {this.displayUsers()}
+        </Grid>
+      </Paper>
+    );
+  }
+}
+
+UserSearch.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default compose(
+  graphql(getUsersQuery, {name: "getUsersQuery"}),
+  withStyles(styles)
+) (UserSearch); // This technique binds more than one query to a single component.
diff --git a/client/src/components/index0.js b/client/src/components/index0.js
new file mode 100644
index 000000000..195ec74ff
--- /dev/null
+++ b/client/src/components/index0.js
@@ -0,0 +1,21 @@
+import NavBar from './navbar'
+import Footer from './footer'
+import Callback from './callback'
+import Home from './home'
+import About from './about'
+import Dashboard from './dashboard'
+import Teams from './teams'
+
+import { theme, globalStyles } from './theme'
+
+export {
+  NavBar,
+  Footer,
+  Callback,
+  Home,
+  About,
+  Dashboard,
+  Teams,
+  theme,
+  globalStyles
+}