-
- Collaborate. Innovate. Evolve.
+
+
+
+
)
} else {
return (
- 
- )
- break
- case 'auth0':
- return (
- 
- )
- break
- default:
-
- }
- }
-
- render () {
- const { classes } = this.props
- return (
-
- {({ anchorEl, updateAnchorEl }) => {
- const open = Boolean(anchorEl)
- const handleClose = () => {
- updateAnchorEl(null)
- }
-
- return (
-
-
-
-
- )
- }}
-
- )
- }
-}
-
-export default compose(
- withStyles(styles)
-)(LoggedInUserMenu)
diff --git a/client/src/components/Logout.js b/client/src/components/Logout.js
deleted file mode 100644
index 0989985f7..000000000
--- a/client/src/components/Logout.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-import {Redirect} from 'react-router';
-import {auth} from '../App';
-
-class Logout extends Component {
- render() {
- //window.localStorage.removeItem("user");
- auth.logout();
-
- return
-
- Profile Images
+
+
+
+ Comming Soon
-
-
-
- );
+
+
+ )
}
}
export default compose(
- graphql(updateUserImagesMutation, {name: 'updateUserImagesMutation'}),
withStyles(styles)
-)(ProfileImages) // This technique binds more than one query to a single component.
+)(ProfileImages)
diff --git a/client/src/components/ProfileSheet.js b/client/src/components/ProfileSheet.js
index 3e4b99539..3e75bc881 100644
--- a/client/src/components/ProfileSheet.js
+++ b/client/src/components/ProfileSheet.js
@@ -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%',
@@ -85,7 +85,8 @@ class ProfileSheet extends Component {
firstNameError: false,
middleNameError: false,
lastNameError: false,
- bioError: false
+ bioError: false,
+ updated: false
}
}
@@ -96,7 +97,7 @@ class ProfileSheet extends Component {
)
} else {
- return data.roles.map(role => {
+ return data.users_Roles.map(role => {
return (
)
@@ -108,7 +109,6 @@ class ProfileSheet extends Component {
e.preventDefault()
this.props.updateUserMutation({
variables: {
- id: this.state.id,
firstName: this.state.firstName,
middleName: this.state.middleName,
lastName: this.state.lastName,
@@ -135,6 +135,8 @@ class ProfileSheet extends Component {
user.role.id = this.state.roleId
localStorage.setItem('loggedInUser', JSON.stringify(user))
+
+ this.setState({updated: true})
}
handleCheckBoxes (e) {
@@ -241,10 +243,11 @@ class ProfileSheet extends Component {
componentWillMount () {
if (this.defaultValuesSet === false) {
- let authId = localStorage.getItem('authId')
+ let authUser = JSON.parse(localStorage.getItem('user'))
+ let authId = authUser.authId
let userData = localStorage.getItem('loggedInUser')
- if (userData === 'undefined') { return }
+ if (userData === 'undefined' || userData === null) { return }
let user = JSON.parse(userData)
this.defaultValuesSet = true
@@ -279,8 +282,8 @@ class ProfileSheet extends Component {
displayIdentityProvider () {
const { classes } = this.props
let authId = this.state.authId
- console.log('state', this.state)
- if (authId !== undefined) {
+
+ if (authId !== undefined && authId !== null) {
let authArray = this.state.authId.split('|')
let identityProvider = authArray[0]
@@ -301,19 +304,29 @@ class ProfileSheet extends Component {
}
}
- render () {
+ displayButtonTitle () {
+ if (this.state.updated === true) {
+ return 'Updated'
+ } else {
+ return 'Update'
+ }
+ }
+
+ addForm () {
const { classes } = this.props
return (
-
- Profile Sheet
-
+
- 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.
-
+ 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.
+
- Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
-
+ Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
+
@@ -422,10 +435,10 @@ class ProfileSheet extends Component {
onChange={this.handleCheckBoxes.bind(this)}
checked={this.rightCheckboxValue(this.state.isDeveloper)}
color='secondary'
- />
- }
+ />
+ }
label='Developer'
- />
+ />
@@ -462,8 +475,8 @@ class ProfileSheet extends Component {
- Current Role
-
+ Current Role
+
Select from the list your current role
@@ -481,12 +494,26 @@ class ProfileSheet extends Component {
-
+
-
+ )
+ }
+ render () {
+ return (
+
+
)
}
}
diff --git a/client/src/components/Search.js b/client/src/components/Search.js
index c62f79384..c2d6f0ab9 100644
--- a/client/src/components/Search.js
+++ b/client/src/components/Search.js
@@ -1,7 +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
@@ -9,24 +10,31 @@ import { withStyles } from '@material-ui/core/styles'
const styles = theme => ({
root: {
+ width: '100%',
flexGrow: 1,
- padding: 60,
- margin: 2
+ padding: 10,
+ marginTop: '5%',
+ marginBottom: '10%'
}
})
class Search extends Component {
- constructor (props) {
- super(props)
- this.state = {
- }
- }
render () {
+ const { classes } = this.props
return (
-
)
}
diff --git a/client/src/components/User.js b/client/src/components/User.js
index 043f3ddaf..e4eb6976c 100644
--- a/client/src/components/User.js
+++ b/client/src/components/User.js
@@ -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 (
-
)
diff --git a/client/src/components/UserList.js b/client/src/components/UserList.js
index e5ea63569..462ecd1b4 100644
--- a/client/src/components/UserList.js
+++ b/client/src/components/UserList.js
@@ -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,
@@ -89,13 +89,14 @@ class UserList extends Component {
};
displayUsers(){
+
let data = this.props.getUsersQuery;
const { classes } = this.props;
if(data.loading){
return (
-
+
{user.alias}
@@ -135,7 +136,7 @@ class UserList extends Component {
-
+
User Profile
+ Welcome to the Users Module!
+ The human component of the Advanced Algos Ecosystem.
+
-
-
- Intro
-
-
- 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.
-
-
- Development Status
-
-
- This module is is currently under heavy development. Implementation started 1st of September 2018 and this is the result of the 2nd sprint of 2 weeks of work each.
-
-
- What can you do?
-
-
- 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.
-
-
-
-
-
+
-
)
}
}
-export default compose(
- withStyles(styles)
-)(Home)
+export default Home
diff --git a/client/src/components/LoggedInUser.js b/client/src/components/LoggedInUser.js
index 656b66927..156ba0d17 100644
--- a/client/src/components/LoggedInUser.js
+++ b/client/src/components/LoggedInUser.js
@@ -1,14 +1,69 @@
import React, { Component } from 'react'
-import {graphql} from 'react-apollo'
+import {graphql, compose} from 'react-apollo'
import {getUserByAuthIdQuery} from '../queries/queries'
-import {auth} from '../App'
-import LoggedInUserMenu from './LoggedInUserMenu'
+import { withStyles } from '@material-ui/core/styles'
+import classNames from 'classnames'
+
import Button from '@material-ui/core/Button'
+import IconButton from '@material-ui/core/IconButton'
+
+// icons
+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 =>
+const ProfileImagesLink = props =>
+const YourReferrerLink = props =>
+const YourDescendentsLink = props =>
+
+const UserLink = 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 LoggedInUser extends Component {
displayLoggedInUser () {
- const user = this.props.data.userByAuthId
+ const user = this.props.data.users_UserByAuthId
+ const { classes, match } = this.props
if (user) {
let displayName = 'No Display Name'
@@ -34,15 +89,73 @@ class LoggedInUser extends Component {
let identityProvider = authArray[0]
return (
-
+
+ The Advanced Algos Ecosystem is made out of humans, financial beings and other entities such as teams.
-
- Welcome to Advanced Algos Users Module
+
+ Humans are either users or guests. If you haven’t signed up yet or you are logged off, then you are acting as a guest, with limited features. Please sign-up or log-in for a richer experience.
-
-
-
+
+ Users may have different roles, such as developer, trader, analyst, etc. Each of these roles usually have personalized features throughout the system.
+
+
+ The Users Module allows you to handle all of your details as a user of the system as well as finding other people in the ecosystem.
+
+
+
-
+ -
+
- + + +
- + + +
- + + +
- + + +
auth.login()}>
-
-
+
)
}
}
@@ -53,28 +166,31 @@ class LoggedInUser extends Component {
render () {
if (this.loggedInUserStored !== true) {
- let user = this.props.data.userByAuthId
+ let user = this.props.data.users_UserByAuthId
if (user !== undefined) {
- localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId))
+ localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.users_UserByAuthId))
this.loggedInUserStored = true
}
}
return (
-
+
{this.displayLoggedInUser()}
-
+
)
}
}
-export default graphql(getUserByAuthIdQuery, { // What follows is the way to pass a parameter to a query.
- options: (props) => {
- return {
- variables: {
- authId: props.authId
+export default compose(
+ graphql(getUserByAuthIdQuery, { // What follows is the way to pass a parameter to a query.
+ options: (props) => {
+ return {
+ variables: {
+ authId: props.authId
+ }
}
}
- }
-})(LoggedInUser) // This binds the querty to the component
+ }),
+ withStyles(styles)
+)(LoggedInUser)
diff --git a/client/src/components/LoggedInUserMenu.js b/client/src/components/LoggedInUserMenu.js
deleted file mode 100644
index 692af39ff..000000000
--- a/client/src/components/LoggedInUserMenu.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { Component } from 'react'
-import toRenderProps from 'recompose/toRenderProps'
-import withState from 'recompose/withState'
-import { Link } from 'react-router-dom'
-import {compose} from 'react-apollo'
-
-// Materia UI
-
-import { withStyles } from '@material-ui/core/styles'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-
-// Images
-import GithubLogo from '../img/github-head-negative.png'
-import EmailIcon from '../img/email.png'
-import ProfileIcon from '@material-ui/icons/Person'
-import LogoutIcon from '@material-ui/icons/DirectionsWalk'
-
-const UserLink = props =>
-const LogoutLink = props =>
-
-const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null))
-
-const styles = {
- img: {
- margin: 20,
- display: 'block',
- maxWidth: 15,
- maxHeight: 15
- }
-}
-
-class LoggedInUserMenu extends Component {
-
- constructor (props) {
- super(props)
- this.state = {
- user: {}
- }
- }
-
- displayIdentityProvider () {
- const { classes } = this.props
- switch (this.props.identityProvider) {
- case 'github':
- return (
-
-
-
- );
- }
-}
-
-export default Modules;
diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
deleted file mode 100644
index ebd5ae5dd..000000000
--- a/client/src/components/NavBar.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import AppBar from '@material-ui/core/AppBar'
-import Toolbar from '@material-ui/core/Toolbar'
-import Typography from '@material-ui/core/Typography'
-import IconButton from '@material-ui/core/IconButton'
-
-// icons
-import HomeIcon from '@material-ui/icons/Home'
-import BrowseIcon from '@material-ui/icons/ImportContacts'
-import SearchIcon from '@material-ui/icons/Search'
-import ContactIcon from '@material-ui/icons/ContactMail'
-import AboutIcon from '@material-ui/icons/FormatShapes'
-
-import { Link } from 'react-router-dom'
-
-// components
-import LoggedInUser from './LoggedInUser'
-
-// Images
-import AALogo from '../assets/logos/advanced-algos/aa-logo-dark.svg'
-
-const AboutLink = props =>
-const ContactLink = props =>
-const SearchLink = props =>
-const BrowseLink = props =>
-const HomeLink = props =>
-
-const styles = {
- root: {
- flexGrow: 1
- },
- flex: {
- flexGrow: 1
- },
- menuButton: {
- marginLeft: -12,
- marginRight: 20
- },
- img: {
- margin: 20,
- display: 'block',
- maxWidth: 240,
- maxHeight: 48
- }
-}
-
-class NavBar extends Component {
-
- constructor (props) {
- super(props)
- this.state = {
- authId: null
- }
- }
-
- componentDidMount () {
- const authId = localStorage.getItem('authId')
-
- if (authId !== null && authId !== undefined && authId !== 'undefined') {
- this.setState({ authId: authId })
- }
- }
- render () {
- const { classes } = this.props
- return (
-
-
-
- 
-
- Users
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-}
-
-NavBar.propTypes = {
- classes: PropTypes.object.isRequired
-}
-
-export default withStyles(styles)(NavBar)
diff --git a/client/src/components/Post.js b/client/src/components/Post.js
deleted file mode 100644
index 8ae8e1de1..000000000
--- a/client/src/components/Post.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { deletePost } from '../actions/postActions'
-
-class Post extends Component {
- handleClick = () => {
- this.props.deletePost(this.props.post.id);
- this.props.history.push('/');
- }
- render() {
-
- const post = this.props.post ? (
-
-
- ) : (
- {this.props.post.title}
-{this.props.post.body}
-
-
-
- Loading post...
- );
-
- return (
-
- {post}
-
- )
- }
-}
-
-const mapStateToProps = (state, ownProps) => {
- let id = ownProps.match.params.post_id;
- return {
- post: state.posts.find(post => post.id === id)
- }
-}
-
-const mapDispatchToProps = (dispatch) => {
- return {
- deletePost: (id) => dispatch(deletePost(id))
- }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Post)
diff --git a/client/src/components/ProfileImages.js b/client/src/components/ProfileImages.js
index 9df04d93c..2a7788304 100644
--- a/client/src/components/ProfileImages.js
+++ b/client/src/components/ProfileImages.js
@@ -1,322 +1,42 @@
-import React from 'react';
-import {graphql, compose} from 'react-apollo'
-import {updateUserImagesMutation, getUsersQuery} from '../queries/queries'
-import Avatar from '@material-ui/core/Avatar';
-import classNames from 'classnames';
-
-import ReactFilestack from 'filestack-react'
-
-// Material-ui
-
+import React, { Component } from 'react'
+import { compose } from 'recompose'
import { withStyles } from '@material-ui/core/styles'
-import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper'
-import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography'
-const options = {
- accept: ['image/jpeg', 'image/jpg', 'image/png'],
- maxFiles: 1,
- imageDim: [300, 300],
- maxSize: 0.25 * 1024 * 1024, // 1/4 of 1 Mb
- storeTo: {
- location: 's3',
- },
-};
-
const styles = theme => ({
-
- button: {
- margin: theme.spacing.unit,
- marginTop: theme.spacing.unit * 3
- },
- row: {
- display: 'flex',
- justifyContent: 'center',
- },
- avatar: {
- margin: 10,
- },
- bigAvatar: {
- width: 60,
- height: 60,
- },
root: {
width: '50%',
flexGrow: 1,
padding: 10,
marginLeft: '25%',
- marginTop: '2%'
+ marginTop: '5%',
+ marginBottom: '10%'
},
typography: {
width: '80%',
marginLeft: '10%',
- marginTop: 40
+ marginTop: 40,
+ marginBottom: 40
}
})
-class ProfileImages extends React.Component {
+class ProfileImages extends Component {
- constructor (props) {
- super(props)
-
- this.defaultValuesSet = false
-
- this.state = {
- avatarHandle: '',
- avatarChangeDate: '',
- newAvatarHandle: '',
- saveDisabled: true,
- uploadToolDisabled: false,
- showNewAvatar: false,
- needToWait: false,
- removeCurrentAvatar: false
- }
- }
-
- submitForm (e) {
- e.preventDefault()
- this.props.updateUserImagesMutation({
- variables: {
- id: this.state.id,
- avatarHandle: this.state.newAvatarHandle,
- avatarChangeDate: this.state.avatarChangeDate
- },
- refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation.
- })
-
- this.setState({saveDisabled: true, removeCurrentAvatar:true})
-
- /* Before we are done, we need to update the state of the local storage. */
-
- let user = JSON.parse(localStorage.getItem('loggedInUser'))
-
- user.avatarHandle = this.state.newAvatarHandle
- user.avatarChangeDate = this.state.avatarChangeDate
-
- localStorage.setItem('loggedInUser', JSON.stringify(user))
- }
-
- componentWillMount () {
- if (this.defaultValuesSet === false) {
- let userData = localStorage.getItem('loggedInUser')
-
- if (userData === 'undefined') { return }
-
- let user = JSON.parse(userData)
- this.defaultValuesSet = true
-
- /* To avoid console warning, we need to take care of the fields that are null. */
-
- if (user.avatarHandle === null) { user.avatarHandle = '' }
- if (user.avatarChangeDate === null) { user.avatarChangeDate = '' }
-
- /* Here we will check that the user does not change the avatar more often than once a day. */
-
- let avatarChangeDate = (new Date(user.avatarChangeDate)).valueOf()
- let now = (new Date()).valueOf()
- let timePassed = now - avatarChangeDate
- let oneDay = 1000 * 60 * 60 * 24
-
-
-
- if (timePassed < oneDay) {
- this.setState({
- needToWait: true
- })
- } else {
- this.setState({
- needToWait: false
- })
- }
-
- /* Now we are ready to set the initial state. */
-
- this.setState({
- id: user.id,
- avatarHandle: user.avatarHandle,
- avatarChangeDate: user.avatarChangeDate
- })
- }
- }
-
- onSuccess = (uploadResults) => {
- console.log('onSuccess')
- console.log(uploadResults)
-
- const handle = uploadResults.filesUploaded[0].handle
-
- let localDate = new Date()
- let currentDate = new Date(Date.UTC(
- localDate.getUTCFullYear(),
- localDate.getUTCMonth(),
- localDate.getUTCDate(),
- localDate.getUTCHours(),
- localDate.getUTCMinutes(),
- localDate.getUTCSeconds(),
- localDate.getUTCMilliseconds())
- )
-
- currentDate.toISOString()
-
- this.setState(
- {
- newAvatarHandle: handle,
- avatarChangeDate: currentDate,
- showNewAvatar: true,
- uploadToolDisabled: true,
- saveDisabled: false
- }
- )
- }
-
- onError = (err) => {
- console.log('onError')
- console.log(err)
- }
-
- onRemoveSuccess = (err) => {
- console.log('onRemoveSuccess')
- console.log(err)
- }
-
- showCurrentAvatar() {
-
- const { classes } = this.props
-
- if (this.state.removeCurrentAvatar === false) {
-
- return (
-
-
- This is your current Avatar:
-
-
-
-
-
-
-
- )
-
- } else {
-
- return (
-
-
- )
- }
-
-
- }
-
- showNewAvatar() {
- if (this.state.showNewAvatar === true) {
- const { classes } = this.props
- return (
-
-
- This is how your new avatar will look like. Press save to proceed with the change.
-
-
-
-
-
-
-
- )
- }
- }
-
- showUploadTool() {
- const { classes } = this.props
- if (this.state.needToWait === true) {
- return (
-
-
- You updated your Avatar in the last 24 hours. As a protection against denial of service attacks, the system does not allow users to update their Avatar in less than 24 hs since their last update. Please come back tomorrow.
-
-
- )
- } else {
- return(
-
-
- If you want, you can choose a new one by picking an image from your computer, camera or the web, and crop it with the following tool.
-
-
-
-
-
-
-
- )
- }
- }
-
- render() {
+ render () {
const { classes } = this.props
return (
-
+ {this.addForm()}
+
+
+
+
+
Loading Users...
);
} else {
- return data.users.map(user => {
+ return data.users_Users.map(user => {
return (
@@ -107,12 +108,12 @@ class UserList extends Component {