From dde914c43af7cfca75e6aa99640d9a94d976ee46 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Wed, 12 Sep 2018 22:36:33 -0700 Subject: [PATCH] Client: break apart dashboard --- client/src/App.js | 6 +- .../src/graphql/teams/CreateTeamMutation.js | 2 +- client/src/views/dashboard/ManageTeams.js | 30 +++ client/src/views/dashboard/Overview.js | 73 +++++++ client/src/views/dashboard/TeamMembers.js | 30 +++ .../views/dashboard/components/CreateTeam.js | 16 +- .../views/dashboard/components/DashEditor.js | 50 +++++ .../views/dashboard/components/DashTeam.js | 22 ++ .../dashboard/components/DashTeamItem.js | 72 +++++++ client/src/views/dashboard/index.js | 164 ++------------ client/src/views/dashboard/members.js | 111 ---------- client/src/views/dashboard/settings.js | 202 +----------------- client/src/views/dashboard/teams.js | 111 ---------- 13 files changed, 313 insertions(+), 576 deletions(-) create mode 100644 client/src/views/dashboard/ManageTeams.js create mode 100644 client/src/views/dashboard/Overview.js create mode 100644 client/src/views/dashboard/TeamMembers.js create mode 100644 client/src/views/dashboard/components/DashEditor.js create mode 100644 client/src/views/dashboard/components/DashTeam.js create mode 100644 client/src/views/dashboard/components/DashTeamItem.js delete mode 100644 client/src/views/dashboard/members.js delete mode 100644 client/src/views/dashboard/teams.js diff --git a/client/src/App.js b/client/src/App.js index 5dcdda261..60dddf69d 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -148,7 +148,11 @@ class App extends Component { - + { diff --git a/client/src/graphql/teams/CreateTeamMutation.js b/client/src/graphql/teams/CreateTeamMutation.js index 752546daa..25858f6ed 100644 --- a/client/src/graphql/teams/CreateTeamMutation.js +++ b/client/src/graphql/teams/CreateTeamMutation.js @@ -8,7 +8,7 @@ export const CreateTeamMutation = gql` name slug owner - members{ + members { role member { authId diff --git a/client/src/views/dashboard/ManageTeams.js b/client/src/views/dashboard/ManageTeams.js new file mode 100644 index 000000000..7c284e75e --- /dev/null +++ b/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 }) => ( +
+ + Teams + +
+ +
+
+) + +ManageTeams.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(ManageTeams) diff --git a/client/src/views/dashboard/Overview.js b/client/src/views/dashboard/Overview.js new file mode 100644 index 000000000..19f30450f --- /dev/null +++ b/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 }) => ( + + + + +
+ + + +
+ + + + + + +) + +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) diff --git a/client/src/views/dashboard/TeamMembers.js b/client/src/views/dashboard/TeamMembers.js new file mode 100644 index 000000000..a22de3714 --- /dev/null +++ b/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 }) => ( +
+ + Members + +
+ +
+
+) + +TeamMembers.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(TeamMembers) diff --git a/client/src/views/dashboard/components/CreateTeam.js b/client/src/views/dashboard/components/CreateTeam.js index 2d0bda554..98e3aebc6 100644 --- a/client/src/views/dashboard/components/CreateTeam.js +++ b/client/src/views/dashboard/components/CreateTeam.js @@ -52,9 +52,7 @@ export class CreateTeamDialog extends Component { onClick={this.handleClickOpen} > - - Create A Team - + Create A Team Subscribe - - Team Creation - - - Name your team! - + Team Creation + Name your team! b.charAt(a.indexOf(c))) // Replace special characters .replace(/&/g, '-and-') // Replace & with 'and' diff --git a/client/src/views/dashboard/components/DashEditor.js b/client/src/views/dashboard/components/DashEditor.js new file mode 100644 index 000000000..1f6aa4cae --- /dev/null +++ b/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 }) => ( + + + Develop + + + + + + + + + + + + + + +) + +DashEditor.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(DashEditor) diff --git a/client/src/views/dashboard/components/DashTeam.js b/client/src/views/dashboard/components/DashTeam.js new file mode 100644 index 000000000..e56695511 --- /dev/null +++ b/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 = () => ( + + + + Teams + + + + + + +) + +export default DashTeam diff --git a/client/src/views/dashboard/components/DashTeamItem.js b/client/src/views/dashboard/components/DashTeamItem.js new file mode 100644 index 000000000..cdf585c8f --- /dev/null +++ b/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 }) => ( + + +
+ + + Goodester + + 09.15.2018 + + + Members:6 + + + Now recruiting! + + + + + +
+ + +) + +DashTeamItem.propTypes = { + classes: PropTypes.object.isRequired +} + +export default withStyles(styles)(DashTeamItem) diff --git a/client/src/views/dashboard/index.js b/client/src/views/dashboard/index.js index 6392347ed..3d39c1057 100644 --- a/client/src/views/dashboard/index.js +++ b/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 }) => (
- - - - Teams - - - - -
- - - -
- - - - -
- - - Goodester - - 09.15.2018 - - - Members:6 - - - Now recruiting! - - - - - -
- - - - -
- - - Goodester - - 09.15.2018 - - - Members:6 - - - Now recruiting! - - - - - -
- - - - - - - Develop - - - - - - - - - - - - - - - + + + + + +
) @@ -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) diff --git a/client/src/views/dashboard/members.js b/client/src/views/dashboard/members.js deleted file mode 100644 index da5524ed0..000000000 --- a/client/src/views/dashboard/members.js +++ /dev/null @@ -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 }) => ( -
- -
- {MainDrawerItems} - - {SecondaryDrawerItems} - -
-
- - Members - -
- -
-
-
-) - -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) diff --git a/client/src/views/dashboard/settings.js b/client/src/views/dashboard/settings.js index 0fac8c47e..3ae32bfcc 100644 --- a/client/src/views/dashboard/settings.js +++ b/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 }) => ( -
- -
- {MainDrawerItems} - - {SecondaryDrawerItems} - -
-
- - - - Settings - - - - -
- - - -
- - - - -
- - - Goodester - - 09.15.2018 - - - Members:6 - - - Now recruiting! - - - - - -
- - - - -
- - - Goodester - - 09.15.2018 - - - Members:6 - - - Now recruiting! - - - - - -
- - - - - - - Notifications - - - - - - - - - - - - - - -
+const Settings = ({ classes }) => ( +
+ + Settings + +
+ +
) -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) diff --git a/client/src/views/dashboard/teams.js b/client/src/views/dashboard/teams.js deleted file mode 100644 index 9d223e372..000000000 --- a/client/src/views/dashboard/teams.js +++ /dev/null @@ -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 }) => ( -
- -
- {MainDrawerItems} - - {SecondaryDrawerItems} - -
-
- - Teams - -
- -
-
-
-) - -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)