refactor: AddTeamMember to use overmind

Author: yevhenorlov

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 }) => (
-  <Mutation mutation={INVITE_TO_TEAM}>
-    {(mutate, { loading, error }) => {
-      let input = null;
+const AddTeamMember = ({ teamId }) => {
+  const { actions } = useOvermind();
+  return (
+    <Mutation mutation={INVITE_TO_TEAM}>
+      {(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>{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>
-        </>
-      );
-    }}
-  </Mutation>
-);
-
-export default inject('signals')(hooksObserver(AddTeamMember));
+
+          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>
+          </>
+        );
+      }}
+    </Mutation>
+  );
+};
+
+export default AddTeamMember;