2017-05-03 03:04:16 +03:00
import React from 'react' ;
import Column from '../ui/components/column' ;
import ColumnLink from '../ui/components/column_link' ;
import ColumnSubheading from '../ui/components/column_subheading' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import { connect } from 'react-redux' ;
import PropTypes from 'prop-types' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2018-07-14 04:56:34 +03:00
import { me , invitesEnabled , version } from '../../initial_state' ;
2018-01-21 14:20:20 +02:00
import { fetchFollowRequests } from '../../actions/accounts' ;
import { List as ImmutableList } from 'immutable' ;
2018-05-30 19:41:47 +03:00
import { Link } from 'react-router-dom' ;
import NavigationBar from '../compose/components/navigation_bar' ;
2017-05-03 03:04:16 +03:00
const messages = defineMessages ( {
2017-06-04 02:39:38 +03:00
home _timeline : { id : 'tabs_bar.home' , defaultMessage : 'Home' } ,
notifications : { id : 'tabs_bar.notifications' , defaultMessage : 'Notifications' } ,
2017-05-03 03:04:16 +03:00
public _timeline : { id : 'navigation_bar.public_timeline' , defaultMessage : 'Federated timeline' } ,
2017-06-01 18:25:10 +03:00
settings _subheading : { id : 'column_subheading.settings' , defaultMessage : 'Settings' } ,
2017-05-03 03:04:16 +03:00
community _timeline : { id : 'navigation_bar.community_timeline' , defaultMessage : 'Local timeline' } ,
2018-04-18 14:09:06 +03:00
direct : { id : 'navigation_bar.direct' , defaultMessage : 'Direct messages' } ,
2017-05-03 03:04:16 +03:00
preferences : { id : 'navigation_bar.preferences' , defaultMessage : 'Preferences' } ,
follow _requests : { id : 'navigation_bar.follow_requests' , defaultMessage : 'Follow requests' } ,
favourites : { id : 'navigation_bar.favourites' , defaultMessage : 'Favourites' } ,
blocks : { id : 'navigation_bar.blocks' , defaultMessage : 'Blocked users' } ,
2018-03-30 13:38:00 +03:00
domain _blocks : { id : 'navigation_bar.domain_blocks' , defaultMessage : 'Hidden domains' } ,
2017-05-03 03:04:16 +03:00
mutes : { id : 'navigation_bar.mutes' , defaultMessage : 'Muted users' } ,
2017-09-07 10:58:11 +03:00
pins : { id : 'navigation_bar.pins' , defaultMessage : 'Pinned toots' } ,
2017-12-06 00:02:27 +02:00
lists : { id : 'navigation_bar.lists' , defaultMessage : 'Lists' } ,
2018-05-30 19:41:47 +03:00
discover : { id : 'navigation_bar.discover' , defaultMessage : 'Discover' } ,
personal : { id : 'navigation_bar.personal' , defaultMessage : 'Personal' } ,
security : { id : 'navigation_bar.security' , defaultMessage : 'Security' } ,
2017-05-03 03:04:16 +03:00
} ) ;
const mapStateToProps = state => ( {
2017-10-31 04:27:48 +02:00
myAccount : state . getIn ( [ 'accounts' , me ] ) ,
2018-01-21 14:20:20 +02:00
unreadFollowRequests : state . getIn ( [ 'user_lists' , 'follow_requests' , 'items' ] , ImmutableList ( ) ) . size ,
2017-05-03 03:04:16 +03:00
} ) ;
2018-01-21 14:20:20 +02:00
const mapDispatchToProps = dispatch => ( {
fetchFollowRequests : ( ) => dispatch ( fetchFollowRequests ( ) ) ,
} ) ;
const badgeDisplay = ( number , limit ) => {
if ( number === 0 ) {
return undefined ;
} else if ( limit && number >= limit ) {
return ` ${ limit } + ` ;
} else {
return number ;
}
} ;
@ connect ( mapStateToProps , mapDispatchToProps )
2017-06-23 20:36:54 +03:00
@ injectIntl
export default class GettingStarted extends ImmutablePureComponent {
2017-05-03 03:04:16 +03:00
2017-05-12 15:44:10 +03:00
static propTypes = {
intl : PropTypes . object . isRequired ,
2017-10-31 04:27:48 +02:00
myAccount : ImmutablePropTypes . map . isRequired ,
2017-06-04 02:39:38 +03:00
columns : ImmutablePropTypes . list ,
multiColumn : PropTypes . bool ,
2018-01-21 14:20:20 +02:00
fetchFollowRequests : PropTypes . func . isRequired ,
unreadFollowRequests : PropTypes . number ,
unreadNotifications : PropTypes . number ,
2017-05-12 15:44:10 +03:00
} ;
2018-01-21 14:20:20 +02:00
componentDidMount ( ) {
const { myAccount , fetchFollowRequests } = this . props ;
if ( myAccount . get ( 'locked' ) ) {
fetchFollowRequests ( ) ;
}
2018-05-31 17:46:02 +03:00
}
2017-05-03 03:04:16 +03:00
render ( ) {
2018-06-01 15:22:42 +03:00
const { intl , myAccount , multiColumn , unreadFollowRequests } = this . props ;
2017-05-03 03:04:16 +03:00
2018-01-02 06:28:49 +02:00
const navItems = [ ] ;
2018-06-01 15:02:49 +03:00
let i = 1 ;
2018-06-20 16:22:07 +03:00
let height = ( multiColumn ) ? 0 : 60 ;
2017-06-04 02:39:38 +03:00
if ( multiColumn ) {
2018-05-30 19:41:47 +03:00
navItems . push (
2018-06-01 15:02:49 +03:00
< ColumnSubheading key = { i ++ } text = { intl . formatMessage ( messages . discover ) } / > ,
< ColumnLink key = { i ++ } icon = 'users' text = { intl . formatMessage ( messages . community _timeline ) } to = '/timelines/public/local' / > ,
< ColumnLink key = { i ++ } icon = 'globe' text = { intl . formatMessage ( messages . public _timeline ) } to = '/timelines/public' / > ,
< ColumnSubheading key = { i ++ } text = { intl . formatMessage ( messages . personal ) } / >
2018-05-30 19:41:47 +03:00
) ;
2018-06-01 20:18:37 +03:00
height += 34 * 2 + 48 * 2 ;
2018-04-18 14:09:06 +03:00
}
2018-01-02 06:28:49 +02:00
navItems . push (
2018-06-01 15:02:49 +03:00
< ColumnLink key = { i ++ } icon = 'envelope' text = { intl . formatMessage ( messages . direct ) } to = '/timelines/direct' / > ,
< ColumnLink key = { i ++ } icon = 'star' text = { intl . formatMessage ( messages . favourites ) } to = '/favourites' / > ,
2018-06-18 16:33:11 +03:00
< ColumnLink key = { i ++ } icon = 'list-ul' text = { intl . formatMessage ( messages . lists ) } to = '/lists' / >
2018-01-02 06:28:49 +02:00
) ;
2017-05-03 03:04:16 +03:00
2018-06-01 20:18:37 +03:00
height += 48 * 3 ;
2017-10-31 04:27:48 +02:00
if ( myAccount . get ( 'locked' ) ) {
2018-06-01 15:02:49 +03:00
navItems . push ( < ColumnLink key = { i ++ } icon = 'users' text = { intl . formatMessage ( messages . follow _requests ) } badge = { badgeDisplay ( unreadFollowRequests , 40 ) } to = '/follow_requests' / > ) ;
2018-06-01 20:18:37 +03:00
height += 48 ;
2017-05-03 03:04:16 +03:00
}
2018-05-30 19:41:47 +03:00
if ( ! multiColumn ) {
navItems . push (
2018-06-01 15:02:49 +03:00
< ColumnSubheading key = { i ++ } text = { intl . formatMessage ( messages . settings _subheading ) } / > ,
< ColumnLink key = { i ++ } icon = 'gears' text = { intl . formatMessage ( messages . preferences ) } href = '/settings/preferences' / > ,
2018-05-30 19:41:47 +03:00
) ;
2018-06-01 20:18:37 +03:00
2018-06-20 16:22:07 +03:00
height += 34 + 48 ;
2017-12-24 05:47:02 +02:00
}
2017-05-03 03:04:16 +03:00
return (
2018-05-30 19:41:47 +03:00
< 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 > }
2018-06-01 20:18:37 +03:00
< div className = 'getting-started__wrapper' style = { { height } } >
2018-05-30 19:41:47 +03:00
{ ! multiColumn && < NavigationBar account = { myAccount } / > }
2017-06-04 02:39:38 +03:00
{ navItems }
2017-05-03 03:04:16 +03:00
< / d i v >
2018-05-30 19:41:47 +03:00
{ ! multiColumn && < div className = 'flex-spacer' / > }
< div className = 'getting-started getting-started__footer' >
< ul >
2018-06-15 16:51:37 +03:00
< li > < a href = 'https://bridge.joinmastodon.org/' target = '_blank' > < FormattedMessage id = 'getting_started.find_friends' defaultMessage = 'Find friends from Twitter' / > < / a > · < / l i >
{ invitesEnabled && < li > < a href = '/invites' target = '_blank' > < FormattedMessage id = 'getting_started.invite' defaultMessage = 'Invite people' / > < / a > · < / l i > }
2018-05-30 19:41:47 +03:00
{ multiColumn && < li > < Link to = '/keyboard-shortcuts' > < FormattedMessage id = 'navigation_bar.keyboard_shortcuts' defaultMessage = 'Hotkeys' / > < / L i n k > · < / l i > }
2018-06-15 16:51:37 +03:00
< li > < a href = '/auth/edit' > < FormattedMessage id = 'getting_started.security' defaultMessage = 'Security' / > < / a > · < / l i >
2018-05-30 19:41:47 +03:00
< li > < a href = '/about/more' target = '_blank' > < FormattedMessage id = 'navigation_bar.info' defaultMessage = 'About this instance' / > < / a > · < / l i >
2018-08-19 02:17:44 +03:00
< li > < a href = 'https://joinmastodon.org/apps' target = '_blank' > < FormattedMessage id = 'navigation_bar.apps' defaultMessage = 'Mobile apps' / > < / a > · < / l i >
2018-05-30 19:41:47 +03:00
< li > < a href = '/terms' target = '_blank' > < FormattedMessage id = 'getting_started.terms' defaultMessage = 'Terms of service' / > < / a > · < / l i >
2018-06-15 16:51:37 +03:00
< li > < a href = '/settings/applications' target = '_blank' > < FormattedMessage id = 'getting_started.developers' defaultMessage = 'Developers' / > < / a > · < / l i >
2018-05-30 19:41:47 +03:00
< 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 >
2017-12-27 04:31:30 +02:00
< p >
< FormattedMessage
id = 'getting_started.open_source_notice'
defaultMessage = 'Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
2018-07-14 04:56:34 +03:00
values = { { github : < span > < a href = 'https://github.com/tootsuite/mastodon' rel = 'noopener' target = '_blank' > tootsuite / mastodon < / a > ( v { v e r s i o n } ) < / s p a n > } }
2017-12-27 04:31:30 +02:00
/ >
< / p >
2017-05-03 03:04:16 +03:00
< / d i v >
< / C o l u m n >
) ;
}
2017-05-20 18:31:47 +03:00
2017-05-03 03:04:16 +03:00
}