Able to Sign In

src/core/client/stream/components/Stream.tsx

@@ -10,6 +10,8 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
 import * as styles from "./Stream.css";
 
+import { User } from "../containers/UserBoxContainer";
+
 export interface StreamProps {
   assetID: string;
   isClosed?: boolean;
@@ -17,12 +19,13 @@ export interface StreamProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
+  user: User | null;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <Flex className={styles.root} direction="column" itemGutter>
-      <UserBoxContainer />
+      <UserBoxContainer user={props.user} />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"

src/core/client/stream/components/UserBoxAuthenticated.tsx

@@ -4,10 +4,12 @@ import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
 
 import MatchMedia from "talk-ui/components/MatchMedia";
+import { User } from "../containers/UserBoxContainer";
 import * as styles from "./UserBoxAuthenticated.css";
 
 export interface UserBoxUnauthenticatedProps {
   onSignOut: () => void;
+  user: User;
 }
 
 const UserBoxAuthenticated: StatelessComponent<
@@ -23,7 +25,7 @@ const UserBoxAuthenticated: StatelessComponent<
             </Typography>
           </Localized>
           <Typography variant="bodyCopyBold" component="span">
-            okbel
+            {props.user.username}
           </Typography>
         </MatchMedia>
       </Flex>

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

@@ -10,9 +10,11 @@ import {
 } from "talk-stream/__generated__/StreamContainerPaginationQuery.graphql";
 
 import Stream from "../components/Stream";
+import { User } from "../containers/UserBoxContainer";
 
 interface InnerProps {
   asset: Data;
+  user: User | null;
   relay: RelayPaginationProp;
 }
 
@@ -31,6 +33,7 @@ export class StreamContainer extends React.Component<InnerProps> {
         onLoadMore={this.loadMore}
         hasMore={this.props.relay.hasMore()}
         disableLoadMore={this.state.disableLoadMore}
+        user={this.props.user}
       />
     );
   }

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

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Component } from "react";
-
 import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
 import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
 import {
@@ -11,11 +10,26 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-// import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
 import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
+export type USER_ROLE =
+  | "ADMIN"
+  | "COMMENTER"
+  | "MODERATOR"
+  | "STAFF"
+  | "%future added value";
+
+export interface User {
+  id?: string;
+  username?: string | null;
+  displayName?: string | null;
+  role?: USER_ROLE;
+}
+
 interface InnerProps {
   local: Local;
+  user: User | null;
   showAuthPopup: ShowAuthPopupMutation;
   setAuthPopupState: SetAuthPopupStateMutation;
 }
@@ -32,7 +46,15 @@ export class UserBoxContainer extends Component<InnerProps> {
       local: {
         authPopup: { open, focus, view },
       },
+      user,
     } = this.props;
+
+    if (user) {
+      return (
+        <UserBoxAuthenticated onSignOut={this.handleRegister} user={user} />
+      );
+    }
+
     return (
       <>
         <Popup
@@ -45,7 +67,6 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        {/* <UserBoxAuthenticated onSignOut={this.handleRegister} /> */}
         <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
@@ -71,4 +92,5 @@ const enhanced = withSetAuthPopupStateMutation(
   )
 );
 
+// TODO: (bc) Add fragment here if composing is doable.
 export default enhanced;

src/core/client/stream/queries/StreamQuery.tsx

@@ -24,7 +24,7 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
     return <div>{error.message}</div>;
   }
   if (props) {
-    return <StreamContainer asset={props.asset} />;
+    return <StreamContainer asset={props.asset} user={props.me} />;
   }
   return <div>Loading</div>;
 };
@@ -38,6 +38,12 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
         asset(id: $assetID) {
           ...StreamContainer_asset
         }
+        me {
+          id
+          username
+          displayName
+          role
+        }
       }
     `}
     variables={{