Client: Manage Team Details Dialog

client/src/views/dashboard/components/ManageTeamDetails.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '@material-ui/core/Button'
+import DetailsIcon from '@material-ui/icons/Details'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Typography from '@material-ui/core/Typography'
+
+export class ManageTeamDetails extends Component {
+  constructor (props) {
+    super(props)
+
+    this.handleClickOpen = this.handleClickOpen.bind(this)
+    this.handleClose = this.handleClose.bind(this)
+
+    this.state = {
+      open: false
+    }
+  }
+
+  render () {
+    console.log(this.props.team)
+    const { name, members, profile, createdAt } = this.props.team
+    return (
+      <div>
+        <Button size='small' color='primary' className={this.props.classes.buttonRight} onClick={this.handleClickOpen}>
+          <DetailsIcon /> Details
+        </Button>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby='form-dialog-title'
+        >
+          <DialogTitle id='form-dialog-title'>{name} Team Details</DialogTitle>
+          <DialogContent>
+            <Typography
+              variant='display3'
+              align='center'
+              color='textPrimary'
+              gutterBottom
+            >
+              {name}
+            </Typography>
+            <Typography variant='subheading' color='textSecondary'>
+              {createdAt}
+            </Typography>
+            <Typography variant='subheading' color='textSecondary'>
+              Motto: {profile.motto}
+            </Typography>
+            <Typography variant='subheading' color='textSecondary'>
+              Description: {profile.description}
+            </Typography>
+            <Typography variant='subheading' paragraph gutterBottom>
+              Members: {members.length}
+            </Typography>
+            <Typography variant='subheading' color='primary'>
+              Team Admin:
+              {
+                members.map(member => {
+                  if (member.role === 'OWNER' || member.role === 'ADMIN') {
+                    return member.member.alias
+                  }
+                })
+              }
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color='primary'>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    )
+  }
+
+  handleClickOpen () {
+    this.setState({ open: true })
+  }
+
+  handleClose () {
+    this.setState({ open: false })
+  }
+}
+
+ManageTeamDetails.propTypes = {
+  classes: PropTypes.object.isRequired,
+  team: PropTypes.any
+}
+
+export default ManageTeamDetails

client/src/views/dashboard/components/ManageTeamEdit.js

@@ -28,11 +28,13 @@ export class ManageTeamEdit extends Component {
     this.handleClose = this.handleClose.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
-
+    console.log('ManageTeamEdit', props.team)
+    const motto = props.team.profile.motto
+    const description = props.team.profile.description
     this.state = {
       open: false,
-      motto: '',
-      description: ''
+      motto: motto,
+      description: description
     }
   }
 
@@ -155,7 +157,8 @@ export class ManageTeamEdit extends Component {
 ManageTeamEdit.propTypes = {
   classes: PropTypes.object.isRequired,
   slug: PropTypes.string.isRequired,
-  authId: PropTypes.string
+  authId: PropTypes.string,
+  team: PropTypes.object
 }
 
 export default withRouter(ManageTeamEdit)

client/src/views/dashboard/components/ManageTeamsDetails.js

@@ -1,89 +0,0 @@
-import React from 'react'
-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 { withStyles } from '@material-ui/core/styles'
-
-import { Link } from 'react-router-dom'
-
-const styles = theme => ({
-  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 ManageTeamsDetails = ({ classes, team }) => (
-  <React.Fragment>
-    <CssBaseline />
-    <main className={classes.layout}>
-      <Paper className={classes.paper}>
-        <div className={classes.heroContent}>
-          <Link to='/teams'>&larr; Back to all teams</Link>
-          <Typography
-            variant='display3'
-            align='center'
-            color='textPrimary'
-            gutterBottom
-          >
-            {team.name}
-          </Typography>
-          <Typography variant='subheading' color='textSecondary'>
-            {team.createdAt}
-          </Typography>
-          <Typography variant='subheading' paragraph gutterBottom>
-            Members: {team.members.length}
-          </Typography>
-          <Typography variant='subheading' color='primary'>
-            Team Admin:
-            {
-              team.members.map(member => {
-                if (member.role === 'OWNER' || member.role === 'ADMIN') {
-                  return member.member.alias
-                }
-              })
-            }
-          </Typography>
-        </div>
-      </Paper>
-    </main>
-  </React.Fragment>
-)
-ManageTeamsDetails.propTypes = {
-  classes: PropTypes.object.isRequired,
-  team: PropTypes.object.isRequired
-}
-
-export default withStyles(styles)(ManageTeamsDetails)

client/src/views/dashboard/components/ManageTeamsItem.js

@@ -6,9 +6,9 @@ import Card from '@material-ui/core/Card'
 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 ManageTeamDetails from './ManageTeamDetails'
 import ManageTeamDelete from './ManageTeamDelete'
 import ManageTeamEdit from './ManageTeamEdit'
 
@@ -30,10 +30,8 @@ export const ManageTeamsItem = ({ classes, team, authId }) => (
           </Typography>
         </CardContent>
         <CardActions>
-          <Button size='small' color='primary' className={classes.buttonRight}>
-            Details
-          </Button>
-          <ManageTeamEdit classes={classes} slug={team.slug} authId={authId} />
+          <ManageTeamDetails classes={classes} team={team} />
+          <ManageTeamEdit classes={classes} slug={team.slug} authId={authId} team={team} />
           <ManageTeamDelete classes={classes} slug={team.slug} authId={authId} />
         </CardActions>
       </div>