2022-10-09 06:55:32 -07:00
import PropTypes from 'prop-types' ;
2023-05-28 07:38:10 -07:00
import { Component } from 'react' ;
2022-10-09 06:55:32 -07:00
import { defineMessages , injectIntl } from 'react-intl' ;
2023-05-28 07:38:10 -07:00
import NavigationPortal from 'flavours/glitch/components/navigation_portal' ;
2023-07-08 11:00:12 -07:00
import { timelinePreview , trendsEnabled } from 'flavours/glitch/initial_state' ;
2023-07-13 08:18:09 -07:00
import { transientSingleColumn } from 'flavours/glitch/is_mobile' ;
2023-05-28 07:38:10 -07:00
import { preferencesLink } from 'flavours/glitch/utils/backend_links' ;
2023-05-07 09:22:25 -07:00
import ColumnLink from './column_link' ;
2022-11-05 10:28:13 -07:00
import DisabledAccountBanner from './disabled_account_banner' ;
2022-10-09 06:55:32 -07:00
import FollowRequestsColumnLink from './follow_requests_column_link' ;
2019-05-25 12:27:00 -07:00
import ListPanel from './list_panel' ;
2022-10-08 18:49:51 -07:00
import NotificationsCounterIcon from './notifications_counter_icon' ;
2022-09-28 19:39:33 -07:00
import SignInBanner from './sign_in_banner' ;
2022-10-09 06:55:32 -07:00
const messages = defineMessages ( {
home : { id : 'tabs_bar.home' , defaultMessage : 'Home' } ,
notifications : { id : 'tabs_bar.notifications' , defaultMessage : 'Notifications' } ,
explore : { id : 'explore.title' , defaultMessage : 'Explore' } ,
2023-07-01 15:05:10 -07:00
firehose : { id : 'column.firehose' , defaultMessage : 'Live feeds' } ,
2023-06-11 04:33:45 -07:00
direct : { id : 'navigation_bar.direct' , defaultMessage : 'Private mentions' } ,
2023-07-21 10:09:13 -07:00
favourites : { id : 'navigation_bar.favourites' , defaultMessage : 'Favorites' } ,
2022-10-09 06:55:32 -07:00
bookmarks : { id : 'navigation_bar.bookmarks' , defaultMessage : 'Bookmarks' } ,
lists : { id : 'navigation_bar.lists' , defaultMessage : 'Lists' } ,
preferences : { id : 'navigation_bar.preferences' , defaultMessage : 'Preferences' } ,
followsAndFollowers : { id : 'navigation_bar.follows_and_followers' , defaultMessage : 'Follows and followers' } ,
about : { id : 'navigation_bar.about' , defaultMessage : 'About' } ,
2022-10-25 10:03:16 -07:00
search : { id : 'navigation_bar.search' , defaultMessage : 'Search' } ,
2023-07-13 08:18:09 -07:00
advancedInterface : { id : 'navigation_bar.advanced_interface' , defaultMessage : 'Open in advanced web interface' } ,
2023-08-31 03:18:46 -07:00
openedInClassicInterface : { id : 'navigation_bar.opened_in_classic_interface' , defaultMessage : 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' } ,
2022-10-09 06:55:32 -07:00
app _settings : { id : 'navigation_bar.app_settings' , defaultMessage : 'App settings' } ,
} ) ;
2019-05-25 12:27:00 -07:00
2023-05-28 05:18:23 -07:00
class NavigationPanel extends Component {
2019-05-25 12:27:00 -07:00
2022-09-28 19:39:33 -07:00
static contextTypes = {
router : PropTypes . object . isRequired ,
identity : PropTypes . object . isRequired ,
} ;
2019-05-25 12:27:00 -07:00
2022-09-28 19:39:33 -07:00
static propTypes = {
2023-05-07 09:22:25 -07:00
intl : PropTypes . object . isRequired ,
2022-09-28 19:39:33 -07:00
onOpenSettings : PropTypes . func ,
} ;
2019-05-25 12:27:00 -07:00
2023-07-01 15:05:10 -07:00
isFirehoseActive = ( match , location ) => {
return match || location . pathname . startsWith ( '/public' ) ;
} ;
2022-09-28 19:39:33 -07:00
render ( ) {
2022-10-09 06:55:32 -07:00
const { intl , onOpenSettings } = this . props ;
2022-11-05 10:28:13 -07:00
const { signedIn , disabledAccountId } = this . context . identity ;
2019-08-06 08:57:52 -07:00
2022-09-28 19:39:33 -07:00
return (
< div className = 'navigation-panel' >
2023-07-13 08:18:09 -07:00
{ transientSingleColumn && (
2023-07-22 08:22:04 -07:00
< div className = 'navigation-panel__logo' >
2023-08-31 03:18:46 -07:00
< div class = 'switch-to-advanced' >
{ intl . formatMessage ( messages . openedInClassicInterface ) }
{ " " }
< a href = { ` /deck ${ location . pathname } ` } class = 'switch-to-advanced__toggle' >
{ intl . formatMessage ( messages . advancedInterface ) }
< / a >
< / div >
2023-07-13 08:18:09 -07:00
< hr / >
2023-07-22 08:22:04 -07:00
< / div >
2023-07-13 08:18:09 -07:00
) }
2022-09-28 19:39:33 -07:00
{ signedIn && (
2023-05-28 05:56:24 -07:00
< >
2022-10-09 06:55:32 -07:00
< ColumnLink transparent to = '/home' icon = 'home' text = { intl . formatMessage ( messages . home ) } / >
< ColumnLink transparent to = '/notifications' icon = { < NotificationsCounterIcon className = 'column-link__icon' / > } text = { intl . formatMessage ( messages . notifications ) } / >
< FollowRequestsColumnLink / >
2023-05-28 05:56:24 -07:00
< / >
2022-09-28 19:39:33 -07:00
) }
2019-05-25 12:27:00 -07:00
2023-07-08 11:00:12 -07:00
{ trendsEnabled ? (
2022-10-25 10:03:16 -07:00
< ColumnLink transparent to = '/explore' icon = 'hashtag' text = { intl . formatMessage ( messages . explore ) } / >
) : (
< ColumnLink transparent to = '/search' icon = 'search' text = { intl . formatMessage ( messages . search ) } / >
) }
2022-10-09 10:26:14 -07:00
{ ( signedIn || timelinePreview ) && (
2023-07-01 15:05:10 -07:00
< ColumnLink transparent to = '/public/local' isActive = { this . isFirehoseActive } icon = 'globe' text = { intl . formatMessage ( messages . firehose ) } / >
2022-10-08 18:49:51 -07:00
) }
2022-09-28 19:39:33 -07:00
{ ! signedIn && (
2022-10-04 11:13:23 -07:00
< div className = 'navigation-panel__sign-in-banner' >
2022-09-28 19:39:33 -07:00
< hr / >
2022-11-05 10:28:13 -07:00
{ disabledAccountId ? < DisabledAccountBanner / > : < SignInBanner / > }
2022-10-04 11:13:23 -07:00
< / div >
2022-09-28 19:39:33 -07:00
) }
{ signedIn && (
2023-05-28 05:56:24 -07:00
< >
2022-10-09 06:55:32 -07:00
< ColumnLink transparent to = '/conversations' icon = 'at' text = { intl . formatMessage ( messages . direct ) } / >
< ColumnLink transparent to = '/bookmarks' icon = 'bookmark' text = { intl . formatMessage ( messages . bookmarks ) } / >
2023-03-03 11:37:49 -08:00
< ColumnLink transparent to = '/favourites' icon = 'star' text = { intl . formatMessage ( messages . favourites ) } / >
2022-10-09 06:55:32 -07:00
< ColumnLink transparent to = '/lists' icon = 'list-ul' text = { intl . formatMessage ( messages . lists ) } / >
2022-09-28 19:39:33 -07:00
< ListPanel / >
< hr / >
2022-10-09 06:55:32 -07:00
{ ! ! preferencesLink && < ColumnLink transparent href = { preferencesLink } icon = 'cog' text = { intl . formatMessage ( messages . preferences ) } / > }
2022-11-01 01:38:55 -07:00
< ColumnLink transparent onClick = { onOpenSettings } icon = 'cogs' text = { intl . formatMessage ( messages . app _settings ) } / >
2023-05-28 05:56:24 -07:00
< / >
2022-09-28 19:39:33 -07:00
) }
2022-10-04 11:13:23 -07:00
< div className = 'navigation-panel__legal' >
< hr / >
2022-10-28 08:14:02 -07:00
< ColumnLink transparent to = '/about' icon = 'ellipsis-h' text = { intl . formatMessage ( messages . about ) } / >
2022-10-04 11:13:23 -07:00
< / div >
2022-10-19 02:30:59 -07:00
< NavigationPortal / >
2022-09-28 19:39:33 -07:00
< / div >
) ;
}
}
2023-03-24 15:15:25 -07:00
export default injectIntl ( NavigationPanel ) ;