Enabling stream login with graphql.

client/coral-embed-stream/src/CommentStream.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import Pym from 'pym.js';
 import {graphql} from 'react-apollo';
+import {connect} from 'react-redux';
 import gql from 'graphql-tag';
 
 import {
@@ -22,8 +23,8 @@ import FlagComment from '../../coral-plugin-flags/FlagComment';
 import LikeButton from '../../coral-plugin-likes/LikeButton';
 import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 
-// import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
-// import UserBox from '../../coral-sign-in/components/UserBox';
+import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
+import UserBox from '../../coral-sign-in/components/UserBox';
 
 import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
 
@@ -35,7 +36,7 @@ import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
 
 // const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
 // const {addNotification, clearNotification} = notificationActions;
-const {/* logout, */showSignInDialog} = authActions;
+const {logout, showSignInDialog} = authActions;
 
 const assetID = 'bc7b4cef-1e14-46e1-9db4-66465192f168';
 
@@ -45,7 +46,8 @@ class CommentStream extends Component {
     super(props);
 
     this.state = {
-      activeTab: 0
+      activeTab: 0,
+      showSignInDialog: false
     };
 
     this.changeTab = this.changeTab.bind(this);
@@ -101,12 +103,12 @@ class CommentStream extends Component {
     // const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
     // const {actions, users, comments} = this.props.items;
     // const {status, moderation, closedMessage, charCount, charCountEnable} = this.props.config;
-    // const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
+    const {isAdmin, showSignInDialog} = this.props.auth;
     const {activeTab} = this.state;
 
     // const banned = (this.props.userData.status === 'banned');
 
-    const {loading, asset} = this.props.data;
+    const {loading, asset, currentUser, refetch} = this.props.data;
 
     const expandForLogin = showSignInDialog ? {
       minHeight: document.body.scrollHeight + 150
@@ -118,9 +120,9 @@ class CommentStream extends Component {
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.comments.length}/></Tab>
             <Tab>Settings</Tab>
-            <Tab restricted={false /* !isAdmin*/}>Configure Stream</Tab>
+            <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
-            {/* loggedIn && <UserBox user={user} logout={this.props.logout} />*/}
+            {currentUser && <UserBox user={currentUser} logout={this.props.logout} />}
             <TabContent show={activeTab === 0}>
                 {
 
@@ -147,7 +149,11 @@ class CommentStream extends Component {
                   //   </div>
                   // : <p>{closedMessage}</p>
                 }
-                {/* !loggedIn && <SignInContainer offset={signInOffset}/>*/}
+                {
+                  !currentUser && <SignInContainer
+                    refetch={refetch}
+                    showSignInDialog={showSignInDialog}/>
+                }
                 {
                   asset.comments.map((comment) => {
                     return <div className="comment" key={comment.id} id={`c_${comment.id}`}>
@@ -162,14 +168,14 @@ class CommentStream extends Component {
                         deleteAction={this.props.deleteAction}
                         addItem={this.props.addItem}
                         updateItem={this.props.updateItem}
-                        currentUser={null/* this.props.auth.user*/}/>
+                        currentUser={currentUser}/>
                       <PubDate created_at={comment.created_at}/>
                       <Content body={comment.body}/>
                       <div className="commentActionsLeft">
                         <ReplyButton
                           updateItem={this.props.updateItem}
                           id={comment.id}
-                          currentUser={null/* this.props.auth.user*/}
+                          currentUser={currentUser}
                           showReply={comment.showReply}
                           banned={false/* banned*/}/>
                         <LikeButton
@@ -181,7 +187,7 @@ class CommentStream extends Component {
                           deleteAction={this.props.deleteAction}
                           addItem={this.props.addItem}
                           updateItem={this.props.updateItem}
-                          currentUser={null/* this.props.auth.user*/}
+                          currentUser={currentUser}
                           banned={false/* banned*/}/>
                       </div>
                       <div className="commentActionsRight">
@@ -196,7 +202,7 @@ class CommentStream extends Component {
                           showSignInDialog={this.props.showSignInDialog}
                           updateItem={this.props.updateItem}
                           banned={false/* banned*/}
-                          currentUser={null/* this.props.auth.user*/}/>
+                          currentUser={currentUser}/>
                         <PermalinkButton
                           commentId={comment.id}
                           articleURL={this.path}/>
@@ -236,7 +242,7 @@ class CommentStream extends Component {
                                 addItem={this.props.addItem}
                                 showSignInDialog={this.props.showSignInDialog}
                                 updateItem={this.props.updateItem}
-                                currentUser={this.props.auth.user}
+                                currentUser={currentUser}
                                 banned={false/* banned*/}/>
                             </div>
                             <div className="replyActionsRight">
@@ -279,11 +285,14 @@ class CommentStream extends Component {
                   </div>;
                   })
                 }
-              <Notification
-                notifLength={4500}
-                clearNotification={this.props.clearNotification}
-                notification={{text: null}}
-              />
+            {
+
+              // <Notification
+              //   notifLength={4500}
+              //   clearNotification={this.props.clearNotification}
+              //   notification={{text: null}}
+              // />
+          }
             </TabContent>
             {
 
@@ -365,10 +374,14 @@ query AssetQuery($asset_id: ID!) {
         ...commentView
       }
     }
+  },
+  currentUser: me {
+    id,
+    displayName
   }
 }`;
 
-export default graphql(
+const CommentStreamWithData = graphql(
   StreamQuery, {
     options: {
       variables: {
@@ -377,3 +390,13 @@ export default graphql(
     }
   }
 )(CommentStream);
+
+export default connect(
+  state => state,
+  dispatch => {
+    return {
+      logout: () => dispatch(logout()),
+      showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
+    };
+  }
+)(CommentStreamWithData);