+
+ Collaborate. Innovate. Evolve.
+
+
+ Welcome to the Advanced Algos Teams Module
+
+
+
+
+ {message}
+ {children}
+
+
+
+
+ Manage Your 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..87aa217bf
--- /dev/null
+++ b/client/src/views/dashboard/Overview.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+
+import Grid from '@material-ui/core/Grid'
+
+import DashTeam from './components/DashTeam'
+import DashEditor from './components/DashEditor'
+
+const styles = theme => ({
+ root: {
+ display: 'flex'
+ },
+ 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'
+ },
+ aawebMedia: {
+ width: '100%',
+ height: 320
+ },
+ dashLink: {
+ float: 'right',
+ color: '#111',
+ fontSize: 16,
+ textDecoration: 'none',
+ paddingRight: '1em'
+ }
+})
+
+export class Overview extends Component {
+ render () {
+ const { classes } = this.props
+ return (
+
+
+ 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..1dfb75850 100644
--- a/client/src/views/dashboard/components/CreateTeam.js
+++ b/client/src/views/dashboard/components/CreateTeam.js
@@ -1,135 +1,100 @@
-import React, { Component } from 'react'
+import React from 'react'
import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
-import Button from '@material-ui/core/Button'
-import AddIcon from '@material-ui/icons/Add'
-import TextField from '@material-ui/core/TextField'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
+import { Mutation } from 'react-apollo'
+
import Typography from '@material-ui/core/Typography'
import { getItem } from '../../../utils/local-storage'
+import { checkGraphQLError } from '../../../utils/graphql-errors'
-export class CreateTeamDialog extends Component {
- constructor (props) {
- super(props)
+import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation'
+import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
- this.handleClickOpen = this.handleClickOpen.bind(this)
- this.handleClose = this.handleClose.bind(this)
- this.handlePost = this.handlePost.bind(this)
- this.slugify = this.slugify.bind(this)
- this.handleChange = this.handleChange.bind(this)
+const CreateTeam = ({ authId }) => {
+ let input
+ console.log('CreateTeam', authId)
- this.state = {
- open: false,
- name: ''
- }
- }
-
- handleClickOpen () {
- this.setState({ open: true })
- }
-
- handleClose () {
- this.setState({ open: false })
- }
-
- handleChange (e) {
- this.setState({ name: e.target.value })
- }
-
- render () {
- console.log(this.props)
- return (
-
+
+
-
-
-
- )
- }
-
- 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
- }
-
- async handlePost (e) {
- e.preventDefault()
- const { name } = this.state
- const slug = this.slugify(name)
- const currentUser = await getItem('user')
- let authId = JSON.parse(currentUser)
- authId = authId.sub
- console.log('createPage cu:', JSON.parse(currentUser))
- await this.props.createTeamMutation({
- variables: {
- name,
- slug,
- owner: authId
- }
- })
- this.setState({ open: false })
- }
+ return (
+
+
+ {loader}
+ {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
+ }
+
+ async handlePost (e) {
+ e.preventDefault()
+ const { name } = this.state
+ const slug = this.slugify(name)
+ const currentUser = await getItem('user')
+ let authId = JSON.parse(currentUser)
+ authId = authId.sub
+ console.log('createPage cu:', JSON.parse(currentUser))
+ await this.props.createTeamMutation({
+ variables: {
+ name,
+ slug,
+ owner: authId
+ }
+ })
+ this.setState({ open: false })
+ }
+}
+
+CreateTeamDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+ createTeamMutation: PropTypes.function
+}
+
+export default withRouter(CreateTeamDialog)
diff --git a/client/src/views/dashboard/components/CreateTeamWrapper.js b/client/src/views/dashboard/components/CreateTeamWrapper.js
new file mode 100644
index 000000000..68750bffc
--- /dev/null
+++ b/client/src/views/dashboard/components/CreateTeamWrapper.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+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 CreateTeam from './CreateTeam'
+
+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'
+ }
+})
+
+const CreateTeamWrapper = ({ classes, authId }) => (
+
+
+
+
+
+
+ {team.name}
+
+ {team.createdAt}
+
+
+ Members:6
+
+
+
+
+
+
+
@@ -35,7 +37,7 @@ export const MainDrawerItems = (
-
@@ -54,13 +56,13 @@ export const MainDrawerItems = (
export const SecondaryDrawerItems = (
-
+
-
+
diff --git a/client/src/views/dashboard/components/ManageTeamDelete.js b/client/src/views/dashboard/components/ManageTeamDelete.js
new file mode 100644
index 000000000..4cb3e3204
--- /dev/null
+++ b/client/src/views/dashboard/components/ManageTeamDelete.js
@@ -0,0 +1,143 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import { Mutation } from 'react-apollo'
+
+import Button from '@material-ui/core/Button'
+import DeleteIcon from '@material-ui/icons/Delete'
+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'
+
+import DELETE_TEAM from '../../../graphql/teams/DeleteTeamMutation'
+import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
+
+import { checkGraphQLError } from '../../../utils/graphql-errors'
+
+const styles = theme => ({
+ dialogContainer: {
+ display: 'block',
+ margin: '3em',
+ minWidth: 400
+ },
+ buttonRight: {
+ justifyContent: 'flex-end'
+ }
+})
+
+export class ManageTeamDelete 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.state = {
+ open: false,
+ motto: '',
+ description: ''
+ }
+ }
+
+ handleClickOpen () {
+ this.setState({ open: true })
+ }
+
+ handleClose () {
+ this.setState({ open: false })
+ }
+
+ handleChange (e) {
+ this.setState({ name: e.target.value })
+ }
+
+ render () {
+ console.log(this.props, this.props.slug)
+ const { classes, authId } = this.props
+ return (
+ {
+ const data = cache.readQuery({ query: GET_TEAMS_BY_OWNER })
+ console.log('Mutation cache update: ', deleteTeam, data)
+ data.getTeamsByOwner.push(deleteTeam)
+ cache.writeQuery({ query: GET_TEAMS_BY_OWNER, data })
+ }}
+ >
+ {(deleteTeam, { loading, error, data }) => {
+ let errors
+ let loader
+ if (loading) {
+ loader = Submitting team...
+ }
+ if (error) {
+ errors = error.graphQLErrors.map(({ message }, i) => {
+ const displayMessage = checkGraphQLError(message)
+ console.log('createTeam error:', displayMessage)
+ return (
+
+ {message}
+
+ )
+ })
+ }
+ return (
+
+ )
+ }
+
+ async handleSubmit (e, deleteTeam, slug, authId) {
+ e.preventDefault()
+ await deleteTeam({ variables: { slug, owner: authId } })
+ }
+}
+
+ManageTeamDelete.propTypes = {
+ classes: PropTypes.object.isRequired,
+ slug: PropTypes.string.isRequired,
+ authId: PropTypes.string.isRequired
+}
+
+export default withStyles(styles)(ManageTeamDelete)
diff --git a/client/src/views/dashboard/components/ManageTeamDetails.js b/client/src/views/dashboard/components/ManageTeamDetails.js
new file mode 100644
index 000000000..183db0ea8
--- /dev/null
+++ b/client/src/views/dashboard/components/ManageTeamDetails.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+
+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'
+
+const styles = theme => ({
+ dialogContainer: {
+ display: 'block',
+ margin: '3em',
+ minWidth: 400
+ },
+ buttonRight: {
+ justifyContent: 'flex-end'
+ }
+})
+
+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 (
+
+ {(updateTeamProfile, { loading, error, data }) => {
+ let errors
+ let loader
+ if (loading) {
+ loader = Submitting team...
+ }
+ if (error) {
+ errors = error.graphQLErrors.map(({ message }, i) => {
+ const displayMessage = checkGraphQLError(message)
+ console.log('updateTeamProfile error:', displayMessage)
+ return (
+
+ {message}
+
+ )
+ })
+ }
+ return (
+
+ )
+ }
+
+ handleClickOpen () {
+ this.setState({ open: true })
+ }
+
+ handleClose () {
+ this.setState({ open: false })
+ }
+
+ handleChange (e) {
+ switch (e.target.id) {
+ case 'motto':
+ this.setState({ motto: e.target.value })
+ break
+ case 'description':
+ this.setState({ description: e.target.value })
+ break
+ default:
+ }
+ }
+
+ async handleSubmit (e, updateTeamProfile, slug) {
+ e.preventDefault()
+ const currentUser = await getItem('user')
+ let authId = JSON.parse(currentUser)
+ authId = authId.authId
+ await updateTeamProfile({ variables: { slug, owner: authId, description: this.state.description, motto: this.state.motto } })
+ }
+}
+
+ManageTeamEdit.propTypes = {
+ classes: PropTypes.object.isRequired,
+ slug: PropTypes.string.isRequired,
+ authId: PropTypes.string,
+ team: PropTypes.object
+}
+
+export default withStyles(styles)(ManageTeamEdit)
diff --git a/client/src/views/dashboard/components/ManageTeamsItem.js b/client/src/views/dashboard/components/ManageTeamsItem.js
new file mode 100644
index 000000000..378dde27e
--- /dev/null
+++ b/client/src/views/dashboard/components/ManageTeamsItem.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Grid from '@material-ui/core/Grid'
+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 Typography from '@material-ui/core/Typography'
+
+import ManageTeamDetails from './ManageTeamDetails'
+import ManageTeamDelete from './ManageTeamDelete'
+import ManageTeamEdit from './ManageTeamEdit'
+
+export const ManageTeamsItem = ({ classes, team, authId }) => (
+
+
+
+
+)
+
+ManageTeamsItem.propTypes = {
+ classes: PropTypes.object.isRequired,
+ team: PropTypes.object.isRequired,
+ authId: PropTypes.string.isRequired
+}
+
+export default ManageTeamsItem
diff --git a/client/src/views/dashboard/components/ManageTeamsList.js b/client/src/views/dashboard/components/ManageTeamsList.js
new file mode 100644
index 000000000..5a5349e86
--- /dev/null
+++ b/client/src/views/dashboard/components/ManageTeamsList.js
@@ -0,0 +1,151 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Query } from 'react-apollo'
+import { withStateHandlers, lifecycle, compose } from 'recompose'
+
+import Grid from '@material-ui/core/Grid'
+import { withStyles } from '@material-ui/core/styles'
+
+import { isDefined, isString } from '../../../utils/js-helpers'
+import { getItem } from '../../../utils/local-storage'
+
+import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
+
+import ManageTeamsItem from './ManageTeamsItem'
+import CreateTeamDialog from './CreateTeamDialog'
+import { MessageCard } from '../../common/'
+
+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`
+ },
+ buttonRight: {
+ justifyContent: 'flex-end'
+ },
+ card: {
+ display: 'flex',
+ width: '100%'
+ },
+ cardDetails: {
+ display: 'flex',
+ flex: 1
+ },
+ cardContent: {
+ flex: 1
+ },
+ cardMedia: {
+ flex: 1,
+ width: 100,
+ height: 100,
+ maxWidth: 100,
+ justifyContent: 'flex-start'
+ }
+})
+
+export const ManageTeamsList = ({ classes, user = null }) => {
+ let owner
+ let authId = null
+ console.log('ManageTeamsList: ', user)
+ if (user !== null && isString(user)) {
+ owner = JSON.parse(user)
+ if (isDefined(owner.authId)) authId = owner.authId
+ }
+ console.log('ManageTeamsList 2: ', owner, authId)
+ if (authId === undefined || authId === null) {
+ return (
+
+
+
+
+ )
+ } else {
+ return (
+
+ {({ loading, error, data }) => {
+ console.log('GET_TEAMS_BY_OWNER: ', loading, error, data)
+
+ let errors = null
+ if (error) {
+ errors = error.graphQLErrors.map(({ message }, i) => {
+ return (
+
+
+ {!loading &&
+ data.teamsByOwner.map(team => (
+
+
+ {errors}
+
+
+ )
+ } else {
+ return (
+
+
+
+
+
+
+ )
+ }
+ } else {
+ return (
+
+
+
+
+ )
+ }
+ }}
+
+ )
+ }
+}
+
+ManageTeamsList.propTypes = {
+ user: PropTypes.any,
+ classes: PropTypes.object.isRequired
+}
+
+const getUserOnMount = lifecycle({
+ componentDidMount () {
+ getItem('user').then(user => {
+ this.setState({ user })
+ }) // Set user to state
+ }
+})
+
+const mapStateToProps = withStateHandlers(() => ({ user: null }), {
+ user: ({ user }) => () => ({ user })
+})
+
+const ManageTeamsListAuthId = compose(
+ mapStateToProps,
+ getUserOnMount
+)(ManageTeamsList)
+
+export default withStyles(styles)(ManageTeamsListAuthId)
diff --git a/client/src/views/dashboard/index.js b/client/src/views/dashboard/index.js
index 6392347ed..f62ac733a 100644
--- a/client/src/views/dashboard/index.js
+++ b/client/src/views/dashboard/index.js
@@ -1,25 +1,19 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
+import { Route, Switch } from 'react-router-dom'
+import { lifecycle } from 'recompose'
-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,40 +43,10 @@ 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 }) => (
+const Dashboard = ({ classes }) => (
(
-
-
-
- Teams
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Develop
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
)
Dashboard.propTypes = {
- classes: PropTypes.object.isRequired,
- createTeamMutation: PropTypes.function
+ classes: PropTypes.object.isRequired
}
-const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
- name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
+const DashboardCheckSession = lifecycle({
+ async componentDidMount () {
+ try {
+ const authenticated = await this.props.auth.isAuthenticated()
+ console.log('DashboardCheckSession res: ', authenticated)
+ } catch (err) {
+ console.log('DashboardCheckSession err: ', err)
+ }
+ }
})(Dashboard)
-export default withStyles(styles)(CreateTeamDialogWithMutation)
+export default withStyles(styles)(DashboardCheckSession)
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 }) => (
-
+
+
+
+ )
+ }}
+
+
+
+
+ )
+ }
+
+ handleClickOpen () {
+ this.setState({ open: true })
+ }
+
+ handleClose () {
+ this.setState({ open: false })
+ }
+}
+
+ManageTeamDetails.propTypes = {
+ classes: PropTypes.object.isRequired,
+ team: PropTypes.any
+}
+
+export default withStyles(styles)(ManageTeamDetails)
diff --git a/client/src/views/dashboard/components/ManageTeamEdit.js b/client/src/views/dashboard/components/ManageTeamEdit.js
new file mode 100644
index 000000000..7db8b46be
--- /dev/null
+++ b/client/src/views/dashboard/components/ManageTeamEdit.js
@@ -0,0 +1,185 @@
+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 EditIcon from '@material-ui/icons/Edit'
+import TextField from '@material-ui/core/TextField'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Typography from '@material-ui/core/Typography'
+
+import { getItem } from '../../../utils/local-storage'
+
+import UPDATE_TEAM_PROFILE from '../../../graphql/teams/UpdateTeamProfileMutation'
+import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
+
+import { checkGraphQLError } from '../../../utils/graphql-errors'
+
+const styles = theme => ({
+ dialogContainer: {
+ display: 'block',
+ margin: '3em',
+ minWidth: 400
+ },
+ buttonRight: {
+ justifyContent: 'flex-end'
+ }
+})
+
+export class ManageTeamEdit 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)
+ console.log('ManageTeamEdit', props.team)
+ const motto = props.team.profile.motto || ''
+ const description = props.team.profile.description || ''
+ this.state = {
+ open: false,
+ motto: motto,
+ description: description
+ }
+ }
+
+ render () {
+ console.log(this.props, this.props.slug)
+ const { classes, team, authId } = this.props
+ return (
+
+
+
+
+ )
+ }}
+
+
+
+ {team.name}
+
+
+ {team.createdAt} | Members: {team.members.length}
+
+
+
+
+
+
-
-
-
-
-
- Goodester
-
- 09.15.2018
-
-
- Members:6
-
-
- Now recruiting!
-
-
-
-
-
-
-
-
- Goodester
-
- 09.15.2018
-
-
- Members:6
-
-
- Now recruiting!
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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..d28df4d79 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
+import { MessageCard } from '../common/'
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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Notifications
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+export const Settings = ({ classes }) => (
+
+
Teams
-
+
About
-
- Support
-
-
+
+
+ Support
+
+
+
Documentation
-
+
Telegram
diff --git a/client/src/views/index.js b/client/src/views/index.js
index a1e5c1f8a..8ff455e85 100644
--- a/client/src/views/index.js
+++ b/client/src/views/index.js
@@ -2,8 +2,10 @@ import NavBar from './navbar'
import Footer from './footer'
import Callback from './callback'
import Home from './home'
+import About from './about'
import Dashboard from './dashboard'
+import Teams from './teams'
import { theme, globalStyles } from './theme'
-export { NavBar, Footer, Callback, Home, Dashboard, theme, globalStyles }
+export { NavBar, Footer, Callback, Home, About, Dashboard, Teams, theme, globalStyles }
diff --git a/client/src/views/navbar/index.js b/client/src/views/navbar/index.js
index 34fd52f5f..ca33893d2 100644
--- a/client/src/views/navbar/index.js
+++ b/client/src/views/navbar/index.js
@@ -20,6 +20,8 @@ import { getItem } from '../../utils/local-storage'
import { LoggedIn } from './LoggedIn'
import { LoggedOut } from './LoggedOut'
+import AALogo from '../../assets/logos/advanced-algos/aa-logo-dark.svg'
+
const AboutLink = props =>
const TeamsLink = props =>
const DashboardLink = props =>
@@ -34,6 +36,9 @@ const styles = theme => ({
root: {
flexGrow: 1
},
+ colorDefault: {
+ color: '#000'
+ },
flex: {
flexGrow: 1
},
@@ -46,6 +51,12 @@ const styles = theme => ({
},
appBar: {
position: 'relative'
+ },
+ img: {
+ margin: 20,
+ display: 'block',
+ maxWidth: 240,
+ maxHeight: 48
}
})
@@ -71,8 +82,9 @@ class NavBar extends Component {
return (
- {MainDrawerItems}
- {SecondaryDrawerItems}
-
-
-
-
-
- Goodester
-
- 09.15.2018
-
-
- Members:6
-
-
- Now recruiting!
-
-
-
-
-
-
-
-
- Goodester
-
- 09.15.2018
-
-
- Members:6
-
-
- Now recruiting!
-
-
-
-
-
-
-
+
+ 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 }) => (
-
+
-
-
-
-
-
-
- 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)
diff --git a/client/src/views/footer/index.js b/client/src/views/footer/index.js
index a7abff6b7..ecbd0c594 100644
--- a/client/src/views/footer/index.js
+++ b/client/src/views/footer/index.js
@@ -55,26 +55,28 @@ const Footer = ({ classes }) => {
Home
- - {MainDrawerItems}
- {SecondaryDrawerItems}
-
-
-
+
+ 
diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js
new file mode 100644
index 000000000..5c590a54b
--- /dev/null
+++ b/client/src/views/teams/components/TeamsDetails.js
@@ -0,0 +1,89 @@
+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 TeamsDetails = ({ classes, team }) => (
+
+
+
+
+
+
+)
+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
new file mode 100644
index 000000000..6b2e20bb1
--- /dev/null
+++ b/client/src/views/teams/components/TeamsItem.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Grid from '@material-ui/core/Grid'
+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 Typography from '@material-ui/core/Typography'
+
+import { Link } from 'react-router-dom'
+
+export const TeamsItem = ({ classes, team }) => (
+
+
+
+
+
+ {team.name}
+
+
+ {team.createdAt}
+
+
+ Members: 1
+
+
+ Now recruiting!
+
+
+
+
+
+
+
+
+
+
+)
+
+TeamsItem.propTypes = {
+ classes: PropTypes.object.isRequired,
+ team: PropTypes.object.isRequired
+}
+
+export default TeamsItem
diff --git a/client/src/views/teams/components/TeamsList.js b/client/src/views/teams/components/TeamsList.js
new file mode 100644
index 000000000..64493cdff
--- /dev/null
+++ b/client/src/views/teams/components/TeamsList.js
@@ -0,0 +1,128 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+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 { isEmpty } from '../../../utils/js-helpers'
+
+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_ALL_TEAMS: ', 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 (
+
+ {!loading &&
+ data.teams.edges.map(team => {
+ if (team.node.slug === slug) {
+ return (
+
+ )
+ } else {
+ return (
+
+
+ {!loading &&
+ data.teams.edges.map(team => (
+
+
+ )
+ }
+ }
+ } else {
+ return (
+
+
+ Loading...
+
+ {queryLoader}
+ {errors}
+
+ )
+ }
+ }}
+
+)
+
+TeamsList.propTypes = {
+ classes: PropTypes.object.isRequired,
+ match: PropTypes.object
+}
+
+export default withStyles(styles)(TeamsList)
diff --git a/client/src/views/teams/index.js b/client/src/views/teams/index.js
new file mode 100644
index 000000000..3c2087d83
--- /dev/null
+++ b/client/src/views/teams/index.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import CssBaseline from '@material-ui/core/CssBaseline'
+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
+ }
+ },
+ 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'
+ }
+ }
+})
+
+const Teams = ({ classes, match }) => (
+
+
+
+
+)
+
+Teams.propTypes = {
+ classes: PropTypes.object.isRequired,
+ match: PropTypes.object
+}
+
+export default withStyles(styles)(Teams)
diff --git a/client/src/views/theme.js b/client/src/views/theme.js
index 4a2e00ee8..26043dfc0 100644
--- a/client/src/views/theme.js
+++ b/client/src/views/theme.js
@@ -1,10 +1,10 @@
import { createMuiTheme } from '@material-ui/core/styles'
import indigo from '@material-ui/core/colors/indigo'
-import red from '@material-ui/core/colors/red'
+// import red from '@material-ui/core/colors/red'
export const theme = createMuiTheme({
palette: {
- primary: red,
+ primary: { main: '#303036' },
secondary: indigo
},
typography: {
diff --git a/docs/CodeStyle.md b/docs/CodeStyle.md
new file mode 100644
index 000000000..483afda50
--- /dev/null
+++ b/docs/CodeStyle.md
@@ -0,0 +1,5 @@
+# Code Styling and Formatting
+
+```
+npm install --save-dev eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react
+```
+ ← 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
+ }
+ })
+ }
+
+
+
+
+ Teams
+
+
+