@ -10,38 +10,41 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from '../../initial_state' ;
import { fetchFollowRequests } from '../../actions/accounts' ;
import { List as ImmutableList } from 'immutable' ;
import { Link } from 'react-router-dom' ;
import { fetchTrends } from '../../actions/trends' ;
import Hashtag from '../../components/hashtag' ;
import NavigationBar from '../compose/components/navigation_bar' ;
const messages = defineMessages ( {
heading : { id : 'getting_started.heading' , defaultMessage : 'Getting started' } ,
home _timeline : { id : 'tabs_bar.home' , defaultMessage : 'Home' } ,
notifications : { id : 'tabs_bar.notifications' , defaultMessage : 'Notifications' } ,
public _timeline : { id : 'navigation_bar.public_timeline' , defaultMessage : 'Federated timeline' } ,
navigation _subheading : { id : 'column_subheading.navigation' , defaultMessage : 'Navigation' } ,
settings _subheading : { id : 'column_subheading.settings' , defaultMessage : 'Settings' } ,
community _timeline : { id : 'navigation_bar.community_timeline' , defaultMessage : 'Local timeline' } ,
direct : { id : 'navigation_bar.direct' , defaultMessage : 'Direct messages' } ,
preferences : { id : 'navigation_bar.preferences' , defaultMessage : 'Preferences' } ,
follow _requests : { id : 'navigation_bar.follow_requests' , defaultMessage : 'Follow requests' } ,
sign _out : { id : 'navigation_bar.logout' , defaultMessage : 'Logout' } ,
favourites : { id : 'navigation_bar.favourites' , defaultMessage : 'Favourites' } ,
blocks : { id : 'navigation_bar.blocks' , defaultMessage : 'Blocked users' } ,
domain _blocks : { id : 'navigation_bar.domain_blocks' , defaultMessage : 'Hidden domains' } ,
mutes : { id : 'navigation_bar.mutes' , defaultMessage : 'Muted users' } ,
info : { id : 'navigation_bar.info' , defaultMessage : 'Extended information' } ,
pins : { id : 'navigation_bar.pins' , defaultMessage : 'Pinned toots' } ,
lists : { id : 'navigation_bar.lists' , defaultMessage : 'Lists' } ,
keyboard _shortcuts : { id : 'navigation_bar.keyboard_shortcuts' , defaultMessage : 'Keyboard shortcuts' } ,
refresh _trends : { id : 'trends.refresh' , defaultMessage : 'Refresh' } ,
discover : { id : 'navigation_bar.discover' , defaultMessage : 'Discover' } ,
personal : { id : 'navigation_bar.personal' , defaultMessage : 'Personal' } ,
security : { id : 'navigation_bar.security' , defaultMessage : 'Security' } ,
} ) ;
const mapStateToProps = state => ( {
myAccount : state . getIn ( [ 'accounts' , me ] ) ,
columns : state . getIn ( [ 'settings' , 'columns' ] ) ,
unreadFollowRequests : state . getIn ( [ 'user_lists' , 'follow_requests' , 'items' ] , ImmutableList ( ) ) . size ,
unreadNotifications: state . getIn ( [ 'notifications' , 'unread' ] ) ,
trends: state . get ( 'trends' ) ,
} ) ;
const mapDispatchToProps = dispatch => ( {
fetchFollowRequests : ( ) => dispatch ( fetchFollowRequests ( ) ) ,
fetchTrends : ( ) => dispatch ( fetchTrends ( ) ) ,
} ) ;
const badgeDisplay = ( number , limit ) => {
@ -66,6 +69,7 @@ export default class GettingStarted extends ImmutablePureComponent {
fetchFollowRequests : PropTypes . func . isRequired ,
unreadFollowRequests : PropTypes . number ,
unreadNotifications : PropTypes . number ,
trends : ImmutablePropTypes . list ,
} ;
componentDidMount ( ) {
@ -74,36 +78,26 @@ export default class GettingStarted extends ImmutablePureComponent {
if ( myAccount . get ( 'locked' ) ) {
fetchFollowRequests ( ) ;
}
setTimeout ( ( ) => this . props . fetchTrends ( ) , 5000 ) ;
}
render ( ) {
const { intl , myAccount , columns, multiColumn, unreadFollowRequests , unreadNotification s } = this . props ;
const { intl , myAccount , multiColumn, unreadFollowRequests , trend s } = this . props ;
const navItems = [ ] ;
if ( multiColumn ) {
if ( ! columns . find ( item => item . get ( 'id' ) === 'HOME' ) ) {
navItems . push ( < ColumnLink key = '0' icon = 'home' text = { intl . formatMessage ( messages . home _timeline ) } to = '/timelines/home' / > ) ;
}
if ( ! columns . find ( item => item . get ( 'id' ) === 'NOTIFICATIONS' ) ) {
navItems . push ( < ColumnLink key = '1' icon = 'bell' text = { intl . formatMessage ( messages . notifications ) } badge = { badgeDisplay ( unreadNotifications ) } to = '/notifications' / > ) ;
}
if ( ! columns . find ( item => item . get ( 'id' ) === 'COMMUNITY' ) ) {
navItems . push ( < ColumnLink key = '2' icon = 'users' text = { intl . formatMessage ( messages . community _timeline ) } to = '/timelines/public/local' / > ) ;
}
if ( ! columns . find ( item => item . get ( 'id' ) === 'PUBLIC' ) ) {
navItems . push ( < ColumnLink key = '3' icon = 'globe' text = { intl . formatMessage ( messages . public _timeline ) } to = '/timelines/public' / > ) ;
}
}
if ( ! multiColumn || ! columns . find ( item => item . get ( 'id' ) === 'DIRECT' ) ) {
navItems . push ( < ColumnLink key = '4' icon = 'envelope' text = { intl . formatMessage ( messages . direct ) } to = '/timelines/direct' / > ) ;
navItems . push (
< ColumnSubheading key = '1' text = { intl . formatMessage ( messages . discover ) } / > ,
< ColumnLink key = '2' icon = 'users' text = { intl . formatMessage ( messages . community _timeline ) } to = '/timelines/public/local' / > ,
< ColumnLink key = '3' icon = 'globe' text = { intl . formatMessage ( messages . public _timeline ) } to = '/timelines/public' / > ,
< ColumnSubheading key = '8' text = { intl . formatMessage ( messages . personal ) } / >
) ;
}
navItems . push (
< ColumnLink key = '4' icon = 'envelope' text = { intl . formatMessage ( messages . direct ) } to = '/timelines/direct' / > ,
< ColumnLink key = '5' icon = 'star' text = { intl . formatMessage ( messages . favourites ) } to = '/favourites' / > ,
< ColumnLink key = '6' icon = 'bars' text = { intl . formatMessage ( messages . lists ) } to = '/lists' / >
) ;
@ -112,30 +106,57 @@ export default class GettingStarted extends ImmutablePureComponent {
navItems . push ( < ColumnLink key = '7' icon = 'users' text = { intl . formatMessage ( messages . follow _requests ) } badge = { badgeDisplay ( unreadFollowRequests , 40 ) } to = '/follow_requests' / > ) ;
}
if ( multiColumn ) {
navItems . push ( < ColumnLink key = '8' icon = 'question' text = { intl . formatMessage ( messages . keyboard _shortcuts ) } to = '/keyboard-shortcuts' / > ) ;
if ( ! multiColumn ) {
navItems . push (
< ColumnSubheading key = '9' text = { intl . formatMessage ( messages . settings _subheading ) } / > ,
< ColumnLink key = '6' icon = 'gears' text = { intl . formatMessage ( messages . preferences ) } href = '/settings/preferences' / > ,
< ColumnLink key = '6' icon = 'lock' text = { intl . formatMessage ( messages . security ) } href = '/auth/edit' / >
) ;
}
navItems . push ( < ColumnLink key = '9' icon = 'book' text = { intl . formatMessage ( messages . info ) } href = '/about/more' / > ) ;
return (
< Column icon = 'asterisk' heading = { intl . formatMessage ( messages . heading ) } hideHeadingOnMobile >
< Column >
{ multiColumn && < div className = 'column-header__wrapper' >
< h1 className = 'column-header' >
< button >
< i className = 'fa fa-bars fa-fw column-header__icon' / >
< FormattedMessage id = 'getting_started.heading' defaultMessage = 'Getting started' / >
< / b u t t o n >
< / h 1 >
< / d i v > }
< div className = 'getting-started__wrapper' >
< ColumnSubheading text = { intl . formatMessage ( messages . navigation _subheading ) } / >
{ ! multiColumn && < NavigationBar account = { myAccount } / > }
{ navItems }
< ColumnSubheading text = { intl . formatMessage ( messages . settings _subheading ) } / >
< ColumnLink icon = 'thumb-tack' text = { intl . formatMessage ( messages . pins ) } to = '/pinned' / >
< ColumnLink icon = 'volume-off' text = { intl . formatMessage ( messages . mutes ) } to = '/mutes' / >
< ColumnLink icon = 'ban' text = { intl . formatMessage ( messages . blocks ) } to = '/blocks' / >
< ColumnLink icon = 'minus-circle' text = { intl . formatMessage ( messages . domain _blocks ) } to = '/domain_blocks' / >
< ColumnLink icon = 'cog' text = { intl . formatMessage ( messages . preferences ) } href = '/settings/preferences' / >
< ColumnLink icon = 'sign-out' text = { intl . formatMessage ( messages . sign _out ) } href = '/auth/sign_out' method = 'delete' / >
< / d i v >
< div className = 'static-content getting-started' >
< p >
< a href = 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel = 'noopener' target = '_blank' > < FormattedMessage id = 'getting_started.faq' defaultMessage = 'FAQ' / > < /a> • <a href='https:/ / github . com / tootsuite / documentation / blob / master / Using - Mastodon / User - guide . md ' rel=' noopener ' target=' _blank '><FormattedMessage id=' getting _started . userguide ' defaultMessage=' User Guide ' /></a> • <a href=' https : //github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a>
< / p >
{ multiColumn && trends && < div className = 'getting-started__trends' >
< div className = 'column-header__wrapper' >
< h1 className = 'column-header' >
< button >
< i className = 'fa fa-fire fa-fw' / >
< FormattedMessage id = 'trends.header' defaultMessage = 'Trending now' / >
< / b u t t o n >
< div className = 'column-header__buttons' >
< button className = 'column-header__button' title = { intl . formatMessage ( messages . refresh _trends ) } aria - label = { intl . formatMessage ( messages . refresh _trends ) } > < i className = 'fa fa-refresh' / > < / b u t t o n >
< / d i v >
< / h 1 >
< / d i v >
< div className = 'getting-started__scrollable' > { trends . take ( 3 ) . map ( hashtag => < Hashtag key = { hashtag . get ( 'name' ) } hashtag = { hashtag } / > ) } < / d i v >
< / d i v > }
{ ! multiColumn && < div className = 'flex-spacer' / > }
< div className = 'getting-started getting-started__footer' >
< ul >
{ multiColumn && < li > < Link to = '/keyboard-shortcuts' > < FormattedMessage id = 'navigation_bar.keyboard_shortcuts' defaultMessage = 'Hotkeys' / > < / L i n k > · < / l i > }
< li > < a href = '/about/more' target = '_blank' > < FormattedMessage id = 'navigation_bar.info' defaultMessage = 'About this instance' / > < / a > · < / l i >
< li > < a href = '/terms' target = '_blank' > < FormattedMessage id = 'getting_started.terms' defaultMessage = 'Terms of service' / > < / a > · < / l i >
< li > < a href = 'https://github.com/tootsuite/documentation#documentation' target = '_blank' > < FormattedMessage id = 'getting_started.documentation' defaultMessage = 'Documentation' / > < / a > · < / l i >
< li > < a href = '/auth/sign_out' data - method = 'delete' > < FormattedMessage id = 'navigation_bar.logout' defaultMessage = 'Logout' / > < / a > < / l i >
< / u l >
< p >
< FormattedMessage
id = 'getting_started.open_source_notice'