[next] Broadcast mutation events (#2083)

* feat: Implement mutation events

* fix: correct testcase name

src/core/client/framework/lib/relay/createMutationContainer.tsx

@@ -27,13 +27,16 @@ function createMutationContainer<T extends string, I, R>(
   return compose(
     withContext(context => ({ context })),
     hoistStatics((BaseComponent: React.ComponentType<any>) => {
-      class CreateMutationContainer extends React.Component<any> {
+      class CreateMutationContainer extends React.Component<{
+        context: TalkContext;
+      }> {
         public static displayName = wrapDisplayName(
           BaseComponent,
           "createMutationContainer"
         );
 
         private commit = (input: I) => {
+          this.props.context.eventEmitter.emit(`mutation.${propName}`, input);
           return commit(
             this.props.context.relayEnvironment,
             input,

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -35,6 +35,7 @@ export class UserBoxContainer extends Component<InnerProps> {
   private handleClose = () => this.props.setAuthPopupState({ open: false });
   private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
   private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
+  private handleSignOut = () => this.props.signOut();
 
   public render() {
     const {
@@ -42,13 +43,12 @@ export class UserBoxContainer extends Component<InnerProps> {
         authPopup: { open, focus, view },
       },
       me,
-      signOut,
     } = this.props;
 
     if (me) {
       return (
         <UserBoxAuthenticated
-          onSignOut={signOut}
+          onSignOut={this.handleSignOut}
           // TODO: why nullable?
           username={me.username!}
         />

src/core/client/stream/index.tsx

@@ -7,6 +7,7 @@ import { createManaged } from "talk-framework/lib/bootstrap";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import {
+  OnEvents,
   OnPostMessageAuthError,
   OnPostMessageSetAuthToken,
   OnPymSetCommentID,
@@ -19,6 +20,7 @@ const listeners = (
     <OnPymSetCommentID />
     <OnPostMessageSetAuthToken />
     <OnPostMessageAuthError />
+    <OnEvents />
   </>
 );
 

src/core/client/stream/listeners/OnEvents.spec.tsx

@@ -0,0 +1,27 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { createSinonStub } from "talk-framework/testHelpers";
+
+import { OnEvents } from "./OnEvents";
+
+it("Broadcasts events to pym", () => {
+  const value = { value: true };
+  const eventName = "eventName";
+  const eventEmitter: any = {
+    onAny: (cb: (eventName: string, value: any) => void) => {
+      cb(eventName, value);
+    },
+  };
+
+  const pym = {
+    sendMessage: createSinonStub(
+      s => s.throws(),
+      s =>
+        s.withArgs("event", JSON.stringify({ eventName, value })).returns(null)
+    ),
+  };
+
+  shallow(<OnEvents pym={pym as any} eventEmitter={eventEmitter} />);
+  expect(pym.sendMessage.calledOnce).toBe(true);
+});

src/core/client/stream/listeners/OnEvents.tsx

@@ -0,0 +1,34 @@
+import { Component } from "react";
+
+import { TalkContext, withContext } from "talk-framework/lib/bootstrap";
+
+interface Props {
+  pym: TalkContext["pym"];
+  eventEmitter: TalkContext["eventEmitter"];
+}
+
+export class OnEvents extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    // Auth popup will use this to handle a successful login.
+    props.eventEmitter.onAny((eventName: string, value: any) => {
+      props.pym!.sendMessage(
+        "event",
+        JSON.stringify({
+          eventName,
+          value,
+        })
+      );
+    });
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+const enhanced = withContext(({ pym, eventEmitter }) => ({
+  pym,
+  eventEmitter,
+}))(OnEvents);
+export default enhanced;

src/core/client/stream/listeners/index.ts

@@ -3,3 +3,4 @@ export {
   default as OnPostMessageSetAuthToken,
 } from "./OnPostMessageSetAuthToken";
 export { default as OnPostMessageAuthError } from "./OnPostMessageAuthError";
+export { default as OnEvents } from "./OnEvents";