2019-04-20 11:52:07 -07:00
|
|
|
import PropTypes from 'prop-types';
|
2023-05-28 07:38:10 -07:00
|
|
|
|
2019-04-20 11:52:07 -07:00
|
|
|
import { injectIntl, defineMessages } from 'react-intl';
|
2023-05-28 07:38:10 -07:00
|
|
|
|
2019-04-20 11:52:07 -07:00
|
|
|
import { Link } from 'react-router-dom';
|
2023-05-28 07:38:10 -07:00
|
|
|
|
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
2019-04-20 11:52:07 -07:00
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
|
2023-05-08 18:11:56 -07:00
|
|
|
import { Icon } from 'flavours/glitch/components/icon';
|
2022-10-11 01:41:15 -07:00
|
|
|
import { signOutLink } from 'flavours/glitch/utils/backend_links';
|
2023-05-28 07:38:10 -07:00
|
|
|
import { conditionalRender } from 'flavours/glitch/utils/react_helpers';
|
2019-04-20 11:52:07 -07:00
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
community: {
|
|
|
|
defaultMessage: 'Local timeline',
|
|
|
|
id: 'navigation_bar.community_timeline',
|
|
|
|
},
|
|
|
|
home_timeline: {
|
|
|
|
defaultMessage: 'Home',
|
|
|
|
id: 'tabs_bar.home',
|
|
|
|
},
|
|
|
|
logout: {
|
|
|
|
defaultMessage: 'Logout',
|
|
|
|
id: 'navigation_bar.logout',
|
|
|
|
},
|
|
|
|
notifications: {
|
|
|
|
defaultMessage: 'Notifications',
|
|
|
|
id: 'tabs_bar.notifications',
|
|
|
|
},
|
|
|
|
public: {
|
|
|
|
defaultMessage: 'Federated timeline',
|
|
|
|
id: 'navigation_bar.public_timeline',
|
|
|
|
},
|
|
|
|
settings: {
|
|
|
|
defaultMessage: 'App settings',
|
|
|
|
id: 'navigation_bar.app_settings',
|
|
|
|
},
|
|
|
|
start: {
|
|
|
|
defaultMessage: 'Getting started',
|
|
|
|
id: 'getting_started.heading',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
class Header extends ImmutablePureComponent {
|
2023-02-03 11:52:07 -08:00
|
|
|
|
2019-04-20 11:52:07 -07:00
|
|
|
static propTypes = {
|
|
|
|
columns: ImmutablePropTypes.list,
|
|
|
|
unreadNotifications: PropTypes.number,
|
|
|
|
showNotificationsBadge: PropTypes.bool,
|
|
|
|
intl: PropTypes.object,
|
|
|
|
onSettingsClick: PropTypes.func,
|
2019-08-26 09:24:10 -07:00
|
|
|
onLogout: PropTypes.func.isRequired,
|
2019-04-20 11:52:07 -07:00
|
|
|
};
|
|
|
|
|
2019-08-26 09:24:10 -07:00
|
|
|
handleLogoutClick = e => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
this.props.onLogout();
|
|
|
|
|
|
|
|
return false;
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2019-08-26 09:24:10 -07:00
|
|
|
|
2019-04-20 11:52:07 -07:00
|
|
|
render () {
|
|
|
|
const { intl, columns, unreadNotifications, showNotificationsBadge, onSettingsClick } = this.props;
|
|
|
|
|
|
|
|
// Only renders the component if the column isn't being shown.
|
|
|
|
const renderForColumn = conditionalRender.bind(null,
|
|
|
|
columnId => !columns || !columns.some(
|
2023-02-03 11:52:07 -08:00
|
|
|
column => column.get('id') === columnId,
|
|
|
|
),
|
2019-04-20 11:52:07 -07:00
|
|
|
);
|
|
|
|
|
|
|
|
// The result.
|
|
|
|
return (
|
2023-04-25 11:29:04 -07:00
|
|
|
<nav className='drawer__header'>
|
2019-04-20 11:52:07 -07:00
|
|
|
<Link
|
|
|
|
aria-label={intl.formatMessage(messages.start)}
|
|
|
|
title={intl.formatMessage(messages.start)}
|
|
|
|
to='/getting-started'
|
2019-09-09 06:28:45 -07:00
|
|
|
><Icon id='asterisk' /></Link>
|
2019-04-20 11:52:07 -07:00
|
|
|
{renderForColumn('HOME', (
|
|
|
|
<Link
|
|
|
|
aria-label={intl.formatMessage(messages.home_timeline)}
|
|
|
|
title={intl.formatMessage(messages.home_timeline)}
|
2021-09-25 20:46:13 -07:00
|
|
|
to='/home'
|
2019-09-09 06:28:45 -07:00
|
|
|
><Icon id='home' /></Link>
|
2019-04-20 11:52:07 -07:00
|
|
|
))}
|
|
|
|
{renderForColumn('NOTIFICATIONS', (
|
|
|
|
<Link
|
|
|
|
aria-label={intl.formatMessage(messages.notifications)}
|
|
|
|
title={intl.formatMessage(messages.notifications)}
|
|
|
|
to='/notifications'
|
|
|
|
>
|
|
|
|
<span className='icon-badge-wrapper'>
|
2019-09-09 06:28:45 -07:00
|
|
|
<Icon id='bell' />
|
2019-04-20 11:52:07 -07:00
|
|
|
{ showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
))}
|
|
|
|
{renderForColumn('COMMUNITY', (
|
|
|
|
<Link
|
|
|
|
aria-label={intl.formatMessage(messages.community)}
|
|
|
|
title={intl.formatMessage(messages.community)}
|
2021-09-25 20:46:13 -07:00
|
|
|
to='/public/local'
|
2019-09-09 06:28:45 -07:00
|
|
|
><Icon id='users' /></Link>
|
2019-04-20 11:52:07 -07:00
|
|
|
))}
|
|
|
|
{renderForColumn('PUBLIC', (
|
|
|
|
<Link
|
|
|
|
aria-label={intl.formatMessage(messages.public)}
|
|
|
|
title={intl.formatMessage(messages.public)}
|
2021-09-25 20:46:13 -07:00
|
|
|
to='/public'
|
2019-09-09 06:28:45 -07:00
|
|
|
><Icon id='globe' /></Link>
|
2019-04-20 11:52:07 -07:00
|
|
|
))}
|
|
|
|
<a
|
|
|
|
aria-label={intl.formatMessage(messages.settings)}
|
|
|
|
onClick={onSettingsClick}
|
2022-02-03 05:36:52 -08:00
|
|
|
href='/settings/preferences'
|
2019-04-20 11:52:07 -07:00
|
|
|
title={intl.formatMessage(messages.settings)}
|
2019-09-09 06:28:45 -07:00
|
|
|
><Icon id='cogs' /></a>
|
2019-04-20 11:52:07 -07:00
|
|
|
<a
|
|
|
|
aria-label={intl.formatMessage(messages.logout)}
|
2019-08-26 09:24:10 -07:00
|
|
|
onClick={this.handleLogoutClick}
|
2023-02-03 11:52:07 -08:00
|
|
|
href={signOutLink}
|
2019-04-20 11:52:07 -07:00
|
|
|
title={intl.formatMessage(messages.logout)}
|
2019-09-09 06:28:45 -07:00
|
|
|
><Icon id='sign-out' /></a>
|
2019-04-20 11:52:07 -07:00
|
|
|
</nav>
|
|
|
|
);
|
2023-02-03 11:52:07 -08:00
|
|
|
}
|
|
|
|
|
2019-04-20 11:52:07 -07:00
|
|
|
}
|
2023-03-24 15:15:25 -07:00
|
|
|
|
|
|
|
export default injectIntl(Header);
|