feat: add SignedOutEvent (#2968)

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

CLIENT_EVENTS.md

@@ -129,6 +129,7 @@ createComment.error
 - <a href="#showSharePopover">showSharePopover</a>
 - <a href="#showUserPopover">showUserPopover</a>
 - <a href="#signOut">signOut</a>
+- <a href="#signedIn">signedIn</a>
 - <a href="#unfeatureComment">unfeatureComment</a>
 - <a href="#updateNotificationSettings">updateNotificationSettings</a>
 - <a href="#updateStorySettings">updateStorySettings</a>
@@ -538,6 +539,7 @@ createComment.error
       };
   }
   ```
+- <a id="signedIn">**signedIn**</a>: This event is emitted when the viewer signed in (not applicable for SSO).
 - <a id="unfeatureComment">**unfeatureComment.success**, **unfeatureComment.error**</a>: This event is emitted when the viewer unfeatures a comment.
   ```ts
   {

src/core/client/stream/App/listeners/OnPostMessageSetAccessToken.spec.tsx

@@ -14,6 +14,13 @@ it("Listens to event and sets access token", () => {
     },
   };
 
+  let emittedEventName = "";
+  const eventEmitter: any = {
+    emit: (name: string, values: any) => {
+      emittedEventName = name;
+    },
+  };
+
   const setAccessToken = createSinonStub(
     (s) => s.throws(),
     (s) => s.withArgs({ accessToken: token }).returns(null)
@@ -21,9 +28,11 @@ it("Listens to event and sets access token", () => {
 
   createRenderer().render(
     <OnPostMessageSetAccessToken
+      eventEmitter={eventEmitter}
       postMessage={postMessage}
       setAccessToken={setAccessToken}
     />
   );
   expect(setAccessToken.calledOnce);
+  expect(emittedEventName).toBe("signedIn");
 });

src/core/client/stream/App/listeners/OnPostMessageSetAccessToken.ts

@@ -3,9 +3,11 @@ import { Component } from "react";
 import { CoralContext, withContext } from "coral-framework/lib/bootstrap";
 import { MutationProp, withMutation } from "coral-framework/lib/relay";
 import { SetAccessTokenMutation } from "coral-framework/mutations";
+import { SignedInEvent } from "coral-stream/events";
 
 interface Props {
   postMessage: CoralContext["postMessage"];
+  eventEmitter: CoralContext["eventEmitter"];
   setAccessToken: MutationProp<typeof SetAccessTokenMutation>;
 }
 
@@ -15,6 +17,7 @@ export class OnPostMessageSetAccessToken extends Component<Props> {
     // Auth popup will use this to handle a successful login.
     props.postMessage.on("setAccessToken", (accessToken: string) => {
       props.setAccessToken({ accessToken });
+      SignedInEvent.emit(props.eventEmitter);
     });
   }
 
@@ -23,7 +26,8 @@ export class OnPostMessageSetAccessToken extends Component<Props> {
   }
 }
 
-const enhanced = withContext(({ postMessage }) => ({ postMessage }))(
-  withMutation(SetAccessTokenMutation)(OnPostMessageSetAccessToken)
-);
+const enhanced = withContext(({ postMessage, eventEmitter }) => ({
+  postMessage,
+  eventEmitter,
+}))(withMutation(SetAccessTokenMutation)(OnPostMessageSetAccessToken));
 export default enhanced;

src/core/client/stream/events.ts

@@ -194,6 +194,12 @@ export const SignOutEvent = createViewerNetworkEvent<{
   };
 }>("signOut");
 
+/**
+ * This event is emitted when the viewer
+ * signed in (not applicable for SSO).
+ */
+export const SignedInEvent = createViewerEvent("signedIn");
+
 /**
  * This event is emitted when the viewer updates its
  * notification settings.