From 40c658023cc7eecda54609eaa23c90a94336da96 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Thu, 13 Sep 2018 16:33:47 -0700 Subject: [PATCH] Client: update named imports to default imports --- api/src/index.js | 25 +-- api/src/schema.graphql | 2 +- client/src/App.js | 2 +- client/src/auth/index.js | 2 +- .../src/graphql/teams/CreateTeamMutation.js | 4 +- client/src/graphql/teams/GetTeamQuery.js | 40 ---- .../src/graphql/teams/GetTeamsByOwnerQuery.js | 38 ++++ client/src/utils/js-helpers.js | 4 + client/src/views/dashboard/ManageTeams.js | 4 +- client/src/views/dashboard/Overview.js | 72 +++---- client/src/views/dashboard/TeamMembers.js | 2 +- .../views/dashboard/components/CreateTeam.js | 198 +++++++----------- .../dashboard/components/CreateTeamForm.js | 131 ++++++++++++ .../views/dashboard/components/DashEditor.js | 10 +- .../views/dashboard/components/DashTeam.js | 99 ++++++++- .../views/dashboard/components/DrawerLinks.js | 6 +- client/src/views/dashboard/index.js | 29 ++- 17 files changed, 419 insertions(+), 249 deletions(-) delete mode 100644 client/src/graphql/teams/GetTeamQuery.js create mode 100644 client/src/graphql/teams/GetTeamsByOwnerQuery.js create mode 100644 client/src/views/dashboard/components/CreateTeamForm.js diff --git a/api/src/index.js b/api/src/index.js index be92331cd..d81c1e1eb 100644 --- a/api/src/index.js +++ b/api/src/index.js @@ -83,7 +83,7 @@ const resolvers = { async teamByName(parent, { name }, ctx, info) { return ctx.db.query.team({ where: { name: name } }, `{ name }`) }, - async teamByOwner(parent, { ownerId }, ctx, info) { + async teamsByOwner(parent, { ownerId }, ctx, info) { return ctx.db.query.teamsConnection({where: { owner: { authId: ownerId }}}, `{ edges { @@ -91,27 +91,24 @@ const resolvers = { id name slug + owner + status { + status + reason + createdAt + } + createdAt profile { avatar description motto - } - owner { - authId - nickname - visible - profile { - avatar - } + updatedAt } members { role member { - nickname - visible - profile { - avatar - } + alias + authId } } } diff --git a/api/src/schema.graphql b/api/src/schema.graphql index 82bae531d..f63570229 100644 --- a/api/src/schema.graphql +++ b/api/src/schema.graphql @@ -10,7 +10,7 @@ type Query { teamDetails: [Team!]! @isAuthenticated teamByName(name: String!): Team teamById(teamId: String!): Team - teamByOwner(ownerId: String!): TeamConnection + teamsByOwner(ownerId: String!): TeamConnection owner: Member @isAuthenticated currentMember: Member @isAuthenticated member(authId: String!): Member @isAuthenticated diff --git a/client/src/App.js b/client/src/App.js index 60dddf69d..adf708aa3 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -151,7 +151,7 @@ class App extends Component { } /> (a || {})[b], object) !== undefined } diff --git a/client/src/views/dashboard/ManageTeams.js b/client/src/views/dashboard/ManageTeams.js index 432007a95..ecf65c9db 100644 --- a/client/src/views/dashboard/ManageTeams.js +++ b/client/src/views/dashboard/ManageTeams.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import Typography from '@material-ui/core/Typography' import { withStyles } from '@material-ui/core/styles' -import { TeamTable } from './components/TeamTable' +import TeamTable from './components/TeamTable' const styles = theme => ({ tableContainer: { @@ -12,7 +12,7 @@ const styles = theme => ({ } }) -export const ManageTeams = ({ classes }) => ( +const ManageTeams = ({ classes }) => (
Teams diff --git a/client/src/views/dashboard/Overview.js b/client/src/views/dashboard/Overview.js index 19f30450f..19d8a2bf9 100644 --- a/client/src/views/dashboard/Overview.js +++ b/client/src/views/dashboard/Overview.js @@ -1,20 +1,19 @@ -import React from 'react' +import React, { Component } 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' +import CreateTeam from './components/CreateTeam' +import DashTeam from './components/DashTeam' +import DashEditor from './components/DashEditor' const styles = theme => ({ + root: { + display: 'flex' + }, card: { display: 'flex', width: '100%' @@ -34,40 +33,37 @@ const styles = theme => ({ }, buttonRight: { justifyContent: 'flex-end' + }, + aawebMedia: { + width: '100%', + height: 320 } }) -export const Overview = ({ classes, createTeamMutation }) => ( - - - - -
- - - -
- +export class Overview extends Component { + render () { + const { classes } = this.props + return ( + + + + +
+ + + +
+ + + + + - - - - -) - + ) + } +} Overview.propTypes = { - classes: PropTypes.object.isRequired, - createTeamMutation: PropTypes.object + classes: PropTypes.object.isRequired } -const OverviewWithMutation = graphql(CreateTeamMutation, { - name: 'createTeamMutation', - options: props => ({ - // Options are computed from `props` here. - }) -})(Overview) - -export default withStyles(styles)(OverviewWithMutation) +export default withStyles(styles)(Overview) diff --git a/client/src/views/dashboard/TeamMembers.js b/client/src/views/dashboard/TeamMembers.js index ab74d6f31..a22de3714 100644 --- a/client/src/views/dashboard/TeamMembers.js +++ b/client/src/views/dashboard/TeamMembers.js @@ -12,7 +12,7 @@ const styles = theme => ({ } }) -export const TeamMembers = ({ classes }) => ( +const TeamMembers = ({ classes }) => (
Members diff --git a/client/src/views/dashboard/components/CreateTeam.js b/client/src/views/dashboard/components/CreateTeam.js index 98e3aebc6..b01184b7d 100644 --- a/client/src/views/dashboard/components/CreateTeam.js +++ b/client/src/views/dashboard/components/CreateTeam.js @@ -1,131 +1,87 @@ -import React, { Component } 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 React from 'react' +import { Mutation } from 'react-apollo' + import Typography from '@material-ui/core/Typography' import { getItem } from '../../../utils/local-storage' -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 = () => { + let input - 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 ( -
- - - Subscribe - - Team Creation - Name your team! - - - - - - - -
- ) - } - - 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 ( + { + const { teamsByOwner } = cache.readQuery({ query: GET_TEAMS_BY_OWNER }) + cache.writeQuery({ + query: GET_TEAMS_BY_OWNER, + data: { teamsByOwner: teamsByOwner.concat([createTeam]) } + }) + }} + > + {(createTeam, { loading, error, data }) => { + let errors + let loader + if (loading) { + loader = (Submitting team...) + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => ( + {message} + )) + } + return ( +
+
{ + handleSubmit(e, createTeam, input) + }} + > + { + input = node + }} + /> + +
+ {loader} + {errors} +
+ ) + }} + + ) } -CreateTeamDialog.propTypes = { - classes: PropTypes.object.isRequired, - createTeamMutation: PropTypes.function +const handleSubmit = async (e, createTeam, input) => { + e.preventDefault() + const currentUser = await getItem('user') + let authId = JSON.parse(currentUser) + authId = authId.sub + const name = input.value + const slug = slugify(name) + await createTeam({ variables: { name, slug, owner: authId } }) + input.value = '' } -export default withRouter(CreateTeamDialog) +const 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 +} + +export default CreateTeam diff --git a/client/src/views/dashboard/components/CreateTeamForm.js b/client/src/views/dashboard/components/CreateTeamForm.js new file mode 100644 index 000000000..98e3aebc6 --- /dev/null +++ b/client/src/views/dashboard/components/CreateTeamForm.js @@ -0,0 +1,131 @@ +import React, { Component } 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 Typography from '@material-ui/core/Typography' + +import { getItem } from '../../../utils/local-storage' + +export class CreateTeamDialog extends Component { + constructor (props) { + super(props) + + 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) + + 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 ( +
+ + + Subscribe + + Team Creation + Name your team! + + + + + + + +
+ ) + } + + 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/DashEditor.js b/client/src/views/dashboard/components/DashEditor.js index 095f22300..246a921f0 100644 --- a/client/src/views/dashboard/components/DashEditor.js +++ b/client/src/views/dashboard/components/DashEditor.js @@ -2,7 +2,6 @@ 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' @@ -12,13 +11,6 @@ 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 }) => ( @@ -47,4 +39,4 @@ DashEditor.propTypes = { classes: PropTypes.object.isRequired } -export default withStyles(styles)(DashEditor) +export default DashEditor diff --git a/client/src/views/dashboard/components/DashTeam.js b/client/src/views/dashboard/components/DashTeam.js index e5be5398b..f46bb6e30 100644 --- a/client/src/views/dashboard/components/DashTeam.js +++ b/client/src/views/dashboard/components/DashTeam.js @@ -1,22 +1,105 @@ import React from 'react' +import PropTypes from 'prop-types' import { Query } from 'react-apollo' +import { withStateHandlers, lifecycle, compose } from 'recompose' import Typography from '@material-ui/core/Typography' import Grid from '@material-ui/core/Grid' -import { DashTeamIteam } from './DashTeamItem' +import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery' -export const DashTeam = () => ( - +import DashTeamItem from './DashTeamItem' + +import { isDefined, isString } from '../../../utils/js-helpers' +import { getItem } from '../../../utils/local-storage' + +export const DashTeam = ({ user = null }) => { + console.log('DashTeam 1: ', user) + let owner + let loader + let authId = null + if (user !== null && isString(user)) { + owner = JSON.parse(user) + if (isDefined(owner.sub)) authId = owner.sub + } else { + loader = (Loading...) + } + + console.log('DashTeam 2: ', owner, authId) + if (authId === null) { + return ( + + + Teams + + Loading... + + ) + } + return ( Teams - - - + + {({ loading, error, data }) => { + console.log('GET_TEAMS_BY_OWNER: ', loading, error, data) + let errors + let queryLoader + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => ( + {message} + )) + } + if (!loading) { + return ( + + {!loading && data.teamsByOwner.edges.map(team => ( + + ))} + {queryLoader} + {errors} + {loader} + + ) + } else { + return ( + + + Loading... + + {queryLoader} + {errors} + + ) + } + }} + - + ) +} + +DashTeam.propTypes = { + user: PropTypes.any +} + +const getUserOnMount = lifecycle({ + componentDidMount () { + getItem('user').then(user => { + this.setState({ user }) + }) // Set user to state + } +}) + +const mapStateToProps = withStateHandlers( + () => ({ user: null }), { + user: ({ user }) => () => ({ user }) + } ) -export default DashTeam +const DashTeamAuthId = compose( + mapStateToProps, + getUserOnMount +)(DashTeam) + +export default DashTeamAuthId diff --git a/client/src/views/dashboard/components/DrawerLinks.js b/client/src/views/dashboard/components/DrawerLinks.js index b2a178697..66d9e7d51 100644 --- a/client/src/views/dashboard/components/DrawerLinks.js +++ b/client/src/views/dashboard/components/DrawerLinks.js @@ -13,8 +13,8 @@ import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAlt' import AndroidIcon from '@material-ui/icons/Android' const DashboardLink = props => -const TeamsLink = props => -const MembersLink = props => +const TeamsLink = props => +const MembersLink = props => const SettingsLink = props => export const MainDrawerItems = ( @@ -35,7 +35,7 @@ export const MainDrawerItems = ( - + diff --git a/client/src/views/dashboard/index.js b/client/src/views/dashboard/index.js index b6331118d..f62ac733a 100644 --- a/client/src/views/dashboard/index.js +++ b/client/src/views/dashboard/index.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Route, Switch } from 'react-router-dom' +import { lifecycle } from 'recompose' import { withStyles } from '@material-ui/core/styles' import Drawer from '@material-ui/core/Drawer' @@ -9,10 +10,10 @@ import Divider from '@material-ui/core/Divider' import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks' -import { Overview } from './Overview' -import { ManageTeams } from './ManageTeams' -import { TeamMembers } from './TeamMembers' -import { Settings } from './Settings' +import Overview from './Overview' +import ManageTeams from './ManageTeams' +import TeamMembers from './TeamMembers' +import Settings from './Settings' const drawerWidth = 240 @@ -45,7 +46,7 @@ const styles = theme => ({ appBarSpacer: theme.mixins.toolbar }) -const Dashboard = ({ classes, createTeamMutation, ...props }) => ( +const Dashboard = ({ classes }) => (
(
- + @@ -71,8 +72,18 @@ const Dashboard = ({ classes, createTeamMutation, ...props }) => ( ) Dashboard.propTypes = { - classes: PropTypes.object.isRequired, - createTeamMutation: PropTypes.function + classes: PropTypes.object.isRequired } -export default withStyles(styles)(Dashboard) +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)(DashboardCheckSession)