🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js to use Overmind, Typescript, and Apollo hooks

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useMutation } from '@apollo/react-hooks';
+
+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';
+import { IAddTeamMemberProps, IMutationVariables } from './types';
+
+const ErrorMessage = styled.div`
+  color: ${props => props.theme.red};
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
+  const { actions } = useOvermind();
+  const [inviteToTeam, { loading, error }] = useMutation(INVITE_TO_TEAM);
+  let input: HTMLInputElement = null;
+
+  const submit: React.FormEventHandler = 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: IMutationVariables = { teamId };
+
+    const { value } = input;
+    if (isEmail) {
+      variables.email = value;
+    } else {
+      variables.username = value;
+    }
+
+    inviteToTeam({
+      variables,
+    }).then(() => {
+      actions.notificationAdded({
+        title: `${value} has been invited!`,
+        notificationType: 'success',
+      });
+    });
+
+    input.value = '';
+  };
+
+  const errorMessage =
+    error && error.graphQLErrors && error.graphQLErrors[0].message;
+
+  return (
+    <>
+      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+      <form style={{ display: 'flex' }} onSubmit={loading ? undefined : submit}>
+        <Input
+          ref={node => {
+            input = node;
+          }}
+          placeholder="Add member by username"
+          block
+        />
+        <Button disabled={loading} style={{ width: 200 }} small>
+          {loading ? 'Adding Member...' : 'Add Member'}
+        </Button>
+      </form>
+    </>
+  );
+};

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;
+}

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,

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 }) => (
   <div