diff --git a/client/src/App.js b/client/src/App.js index e2f28ac3c..241fa8d1b 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -150,6 +150,7 @@ class App extends Component { + ({ + root: { + flexGrow: 1 + }, + '@global': { + body: { + backgroundColor: theme.palette.common.white + } + }, + layout: { + width: 'auto', + 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, + marginLeft: 'auto', + marginRight: 'auto' + } + }, + paper: { + marginTop: theme.spacing.unit * 3, + marginBottom: theme.spacing.unit * 3, + padding: theme.spacing.unit * 2, + [theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: { + marginTop: theme.spacing.unit * 6, + marginBottom: theme.spacing.unit * 6, + padding: theme.spacing.unit * 3 + } + }, + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + } +}) + +const TeamsDetails = ({ classes, team }) => ( + + +
+ +
+ ← Back to all teams + + {team.name} + + + {team.createdAt} + + + Members: {team.members.length} + + + Team Admin: + { + team.members.map(member => { + if (member.role === 'OWNER' || member.role === 'ADMIN') { + return member.member.alias + } + }) + } + +
+ +
+ +) +TeamsDetails.propTypes = { + classes: PropTypes.object.isRequired, + team: PropTypes.object.isRequired +} + +export default withStyles(styles)(TeamsDetails) diff --git a/client/src/views/teams/components/TeamsItem.js b/client/src/views/teams/components/TeamsItem.js index 16d833c32..6b2e20bb1 100644 --- a/client/src/views/teams/components/TeamsItem.js +++ b/client/src/views/teams/components/TeamsItem.js @@ -1,105 +1,49 @@ 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 Paper from '@material-ui/core/Paper' +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 ButtonBase from '@material-ui/core/ButtonBase' +import Typography from '@material-ui/core/Typography' -const styles = theme => ({ - layout: { - width: 'auto', - marginLeft: theme.spacing.unit * 2, - marginRight: theme.spacing.unit * 2, - [theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: { - width: 600, - marginLeft: 'auto', - marginRight: 'auto' - } - }, - paper: { - marginTop: theme.spacing.unit * 0.1, - marginBottom: theme.spacing.unit * 0.1, - padding: theme.spacing.unit * 2, - [theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: { - marginTop: theme.spacing.unit * 1, - marginBottom: theme.spacing.unit * 1, - padding: theme.spacing.unit * 3 - } - }, - card: { - display: 'block', - width: '100%' - }, - cardDetails: { - display: 'flex', - flex: 1 - }, - cardContent: { - flex: 1 - }, - buttonRight: { - justifyContent: 'flex-end' - }, - image: { - width: 140, - height: 140 - }, - img: { - margin: 'auto', - display: 'block', - maxWidth: '100%', - maxHeight: '100%' - } -}) +import { Link } from 'react-router-dom' export const TeamsItem = ({ classes, team }) => ( - -
- - - - - complex - - - - - - {team.name} - - {team.createdAt} - - - Members: 1 - - - - - Now recruiting! - - - - - - - - - -
+ + + + + + + {team.name} + + + {team.createdAt} + + + Members: 1 + + + Now recruiting! + + + + + + + + + ) @@ -108,4 +52,4 @@ TeamsItem.propTypes = { team: PropTypes.object.isRequired } -export default withStyles(styles)(TeamsItem) +export default TeamsItem diff --git a/client/src/views/teams/components/TeamsList.js b/client/src/views/teams/components/TeamsList.js index c156b244b..8ae962ead 100644 --- a/client/src/views/teams/components/TeamsList.js +++ b/client/src/views/teams/components/TeamsList.js @@ -4,58 +4,125 @@ import { Query } from 'react-apollo' import Typography from '@material-ui/core/Typography' import Grid from '@material-ui/core/Grid' +import { withStyles } from '@material-ui/core/styles' import GET_ALL_TEAMS_QUERY from '../../../graphql/teams/GetAllTeamsQuery' -import TeamsItem from './TeamsItem' +import { isEmpty } from '../../../utils/js-helpers' -export const TeamsList = ({ classes }) => ( - - - {({ loading, error, data }) => { - console.log('GET_TEAMS_BY_OWNER: ', loading, error, data) - let errors - let queryLoader - if (error) { - errors = error.graphQLErrors.map(({ message }, i) => { +import TeamsItem from './TeamsItem' +import TeamsDetails from './TeamsDetails' + +const styles = theme => ({ + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardGrid: { + padding: `${theme.spacing.unit * 8}px 0` + }, + card: { + height: '100%', + display: 'flex', + flexDirection: 'column' + }, + cardMedia: { + paddingTop: '56.25%' // 16:9 + }, + cardContent: { + flexGrow: 1 + }, + buttonRight: { + justifyContent: 'flex-end' + } +}) + +export const TeamsList = ({ classes, match }) => ( + + {({ loading, error, data }) => { + console.log('GET_TEAMS_BY_OWNER: ', loading, error, data, match) + let slug = null + if (!isEmpty(match.params) && match.params.slug) slug = match.params.slug + + let errors + let queryLoader + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + return ( + + {message} + + ) + }) + } + if (!loading && !error) { + if (data.teams.edges.length > 0) { + if (slug !== null) { return ( - - {message} - - ) - }) - } - if (!loading && !error) { - if (data.teams.edges.length > 0) { - return ( - + {!loading && - data.teams.edges.map(team => ( - - ))} + data.teams.edges.map(team => { + if (team.node.slug === slug) { + return ( + + ) + } + })} {queryLoader} {errors} ) + } else { + return ( + +
+ + Teams + +
+ + {!loading && + data.teams.edges.map(team => ( + + ))} + {queryLoader} + {errors} + + + ) } - } else { - return ( - - - Loading... - - {queryLoader} - {errors} - - ) } - }} - - + } else { + return ( + + + Loading... + + {queryLoader} + {errors} + + ) + } + }} + ) TeamsList.propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired, + match: PropTypes.object } -export default TeamsList +export default withStyles(styles)(TeamsList) diff --git a/client/src/views/teams/index.js b/client/src/views/teams/index.js index 96fd0e5c8..3c2087d83 100644 --- a/client/src/views/teams/index.js +++ b/client/src/views/teams/index.js @@ -2,13 +2,14 @@ import React from 'react' import PropTypes from 'prop-types' import CssBaseline from '@material-ui/core/CssBaseline' -import Typography from '@material-ui/core/Typography' -import Grid from '@material-ui/core/Grid' import { withStyles } from '@material-ui/core/styles' import TeamsList from './components/TeamsList' const styles = theme => ({ + root: { + flexGrow: 1 + }, '@global': { body: { backgroundColor: theme.palette.common.white @@ -18,42 +19,27 @@ const styles = theme => ({ width: 'auto', 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, marginLeft: 'auto', marginRight: 'auto' } - }, - heroContent: { - maxWidth: 600, - margin: '0 auto', - padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` } }) -const Teams = ({ classes }) => ( +const Teams = ({ classes, match }) => (
-
- - Teams - - - - -
+
) Teams.propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired, + match: PropTypes.object } export default withStyles(styles)(Teams)