Merge branch 'feature/client-layout-update' into develop
This commit is contained in:
Barry Low committed
commit
ffe11de716
15 files changed
+463
-118
No files matched your search
Generated
+14
-13
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@advancedalgos/teams-client",
|
||||
"version": "0.0.22",
|
||||
"version": "0.0.24",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -12040,14 +12040,14 @@
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "16.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
|
||||
"integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
|
||||
"version": "16.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz",
|
||||
"integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"schedule": "^0.5.0"
|
||||
"scheduler": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"react-apollo": {
|
||||
@@ -12089,14 +12089,14 @@
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
|
||||
"integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
|
||||
"version": "16.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.1.tgz",
|
||||
"integrity": "sha512-zm+wBuEMGm009Wt1uE4Zw5KcXOW7qC4E/xW/fpJsCsbOco4U/R84u+DzzO/S4SYSdNBcqcaulcp4w3FXl8pImw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"schedule": "^0.5.0"
|
||||
"scheduler": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"react-dropzone": {
|
||||
@@ -13088,11 +13088,12 @@
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
|
||||
},
|
||||
"schedule": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
|
||||
"integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
|
||||
"scheduler": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz",
|
||||
"integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
|
||||
+4
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@advancedalgos/teams-client",
|
||||
"version": "0.0.24",
|
||||
"version": "0.0.25",
|
||||
"description": "Advanced Algos Team client-side web app",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
@@ -90,15 +90,15 @@
|
||||
"minilog": "^3.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"query-string": "^6.2.0",
|
||||
"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",
|
||||
"recompose": "^0.30.0",
|
||||
"subscriptions-transport-ws": "^0.9.15"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@material-ui/core": "^3.2.0",
|
||||
"@material-ui/core": "^3.2.2",
|
||||
"@material-ui/icons": "^3.0.1"
|
||||
},
|
||||
"standard": {
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
FinancialBeings,
|
||||
Settings,
|
||||
Teams,
|
||||
TeamBar,
|
||||
globalStyles
|
||||
} from './views'
|
||||
|
||||
@@ -35,16 +34,8 @@ class App extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { match } = this.props
|
||||
let loggedIn
|
||||
if (this.state.user !== null) {
|
||||
loggedIn = (<TeamBar match={match} user={this.state.user} />)
|
||||
} else {
|
||||
loggedIn = ''
|
||||
}
|
||||
return (
|
||||
<div className='App'>
|
||||
{loggedIn}
|
||||
<Switch>
|
||||
<Route exact path={`/teams`} component={Teams} />
|
||||
<Route
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { Typography } from '@material-ui/core'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import styles from './TopBarStyles'
|
||||
|
||||
class TopBar extends React.Component {
|
||||
render () {
|
||||
const {
|
||||
classes,
|
||||
size,
|
||||
title,
|
||||
text
|
||||
} = this.props
|
||||
if (size === 'big') {
|
||||
return (
|
||||
<div className={classes.rootBig}>
|
||||
<div className={classes.captions}>
|
||||
<Typography className={classes.title} variant='h5' align='center'>{title}</Typography>
|
||||
<Typography className={classes.text} variant='subtitle1' align='center'>{text}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (size === 'medium') {
|
||||
return (
|
||||
<div className={classes.rootMedium}>
|
||||
<div className={classes.captions}>
|
||||
<Typography className={classes.title} variant='h5' align='center'>{title}</Typography>
|
||||
<Typography className={classes.text} variant='subtitle1' align='center'>{text}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className={classes.rootSmall} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
TopBar.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
size: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
text: PropTypes.string
|
||||
}
|
||||
|
||||
export default withStyles(styles)(TopBar)
|
||||
@@ -0,0 +1,39 @@
|
||||
const styles = () => ({
|
||||
rootBig: {
|
||||
backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
|
||||
width: '100%',
|
||||
height: '100vh'
|
||||
},
|
||||
rootMedium: {
|
||||
backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
|
||||
width: '100%',
|
||||
height: '50vh'
|
||||
},
|
||||
rootSmall: {
|
||||
backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
|
||||
width: '100%',
|
||||
height: '220px'
|
||||
},
|
||||
captions: {
|
||||
position: 'relative',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)'
|
||||
},
|
||||
title: {
|
||||
fontFamily: 'Saira',
|
||||
color: 'white',
|
||||
fontSize: '64px',
|
||||
lineHeight: '78px',
|
||||
fontWeight: 100
|
||||
},
|
||||
text: {
|
||||
fontFamily: 'Saira',
|
||||
color: 'white',
|
||||
fontSize: '20px',
|
||||
lineHeight: '30px',
|
||||
fontWeight: 600,
|
||||
padding: '20px 0 0.5em 0'
|
||||
}
|
||||
})
|
||||
|
||||
export default styles
|
||||
@@ -1,3 +1,4 @@
|
||||
import TeamBar from './components/TeamBar'
|
||||
import TopBar from './components/TopBar'
|
||||
|
||||
export { TeamBar }
|
||||
export { TeamBar, TopBar }
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import { TopBar } from '../common'
|
||||
import ManageFBList from './components/ManageFBList'
|
||||
|
||||
const styles = theme => ({
|
||||
@@ -14,9 +14,7 @@ const styles = theme => ({
|
||||
|
||||
const FinancialBeings = ({ classes }) => (
|
||||
<div>
|
||||
<Typography variant='h4' gutterBottom>
|
||||
Financial Beings
|
||||
</Typography>
|
||||
<TopBar size='medium' title='Manage Your Financial Beings' text='Manage your Advanced Algos Financial Beings' />
|
||||
<ManageFBList />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Mutation } from 'react-apollo'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import Button from '@material-ui/core/Button'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import FormControl from '@material-ui/core/FormControl'
|
||||
import FormHelperText from '@material-ui/core/FormHelperText'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { isEmpty } from '../../../utils/js-helpers'
|
||||
|
||||
import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation'
|
||||
import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
|
||||
|
||||
import log from '../../../utils/log'
|
||||
|
||||
const styles = theme => ({
|
||||
formContainer: {
|
||||
width: '100%',
|
||||
margin: '3em 0 1em'
|
||||
},
|
||||
dialogStyle: {
|
||||
padding: '3em'
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 10
|
||||
},
|
||||
submitButton: {
|
||||
margin: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 6}px`
|
||||
}
|
||||
})
|
||||
|
||||
export class CreateTeamForm extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.handleClickOpen = this.handleClickOpen.bind(this)
|
||||
this.handleClose = this.handleClose.bind(this)
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
this.handleSubmit = this.handleSubmit.bind(this)
|
||||
this.validate = this.validate.bind(this)
|
||||
this.slugify = this.slugify.bind(this)
|
||||
|
||||
this.state = {
|
||||
open: false,
|
||||
name: '',
|
||||
botName: '',
|
||||
nameError: '',
|
||||
botNameError: ''
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Mutation
|
||||
mutation={CREATE_TEAM}
|
||||
refetchQueries={[{
|
||||
query: GET_TEAMS_BY_OWNER
|
||||
}]}
|
||||
>
|
||||
{(createTeam, { loading, error, data }) => {
|
||||
let errors
|
||||
let loader = null
|
||||
if (loading) {
|
||||
loader = (
|
||||
<Typography variant='subtitle1'>Submitting team...</Typography>
|
||||
)
|
||||
}
|
||||
if (error) {
|
||||
errors = error.graphQLErrors.map(({ message }, i) => {
|
||||
// const displayMessage = checkGraphQLError(message)
|
||||
return (
|
||||
<Typography key={i} variant='caption'>
|
||||
{message}
|
||||
</Typography>
|
||||
)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<FormControl
|
||||
required
|
||||
error={this.state.nameError !== '' || this.state.botNameError !== '' || error !== null}
|
||||
className={classes.formContainer}
|
||||
>
|
||||
<Typography variant='subtitle2' align='center'>Create a name for your team</Typography>
|
||||
<TextField
|
||||
autoFocus
|
||||
id='name'
|
||||
label='Team Name'
|
||||
type='text'
|
||||
fullWidth
|
||||
className={classes.textField}
|
||||
value={this.state.name}
|
||||
onChange={this.handleChange}
|
||||
error={this.state.nameError !== ''}
|
||||
/>
|
||||
{this.state.nameError !== '' && (
|
||||
<FormHelperText>{this.state.nameError}</FormHelperText>
|
||||
)}
|
||||
<Typography variant='subtitle2' align='center' ><br />
|
||||
Create a name for your teams bot.
|
||||
</Typography>
|
||||
<TextField
|
||||
autoFocus
|
||||
id='botName'
|
||||
label='Team Bot Name'
|
||||
type='text'
|
||||
fullWidth
|
||||
className={classes.textField}
|
||||
value={this.state.botName}
|
||||
onChange={this.handleChange}
|
||||
error={this.state.botNameError !== ''}
|
||||
/>
|
||||
{this.state.botNameError !== '' && (
|
||||
<FormHelperText>{this.state.botNameError}</FormHelperText>
|
||||
)}
|
||||
{error && <FormHelperText>{errors}</FormHelperText>}
|
||||
{loader}
|
||||
<Button
|
||||
onClick={e => {
|
||||
this.handleSubmit(e, createTeam, this.state.name, this.state.botName)
|
||||
}}
|
||||
variant='contained'
|
||||
color='secondary'
|
||||
className={classes.submitButton}
|
||||
>
|
||||
Create Team
|
||||
</Button>
|
||||
</FormControl>
|
||||
)
|
||||
}}
|
||||
</Mutation>
|
||||
)
|
||||
}
|
||||
|
||||
handleClickOpen () {
|
||||
this.setState({ open: true })
|
||||
}
|
||||
|
||||
handleClose () {
|
||||
this.setState({ open: false })
|
||||
}
|
||||
|
||||
handleChange (e) {
|
||||
let id = e.target.id
|
||||
let value = e.target.value
|
||||
let error = this.validate({ id, value })
|
||||
switch (id) {
|
||||
case 'name':
|
||||
if (!isEmpty(error)) this.setState({ nameError: error })
|
||||
this.setState({ name: value })
|
||||
break
|
||||
case 'botName':
|
||||
if (!isEmpty(error)) this.setState({ botNameError: error })
|
||||
this.setState({ botName: value })
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
async handleSubmit (e, createTeam, name, botName) {
|
||||
e.preventDefault()
|
||||
log.debug('createTeam submit: ', name, botName)
|
||||
const slug = this.slugify(name)
|
||||
const botSlug = this.slugify(botName)
|
||||
await createTeam({ variables: { name, slug, botName, botSlug } })
|
||||
window.canvasApp.eventHandler.raiseEvent('User Profile Changed')
|
||||
this.setState({ name: '', open: false })
|
||||
}
|
||||
|
||||
validate (data) {
|
||||
const errors = {}
|
||||
switch (data.id) {
|
||||
case 'name':
|
||||
if (data.value === '') {
|
||||
this.setState({ nameError: 'Please enter a team name' })
|
||||
} else {
|
||||
this.setState({ nameError: '' })
|
||||
}
|
||||
break
|
||||
case 'botName':
|
||||
if (data.value === '') {
|
||||
this.setState({ botNameError: 'Please enter a bot name' })
|
||||
} else {
|
||||
this.setState({ botNameError: '' })
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
return errors
|
||||
}
|
||||
|
||||
slugify (string) {
|
||||
const a = 'àáäâãåèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
|
||||
const b = 'aaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'
|
||||
const p = new RegExp(a.split('').join('|'), 'g')
|
||||
|
||||
return string
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-') // Replace spaces with -
|
||||
.replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
|
||||
.replace(/&/g, '-and-') // Replace & with 'and'
|
||||
.replace(/[^\w-]+/g, '') // Remove all non-word characters
|
||||
.replace(/--+/g, '-') // Replace multiple - with single -
|
||||
.replace(/^-+/, '') // Trim - from start of text
|
||||
.replace(/-+$/, '') // Trim - from end of text
|
||||
}
|
||||
}
|
||||
|
||||
CreateTeamForm.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default withStyles(styles)(CreateTeamForm)
|
||||
@@ -3,17 +3,23 @@ import PropTypes from 'prop-types'
|
||||
import { Query } from 'react-apollo'
|
||||
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { MessageCard } from '@advancedalgos/web-components'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
|
||||
|
||||
import ManageTeamsItem from './ManageTeamsItem'
|
||||
import CreateTeamDialog from './CreateTeamDialog'
|
||||
import CreateTeamForm from './CreateTeamForm'
|
||||
|
||||
import log from '../../../utils/log'
|
||||
|
||||
const styles = theme => ({
|
||||
container: {
|
||||
padding: `${theme.spacing.unit * 8}px ${theme.spacing.unit * 6}px`,
|
||||
margin: `${theme.spacing.unit * 1}px 0`
|
||||
},
|
||||
heroContent: {
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
@@ -63,7 +69,7 @@ export const ManageTeamsList = ({ classes, user = null, ...props }) => (
|
||||
if (data.teams_TeamsByOwner.length > 0) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Grid container spacing={40}>
|
||||
<Grid container spacing={0} direction='column' justify='center' alignItems='center'>
|
||||
{!loading &&
|
||||
data.teams_TeamsByOwner.map(team => (
|
||||
<ManageTeamsItem
|
||||
@@ -79,21 +85,37 @@ export const ManageTeamsList = ({ classes, user = null, ...props }) => (
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Grid container spacing={40}>
|
||||
<Grid item xs={10}>
|
||||
<MessageCard message='You don’t have any teams. Create one!'>
|
||||
<CreateTeamDialog />
|
||||
</MessageCard>
|
||||
<Paper>
|
||||
<Grid container spacing={0} direction='column' justify='center' alignItems='center' className={classes.container}>
|
||||
<Grid item xs={10}>
|
||||
<Typography variant='h5' align='center'>
|
||||
You don’t have any teams. Create one!
|
||||
</Typography>
|
||||
<Typography variant='body2' align='center' gutterBottom>
|
||||
To begin developing on the Advanced Algos platform, as well as participate in Algobot competitions,
|
||||
you'll need to create a team. A default trading algobot will be cloned and added to your team so
|
||||
that you can begin experimenting right away..
|
||||
</Typography>
|
||||
<CreateTeamForm />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Grid container spacing={40}>
|
||||
<Grid spacing={0} direction='column' justify='center' alignItems='center'>
|
||||
<Grid item xs={12}>
|
||||
<MessageCard message='Loading...' />
|
||||
{errors !== null && <MessageCard message={errors} />}
|
||||
{errors === null &&
|
||||
<Typography variant='h5' align='center' gutterBottom>
|
||||
Loading...
|
||||
</Typography>
|
||||
}
|
||||
{errors !== null &&
|
||||
<Typography variant='h5' align='center' gutterBottom>
|
||||
{errors}
|
||||
</Typography>
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -1,23 +1,42 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
|
||||
import { TopBar } from '../common'
|
||||
import ManageTeamsList from './components/ManageTeamsList'
|
||||
|
||||
const styles = theme => ({
|
||||
tableContainer: {
|
||||
height: 320
|
||||
container: {
|
||||
width: 'auto',
|
||||
marginTop: theme.spacing.unit * 3,
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing.unit * 6,
|
||||
[theme.breakpoints.up(800 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 800,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const ManageTeams = ({ classes, ...props }) => (
|
||||
<div>
|
||||
<Typography variant='h4' gutterBottom>
|
||||
Manage Your Teams
|
||||
</Typography>
|
||||
<ManageTeamsList {...props} />
|
||||
<TopBar size='medium' title='Manage Your Teams' text='Create and manage your Advanced Algos teams' />
|
||||
<Grid
|
||||
container
|
||||
direction='column'
|
||||
justify='center'
|
||||
alignItems='stretch'
|
||||
className={classes.container}
|
||||
spacing={0}
|
||||
>
|
||||
<Grid item spacing={0}>
|
||||
<ManageTeamsList {...props} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
// import ManageTeamMembersList from './components/ManageTeamMembersList'
|
||||
import { MessageCard } from '@advancedalgos/web-components'
|
||||
import { TopBar } from '../common'
|
||||
|
||||
const styles = theme => ({
|
||||
tableContainer: {
|
||||
@@ -15,11 +14,7 @@ const styles = theme => ({
|
||||
|
||||
const TeamMembers = ({ classes }) => (
|
||||
<div>
|
||||
<Typography variant='h4' gutterBottom>
|
||||
Team Members
|
||||
<MessageCard message='Coming soon. Invite and manage team members.' />
|
||||
</Typography>
|
||||
|
||||
<TopBar size='big' title='Team Members' text='Coming soon. Invite and manage team members.' />
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import { Link } from 'react-router-dom'
|
||||
@@ -22,37 +23,38 @@ const styles = theme => ({
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing.unit * 6,
|
||||
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 900,
|
||||
[theme.breakpoints.up(800 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 800,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
},
|
||||
paper: {
|
||||
marginTop: theme.spacing.unit * 3,
|
||||
marginTop: 0,
|
||||
marginBottom: theme.spacing.unit * 3,
|
||||
padding: theme.spacing.unit * 2,
|
||||
[theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: {
|
||||
padding: 0,
|
||||
[theme.breakpoints.up(800 + theme.spacing.unit * 3 * 2)]: {
|
||||
marginTop: theme.spacing.unit * 6,
|
||||
marginBottom: theme.spacing.unit * 6,
|
||||
padding: theme.spacing.unit * 3
|
||||
padding: `0 0 ${theme.spacing.unit * 6}px`
|
||||
}
|
||||
},
|
||||
heroContent: {
|
||||
maxWidth: 600,
|
||||
maxWidth: 800,
|
||||
margin: '0 auto',
|
||||
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
|
||||
padding: `0 0 ${theme.spacing.unit * 6}px`
|
||||
},
|
||||
teamContent: {
|
||||
margin: `${theme.spacing.unit * 1}px ${theme.spacing.unit * 3}px 0 0`
|
||||
},
|
||||
banner: {
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
margin: '0 auto'
|
||||
height: 'auto'
|
||||
},
|
||||
avatar: {
|
||||
maxWidth: 100,
|
||||
height: 100,
|
||||
margin: '0 1em 1em 0',
|
||||
float: 'left'
|
||||
margin: `${theme.spacing.unit * 1}px 0 0 ${theme.spacing.unit * 3}px `
|
||||
}
|
||||
})
|
||||
|
||||
@@ -73,31 +75,38 @@ const TeamsDetails = ({ classes, team }) => {
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<main className={classes.layout}>
|
||||
<Link to='/teams'>← Back to all teams</Link>
|
||||
<Paper className={classes.paper}>
|
||||
<Link to='/teams'>← Back to all teams</Link>
|
||||
<div className={classes.heroContent}>
|
||||
<img src={banner} alt={team.name} className={classes.banner} />
|
||||
<img src={avatar} alt={team.name} className={classes.avatar} />
|
||||
<Typography
|
||||
variant='h2'
|
||||
align='center'
|
||||
color='textPrimary'
|
||||
gutterBottom
|
||||
>
|
||||
{team.name}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='textSecondary'>
|
||||
{team.createdAt}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='textSecondary'>
|
||||
Motto: {team.profile.motto}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='textSecondary'>
|
||||
Description: {team.profile.description}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' paragraph gutterBottom>
|
||||
Members: {team.members.length}
|
||||
</Typography>
|
||||
<Grid container>
|
||||
<Grid md={3}>
|
||||
<img src={avatar} alt={team.name} className={classes.avatar} />
|
||||
</Grid>
|
||||
<Grid md={9}>
|
||||
<Grid container className={classes.teamContent} direction='column'>
|
||||
<Typography
|
||||
variant='h2'
|
||||
color='textPrimary'
|
||||
gutterBottom
|
||||
>
|
||||
{team.name}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='textSecondary'>
|
||||
{team.createdAt}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='textSecondary'>
|
||||
Motto: {team.profile.motto}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='textSecondary'>
|
||||
Description: {team.profile.description}
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' paragraph gutterBottom>
|
||||
Members: {team.members.length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</Paper>
|
||||
</main>
|
||||
|
||||
@@ -13,12 +13,12 @@ import Typography from '@material-ui/core/Typography'
|
||||
import { Link } from 'react-router-dom'
|
||||
// const TeamDetailsLink = ({ teamSlug, ...props }) => <Link to={`/teams/${teamSlug}`} {...props} />
|
||||
export const TeamsItem = ({ classes, team }) => {
|
||||
/* let avatar
|
||||
let avatar
|
||||
if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') {
|
||||
avatar = team.profile.avatar
|
||||
} else {
|
||||
avatar = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
|
||||
} */
|
||||
avatar = 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-avatar-default.png'
|
||||
}
|
||||
let banner
|
||||
if (team.profile.banner !== undefined && team.profile.banner !== null) {
|
||||
banner = team.profile.banner
|
||||
@@ -26,7 +26,7 @@ export const TeamsItem = ({ classes, team }) => {
|
||||
banner = 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-banner-default.png'
|
||||
}
|
||||
return (
|
||||
<Grid item sm={6} md={4} lg={3}>
|
||||
<Grid item sm={6} md={4}>
|
||||
<Card className={classes.card}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
@@ -35,15 +35,22 @@ export const TeamsItem = ({ classes, team }) => {
|
||||
title={team.name}
|
||||
/>
|
||||
<CardContent className={classes.cardContent}>
|
||||
<Typography gutterBottom variant='h5' component='h2'>
|
||||
{team.name}
|
||||
</Typography>
|
||||
<Typography variant='caption' paragraph gutterBottom>
|
||||
Members: 1
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='primary'>
|
||||
Now recruiting!
|
||||
</Typography>
|
||||
<Grid container>
|
||||
<Grid md={3}>
|
||||
<img src={avatar} alt={team.name} className={classes.avatar} />
|
||||
</Grid>
|
||||
<Grid md={9}>
|
||||
<Typography gutterBottom variant='h5' component='h2'>
|
||||
{team.name}
|
||||
</Typography>
|
||||
<Typography variant='caption' paragraph gutterBottom>
|
||||
Members: 1
|
||||
</Typography>
|
||||
<Typography variant='subtitle1' color='primary'>
|
||||
Now recruiting!
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
|
||||
@@ -30,11 +30,16 @@ const styles = theme => ({
|
||||
flexDirection: 'column'
|
||||
},
|
||||
cardMedia: {
|
||||
paddingTop: '56.25%' // 16:9
|
||||
paddingTop: '25%' // 16:9
|
||||
},
|
||||
cardContent: {
|
||||
flexGrow: 1
|
||||
},
|
||||
avatar: {
|
||||
maxWidth: 50,
|
||||
height: 50,
|
||||
margin: '0 1em 1em 0'
|
||||
},
|
||||
buttonRight: {
|
||||
justifyContent: 'flex-end'
|
||||
}
|
||||
@@ -78,16 +83,6 @@ export const TeamsList = ({ classes, match }) => (
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className={classes.heroContent}>
|
||||
<Typography
|
||||
variant='h3'
|
||||
align='center'
|
||||
color='textPrimary'
|
||||
gutterBottom
|
||||
>
|
||||
Teams
|
||||
</Typography>
|
||||
</div>
|
||||
<Grid container spacing={40}>
|
||||
{!loading &&
|
||||
data.teams_Teams.edges.map(team => (
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import { TopBar } from '../common'
|
||||
import TeamsList from './components/TeamsList'
|
||||
|
||||
const styles = theme => ({
|
||||
@@ -17,11 +17,12 @@ const styles = theme => ({
|
||||
},
|
||||
layout: {
|
||||
width: 'auto',
|
||||
marginTop: theme.spacing.unit * 3,
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
marginBottom: theme.spacing.unit * 6,
|
||||
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 900,
|
||||
[theme.breakpoints.up(1200 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 1200,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
@@ -30,7 +31,7 @@ const styles = theme => ({
|
||||
|
||||
const Teams = ({ classes, match }) => (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<TopBar size='medium' title='Browse Teams' text='Explore Advanced Algos Teams' />
|
||||
<main className={classes.layout}>
|
||||
<TeamsList match={match} />
|
||||
</main>
|
||||
|
||||
Reference in new issue
Block a user