diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/compose')
4 files changed, 49 insertions, 81 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/account/index.js b/app/javascript/flavours/glitch/features/compose/account/index.js deleted file mode 100644 index 552848641..000000000 --- a/app/javascript/flavours/glitch/features/compose/account/index.js +++ /dev/null @@ -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 }; diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js new file mode 100644 index 000000000..59172bb23 --- /dev/null +++ b/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> + ); + }; +} diff --git a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js b/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js new file mode 100644 index 000000000..eb630ffbb --- /dev/null +++ b/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); diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 0865a7ff9..9fe510028 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/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'> |