Use more selectors

plugin-api/beta/client/selectors/auth.js

@@ -4,3 +4,5 @@ export const usernameStatusSelector = state =>
   get(state, 'auth.user.status.username.status');
 
 export const usernameSelector = state => get(state, 'auth.user.username');
+
+export const isLoggedInSelector = state => !!get(state, 'auth.user');

plugins/talk-plugin-auth/client/stream/components/SignInButton.css

@@ -5,4 +5,5 @@
 
 .button:hover {
   background-color: #767676;
+  color: #FFF;
 }

plugins/talk-plugin-auth/client/stream/components/SignInButton.js

@@ -4,9 +4,9 @@ import { Button } from 'plugin-api/beta/client/components/ui';
 import { t } from 'plugin-api/beta/client/services';
 import styles from './SignInButton.css';
 
-const SignInButton = ({ currentUser, showSignInDialog }) => (
+const SignInButton = ({ isLoggedIn, showSignInDialog }) => (
   <div className="talk-stream-auth-sign-in-button">
-    {!currentUser ? (
+    {!isLoggedIn ? (
       <Button
         id="coralSignInButton"
         className={styles.button}
@@ -20,7 +20,7 @@ const SignInButton = ({ currentUser, showSignInDialog }) => (
 );
 
 SignInButton.propTypes = {
-  currentUser: PropTypes.object,
+  isLoggedIn: PropTypes.bool,
   showSignInDialog: PropTypes.func,
 };
 

plugins/talk-plugin-auth/client/stream/components/UserBox.js

@@ -4,14 +4,14 @@ import styles from './UserBox.css';
 import { t } from 'plugin-api/beta/client/services';
 import cn from 'classnames';
 
-const UserBox = ({ user, logout, onShowProfile }) => (
+const UserBox = ({ username, logout, onShowProfile }) => (
   <div>
-    {user ? (
+    {username ? (
       <div className={cn(styles.userBox, 'talk-stream-auth-userbox')}>
         <span className={styles.userBoxLoggedIn}>
           {t('talk-plugin-auth.login.logged_in_as')}
         </span>
-        <a onClick={onShowProfile}>{user.username}</a>.{' '}
+        <a onClick={onShowProfile}>{username}</a>.{' '}
         {t('talk-plugin-auth.login.not_you')}
         <a
           className={cn(styles.logout, 'talk-stream-userbox-logout')}
@@ -25,7 +25,7 @@ const UserBox = ({ user, logout, onShowProfile }) => (
 );
 
 UserBox.propTypes = {
-  user: PropTypes.object,
+  username: PropTypes.string,
   logout: PropTypes.func,
   onShowProfile: PropTypes.func,
 };

plugins/talk-plugin-auth/client/stream/containers/SignInButton.js

@@ -2,9 +2,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { showSignInDialog } from 'plugin-api/beta/client/actions/stream';
 import SignInButton from '../components/SignInButton';
+import { isLoggedInSelector } from 'plugin-api/beta/client/selectors/auth';
 
-const mapStateToProps = ({ auth }) => ({
-  currentUser: auth.user,
+const mapStateToProps = state => ({
+  isLoggedIn: isLoggedInSelector(state),
 });
 
 const mapDispatchToProps = dispatch =>

plugins/talk-plugin-auth/client/stream/containers/UserBox.js

@@ -2,9 +2,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { logout } from 'plugin-api/beta/client/actions/auth';
 import UserBox from '../components/UserBox';
+import { usernameSelector } from 'plugin-api/beta/client/selectors/auth';
 
-const mapStateToProps = ({ auth }) => ({
-  user: auth.user,
+const mapStateToProps = state => ({
+  username: usernameSelector(state),
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ logout }, dispatch);