treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

DrawerAccount → NavigationBar + NavigationContainer

lolsob-rspec
Thibaut Girka 2019-04-20 20:32:16 +02:00 committed by ThibG
parent 7acc035cbe
commit 2f2381a400
5 changed files with 50 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/javascript/flavours/glitch/features/compose/account/index.js
View File

@ -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 };

36
app/javascript/flavours/glitch/features/compose/components/navigation_bar.js Normal file
View File

@ -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>
);
};
}

11
app/javascript/flavours/glitch/features/compose/containers/navigation_container.js Normal file
View File

@ -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);

7
app/javascript/flavours/glitch/features/compose/index.js
View File

@ -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'>

2
app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js
View File

@ -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';