From 5993b23d6317530640adc88c4102c3d03652ae22 Mon Sep 17 00:00:00 2001 From: yevhen orlov Date: Tue, 22 Oct 2019 10:19:42 +0300 Subject: [PATCH 1/5] refactor: AddTeamMember to use overmind --- .../routes/TeamView/AddTeamMember/index.js | 119 +++++++++--------- 1 file changed, 61 insertions(+), 58 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js index 10bb80df324..ca81cea5a81 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import { inject, hooksObserver } from 'app/componentConnectors'; import styled from 'styled-components'; import { Mutation } from 'react-apollo'; @@ -8,6 +7,7 @@ import Input from '@codesandbox/common/lib/components/Input'; import { Button } from '@codesandbox/common/lib/components/Button'; import track from '@codesandbox/common/lib/utils/analytics'; +import { useOvermind } from 'app/overmind'; import { INVITE_TO_TEAM } from '../../../../queries'; const ErrorMessage = styled.div` @@ -17,69 +17,72 @@ const ErrorMessage = styled.div` margin-bottom: 0.5rem; `; -const AddTeamMember = ({ teamId, signals }) => ( - - {(mutate, { loading, error }) => { - let input = null; +const AddTeamMember = ({ teamId }) => { + const { actions } = useOvermind(); + return ( + + {(mutate, { loading, error }) => { + let input = null; - const submit = e => { - e.preventDefault(); - e.stopPropagation(); + const submit = e => { + e.preventDefault(); + e.stopPropagation(); - let isEmail = input.value.includes('@'); + let isEmail = input.value.includes('@'); - track('Team - Add Member', { email: isEmail }); + track('Team - Add Member', { email: isEmail }); - isEmail = false; + isEmail = false; - // We don't enable email for now for privacy reasons + // We don't enable email for now for privacy reasons - const variables = { teamId }; + const variables = { teamId }; - const { value } = input; - if (isEmail) { - variables.email = value; - } else { - variables.username = value; - } + const { value } = input; + if (isEmail) { + variables.email = value; + } else { + variables.username = value; + } - mutate({ - variables, - }).then(() => { - signals.notificationAdded({ - message: `${value} has been invited!`, - type: 'success', + mutate({ + variables, + }).then(() => { + actions.notificationAdded({ + message: `${value} has been invited!`, + type: 'success', + }); }); - }); - - input.value = ''; - }; - - const errorMessage = - error && error.graphQLErrors && error.graphQLErrors[0].message; - - return ( - <> - {errorMessage && {errorMessage}} -
- { - input = node; - }} - placeholder="Add member by username" - block - /> - -
- - ); - }} - -); - -export default inject('signals')(hooksObserver(AddTeamMember)); + + input.value = ''; + }; + + const errorMessage = + error && error.graphQLErrors && error.graphQLErrors[0].message; + + return ( + <> + {errorMessage && {errorMessage}} +
+ { + input = node; + }} + placeholder="Add member by username" + block + /> + +
+ + ); + }} + + ); +}; + +export default AddTeamMember; From dc9d7f0402d516dc9157e6232ea92f770e86b037 Mon Sep 17 00:00:00 2001 From: yevhen orlov Date: Tue, 22 Oct 2019 10:23:30 +0300 Subject: [PATCH 2/5] refactor: AddTeamMember and RemoveTeamMember to use named exports --- .../Dashboard/Content/routes/TeamView/AddTeamMember/index.js | 4 +--- .../Content/routes/TeamView/RemoveTeamMember/index.js | 2 +- .../src/app/pages/Dashboard/Content/routes/TeamView/index.js | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js index ca81cea5a81..1721bd32d72 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js @@ -17,7 +17,7 @@ const ErrorMessage = styled.div` margin-bottom: 0.5rem; `; -const AddTeamMember = ({ teamId }) => { +export const AddTeamMember = ({ teamId }) => { const { actions } = useOvermind(); return ( @@ -84,5 +84,3 @@ const AddTeamMember = ({ teamId }) => { ); }; - -export default AddTeamMember; diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js index 5e52a4a3970..cba30552388 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js @@ -11,7 +11,7 @@ import { REMOVE_FROM_TEAM, LEAVE_TEAM } from '../../../../queries'; import { StyledCrossIcon } from '../elements'; -export default ({ +export const RemoveTeamMember = ({ creatorId, currentUserId, userId, diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js index 93968c2224e..5e53359c67d 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js @@ -24,8 +24,8 @@ import { SET_TEAM_DESCRIPTION, } from '../../../queries'; -import AddTeamMember from './AddTeamMember'; -import RemoveTeamMember from './RemoveTeamMember'; +import { AddTeamMember } from './AddTeamMember'; +import { RemoveTeamMember } from './RemoveTeamMember'; const User = ({ user, rightElement }) => (
Date: Tue, 22 Oct 2019 10:33:27 +0300 Subject: [PATCH 3/5] refactor: AddTeamMember to use apollo react hooks --- .../routes/TeamView/AddTeamMember/index.js | 118 ++++++++---------- 1 file changed, 55 insertions(+), 63 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js index 1721bd32d72..6e25f4b84a6 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { Mutation } from 'react-apollo'; +import { useMutation } from '@apollo/react-hooks'; import Input from '@codesandbox/common/lib/components/Input'; import { Button } from '@codesandbox/common/lib/components/Button'; @@ -19,68 +19,60 @@ const ErrorMessage = styled.div` export const AddTeamMember = ({ teamId }) => { const { actions } = useOvermind(); + const [mutate, { loading, error }] = useMutation(INVITE_TO_TEAM); + let input = null; + + const submit = e => { + e.preventDefault(); + e.stopPropagation(); + + let isEmail = input.value.includes('@'); + + track('Team - Add Member', { email: isEmail }); + + isEmail = false; + + // We don't enable email for now for privacy reasons + + const variables = { teamId }; + + const { value } = input; + if (isEmail) { + variables.email = value; + } else { + variables.username = value; + } + + mutate({ + variables, + }).then(() => { + actions.notificationAdded({ + message: `${value} has been invited!`, + type: 'success', + }); + }); + + input.value = ''; + }; + + const errorMessage = + error && error.graphQLErrors && error.graphQLErrors[0].message; + return ( - - {(mutate, { loading, error }) => { - let input = null; - - const submit = e => { - e.preventDefault(); - e.stopPropagation(); - - let isEmail = input.value.includes('@'); - - track('Team - Add Member', { email: isEmail }); - - isEmail = false; - - // We don't enable email for now for privacy reasons - - const variables = { teamId }; - - const { value } = input; - if (isEmail) { - variables.email = value; - } else { - variables.username = value; - } - - mutate({ - variables, - }).then(() => { - actions.notificationAdded({ - message: `${value} has been invited!`, - type: 'success', - }); - }); - - input.value = ''; - }; - - const errorMessage = - error && error.graphQLErrors && error.graphQLErrors[0].message; - - return ( - <> - {errorMessage && {errorMessage}} -
- { - input = node; - }} - placeholder="Add member by username" - block - /> - -
- - ); - }} - + <> + {errorMessage && {errorMessage}} +
+ { + input = node; + }} + placeholder="Add member by username" + block + /> + +
+ ); }; From 453588221ea36c513702ca8081d8d04ed4eb4151 Mon Sep 17 00:00:00 2001 From: yevhen orlov Date: Tue, 22 Oct 2019 11:46:13 +0300 Subject: [PATCH 4/5] refactor: AddTeamMember to use Typescript --- .../TeamView/AddTeamMember/{index.js => index.tsx} | 13 +++++++------ .../Content/routes/TeamView/AddTeamMember/types.ts | 11 +++++++++++ 2 files changed, 18 insertions(+), 6 deletions(-) rename packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/{index.js => index.tsx} (82%) create mode 100644 packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx similarity index 82% rename from packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js rename to packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx index 6e25f4b84a6..cb1a6d9b3b1 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx @@ -9,6 +9,7 @@ import track from '@codesandbox/common/lib/utils/analytics'; import { useOvermind } from 'app/overmind'; import { INVITE_TO_TEAM } from '../../../../queries'; +import { IAddTeamMemberProps, IMutationVariables } from './types'; const ErrorMessage = styled.div` color: ${props => props.theme.red}; @@ -17,12 +18,12 @@ const ErrorMessage = styled.div` margin-bottom: 0.5rem; `; -export const AddTeamMember = ({ teamId }) => { +export const AddTeamMember: React.FC = ({ teamId }) => { const { actions } = useOvermind(); const [mutate, { loading, error }] = useMutation(INVITE_TO_TEAM); - let input = null; + let input: HTMLInputElement = null; - const submit = e => { + const submit: React.FormEventHandler = e => { e.preventDefault(); e.stopPropagation(); @@ -34,7 +35,7 @@ export const AddTeamMember = ({ teamId }) => { // We don't enable email for now for privacy reasons - const variables = { teamId }; + const variables: IMutationVariables = { teamId }; const { value } = input; if (isEmail) { @@ -47,8 +48,8 @@ export const AddTeamMember = ({ teamId }) => { variables, }).then(() => { actions.notificationAdded({ - message: `${value} has been invited!`, - type: 'success', + title: `${value} has been invited!`, + notificationType: 'success', }); }); diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts new file mode 100644 index 00000000000..f7664a9e328 --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts @@ -0,0 +1,11 @@ +type TeamId = string; + +export interface IAddTeamMemberProps { + teamId: TeamId; +} + +export interface IMutationVariables { + teamId: TeamId; + email?: string; + username?: string; +} From 73d65852d7f4a92d5aed74e9e17c39ba820046f1 Mon Sep 17 00:00:00 2001 From: yevhen orlov Date: Tue, 22 Oct 2019 12:17:45 +0300 Subject: [PATCH 5/5] refactor: rename inviteToTeam mutation --- .../Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx index cb1a6d9b3b1..66d6201abae 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx @@ -20,7 +20,7 @@ const ErrorMessage = styled.div` export const AddTeamMember: React.FC = ({ teamId }) => { const { actions } = useOvermind(); - const [mutate, { loading, error }] = useMutation(INVITE_TO_TEAM); + const [inviteToTeam, { loading, error }] = useMutation(INVITE_TO_TEAM); let input: HTMLInputElement = null; const submit: React.FormEventHandler = e => { @@ -44,7 +44,7 @@ export const AddTeamMember: React.FC = ({ teamId }) => { variables.username = value; } - mutate({ + inviteToTeam({ variables, }).then(() => { actions.notificationAdded({