🔨 Switch TeamInvite to use useOvermind (codesandbox#2525)

* 🔨 Switch TeamInvite to use useOvermind

* Fix types

* Create acceptTeamInvitation & rejectTeamInvitation actions

Author: MichaelDeBoey

packages/app/src/app/overmind/actions.ts

@@ -238,3 +238,21 @@ export const refetchSandboxInfo: AsyncAction = async ({
     await actions.editor.internal.initializeLiveSandbox(sandbox);
   }
 };
+
+export const acceptTeamInvitation: Action<{ teamName: string }> = (
+  { effects },
+  { teamName }
+) => {
+  effects.analytics.track('Team - Invitation Accepted', {});
+
+  effects.notificationToast.success(`Accepted invitation to ${teamName}`);
+};
+
+export const rejectTeamInvitation: Action<{ teamName: string }> = (
+  { effects },
+  { teamName }
+) => {
+  effects.analytics.track('Team - Invitation Accepted', {});
+
+  effects.notificationToast.success(`Rejected invitation to ${teamName}`);
+};

packages/app/src/app/pages/common/Navigation/Notifications/notifications/TeamInvite.tsx

@@ -1,86 +1,79 @@
-import React from 'react';
-
-import { Mutation } from 'react-apollo';
-import history from 'app/utils/history';
 import { teamOverviewUrl } from '@codesandbox/common/lib/utils/url-generator';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import React, { FunctionComponent } from 'react';
+import { Mutation } from 'react-apollo';
 
-import { NotificationImage as Image } from '../elements';
-import { Container, Buttons, Button, W } from './elements';
+import { useOvermind } from 'app/overmind';
 import {
   REJECT_TEAM_INVITATION,
   ACCEPT_TEAM_INVITATION,
-} from '../../../../Dashboard/queries';
+} from 'app/pages/Dashboard/queries';
+import history from 'app/utils/history';
 
-interface Props {
+import { NotificationImage as Image } from '../elements';
+
+import { Container, Buttons, Button, W } from './elements';
+
+type Props = {
   read: boolean;
   teamId: string;
   teamName: string;
   inviterName: string;
   inviterAvatar: string;
-}
+};
+export const TeamInvite: FunctionComponent<Props> = ({
+  read,
+  teamId,
+  teamName,
+  inviterName,
+  inviterAvatar,
+}) => {
+  const {
+    actions: { acceptTeamInvitation, rejectTeamInvitation },
+  } = useOvermind();
+
+  return (
+    <div>
+      <Container read={read}>
+        <Image src={inviterAvatar} />
+
+        <div>
+          <W>{inviterName}</W> invites you to join team <W>{teamName}</W>
+        </div>
+      </Container>
+
+      {!read && (
+        <Buttons>
+          <Mutation
+            variables={{ teamId }}
+            mutation={REJECT_TEAM_INVITATION}
+            refetchQueries={['RecentNotifications']}
+            onCompleted={() => rejectTeamInvitation({ teamName })}
+          >
+            {(mutate, { loading }) => (
+              <Button onClick={() => mutate()} disabled={loading} decline>
+                Decline
+              </Button>
+            )}
+          </Mutation>
 
-export const TeamInvite = inject('signals')(
-  hooksObserver(
-    ({
-      read,
-      teamId,
-      teamName,
-      inviterName,
-      inviterAvatar,
-      signals: { notificationAdded },
-    }: Props & { signals: any }) => (
-      <div>
-        <Container read={read}>
-          <Image src={inviterAvatar} />
-          <div>
-            <W>{inviterName}</W> invites you to join team <W>{teamName}</W>
-          </div>
-        </Container>
-        {!read && (
-          <Buttons>
-            <Mutation
-              variables={{ teamId }}
-              mutation={REJECT_TEAM_INVITATION}
-              refetchQueries={['RecentNotifications']}
-              onCompleted={() => {
-                track('Team - Invitation Rejected');
-                notificationAdded({
-                  message: `Rejected invitation to ${teamName}`,
-                  type: 'success',
-                });
-              }}
-            >
-              {(mutate, { loading }) => (
-                <Button onClick={() => mutate()} disabled={loading} decline>
-                  Decline
-                </Button>
-              )}
-            </Mutation>
-            <Mutation
-              variables={{ teamId }}
-              mutation={ACCEPT_TEAM_INVITATION}
-              refetchQueries={['RecentNotifications', 'TeamsSidebar']}
-              onCompleted={() => {
-                track('Team - Invitation Accepted');
-                notificationAdded({
-                  message: `Accepted invitation to ${teamName}`,
-                  type: 'success',
-                });
+          <Mutation
+            variables={{ teamId }}
+            mutation={ACCEPT_TEAM_INVITATION}
+            refetchQueries={['RecentNotifications', 'TeamsSidebar']}
+            onCompleted={() => {
+              acceptTeamInvitation({ teamName });
 
-                history.push(teamOverviewUrl(teamId));
-              }}
-            >
-              {(mutate, { loading }) => (
-                <Button onClick={() => mutate()} disabled={loading}>
-                  Accept
-                </Button>
-              )}
-            </Mutation>
-          </Buttons>
-        )}
-      </div>
-    )
-  )
-);
+              history.push(teamOverviewUrl(teamId));
+            }}
+          >
+            {(mutate, { loading }) => (
+              <Button onClick={() => mutate()} disabled={loading}>
+                Accept
+              </Button>
+            )}
+          </Mutation>
+        </Buttons>
+      )}
+    </div>
+  );
+};