Client: break apart dashboard

client/src/App.js

@@ -148,7 +148,11 @@ class App extends Component {
               <NavBar auth={auth} />
               <Switch>
                 <Route exact path='/' component={Home} />
-                <Route exact path='/dashboard' component={Dashboard} />
+                <Route
+                  exact
+                  path='/(dashboard|manage-teams|team-members|settings)/'
+                  component={Dashboard}
+                />
                 <Route
                   path='/callback'
                   render={props => {

client/src/graphql/teams/CreateTeamMutation.js

@@ -8,7 +8,7 @@ export const CreateTeamMutation = gql`
       name
       slug
       owner
-      members{
+      members {
         role
         member {
           authId

client/src/views/dashboard/ManageTeams.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+import { TeamTable } from './components/TeamTable'
+
+const styles = theme => ({
+  tableContainer: {
+    height: 320
+  }
+})
+
+const ManageTeams = ({ classes }) => (
+  <div>
+    <Typography variant='display1' gutterBottom>
+      Teams
+    </Typography>
+    <div className={classes.tableContainer}>
+      <TeamTable />
+    </div>
+  </div>
+)
+
+ManageTeams.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(ManageTeams)

client/src/views/dashboard/Overview.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+
+import { withStyles } from '@material-ui/core/styles'
+
+import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+
+import { CreateTeamDialog } from './components/CreateTeam'
+import { DashTeam } from './components/DashTeam'
+import { DashEditor } from './components/DashEditor'
+
+import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
+
+const styles = theme => ({
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  }
+})
+
+export const Overview = ({ classes, createTeamMutation }) => (
+  <Grid container spacing={24}>
+    <Grid container spacing={24}>
+      <Grid item>
+        <Card className={classes.card}>
+          <div className={classes.cardDetails}>
+            <CardContent className={classes.createCardContent}>
+              <CreateTeamDialog
+                classes={classes}
+                createTeamMutation={createTeamMutation}
+              />
+            </CardContent>
+          </div>
+        </Card>
+      </Grid>
+    </Grid>
+    <DashTeam />
+    <DashEditor />
+  </Grid>
+)
+
+Overview.propTypes = {
+  classes: PropTypes.object.isRequired,
+  createTeamMutation: PropTypes.object
+}
+
+const OverviewWithMutation = graphql(CreateTeamMutation, {
+  name: 'createTeamMutation',
+  options: props => ({
+    // Options are computed from `props` here.
+  })
+})(Overview)
+
+export default withStyles(styles)(OverviewWithMutation)

client/src/views/dashboard/TeamMembers.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+import { TeamTable } from './components/TeamTable'
+
+const styles = theme => ({
+  tableContainer: {
+    height: 320
+  }
+})
+
+const TeamMembers = ({ classes }) => (
+  <div>
+    <Typography variant='display1' gutterBottom>
+      Members
+    </Typography>
+    <div className={classes.tableContainer}>
+      <TeamTable />
+    </div>
+  </div>
+)
+
+TeamMembers.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(TeamMembers)

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

@@ -52,9 +52,7 @@ export class CreateTeamDialog extends Component {
           onClick={this.handleClickOpen}
         >
           <AddIcon className={this.props.classes.extendedIcon} />
-          <Typography variant='subheading'>
-            Create A Team
-          </Typography>
+          <Typography variant='subheading'>Create A Team</Typography>
         </Button>
         <Dialog
           open={this.state.open}
@@ -63,12 +61,8 @@ export class CreateTeamDialog extends Component {
         >
           <DialogTitle id='form-dialog-title'>Subscribe</DialogTitle>
           <DialogContent>
-            <Typography variant='subheading'>
-              Team Creation
-            </Typography>
-            <DialogContentText>
-              Name your team!
-            </DialogContentText>
+            <Typography variant='subheading'>Team Creation</Typography>
+            <DialogContentText>Name your team!</DialogContentText>
             <TextField
               autoFocus
               margin='dense'
@@ -98,7 +92,9 @@ export class CreateTeamDialog extends Component {
     const b = 'aaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'
     const p = new RegExp(a.split('').join('|'), 'g')
 
-    return string.toString().toLowerCase()
+    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'

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

@@ -0,0 +1,50 @@
+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 Card from '@material-ui/core/Card'
+import CardMedia from '@material-ui/core/CardMedia'
+import CardActions from '@material-ui/core/CardActions'
+import Button from '@material-ui/core/Button'
+
+import aaweb from '../../assets/AlgonetWebPlatform.jpg'
+
+const styles = theme => ({
+  aawebMedia: {
+    width: '100%',
+    height: 320
+  }
+})
+
+export const DashEditor = ({ classes }) => (
+  <Grid item md={6}>
+    <Typography variant='display1' gutterBottom>
+      Develop
+    </Typography>
+    <Grid container spacing={24}>
+      <Grid item md={12}>
+        <Card>
+          <CardMedia
+            className={classes.aawebMedia}
+            image={aaweb}
+            title='Image title'
+          />
+          <CardActions>
+            <Typography variant='title' color='inherit' aligh='right'>
+              <Button>Start Developing ></Button>
+            </Typography>
+          </CardActions>
+        </Card>
+      </Grid>
+    </Grid>
+  </Grid>
+)
+
+DashEditor.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(DashEditor)

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+
+import Typography from '@material-ui/core/Typography'
+import Grid from '@material-ui/core/Grid'
+
+import { DashTeamIteam } from './DashTeamIteam'
+
+export const DashTeam = () => (
+  <Query>
+    <Grid item md={6}>
+      <Typography variant='display1' gutterBottom>
+        Teams
+      </Typography>
+      <Grid container spacing={24}>
+        <DashTeamIteam />
+      </Grid>
+    </Grid>
+  </Query>
+)
+
+export default DashTeam

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

@@ -0,0 +1,72 @@
+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 Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import CardMedia from '@material-ui/core/CardMedia'
+import CardActions from '@material-ui/core/CardActions'
+import Button from '@material-ui/core/Button'
+
+const styles = theme => ({
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  }
+})
+
+export const DashTeamItem = ({ classes }) => (
+  <Grid item>
+    <Card className={classes.card}>
+      <div className={classes.cardDetails}>
+        <CardMedia
+          className={classes.cardMedia}
+          image='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' // eslint-disable-line max-len
+          title='Image title'
+        />
+        <CardContent className={classes.cardContent}>
+          <Typography variant='headline'>Goodester</Typography>
+          <Typography variant='subheading' color='textSecondary'>
+            09.15.2018
+          </Typography>
+          <Typography variant='subheading' paragraph>
+            Members:6
+          </Typography>
+          <Typography variant='subheading' color='primary'>
+            Now recruiting!
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button size='small' color='primary' className={classes.buttonRight}>
+            Details
+          </Button>
+        </CardActions>
+      </div>
+    </Card>
+  </Grid>
+)
+
+DashTeamItem.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(DashTeamItem)

client/src/views/dashboard/index.js

@@ -1,25 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
+import { Route, Switch } from 'react-router-dom'
 
-import Typography from '@material-ui/core/Typography'
 import { withStyles } from '@material-ui/core/styles'
 import Drawer from '@material-ui/core/Drawer'
 import List from '@material-ui/core/List'
 import Divider from '@material-ui/core/Divider'
-import Grid from '@material-ui/core/Grid'
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-import CardMedia from '@material-ui/core/CardMedia'
-import CardActions from '@material-ui/core/CardActions'
-import Button from '@material-ui/core/Button'
 
 import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
-import { CreateTeamDialog } from './components/CreateTeam'
 
-import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
-
-import aaweb from '../../assets/AlgonetWebPlatform.jpg'
+import { Overview } from 'Overview'
+import { ManageTeams } from 'ManageTeams'
+import { TeamMembers } from 'TeamMembers'
+import { Settings } from 'Settings'
 
 const drawerWidth = 240
 
@@ -49,37 +42,7 @@ const styles = theme => ({
     overflow: 'auto',
     width: `calc(90% - ${drawerWidth}px)`
   },
-  appBarSpacer: theme.mixins.toolbar,
-  tableContainer: {
-    height: 320
-  },
-  card: {
-    display: 'flex',
-    width: '100%'
-  },
-  cardDetails: {
-    display: 'flex',
-    flex: 1
-  },
-  cardContent: {
-    flex: 1
-  },
-  cardMedia: {
-    flex: 1,
-    width: 160,
-    height: 160,
-    justifyContent: 'flex-start'
-  },
-  aawebMedia: {
-    width: '100%',
-    height: 320
-  },
-  buttonRight: {
-    justifyContent: 'flex-end'
-  },
-  extendedIcon: {
-    marginRight: theme.spacing.unit
-  }
+  appBarSpacer: theme.mixins.toolbar
 })
 
 const Dashboard = ({ classes, createTeamMutation, ...props }) => (
@@ -97,109 +60,12 @@ const Dashboard = ({ classes, createTeamMutation, ...props }) => (
     </Drawer>
     <main className={classes.content}>
       <div className={classes.appBarSpacer} />
-      <Grid container spacing={24} className={classes.cardGrid}>
-        <Grid item md={6}>
-          <Typography variant='display1' gutterBottom>
-            Teams
-          </Typography>
-          <Grid container spacing={24} className={classes.cardGrid}>
-            <Grid item>
-              <Card className={classes.card}>
-                <div className={classes.cardDetails}>
-                  <CardContent className={classes.createCardContent}>
-                    <CreateTeamDialog classes={classes} createTeamMutation={createTeamMutation} />
-                  </CardContent>
-                </div>
-              </Card>
-            </Grid>
-            <Grid item>
-              <Card className={classes.card}>
-                <div className={classes.cardDetails}>
-                  <CardMedia
-                    className={classes.cardMedia}
-                    image='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' // eslint-disable-line max-len
-                    title='Image title'
-                  />
-                  <CardContent className={classes.cardContent}>
-                    <Typography variant='headline'>Goodester</Typography>
-                    <Typography variant='subheading' color='textSecondary'>
-                      09.15.2018
-                    </Typography>
-                    <Typography variant='subheading' paragraph>
-                      Members:6
-                    </Typography>
-                    <Typography variant='subheading' color='primary'>
-                      Now recruiting!
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button
-                      size='small'
-                      color='primary'
-                      className={classes.buttonRight}
-                    >
-                      Details
-                    </Button>
-                  </CardActions>
-                </div>
-              </Card>
-            </Grid>
-            <Grid item>
-              <Card className={classes.card}>
-                <div className={classes.cardDetails}>
-                  <CardMedia
-                    className={classes.cardMedia}
-                    image='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' // eslint-disable-line max-len
-                    title='Image title'
-                  />
-                  <CardContent className={classes.cardContent}>
-                    <Typography variant='headline'>Goodester</Typography>
-                    <Typography variant='subheading' color='textSecondary'>
-                      09.15.2018
-                    </Typography>
-                    <Typography variant='subheading' paragraph>
-                      Members:6
-                    </Typography>
-                    <Typography variant='subheading' color='primary'>
-                      Now recruiting!
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button
-                      size='small'
-                      color='primary'
-                      className={classes.buttonRight}
-                    >
-                      Details
-                    </Button>
-                  </CardActions>
-                </div>
-              </Card>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item md={6}>
-          <Typography variant='display1' gutterBottom>
-            Develop
-          </Typography>
-          <Grid container spacing={24} className={classes.cardGrid}>
-            <Grid item md={12}>
-              <Card className={classes.mainFeaturedPost}>
-                <CardMedia
-                  className={classes.aawebMedia}
-                  image={aaweb}
-                  title='Image title'
-                />
-                <CardContent>
-                  <Typography variant='title' color='inherit' aligh='right'>
-                    <Button>Start Developing ></Button>
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
+      <Switch>
+        <Route exact path='/dashboard' component={Overview} />
+        <Route exact path='/manage-team' component={ManageTeams} />
+        <Route exact path='/team-members' component={TeamMembers} />
+        <Route exact path='/settings' component={Settings} />
+      </Switch>
     </main>
   </div>
 )
@@ -209,8 +75,4 @@ Dashboard.propTypes = {
   createTeamMutation: PropTypes.function
 }
 
-const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
-  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
-})(Dashboard)
-
-export default withStyles(styles)(CreateTeamDialogWithMutation)
+export default withStyles(styles)(Dashboard)

client/src/views/dashboard/members.js

@@ -1,111 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
-
-import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/core/styles'
-import Drawer from '@material-ui/core/Drawer'
-import List from '@material-ui/core/List'
-import Divider from '@material-ui/core/Divider'
-
-import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
-import { TeamTable } from './components/TeamTable'
-
-import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
-
-const drawerWidth = 240
-
-const styles = theme => ({
-  root: {
-    display: 'flex'
-  },
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white
-    }
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1
-  },
-  drawerPaper: {
-    position: 'relative',
-    width: drawerWidth,
-    whiteSpace: 'nowrap',
-    zIndex: 1000
-  },
-  content: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit * 3,
-    height: '100vh',
-    overflow: 'auto',
-    width: `calc(90% - ${drawerWidth}px)`
-  },
-  appBarSpacer: theme.mixins.toolbar,
-  tableContainer: {
-    height: 320
-  },
-  card: {
-    display: 'flex',
-    width: '100%'
-  },
-  cardDetails: {
-    display: 'flex',
-    flex: 1
-  },
-  cardContent: {
-    flex: 1
-  },
-  cardMedia: {
-    flex: 1,
-    width: 160,
-    height: 160,
-    justifyContent: 'flex-start'
-  },
-  aawebMedia: {
-    width: '100%',
-    height: 320
-  },
-  buttonRight: {
-    justifyContent: 'flex-end'
-  },
-  extendedIcon: {
-    marginRight: theme.spacing.unit
-  }
-})
-
-const Dashboard = ({ classes, createTeamMutation, ...props }) => (
-  <div className={classes.root}>
-    <Drawer
-      variant='permanent'
-      classes={{
-        paper: classes.drawerPaper
-      }}
-    >
-      <div className={classes.appBarSpacer} />
-      <List>{MainDrawerItems}</List>
-      <Divider />
-      <List>{SecondaryDrawerItems}</List>
-    </Drawer>
-    <main className={classes.content}>
-      <div className={classes.appBarSpacer} />
-      <Typography variant='display1' gutterBottom>
-        Members
-      </Typography>
-      <div className={classes.tableContainer}>
-        <TeamTable />
-      </div>
-    </main>
-  </div>
-)
-
-Dashboard.propTypes = {
-  classes: PropTypes.object.isRequired,
-  createTeamMutation: PropTypes.function
-}
-
-const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
-  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
-})(Dashboard)
-
-export default withStyles(styles)(CreateTeamDialogWithMutation)

client/src/views/dashboard/settings.js

@@ -1,210 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
 
 import Typography from '@material-ui/core/Typography'
 import { withStyles } from '@material-ui/core/styles'
-import Drawer from '@material-ui/core/Drawer'
-import List from '@material-ui/core/List'
-import Divider from '@material-ui/core/Divider'
-import Grid from '@material-ui/core/Grid'
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-import CardMedia from '@material-ui/core/CardMedia'
-import CardActions from '@material-ui/core/CardActions'
-import Button from '@material-ui/core/Button'
 
-import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
 import { TeamTable } from './components/TeamTable'
-import { CreateTeamDialog } from './components/CreateTeam'
-
-import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
-
-const drawerWidth = 240
 
 const styles = theme => ({
-  root: {
-    display: 'flex'
-  },
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white
-    }
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1
-  },
-  drawerPaper: {
-    position: 'relative',
-    width: drawerWidth,
-    whiteSpace: 'nowrap',
-    zIndex: 1000
-  },
-  content: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit * 3,
-    height: '100vh',
-    overflow: 'auto',
-    width: `calc(90% - ${drawerWidth}px)`
-  },
-  appBarSpacer: theme.mixins.toolbar,
   tableContainer: {
     height: 320
-  },
-  card: {
-    display: 'flex',
-    width: '100%'
-  },
-  cardDetails: {
-    display: 'flex',
-    flex: 1
-  },
-  cardContent: {
-    flex: 1
-  },
-  cardMedia: {
-    flex: 1,
-    width: 160,
-    height: 160,
-    justifyContent: 'flex-start'
-  },
-  aawebMedia: {
-    width: '100%',
-    height: 320
-  },
-  buttonRight: {
-    justifyContent: 'flex-end'
-  },
-  extendedIcon: {
-    marginRight: theme.spacing.unit
   }
 })
 
-const Dashboard = ({ classes, createTeamMutation, ...props }) => (
-  <div className={classes.root}>
-    <Drawer
-      variant='permanent'
-      classes={{
-        paper: classes.drawerPaper
-      }}
-    >
-      <div className={classes.appBarSpacer} />
-      <List>{MainDrawerItems}</List>
-      <Divider />
-      <List>{SecondaryDrawerItems}</List>
-    </Drawer>
-    <main className={classes.content}>
-      <div className={classes.appBarSpacer} />
-      <Grid container spacing={24} className={classes.cardGrid}>
-        <Grid item md={6}>
-          <Typography variant='display1' gutterBottom>
-            Settings
-          </Typography>
-          <Grid container spacing={24} className={classes.cardGrid}>
-            <Grid item>
-              <Card className={classes.card}>
-                <div className={classes.cardDetails}>
-                  <CardContent className={classes.createCardContent}>
-                    <CreateTeamDialog classes={classes} createTeamMutation={createTeamMutation} />
-                  </CardContent>
-                </div>
-              </Card>
-            </Grid>
-            <Grid item>
-              <Card className={classes.card}>
-                <div className={classes.cardDetails}>
-                  <CardMedia
-                    className={classes.cardMedia}
-                    image='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' // eslint-disable-line max-len
-                    title='Image title'
-                  />
-                  <CardContent className={classes.cardContent}>
-                    <Typography variant='headline'>Goodester</Typography>
-                    <Typography variant='subheading' color='textSecondary'>
-                      09.15.2018
-                    </Typography>
-                    <Typography variant='subheading' paragraph>
-                      Members:6
-                    </Typography>
-                    <Typography variant='subheading' color='primary'>
-                      Now recruiting!
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button
-                      size='small'
-                      color='primary'
-                      className={classes.buttonRight}
-                    >
-                      Details
-                    </Button>
-                  </CardActions>
-                </div>
-              </Card>
-            </Grid>
-            <Grid item>
-              <Card className={classes.card}>
-                <div className={classes.cardDetails}>
-                  <CardMedia
-                    className={classes.cardMedia}
-                    image='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' // eslint-disable-line max-len
-                    title='Image title'
-                  />
-                  <CardContent className={classes.cardContent}>
-                    <Typography variant='headline'>Goodester</Typography>
-                    <Typography variant='subheading' color='textSecondary'>
-                      09.15.2018
-                    </Typography>
-                    <Typography variant='subheading' paragraph>
-                      Members:6
-                    </Typography>
-                    <Typography variant='subheading' color='primary'>
-                      Now recruiting!
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button
-                      size='small'
-                      color='primary'
-                      className={classes.buttonRight}
-                    >
-                      Details
-                    </Button>
-                  </CardActions>
-                </div>
-              </Card>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item md={6}>
-          <Typography variant='display1' gutterBottom>
-            Notifications
-          </Typography>
-          <Grid container spacing={24} className={classes.cardGrid}>
-            <Grid item md={12}>
-              <Card className={classes.mainFeaturedPost}>
-                <CardContent>
-                  <Typography variant='title' color='inherit' aligh='right'>
-                    <Button>Start Developing ></Button>
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-    </main>
+const Settings = ({ classes }) => (
+  <div>
+    <Typography variant='display1' gutterBottom>
+      Settings
+    </Typography>
+    <div className={classes.tableContainer}>
+      <TeamTable />
+    </div>
   </div>
 )
 
-Dashboard.propTypes = {
-  classes: PropTypes.object.isRequired,
-  createTeamMutation: PropTypes.function
+Settings.propTypes = {
+  classes: PropTypes.object.isRequired
 }
 
-const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
-  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
-})(Dashboard)
-
-export default withStyles(styles)(CreateTeamDialogWithMutation)
+export default withStyles(styles)(Settings)

client/src/views/dashboard/teams.js

@@ -1,111 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
-
-import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/core/styles'
-import Drawer from '@material-ui/core/Drawer'
-import List from '@material-ui/core/List'
-import Divider from '@material-ui/core/Divider'
-
-import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
-import { TeamTable } from './components/TeamTable'
-
-import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
-
-const drawerWidth = 240
-
-const styles = theme => ({
-  root: {
-    display: 'flex'
-  },
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white
-    }
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1
-  },
-  drawerPaper: {
-    position: 'relative',
-    width: drawerWidth,
-    whiteSpace: 'nowrap',
-    zIndex: 1000
-  },
-  content: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit * 3,
-    height: '100vh',
-    overflow: 'auto',
-    width: `calc(90% - ${drawerWidth}px)`
-  },
-  appBarSpacer: theme.mixins.toolbar,
-  tableContainer: {
-    height: 320
-  },
-  card: {
-    display: 'flex',
-    width: '100%'
-  },
-  cardDetails: {
-    display: 'flex',
-    flex: 1
-  },
-  cardContent: {
-    flex: 1
-  },
-  cardMedia: {
-    flex: 1,
-    width: 160,
-    height: 160,
-    justifyContent: 'flex-start'
-  },
-  aawebMedia: {
-    width: '100%',
-    height: 320
-  },
-  buttonRight: {
-    justifyContent: 'flex-end'
-  },
-  extendedIcon: {
-    marginRight: theme.spacing.unit
-  }
-})
-
-const Dashboard = ({ classes, createTeamMutation, ...props }) => (
-  <div className={classes.root}>
-    <Drawer
-      variant='permanent'
-      classes={{
-        paper: classes.drawerPaper
-      }}
-    >
-      <div className={classes.appBarSpacer} />
-      <List>{MainDrawerItems}</List>
-      <Divider />
-      <List>{SecondaryDrawerItems}</List>
-    </Drawer>
-    <main className={classes.content}>
-      <div className={classes.appBarSpacer} />
-      <Typography variant='display1' gutterBottom>
-        Teams
-      </Typography>
-      <div className={classes.tableContainer}>
-        <TeamTable />
-      </div>
-    </main>
-  </div>
-)
-
-Dashboard.propTypes = {
-  classes: PropTypes.object.isRequired,
-  createTeamMutation: PropTypes.function
-}
-
-const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
-  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
-})(Dashboard)
-
-export default withStyles(styles)(CreateTeamDialogWithMutation)