acctFull --> getAcct throughout the UI, make it stateful

app/soapbox/features/chats/chat_room.js

@@ -6,13 +6,14 @@ import { injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
-import { acctFull } from 'soapbox/utils/accounts';
+import { getAcct } from 'soapbox/utils/accounts';
 import { fetchChat, markChatRead } from 'soapbox/actions/chats';
 import ChatBox from './components/chat_box';
 import Column from 'soapbox/components/column';
 import ColumnBackButton from 'soapbox/components/column_back_button';
 import { Map as ImmutableMap } from 'immutable';
 import { makeGetChat } from 'soapbox/selectors';
+import { displayFqn } from 'soapbox/utils/state';
 
 const mapStateToProps = (state, { params }) => {
   const getChat = makeGetChat();
@@ -21,6 +22,7 @@ const mapStateToProps = (state, { params }) => {
   return {
     me: state.get('me'),
     chat: getChat(state, chat),
+    displayFqn: displayFqn(state),
   };
 };
 
@@ -32,6 +34,7 @@ class ChatRoom extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     chat: ImmutablePropTypes.map,
+    displayFqn: PropTypes.bool,
     me: PropTypes.node,
   }
 
@@ -68,7 +71,7 @@ class ChatRoom extends ImmutablePureComponent {
   }
 
   render() {
-    const { chat } = this.props;
+    const { chat, displayFqn } = this.props;
     if (!chat) return null;
     const account = chat.get('account');
 
@@ -79,7 +82,7 @@ class ChatRoom extends ImmutablePureComponent {
           <Link to={`/@${account.get('acct')}`} className='chatroom__header'>
             <Avatar account={account} size={18} />
             <div className='chatroom__title'>
-              @{acctFull(account)}
+              @{getAcct(account, displayFqn)}
             </div>
           </Link>
         </div>

app/soapbox/features/chats/components/chat_window.js

@@ -6,7 +6,7 @@ import { injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
-import { acctFull } from 'soapbox/utils/accounts';
+import { getAcct } from 'soapbox/utils/accounts';
 import IconButton from 'soapbox/components/icon_button';
 import {
   closeChat,
@@ -14,11 +14,13 @@ import {
 } from 'soapbox/actions/chats';
 import ChatBox from './chat_box';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { displayFqn } from 'soapbox/utils/state';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 
 const mapStateToProps = (state, { pane }) => ({
   me: state.get('me'),
   chat: state.getIn(['chats', pane.get('chat_id')]),
+  displayFqn: displayFqn(state),
 });
 
 export default @connect(mapStateToProps)
@@ -32,6 +34,7 @@ class ChatWindow extends ImmutablePureComponent {
     idx: PropTypes.number,
     chat: ImmutablePropTypes.map,
     me: PropTypes.node,
+    displayFqn: PropTypes.bool,
   }
 
   state = {
@@ -73,7 +76,7 @@ class ChatWindow extends ImmutablePureComponent {
   }
 
   render() {
-    const { pane, idx, chat } = this.props;
+    const { pane, idx, chat, displayFqn } = this.props;
     const account = pane.getIn(['chat', 'account']);
     if (!chat || !account) return null;
 
@@ -99,7 +102,7 @@ class ChatWindow extends ImmutablePureComponent {
         <div className='pane__header'>
           {unreadCount > 0 ? unreadIcon : avatar }
           <button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
-            @{acctFull(account)}
+            @{getAcct(account, displayFqn)}
           </button>
           <div className='pane__close'>
             <IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />

app/soapbox/features/edit_profile/components/profile_preview.js

@@ -1,11 +1,18 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { acctFull } from 'soapbox/utils/accounts';
+import { getAcct } from 'soapbox/utils/accounts';
 import StillImage from 'soapbox/components/still_image';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { List as ImmutableList } from 'immutable';
+import { displayFqn } from 'soapbox/utils/state';
 
-const ProfilePreview = ({ account }) => (
+const mapStateToProps = state => ({
+  displayFqn: displayFqn(state),
+});
+
+const ProfilePreview = ({ account, displayFqn }) => (
   <div className='card h-card'>
     <a target='_blank' rel='noopener' href={account.get('url')}>
       <div className='card__img'>
@@ -23,7 +30,7 @@ const ProfilePreview = ({ account }) => (
               {account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified') && <VerificationBadge />}
             </strong>
           </bdi>
-          <span>{acctFull(account)}</span>
+          <span>@{getAcct(account, displayFqn)}</span>
         </div>
       </div>
     </a>
@@ -32,6 +39,7 @@ const ProfilePreview = ({ account }) => (
 
 ProfilePreview.propTypes = {
   account: ImmutablePropTypes.map,
+  displayFqn: PropTypes.bool,
 };
 
-export default ProfilePreview;
+export default connect(mapStateToProps)(ProfilePreview);

app/soapbox/features/ui/components/profile_info_panel.js

@@ -10,7 +10,8 @@ import Icon from 'soapbox/components/icon';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import Badge from 'soapbox/components/badge';
 import { List as ImmutableList } from 'immutable';
-import { acctFull, isAdmin, isModerator } from 'soapbox/utils/accounts';
+import { getAcct, isAdmin, isModerator } from 'soapbox/utils/accounts';
+import { displayFqn } from 'soapbox/utils/state';
 import classNames from 'classnames';
 
 const messages = defineMessages({
@@ -36,10 +37,11 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     identity_proofs: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
     username: PropTypes.string,
+    displayFqn: PropTypes.bool,
   };
 
   render() {
-    const { account, intl, identity_proofs, username } = this.props;
+    const { account, displayFqn, intl, identity_proofs, username } = this.props;
 
     if (!account) {
       return (
@@ -73,7 +75,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
               {verified && <VerificationBadge />}
               {account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
-              { <small>@{acctFull(account)} {lockedIcon}</small> }
+              { <small>@{getAcct(account, displayFqn)} {lockedIcon}</small> }
             </h1>
           </div>
 
@@ -144,6 +146,7 @@ const mapStateToProps = (state, { account }) => {
   return {
     identity_proofs,
     domain: state.getIn(['meta', 'domain']),
+    displayFqn: displayFqn(state),
   };
 };
 

app/soapbox/features/ui/components/user_panel.js

@@ -8,7 +8,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
-import { acctFull } from 'soapbox/utils/accounts';
+import { getAcct } from 'soapbox/utils/accounts';
+import { displayFqn } from 'soapbox/utils/state';
 import StillImage from 'soapbox/components/still_image';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { List as ImmutableList } from 'immutable';
@@ -17,12 +18,13 @@ class UserPanel extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
+    displayFqn: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     domain: PropTypes.string,
   }
 
   render() {
-    const { account, intl, domain } = this.props;
+    const { account, displayFqn, intl, domain } = this.props;
     if (!account) return null;
     const displayNameHtml = { __html: account.get('display_name_html') };
     const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
@@ -49,7 +51,7 @@ class UserPanel extends ImmutablePureComponent {
                 <Link to={`/@${account.get('acct')}`}>
                   <span className='user-panel__account__name' dangerouslySetInnerHTML={displayNameHtml} />
                   {verified && <VerificationBadge />}
-                  <small className='user-panel__account__username'>@{acctFull(account)}</small>
+                  <small className='user-panel__account__username'>@{getAcct(account, displayFqn)}</small>
                 </Link>
               </h1>
             </div>
@@ -93,6 +95,7 @@ const makeMapStateToProps = () => {
 
   const mapStateToProps = (state, { accountId }) => ({
     account: getAccount(state, accountId),
+    displayFqn: displayFqn(state),
   });
 
   return mapStateToProps;