From ea2a1c07347aa5a7710f83728f7974aae17c95a5 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Fri, 14 Sep 2018 08:43:07 -0700 Subject: [PATCH] Client Add Manage Actions --- api/src/index.js | 6 +- api/src/schema.graphql | 2 +- .../teams/UpdateTeamProfileMutation.js | 8 +- client/src/views/dashboard/ManageTeams.js | 4 +- .../dashboard/components/ManageTeamsItem.js | 29 ++- .../dashboard/components/ManageTeamsList.js | 167 +++++++++--------- 6 files changed, 105 insertions(+), 111 deletions(-) diff --git a/api/src/index.js b/api/src/index.js index 6b4a5167d..3e0880065 100644 --- a/api/src/index.js +++ b/api/src/index.js @@ -101,14 +101,14 @@ const resolvers = { }) }, async updateTeamProfile(parent, { slug, owner, description, motto, avatar }, ctx, info) { - return ctx.db.mutation.updateTeam({data:{profile: {update: {description: description, motto: motto, avatar: avatar}}}, where:{slug: slug}}), TEAMS_FRAGMENT) + return ctx.db.mutation.updateTeam({data:{profile: {update: {description: description, motto: motto, avatar: avatar}}}, where:{slug: slug}}, TEAMS_FRAGMENT) .catch((err) => { console.log('createTeam error: ', err) return err }) }, - async deleteTeam(parent, { id }, ctx, info) { - return ctx.db.mutation.deleteTeam({ where: { id } }, info) + async deleteTeam(parent, { slug }, ctx, info) { + return ctx.db.mutation.deleteTeam({ where: { slug } }, info) .catch((res) => { console.log('deleteTeam error: ', res) const errors = res.graphQLErrors.map((error) => { diff --git a/api/src/schema.graphql b/api/src/schema.graphql index 8b5d48d77..1450c6000 100644 --- a/api/src/schema.graphql +++ b/api/src/schema.graphql @@ -20,7 +20,7 @@ type Mutation { authenticate(idToken: String!): Member createTeam(name: String!, slug: String!, owner: String!): Team @isAuthenticated updateTeamProfile(slug: String!, owner: String!, description: String, motto: String, avatar: String): Team @isAuthenticated - deleteTeam(id: ID!): Team @isAuthenticated @isOwner(type: "Team") + deleteTeam(slug: String!): Team @isAuthenticated @isOwner(type: "Team") } input MemberProfileInput { diff --git a/client/src/graphql/teams/UpdateTeamProfileMutation.js b/client/src/graphql/teams/UpdateTeamProfileMutation.js index 6672a7a24..6da940d4c 100644 --- a/client/src/graphql/teams/UpdateTeamProfileMutation.js +++ b/client/src/graphql/teams/UpdateTeamProfileMutation.js @@ -1,9 +1,9 @@ /* eslint-disable no-unused-vars */ import gql from 'graphql-tag' -const CREATE_TEAM = gql` - mutation UpdateTeamMutation($slug: String!, $owner: String!, $description: String, $motto: String) { - createTeam(slug: $slug, owner: $owner, description: $description, motto: $motto) { +const UPDATE_TEAM_PROFILE = gql` + mutation UpdateTeamProfileMutation($slug: String!, $owner: String!, $description: String, $motto: String) { + updateTeamProfile(slug: $slug, owner: $owner, description: $description, motto: $motto) { id name slug @@ -31,4 +31,4 @@ const CREATE_TEAM = gql` } ` -export default CREATE_TEAM +export default UPDATE_TEAM_PROFILE diff --git a/client/src/views/dashboard/ManageTeams.js b/client/src/views/dashboard/ManageTeams.js index 175c4aded..7eceeb1ca 100644 --- a/client/src/views/dashboard/ManageTeams.js +++ b/client/src/views/dashboard/ManageTeams.js @@ -17,9 +17,7 @@ const ManageTeams = ({ classes }) => ( Manage Your Teams -
- -
+ ) diff --git a/client/src/views/dashboard/components/ManageTeamsItem.js b/client/src/views/dashboard/components/ManageTeamsItem.js index 7c00639d9..d765e0ad0 100644 --- a/client/src/views/dashboard/components/ManageTeamsItem.js +++ b/client/src/views/dashboard/components/ManageTeamsItem.js @@ -3,19 +3,16 @@ 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 ManageTeamsItem = ({ classes, team }) => ( - + - +
( {team.name} - {team.createdAt} - - - Members: 1 - - - Now recruiting! + {team.createdAt} | Members: {team.members.length} - - - + - - + + + +
) diff --git a/client/src/views/dashboard/components/ManageTeamsList.js b/client/src/views/dashboard/components/ManageTeamsList.js index b02592c8e..c15316e60 100644 --- a/client/src/views/dashboard/components/ManageTeamsList.js +++ b/client/src/views/dashboard/components/ManageTeamsList.js @@ -1,17 +1,18 @@ 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 { 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 { isEmpty } from '../../../utils/js-helpers' - import ManageTeamsItem from './ManageTeamsItem' -import ManageTeamsDetails from './ManageTeamsDetails' const styles = theme => ({ heroContent: { @@ -22,107 +23,107 @@ const styles = theme => ({ 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' + }, + 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, match }) => ( - - {({ loading, error, data }) => { - console.log('GET_TEAMS_BY_OWNER: ', loading, error, data, match) - let slug = null - if (!isEmpty(match.params) && match.params.slug) slug = match.params.slug +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) - 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, error, data }) => { + console.log('GET_TEAMS_BY_OWNER: ', loading, error, data) + + let errors + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { return ( - - {!loading && - data.teams.edges.map(team => { - if (team.node.slug === slug) { - return ( - - ) - } - })} - {queryLoader} - {errors} - + + {message} + ) - } else { + }) + } + if (!loading && !error) { + if (data.teamsByOwner.length > 0) { return ( -
- - Teams - -
{!loading && - data.teams.edges.map(team => ( + data.teamsByOwner.map(team => ( ))} - {queryLoader} {errors} ) } + } else { + return ( + + + Loading... + + {errors} + + ) } - } else { - return ( - - - Loading... - - {queryLoader} - {errors} - - ) - } - }} - -) - -ManageTeamsList.propTypes = { - classes: PropTypes.object.isRequired, - match: PropTypes.object + }} + + ) } -export default withStyles(styles)(ManageTeamsList) +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)