DrawerAccount → NavigationBar + NavigationContainer

app/javascript/flavours/glitch/features/compose/account/index.js

@@ -1,76 +0,0 @@
-//  Package imports.
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import {
-  FormattedMessage,
-  defineMessages,
-} from 'react-intl';
-
-//  Components.
-import Avatar from 'flavours/glitch/components/avatar';
-import Permalink from 'flavours/glitch/components/permalink';
-
-//  Utils.
-import { hiddenComponent } from 'flavours/glitch/util/react_helpers';
-import { profileLink } from 'flavours/glitch/util/backend_links';
-
-//  Messages.
-const messages = defineMessages({
-  edit: {
-    defaultMessage: 'Edit profile',
-    id: 'navigation_bar.edit_profile',
-  },
-});
-
-//  The component.
-export default function DrawerAccount ({ account }) {
-
-  //  We need an account to render.
-  if (!account) {
-    return (
-      <div className='drawer--account'>
-        { profileLink !== undefined && (
-          <a
-            className='edit'
-            href={ profileLink }
-          >
-            <FormattedMessage {...messages.edit} />
-          </a>
-        )}
-      </div>
-    );
-  }
-
-  //  The result.
-  return (
-    <div className='drawer--account'>
-      <Permalink
-        className='avatar'
-        href={account.get('url')}
-        to={`/accounts/${account.get('id')}`}
-      >
-        <span {...hiddenComponent}>{account.get('acct')}</span>
-        <Avatar
-          account={account}
-          size={40}
-        />
-      </Permalink>
-      <Permalink
-        className='acct'
-        href={account.get('url')}
-        to={`/accounts/${account.get('id')}`}
-      >
-        <strong>@{account.get('acct')}</strong>
-      </Permalink>
-      { profileLink !== undefined && (
-        <a
-          className='edit'
-          href={ profileLink }
-        ><FormattedMessage {...messages.edit} /></a>
-      )}
-    </div>
-  );
-}
-
-//  Props.
-DrawerAccount.propTypes = { account: ImmutablePropTypes.map };

app/javascript/flavours/glitch/features/compose/components/navigation_bar.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar from 'flavours/glitch/components/avatar';
+import Permalink from 'flavours/glitch/components/permalink';
+import { FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { profileLink } from 'flavours/glitch/util/backend_links';
+
+export default class NavigationBar extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+  };
+
+  render () {
+    return (
+      <div className='drawer--account'>
+        <Permalink className='avatar' href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
+          <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
+          <Avatar account={this.props.account} size={40} />
+        </Permalink>
+
+        <Permalink className='acct' href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
+          <strong>@{this.props.account.get('acct')}</strong>
+        </Permalink>
+
+        { profileLink !== undefined && (
+          <a
+            className='edit'
+            href={ profileLink }
+          ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+        )}
+      </div>
+    );
+  };
+}

app/javascript/flavours/glitch/features/compose/containers/navigation_container.js

@@ -0,0 +1,11 @@
+import { connect }   from 'react-redux';
+import NavigationBar from '../components/navigation_bar';
+import { me } from 'flavours/glitch/util/initial_state';
+
+const mapStateToProps = state => {
+  return {
+    account: state.getIn(['accounts', me]),
+  };
+};
+
+export default connect(mapStateToProps)(NavigationBar);

app/javascript/flavours/glitch/features/compose/index.js

@@ -12,10 +12,10 @@ import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
 
 //  Components.
 import Composer from 'flavours/glitch/features/composer';
-import DrawerAccount from './account';
 import DrawerHeader from './header';
 import SearchContainer from './containers/search_container';
 import SearchResultsContainer from './containers/search_results_container';
+import NavigationContainer from './containers/navigation_container';
 import spring from 'react-motion/lib/spring';
 
 //  Utils.
@@ -29,7 +29,6 @@ const messages = defineMessages({
 
 //  State mapping.
 const mapStateToProps = (state, ownProps) => ({
-  account: state.getIn(['accounts', me]),
   columns: state.getIn(['settings', 'columns']),
   elefriend: state.getIn(['compose', 'elefriend']),
   showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
@@ -60,7 +59,6 @@ class Compose extends React.PureComponent {
     showSearch: PropTypes.bool,
 
     //  State props.
-    account: ImmutablePropTypes.map,
     columns: ImmutablePropTypes.list,
     elefriend: PropTypes.number,
     unreadNotifications: PropTypes.number,
@@ -74,7 +72,6 @@ class Compose extends React.PureComponent {
   //  Rendering.
   render () {
     const {
-      account,
       columns,
       elefriend,
       intl,
@@ -103,7 +100,7 @@ class Compose extends React.PureComponent {
         {(multiColumn || isSearchPage) && <SearchContainer /> }
         <div className='drawer__pager'>
           {!isSearchPage && <div className='drawer__inner'>
-            <DrawerAccount account={account} />
+            <NavigationContainer />
             <Composer />
             {multiColumn && (
               <div className='drawer__inner__mastodon'>

app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js

@@ -7,7 +7,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import classNames from 'classnames';
 import Permalink from 'flavours/glitch/components/permalink';
 import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer';
-import DrawerAccount from 'flavours/glitch/features/compose/account';
+import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar';
 import Search from 'flavours/glitch/features/compose/components/search';
 import ColumnHeader from './column_header';
 import { me } from 'flavours/glitch/util/initial_state';