From 1359f606fe63d0060b1e1e052cc0bd55e8cdfeec Mon Sep 17 00:00:00 2001 From: Barry Low Date: Thu, 27 Sep 2018 22:41:19 -0700 Subject: [PATCH] Connect sendMemberInvite to server --- api/src/email/sendgrid.js | 22 +- api/src/index.js | 7 +- client/src/graphql/teams/SendMemberInvite.js | 10 + .../components/InviteMemberDialog.js | 199 ++++++++++-------- .../components/ManageMembersTeamItem.js | 2 +- 5 files changed, 140 insertions(+), 100 deletions(-) create mode 100644 client/src/graphql/teams/SendMemberInvite.js diff --git a/api/src/email/sendgrid.js b/api/src/email/sendgrid.js index 4ae21ad84..20e1e9ffe 100644 --- a/api/src/email/sendgrid.js +++ b/api/src/email/sendgrid.js @@ -3,22 +3,22 @@ var axios = require('axios') const sendTeamMemberInvite = function(email, team) { const dev = process.env.NODE_ENV === 'development' ? true : false - + console.log('sendTeamMemberInvite', email, team) const API_KEY = process.env.SG_APIKEY const token = jwt.sign({ email: email, team: team.slug }, API_KEY, { expiresIn: '7d' }) - const origin = 'https://teams.advancedalgos.net' + let origin = 'https://teams.advancedalgos.net' const params = '/activate-team-membership?token=' if (dev){ origin = 'http://localhost:3001' } - var headers = { + const headers = { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin' : origin, 'Access-Control-Allow-Credentials': 'true' }; - var data = JSON.stringify({ + const data = JSON.stringify({ "personalizations": [ { "to": [ @@ -26,10 +26,12 @@ const sendTeamMemberInvite = function(email, team) { "email": email } ], - "subject": "INVITATION: Join team " + team.name, - "substitutions": { - "-aainvitelink-": origin + params + token - } + dynamic_template_data: { + "aateaminvitelink": origin + params + token, + "aateamname": team.name, + "subject": "INVITATION: Join team " + team.name + }, + "subject": "INVITATION: Join team " + team.name } ], "from": { @@ -43,7 +45,7 @@ const sendTeamMemberInvite = function(email, team) { "template_id": process.env.SG_INVITE_EMAILID }) - var sendVerify = axios({ + let sendVerify = axios({ method: 'post', url: 'https://api.sendgrid.com/v3/mail/send', data: data, @@ -56,7 +58,7 @@ const sendTeamMemberInvite = function(email, team) { if (response.status >= 200 && response.status < 300) { return 'Success' } else { - throw response.data.errors[0].message + throw response.data.errors[0].message } }) .catch(function (error) { diff --git a/api/src/index.js b/api/src/index.js index b997d7e0b..0e56e0e7d 100644 --- a/api/src/index.js +++ b/api/src/index.js @@ -213,10 +213,9 @@ const resolvers = { return SASQueryParameters }, async sendMemberInviteSG(parent, { email, teamId }, ctx, info) { - let team = await ctx.db.query.team({ where: { teamId } }, info) - console.log(email, teamId) - let email = await sendTeamMemberInvite(email, team) - return 'Success' + const team = await ctx.db.query.team({ where: { id: teamId } }, TEAMS_FRAGMENT) + const sendInvite = await sendTeamMemberInvite(email, team) + return sendInvite } } } diff --git a/client/src/graphql/teams/SendMemberInvite.js b/client/src/graphql/teams/SendMemberInvite.js new file mode 100644 index 000000000..31f63a3fd --- /dev/null +++ b/client/src/graphql/teams/SendMemberInvite.js @@ -0,0 +1,10 @@ +/* eslint-disable no-unused-vars */ +import gql from 'graphql-tag' + +export const SEND_MEMBER_INVITE = gql` + mutation sendMemberInvite($email: String!, $teamId: String!) { + sendMemberInviteSG(email: $email, teamId: $teamId) + } +` + +export default SEND_MEMBER_INVITE diff --git a/client/src/views/dashboard/components/InviteMemberDialog.js b/client/src/views/dashboard/components/InviteMemberDialog.js index 601c45318..f34b8c9ee 100644 --- a/client/src/views/dashboard/components/InviteMemberDialog.js +++ b/client/src/views/dashboard/components/InviteMemberDialog.js @@ -15,7 +15,7 @@ import DialogTitle from '@material-ui/core/DialogTitle' import Typography from '@material-ui/core/Typography' import { isEmpty } from '../../../utils/js-helpers' -import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation' +import SEND_MEMBER_INVITE from '../../../graphql/teams/SendMemberInvite' // import { checkGraphQLError } from '../../../utils/graphql-errors' @@ -46,7 +46,6 @@ export class InviteMemberDialog extends Component { this.state = { open: false, - status: null, email: '', errors: { email: '' @@ -56,85 +55,115 @@ export class InviteMemberDialog extends Component { render () { const { classes, teamId } = this.props - return ( - - {(createTeam, { loading, error, data }) => { - let errors - let loader = null - if (loading) { - loader = ( - Submitting invitation... - ) - } - if (error) { - errors = error.graphQLErrors.map(({ message }, i) => { - // const displayMessage = checkGraphQLError(message) - return ( - - {message} - + + if (this.state.open) { + return ( + + {(sendMemberInvite, { loading, error, data }) => { + console.log('sendMemberInvite: ', data) + let errors + let loader = null + if (loading) { + loader = ( + Submitting invitation... ) - }) - } - return ( -
- - - Invite a New Team Member - - - - {this.state.errors.email !== '' && ( - {this.state.errors.email} + } + if (error) { + errors = error.graphQLErrors.map(({ message }, i) => { + // const displayMessage = checkGraphQLError(message) + return ( + + {message} + + ) + }) + } + return ( +
+ + + Invite a New Team Member + + {(data === undefined || data.sendMemberInviteSG !== 'Success') && ( + + this.handleChange(e)} + error={this.state.errors.email !== ''} + /> + {this.state.errors.email !== '' && ( + {this.state.errors.email} + )} + {error && {errors}} + {loader} + )} - {error && {errors}} - {loader} - - - - - - - -
- ) - }} - - ) + {data !== undefined && data.sendMemberInviteSG === 'Success' && ( + Invitation successfully sent! + )} + + + {(data === undefined || data.sendMemberInviteSG !== 'Success') && ( + + + + + )} + {data !== undefined && data.sendMemberInviteSG === 'Success' && ( + + )} + + +
+ ) + }} + + ) + } else { + return ( + + ) + } } handleClickOpen () { @@ -148,7 +177,7 @@ export class InviteMemberDialog extends Component { handleChange (e) { const errors = this.validate(e.target.value) if (isEmpty(errors)) { - this.setState({ errors: { name: '' } }) + this.setState({ errors: { email: '' } }) this.setState({ email: e.target.value }) } else { this.setState({ errors: errors }) @@ -156,16 +185,16 @@ export class InviteMemberDialog extends Component { } } - async handleSubmit (e, createTeam, email, teamId) { + async handleSubmit (e, sendMemberInvite, email, teamId) { e.preventDefault() - console.log('createTeam submit: ', email, teamId) - await createTeam({ variables: { email, teamId } }) - this.setState({ email: '', status: 'sending' }) + console.log('sendMemberInvite submit: ', email, teamId) + await sendMemberInvite({ variables: { email, teamId } }) + this.setState({ email: '' }) } validate (data) { const errors = {} - if (data === '') errors.name = 'Please enter an email address' + if (data === '') errors.email = 'Please enter an email address' return errors } } diff --git a/client/src/views/dashboard/components/ManageMembersTeamItem.js b/client/src/views/dashboard/components/ManageMembersTeamItem.js index 46da40341..2969aaba2 100644 --- a/client/src/views/dashboard/components/ManageMembersTeamItem.js +++ b/client/src/views/dashboard/components/ManageMembersTeamItem.js @@ -87,7 +87,7 @@ export const ManageMembersTeamItem = ({ classes, team, authId }) => { - +