fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/AdvancedAlgos/UsersModule

Browse Source
This commit is contained in:
Julian Molina committed 2019-01-15 14:00:49 +01:00
2 parents ab44a28b06 8ad466d967
commit 74479dc4e3
22 files changed
+286 -510
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
-3
View File
@@ -1,5 +1,2 @@
![alt text](https://github.com/AdvancedAlgos/UsersModule/blob/master/image.png?raw=true "Screenshot")
client/package.json
+3 -3
View File
@@ -1,14 +1,14 @@
{
"name": "@advancedalgos/users-client",
"description": "Advanced Algos Users client-side web app",
"version": "0.0.15",
"version": "0.0.22",
"main": "src/index.js",
"dependencies": {
"@material-ui/core": "^3.2.0",
"@material-ui/icons": "^3.0.1",
"react": "^16.5.2",
"react": "^16.6.1",
"react-apollo": "^2.2.4",
"react-dom": "^16.5.2",
"react-dom": "^16.6.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.0.4",
"graphql": "^14.0.2",
client/src/components/BannerTopBar/index.js
+18
View File
@@ -0,0 +1,18 @@
import React from 'react'
import Typography from '@material-ui/core/Typography'
const BannerTopBar = ({
size,
backgroundUrl,
title,
text
}) => (
<div className={`bannerTopBar ${size}`} style={backgroundUrl ? { backgroundImage: `url(${backgroundUrl})` } : {}}>
<div className='caption'>
<Typography className='title' variant='h1' align='center'>{title}</Typography>
<Typography className='text' variant='h2' align='center'>{text}</Typography>
</div>
</div>
)
export default BannerTopBar
client/src/components/Browse.js
+19 -9
View File
@@ -1,14 +1,24 @@
import React from 'react'
import React, { Component } from 'react'
import UserList from './UserList'
import CssBaseline from '@material-ui/core/CssBaseline'
import BannerTopBar from './BannerTopBar'
const Browse = () => {
return (
<React.Fragment>
<CssBaseline />
<UserList />
</React.Fragment>
)
class Browse extends Component {
render () {
return (
<React.Fragment>
<BannerTopBar
size='medium'
title='Users Directory'
text='Everyone involved in Advanced Algos is here.'
backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
/>
<div className='container'>
<UserList />
</div>
</React.Fragment>
)
}
}
export default Browse
client/src/components/Contact.js
-52
View File
@@ -1,52 +0,0 @@
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 CssBaseline from '@material-ui/core/CssBaseline'
class Contact extends React.Component {
state = {
open: true
}
handleClickOpen = () => {
this.setState({ open: true })
}
handleClose = () => {
this.setState({ open: false })
}
render () {
return (
<React.Fragment>
<CssBaseline />
<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 November 2018. Thanks for your understanding.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color='primary' autoFocus>
Close
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
)
}
}
export default Contact
client/src/components/DescendentsTree.js
+3 -3
View File
@@ -25,7 +25,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';
// Images
import PortraitImage from '../img/portrait.jpg'
import UserDefaultPicture from '../img/user-default-pic.jpg'
const styles = theme => ({
card: {
@@ -132,7 +132,7 @@ class DescendentsTree extends Component {
<CardActionArea>
<CardMedia
className={classes.media}
image={PortraitImage}
image={UserDefaultPicture}
title='User Profile'
/>
@@ -201,7 +201,7 @@ class DescendentsTree extends Component {
<CardActionArea>
<CardMedia
className={classes.media}
image={PortraitImage}
image={UserDefaultPicture}
title='User Profile'
/>
client/src/components/Home.js
+8 -92
View File
@@ -1,104 +1,20 @@
import React, { Component } from 'react'
import { compose } from 'recompose'
import { withStyles } from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography'
import CssBaseline from '@material-ui/core/CssBaseline'
const styles = theme => ({
root: {
flexGrow: 1,
padding: 100
},
grid: {
margin: theme.spacing.unit,
width: '50%'
},
typography: {
width: '100%',
marginTop: 20,
marginBottom: 20
},
'@global': {
body: {
backgroundColor: theme.palette.common.white
}
},
layout: {
width: 'auto',
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
width: 900,
marginLeft: 'auto',
marginRight: 'auto'
}
},
heroContent: {
maxWidth: 600,
margin: '0 auto',
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
}
})
import BannerTopBar from './BannerTopBar'
class Home extends Component {
render () {
const { classes } = this.props
return (
<React.Fragment>
<CssBaseline />
<main className={classes.layout}>
<div className={classes.heroContent}>
<Typography
variant='display3'
align='center'
color='textPrimary'
gutterBottom
>
Collaborate. Innovate. Evolve.
</Typography>
<Typography
variant='title'
align='center'
color='textSecondary'
component='h3'
>
Welcome to Advanced Algos Users Module
</Typography>
</div>
</main>
<Grid container justify='center' spacing={24}>
<Grid className={classes.grid} item>
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
Intro
</Typography>
<Typography className={classes.typography} component='p'>
This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in.
</Typography>
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
Development Status
</Typography>
<Typography className={classes.typography} component='p'>
This module is is currently under development. Implementation started 1st of September 2018 and this is the result of the 3rd sprint of 2 weeks of work each.
</Typography>
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
What can you do?
</Typography>
<Typography className={classes.typography} component='p'>
Currently you can use the Browse section to list all registered users. At the Search page you can searh for users by name. Clicking on View Profile you can see some more info about that user. You can signup with your Github account and manage your profile information while logged in. While loggedin, you can edit your profile info, define your referrer and view your descendants. You will find all features under develpment with a dialog indicating it is not ready.
</Typography>
</Grid>
</Grid>
<BannerTopBar
size='big'
title='Users Module'
text='Responsible for all human users of the Advanced Algos Platform.'
backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
/>
</React.Fragment>
)
}
}
export default compose(
withStyles(styles)
)(Home)
export default Home
client/src/components/LoggedInUser.js
+67 -6
View File
@@ -11,6 +11,16 @@ import IconButton from '@material-ui/core/IconButton'
import UserIcon from '@material-ui/icons/Person'
import { Link } from 'react-router-dom'
import ProfileSheetIcon from '@material-ui/icons/Create'
import ProfileImagesIcon from '@material-ui/icons/Wallpaper'
import YourReferrerIcon from '@material-ui/icons/AccessibilityNew'
import DescendentsIcon from '@material-ui/icons/DeviceHub'
const ProfileSheetLink = props => <Link to='/users/profile-sheet' {...props} />
const ProfileImagesLink = props => <Link to='/users/profile-images' {...props} />
const YourReferrerLink = props => <Link to='/users/referrer' {...props} />
const YourDescendentsLink = props => <Link to='/users/descendents' {...props} />
const UserLink = props => <Link to='/users/user' {...props} />
const styles = theme => ({
@@ -79,7 +89,7 @@ class LoggedInUser extends Component {
let identityProvider = authArray[0]
return (
<div>
<li className='menu-item-has-children'>
<Button
variant='text'
size='small'
@@ -88,9 +98,60 @@ class LoggedInUser extends Component {
component={UserLink}
to={`${match.url}/user`}>
<UserIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Your Profile
</Button>
</div>
Your Profile
</Button>
<ul>
<li>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Profile Sheet'
component={ProfileSheetLink}
to={`${match.url}/profile-sheet`}>
<ProfileSheetIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Profile Sheet
</Button>
</li>
<li>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Profile Images'
component={ProfileImagesLink}
to={`${match.url}/profile-images`}>
<ProfileImagesIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Profile Images
</Button>
</li>
<li>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Your Referrer'
component={YourReferrerLink}
to={`${match.url}/referrer`}>
<YourReferrerIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Your Referrer
</Button>
</li>
<li>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Your Descendents'
component={YourDescendentsLink}
to={`${match.url}/descendents`}>
<DescendentsIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Your Descendents
</Button>
</li>
</ul>
</li>
)
} else {
return (
@@ -114,9 +175,9 @@ class LoggedInUser extends Component {
}
return (
<div>
<React.Fragment>
{this.displayLoggedInUser()}
</div>
</React.Fragment>
)
}
}
client/src/components/NavBar.js
-150
View File
@@ -1,150 +0,0 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import classNames from 'classnames'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
// icons
import UsersIcon from '@material-ui/icons/People'
import BrowseIcon from '@material-ui/icons/ImportContacts'
import SearchIcon from '@material-ui/icons/Search'
import ContactIcon from '@material-ui/icons/ContactMail'
import BugReportIcon from '@material-ui/icons/BugReport'
import { Link } from 'react-router-dom'
// components
import LoggedInUser from './LoggedInUser'
const HomeLink = props => <Link to='/users' {...props} />
const BrowseLink = props => <Link to='/users/browse' {...props} />
const SearchLink = props => <Link to='/users/search' {...props} />
const styles = theme => ({
root: {
flexGrow: 1
},
flex: {
flexGrow: 1,
marginLeft: 30
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
cssRoot: {
color: '#FFFFFF',
backgroundColor: theme.palette.secondary,
'&:hover': {
backgroundColor: theme.palette.dark
},
whiteSpace: 'nowrap',
paddingRight: 2 * theme.spacing.unit,
paddingLeft: 2 * theme.spacing.unit
},
button: {
margin: theme.spacing.unit
},
leftIcon: {
marginRight: theme.spacing.unit
},
rightIcon: {
marginLeft: theme.spacing.unit
},
iconSmall: {
fontSize: 20
}
})
class NavBar extends Component {
constructor (props) {
super(props)
this.state = {
authId: null
}
}
componentDidMount () {
let user = localStorage.getItem('user')
let authId
if (user !== null && user !== undefined && user !== 'undefined') {
user = JSON.parse(user)
authId = user.authId
}
if (authId !== null && authId !== undefined && authId !== 'undefined') {
this.setState({ authId: authId })
}
}
render () {
const { classes, user, match } = this.props
return (
<div className={classes.root}>
<AppBar position='static' color='secondary'>
<Toolbar variant='dense'>
<Typography variant='h5' color='inherit' className={classes.flex}>
Users
</Typography>
<LoggedInUser {...this.props} authId={this.state.authId} />
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Browse the Users Directory'
component={BrowseLink}
to={`${match.url}/browse`}>
<BrowseIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Directory
</Button>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Search Users'
component={SearchLink}
to={`${match.url}/search`}>
<SearchIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Search
</Button>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Report a Users Module bug'
href='https://github.com/AdvancedAlgos/UsersModule/issues/new'
target='_blank'
>
<BugReportIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Report
</Button>
<Button
variant='text'
size='small'
className={classNames(classes.button, classes.cssRoot)}
title='Users Module Home'
component={HomeLink}
to={`${match.url}`}>
<UsersIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Home
</Button>
</Toolbar>
</AppBar>
</div>
)
}
}
NavBar.propTypes = {
classes: PropTypes.object.isRequired,
user: PropTypes.object,
match: PropTypes.object
}
export default withStyles(styles)(NavBar)
client/src/components/ProfileImages.js
+30 -40
View File
@@ -1,52 +1,42 @@
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 CssBaseline from '@material-ui/core/CssBaseline'
import React, { Component } from 'react'
import { compose } from 'recompose'
import { withStyles } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import Typography from '@material-ui/core/Typography'
class Contact extends React.Component {
state = {
open: true
const styles = theme => ({
root: {
width: '50%',
flexGrow: 1,
padding: 10,
marginLeft: '25%',
marginTop: '5%',
marginBottom: '10%'
},
typography: {
width: '80%',
marginLeft: '10%',
marginTop: 40,
marginBottom: 40
}
})
handleClickOpen = () => {
this.setState({ open: true })
}
handleClose = () => {
this.setState({ open: false })
}
class ProfileImages extends Component {
render () {
const { classes } = this.props
return (
<React.Fragment>
<CssBaseline />
<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 November 2018. Thanks for your understanding.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color='primary' autoFocus>
Close
</Button>
</DialogActions>
</Dialog>
<Paper className={classes.root}>
<Typography className={classes.typography} variant='h5' gutterBottom>
Comming Soon
</Typography>
</Paper>
</React.Fragment>
)
}
}
export default Contact
export default compose(
withStyles(styles)
)(ProfileImages)
client/src/components/ProfileSheet.js
+48 -38
View File
@@ -27,11 +27,11 @@ import AALogo from '../img/aa-logo.png'
const styles = theme => ({
root: {
width: '50%',
width: '100%',
flexGrow: 1,
padding: 10,
marginLeft: '25%',
marginTop: '2%'
marginTop: '5%',
marginBottom: '10%'
},
inputField: {
width: '80%',
@@ -312,19 +312,21 @@ class ProfileSheet extends Component {
}
}
render () {
addForm () {
const { classes } = this.props
return (
<Paper className={classes.root}>
<Typography className={classes.typography} variant='headline' gutterBottom>
Profile Sheet
</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.
<Typography className={classes.typography} variant='h5' gutterBottom>
Profile Sheet
</Typography>
<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.
</Typography>
<Grid container justify='center' >
<Grid item>
{this.displayIdentityProvider()}
@@ -332,8 +334,8 @@ class ProfileSheet 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.
</Typography>
This is your basic information we have gotten from the identity provider you used to sign up. This information can not be changed.
</Typography>
<TextField
id='alias'
@@ -359,10 +361,10 @@ class ProfileSheet extends Component {
id='emailVerified'
checked={this.rightCheckboxValue(this.state.emailVerified)}
color='primary'
/>
}
/>
}
label='Email Verified'
/>
/>
<Grid container justify='center' >
<Grid item>
@@ -371,8 +373,8 @@ class ProfileSheet extends Component {
</Grid>
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
Complete your profile with the following optional information. Providing your real name might help other users trust you more.
</Typography>
Complete your profile with the following optional information. Providing your real name might help other users trust you more.
</Typography>
<TextField
error={this.state.firstNameError}
@@ -382,7 +384,7 @@ class ProfileSheet extends Component {
label='First Name'
className={classes.inputField}
onChange={this.handleTextField.bind(this)}
/>
/>
<TextField
error={this.state.middleNameError}
@@ -392,7 +394,7 @@ class ProfileSheet extends Component {
label='Middle Name'
className={classes.inputField}
onChange={this.handleTextField.bind(this)}
/>
/>
<TextField
error={this.state.lastNameError}
@@ -402,11 +404,11 @@ class ProfileSheet extends Component {
label='Last Name'
className={classes.inputField}
onChange={this.handleTextField.bind(this)}
/>
/>
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
If you wish, you can add a short paragraph with your Bio or anything you would like to communicate to whoever finds your user profile.
</Typography>
If you wish, you can add a short paragraph with your Bio or anything you would like to communicate to whoever finds your user profile.
</Typography>
<TextField
error={this.state.bioError}
@@ -416,11 +418,11 @@ class ProfileSheet extends Component {
label='Bio'
className={classes.inputField}
onChange={this.handleTextField.bind(this)}
/>
/>
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
</Typography>
Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
</Typography>
<FormGroup row className={classes.inputField}>
<Grid container justify='center' >
@@ -433,10 +435,10 @@ class ProfileSheet extends Component {
onChange={this.handleCheckBoxes.bind(this)}
checked={this.rightCheckboxValue(this.state.isDeveloper)}
color='secondary'
/>
}
/>
}
label='Developer'
/>
/>
</Grid>
<Grid item>
<FormControlLabel
@@ -447,10 +449,10 @@ class ProfileSheet extends Component {
onChange={this.handleCheckBoxes.bind(this)}
checked={this.rightCheckboxValue(this.state.isTrader)}
color='secondary'
/>
}
/>
}
label='Trader'
/>
/>
</Grid>
<Grid item>
<FormControlLabel
@@ -461,10 +463,10 @@ class ProfileSheet extends Component {
onChange={this.handleCheckBoxes.bind(this)}
checked={this.rightCheckboxValue(this.state.isDataAnalyst)}
color='secondary'
/>
}
/>
}
label='Data Analyst'
/>
/>
</Grid>
</Grid>
</FormGroup>
@@ -473,8 +475,8 @@ class ProfileSheet extends Component {
<FormControl className={classes.inputField}>
<InputLabel shrink htmlFor='select'>
Current Role
</InputLabel>
Current Role
</InputLabel>
<Select
id='select'
ref='select'
@@ -484,7 +486,7 @@ class ProfileSheet extends Component {
displayEmpty
name='select'
className={classes.selectEmpty}
>
>
{ this.displayRoles() }
</Select>
<FormHelperText>Select from the list your current role</FormHelperText>
@@ -498,12 +500,20 @@ class ProfileSheet extends Component {
className={classes.button}
onClick={this.submitForm.bind(this)}
disabled={this.state.updated}
>{this.displayButtonTitle()}</Button>
>{this.displayButtonTitle()}</Button>
</Grid>
</Grid>
</form>
</Paper>
)
}
render () {
return (
<React.Fragment>
<div className='container'>
{this.addForm()}
</div>
</React.Fragment>
)
}
}
client/src/components/Search.js
+15 -13
View File
@@ -1,8 +1,8 @@
import React, { Component } from 'react'
import UserSearch from './UserSearch'
import {compose} from 'react-apollo'
import CssBaseline from '@material-ui/core/CssBaseline'
import Paper from '@material-ui/core/Paper'
import BannerTopBar from './BannerTopBar'
// Materia UI
@@ -10,29 +10,31 @@ import { withStyles } from '@material-ui/core/styles'
const styles = theme => ({
root: {
width: '50%',
width: '100%',
flexGrow: 1,
padding: 10,
marginLeft: '25%',
marginTop: '2%'
marginTop: '5%',
marginBottom: '10%'
}
})
class Search extends Component {
constructor (props) {
super(props)
this.state = {
}
}
render () {
const { classes } = this.props
return (
<React.Fragment>
<CssBaseline />
<Paper className={classes.root}>
<UserSearch />
</Paper>
<BannerTopBar
size='medium'
title='Users Search'
text='Find anyone involved in Advanced Algos here.'
backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
/>
<div className='container'>
<Paper className={classes.root}>
<UserSearch />
</Paper>
</div>
</React.Fragment>
)
}
client/src/components/User.js
+7 -2
View File
@@ -1,11 +1,16 @@
import React from 'react'
import UserTabs from './UserTabs'
import CssBaseline from '@material-ui/core/CssBaseline'
import BannerTopBar from './BannerTopBar'
const User = () => {
return (
<React.Fragment>
<CssBaseline />
<BannerTopBar
size='medium'
title='Your Profile'
text='Manage your profile info, pictures and more.'
backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
/>
<UserTabs />
</React.Fragment>
)
client/src/components/UserList.js
+6 -6
View File
@@ -30,13 +30,13 @@ import Slide from '@material-ui/core/Slide';
import UserProfile from './UserProfile';
// Images
import PortraitImage from '../img/portrait.jpg'
import UserDefaultPicture from '../img/user-default-pic.jpg'
const styles = theme => ({
root: {
flexGrow: 1,
padding: 60,
margin: 2,
paddingTop:30,
paddingBottom:30,
flexGrow: 1
},
card: {
maxWidth: 345,
@@ -108,7 +108,7 @@ class UserList extends Component {
<CardActionArea>
<CardMedia
className={classes.media}
image={PortraitImage}
image={UserDefaultPicture}
title="User Profile"
/>
@@ -167,7 +167,7 @@ class UserList extends Component {
const { classes } = this.props;
return (
<React.Fragment>
<Grid container justify="center" spacing={24} className={classes.root}>
<Grid container justify="center" spacing={40} className={classes.root}>
{this.displayUsers()}
</Grid>
</React.Fragment>
client/src/components/UserProfile.js
+2 -2
View File
@@ -14,7 +14,7 @@ import Typography from '@material-ui/core/Typography'
import Divider from '@material-ui/core/Divider'
// Images
import PortraitImage from '../img/portrait.jpg'
import UserDefaultPicture from '../img/user-default-pic.jpg'
const styles = theme => ({
root: {
@@ -107,7 +107,7 @@ class UserProfile extends Component {
<CardActionArea>
<CardMedia
className={classes.media}
image={PortraitImage}
image={UserDefaultPicture}
title='User Profile'
/>
client/src/components/UserSearch.js
+9 -3
View File
@@ -17,7 +17,7 @@ import Grid from '@material-ui/core/Grid'
import TextField from '@material-ui/core/TextField'
// Images
import PortraitImage from '../img/portrait.jpg'
import UserDefaultPicture from '../img/user-default-pic.jpg'
const styles = theme => ({
card: {
@@ -170,7 +170,7 @@ class UserSearch extends Component {
<CardActionArea>
<CardMedia
className={classes.media}
image={PortraitImage}
image={UserDefaultPicture}
title='User Profile'
/>
@@ -196,13 +196,18 @@ class UserSearch extends Component {
}
}
componentDidMount () {
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
}
render () {
const { classes } = this.props
return (
<div>
<form onSubmit={this.submitForm.bind(this)}>
<Typography className={classes.formTypography} variant='body2' gutterBottom align='left'>
<Typography className={classes.formTypography} variant='body1' gutterBottom align='left'>
Use any of these fileds to search for users. {this.selectText()}
</Typography>
@@ -257,6 +262,7 @@ class UserSearch extends Component {
{this.displayUsers()}
</Grid>
</div>
)
}
}
client/src/components/UserTabs.js
+1 -1
View File
@@ -65,7 +65,7 @@ class UserTabs extends React.Component {
fullWidth
>
<Tab label="Profile Sheet" icon={<ProfileSheetIcon />} />
<Tab label="Profile Images" icon={<ProfileImagesIcon />} />
<Tab disabled label="Profile Images" icon={<ProfileImagesIcon />} />
<Tab label="Your Referrer" icon={<YourReferrerIcon />} />
<Tab label="Your Descendents" icon={<DescendentsIcon />} />
</Tabs>
client/src/components/YourDescendents.js
+18 -8
View File
@@ -13,11 +13,11 @@ import DescendentsTree from './DescendentsTree'
const styles = theme => ({
root: {
width: '50%',
width: '100%',
flexGrow: 1,
padding: 10,
marginLeft: '25%',
marginTop: '2%'
marginTop: '5%',
marginBottom: '10%'
},
typography: {
width: '80%',
@@ -59,14 +59,14 @@ class YourDescendents extends Component {
}
}
render () {
addForm () {
const { classes } = this.props
return (
<Paper className={classes.root}>
<Typography className={classes.typography} variant='headline' gutterBottom>
Your Descendents
</Typography>
<Typography className={classes.typography} variant='h5' gutterBottom>
Your Decendents
</Typography>
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
These are your decendents within the project. Your children referred you as the one who brought them to the project, while
@@ -79,6 +79,16 @@ class YourDescendents extends Component {
</Paper>
)
}
render () {
return (
<React.Fragment>
<div className='container'>
{this.addForm()}
</div>
</React.Fragment>
)
}
}
export default compose(
client/src/components/YourReferrer.js
+17 -8
View File
@@ -15,11 +15,11 @@ import Typography from '@material-ui/core/Typography'
const styles = theme => ({
root: {
width: '50%',
width: '100%',
flexGrow: 1,
padding: 10,
marginLeft: '25%',
marginTop: '2%'
marginTop: '5%',
marginBottom: '10%'
},
typography: {
width: '80%',
@@ -125,18 +125,27 @@ class YourReferrer extends Component {
}
}
render () {
addForm () {
const { classes } = this.props
return (
<Paper className={classes.root}>
<Typography className={classes.typography} variant='headline' gutterBottom>
Your Referrer
</Typography>
<Typography className={classes.typography} variant='h5' gutterBottom>
Your Referrer
</Typography>
{this.renderMode()}
</Paper>
)
}
render () {
return (
<React.Fragment>
<div className='container'>
{this.addForm()}
</div>
</React.Fragment>
)
}
}
export default compose(
client/src/img/portrait.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

client/src/img/user-default-pic.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

client/src/index.js
+15 -71
View File
@@ -1,80 +1,24 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Route, BrowserRouter, Switch } from 'react-router-dom'
import { hot } from 'react-hot-loader'
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import { withStyles } from '@material-ui/core/styles'
import { MuiPickersUtilsProvider } from 'material-ui-pickers'
import LuxonUtils from 'material-ui-pickers/utils/luxon-utils'
// Components
import NavBar from './components/NavBar'
import Home from './components/Home'
import User from './components/User'
import Browse from './components/Browse'
import Search from './components/Search'
import Contact from './components/Contact'
import { getItem } from './utils/local-storage'
import {
globalStyles
} from './theme'
const App = () => (
<MuiPickersUtilsProvider utils={LuxonUtils}>
<Switch>
<Route exact path='/users/' component={Home} />
<Route path='/users/user' component={User} />
<Route path='/users/browse' component={Browse} />
<Route path='/users/search' component={Search} />
</Switch>
</MuiPickersUtilsProvider>
)
class App extends Component {
constructor (props) {
super(props)
this.state = {
user: null
}
}
export default App
async componentDidMount () {
let user = await getItem('user')
if (user !== null && user !== undefined && user !== 'undefined') {
user = JSON.parse(user)
this.setState({ user: user })
}
}
render () {
const { match } = this.props
return (
<BrowserRouter>
<div className='App'>
<NavBar match={match} user={this.state.user} />
<Switch>
<Route exact path={`${match.path}`} component={Home} />
<Route
exact
path={`${match.path}/users`}
render={props => <Home {...props} auth={this.props.auth} />}
/>
<Route
exact
path={`${match.path}/user`}
render={props => <User {...props} auth={this.props.auth} />}
/>
<Route
exact
path={`${match.path}/browse`}
render={props => <Browse {...props} auth={this.props.auth} />}
/>
<Route
exact
path={`${match.path}/search`}
render={props => <Search {...props} auth={this.props.auth} />}
/>
<Route path='/browse/:slug' component={Browse} />
</Switch>
</div>
</BrowserRouter>
)
}
}
App.propTypes = {
auth: PropTypes.object
}
const StyledApp = withStyles(globalStyles)(App)
export default hot(module)(StyledApp)