From 7c5ff1bcb121e7179177ea183ed48cb97bea4009 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 14 Aug 2018 13:11:35 -0300
Subject: [PATCH] Able to Sign In

---
 src/core/client/stream/components/Stream.tsx  |  5 +++-
 .../components/UserBoxAuthenticated.tsx       |  4 ++-
 .../stream/containers/StreamContainer.tsx     |  3 ++
 .../stream/containers/UserBoxContainer.tsx    | 28 +++++++++++++++++--
 .../client/stream/queries/StreamQuery.tsx     |  8 +++++-
 5 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 7f1ea183c..f171acb86 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/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"
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 1b692ba9b..daa8fcb35 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/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>
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index d81319deb..1a185c902 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/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}
       />
     );
   }
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index a1f2bb87b..b9896e97b 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/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;
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index 40d57387e..f5df60cbe 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/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={{