2017-05-03 00:04:16 +00:00
import React from 'react' ;
2017-04-16 18:32:00 +00:00
import { connect } from 'react-redux' ;
2017-04-21 18:05:35 +00:00
import PropTypes from 'prop-types' ;
2017-04-16 18:32:00 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-06-05 08:09:14 +00:00
import classNames from 'classnames' ;
2017-04-16 18:32:00 +00:00
import Permalink from '../../../components/permalink' ;
2017-05-20 12:58:13 +00:00
import TransitionMotion from 'react-motion/lib/TransitionMotion' ;
import spring from 'react-motion/lib/spring' ;
2017-04-16 18:32:00 +00:00
import ComposeForm from '../../compose/components/compose_form' ;
import Search from '../../compose/components/search' ;
import NavigationBar from '../../compose/components/navigation_bar' ;
import ColumnHeader from './column_header' ;
import Immutable from 'immutable' ;
2017-05-19 18:58:12 +00:00
const noop = ( ) => { } ;
2017-04-16 18:32:00 +00:00
const messages = defineMessages ( {
home _title : { id : 'column.home' , defaultMessage : 'Home' } ,
notifications _title : { id : 'column.notifications' , defaultMessage : 'Notifications' } ,
local _title : { id : 'column.community' , defaultMessage : 'Local timeline' } ,
2017-05-20 15:31:47 +00:00
federated _title : { id : 'column.public' , defaultMessage : 'Federated timeline' } ,
2017-04-16 18:32:00 +00:00
} ) ;
const PageOne = ( { acct , domain } ) => (
< div className = 'onboarding-modal__page onboarding-modal__page-one' >
< div style = { { flex : '0 0 auto' } } >
< div className = 'onboarding-modal__page-one__elephant-friend' / >
< / d i v >
< div >
2017-06-21 17:02:02 +00:00
< h1 > < FormattedMessage id = 'onboarding.page_one.welcome' defaultMessage = 'Welcome to {domain}!' values = { { domain } } / > < / h 1 >
< p > < FormattedMessage id = 'onboarding.page_one.federation' defaultMessage = '{domain} is an "instance" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' values = { { domain } } / > < / p >
2017-06-06 11:20:07 +00:00
< p > < FormattedMessage id = 'onboarding.page_one.handle' defaultMessage = 'You are on {domain}, so your full handle is {handle}' values = { { domain , handle : < strong > { acct } @ { domain } < /strong> }} / > < / p >
2017-04-16 18:32:00 +00:00
< / d i v >
< / d i v >
) ;
PageOne . propTypes = {
2017-04-21 18:05:35 +00:00
acct : PropTypes . string . isRequired ,
2017-05-20 15:31:47 +00:00
domain : PropTypes . string . isRequired ,
2017-04-16 18:32:00 +00:00
} ;
2017-04-26 13:15:47 +00:00
const PageTwo = ( { me } ) => (
2017-04-16 18:32:00 +00:00
< div className = 'onboarding-modal__page onboarding-modal__page-two' >
< div className = 'figure non-interactive' >
2017-04-26 13:15:47 +00:00
< div className = 'pseudo-drawer' >
2017-04-20 16:20:40 +00:00
< NavigationBar account = { me } / >
2017-04-26 13:15:47 +00:00
< / d i v >
2017-04-16 18:32:00 +00:00
< ComposeForm
text = 'Awoo! #introductions'
suggestions = { Immutable . List ( ) }
mentionedDomains = { [ ] }
2017-04-20 11:22:54 +00:00
spoiler = { false }
2017-05-19 18:58:12 +00:00
onChange = { noop }
onSubmit = { noop }
onPaste = { noop }
onPickEmoji = { noop }
onChangeSpoilerText = { noop }
onClearSuggestions = { noop }
onFetchSuggestions = { noop }
onSuggestionSelected = { noop }
2017-06-05 08:09:14 +00:00
showSearch
2017-04-16 18:32:00 +00:00
/ >
< / d i v >
< p > < FormattedMessage id = 'onboarding.page_two.compose' defaultMessage = 'Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' / > < / p >
< / d i v >
) ;
2017-04-26 13:15:47 +00:00
PageTwo . propTypes = {
me : ImmutablePropTypes . map . isRequired ,
} ;
2017-06-23 14:05:04 +00:00
const PageThree = ( { me } ) => (
2017-04-16 18:32:00 +00:00
< div className = 'onboarding-modal__page onboarding-modal__page-three' >
< div className = 'figure non-interactive' >
< Search
value = ''
2017-05-19 18:58:12 +00:00
onChange = { noop }
onSubmit = { noop }
onClear = { noop }
onShow = { noop }
2017-04-16 18:32:00 +00:00
/ >
< div className = 'pseudo-drawer' >
< NavigationBar account = { me } / >
< / d i v >
< / d i v >
2017-06-06 11:20:07 +00:00
< p > < FormattedMessage id = 'onboarding.page_three.search' defaultMessage = 'Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values = { { illustration : < Permalink to = '/timelines/tag/illustration' href = '/tags/illustration' > # illustration < / P e r m a l i n k > , i n t r o d u c t i o n s : < P e r m a l i n k t o = ' / t i m e l i n e s / t a g / i n t r o d u c t i o n s ' h r e f = ' / t a g s / i n t r o d u c t i o n s ' > # i n t r o d u c t i o n s < / P e r m a l i n k > } } / > < / p >
2017-04-16 18:32:00 +00:00
< p > < FormattedMessage id = 'onboarding.page_three.profile' defaultMessage = 'Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' / > < / p >
< / d i v >
) ;
PageThree . propTypes = {
me : ImmutablePropTypes . map . isRequired ,
} ;
const PageFour = ( { domain , intl } ) => (
< div className = 'onboarding-modal__page onboarding-modal__page-four' >
< div className = 'onboarding-modal__page-four__columns' >
< div className = 'row' >
< div >
< div className = 'figure non-interactive' > < ColumnHeader icon = 'home' type = { intl . formatMessage ( messages . home _title ) } / > < / d i v >
2017-06-06 11:20:07 +00:00
< p > < FormattedMessage id = 'onboarding.page_four.home' defaultMessage = 'The home timeline shows posts from people you follow.' / > < / p >
2017-04-16 18:32:00 +00:00
< / d i v >
< div >
< div className = 'figure non-interactive' > < ColumnHeader icon = 'bell' type = { intl . formatMessage ( messages . notifications _title ) } / > < / d i v >
2017-04-20 16:20:40 +00:00
< p > < FormattedMessage id = 'onboarding.page_four.notifications' defaultMessage = 'The notifications column shows when someone interacts with you.' / > < / p >
2017-04-16 18:32:00 +00:00
< / d i v >
< / d i v >
< div className = 'row' >
< div >
2017-04-20 16:20:40 +00:00
< div className = 'figure non-interactive' style = { { marginBottom : 0 } } > < ColumnHeader icon = 'users' type = { intl . formatMessage ( messages . local _title ) } / > < / d i v >
2017-04-16 18:32:00 +00:00
< / d i v >
< div >
2017-04-20 16:20:40 +00:00
< div className = 'figure non-interactive' style = { { marginBottom : 0 } } > < ColumnHeader icon = 'globe' type = { intl . formatMessage ( messages . federated _title ) } / > < / d i v >
2017-04-16 18:32:00 +00:00
< / d i v >
< / d i v >
2017-04-20 16:20:40 +00:00
< p > < FormattedMessage id = 'onboarding.page_five.public_timelines' defaultMessage = 'The local timeline shows public posts from everyone on {domain}. The federated timeline shows public posts from everyone who people on {domain} follow. These are the Public Timelines, a great way to discover new people.' values = { { domain } } / > < / p >
2017-04-16 18:32:00 +00:00
< / d i v >
< / d i v >
) ;
PageFour . propTypes = {
2017-04-21 18:05:35 +00:00
domain : PropTypes . string . isRequired ,
2017-05-20 15:31:47 +00:00
intl : PropTypes . object . isRequired ,
2017-04-16 18:32:00 +00:00
} ;
2017-04-26 12:54:12 +00:00
const PageSix = ( { admin , domain } ) => {
2017-04-16 18:32:00 +00:00
let adminSection = '' ;
if ( admin ) {
adminSection = (
< p >
< FormattedMessage id = 'onboarding.page_six.admin' defaultMessage = "Your instance's admin is {admin}." values = { { admin : < Permalink href = { admin . get ( 'url' ) } to = { ` /accounts/ ${ admin . get ( 'id' ) } ` } > @ { admin . get ( 'acct' ) } < /Permalink> }} / >
< br / >
2017-06-06 11:20:07 +00:00
< FormattedMessage id = 'onboarding.page_six.read_guidelines' defaultMessage = "Please read {domain}'s {guidelines}!" values = { { domain , guidelines : < a href = '/about/more' target = '_blank' > < FormattedMessage id = 'onboarding.page_six.guidelines' defaultMessage = 'community guidelines' / > < /a> }} / >
2017-04-16 18:32:00 +00:00
< / p >
) ;
}
return (
< div className = 'onboarding-modal__page onboarding-modal__page-six' >
< h1 > < FormattedMessage id = 'onboarding.page_six.almost_done' defaultMessage = 'Almost done...' / > < / h 1 >
{ adminSection }
2017-06-21 17:02:02 +00:00
< p > < FormattedMessage id = 'onboarding.page_six.github' defaultMessage = '{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values = { { domain , fork : < a href = 'https://en.wikipedia.org/wiki/Fork_(software_development)' target = '_blank' rel = 'noopener' > fork < /a>, Mastodon: <a href='https:/ / github . com / tootsuite / mastodon ' target=' _blank ' rel=' noopener '>Mastodon</a>, github: <a href=' https : //github.com/glitch-soc/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
< p > < FormattedMessage id = 'onboarding.page_six.apps_available' defaultMessage = 'There are {apps} available for iOS, Android and other platforms.' values = { { domain , apps : < a href = 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target = '_blank' rel = 'noopener' > < FormattedMessage id = 'onboarding.page_six.various_app' defaultMessage = 'mobile apps' / > < /a> }} / > < / p >
2017-04-20 16:20:40 +00:00
< p > < em > < FormattedMessage id = 'onboarding.page_six.appetoot' defaultMessage = 'Bon Appetoot!' / > < / e m > < / p >
2017-04-16 18:32:00 +00:00
< / d i v >
) ;
} ;
2017-06-25 19:51:31 +00:00
2017-04-16 18:32:00 +00:00
PageSix . propTypes = {
2017-04-26 12:54:12 +00:00
admin : ImmutablePropTypes . map ,
2017-05-20 15:31:47 +00:00
domain : PropTypes . string . isRequired ,
2017-04-16 18:32:00 +00:00
} ;
const mapStateToProps = state => ( {
me : state . getIn ( [ 'accounts' , state . getIn ( [ 'meta' , 'me' ] ) ] ) ,
admin : state . getIn ( [ 'accounts' , state . getIn ( [ 'meta' , 'admin' ] ) ] ) ,
2017-05-20 15:31:47 +00:00
domain : state . getIn ( [ 'meta' , 'domain' ] ) ,
2017-04-16 18:32:00 +00:00
} ) ;
2017-06-23 17:36:54 +00:00
@ connect ( mapStateToProps )
@ injectIntl
export default class OnboardingModal extends React . PureComponent {
2017-04-16 18:32:00 +00:00
2017-05-12 12:44:10 +00:00
static propTypes = {
onClose : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
me : ImmutablePropTypes . map . isRequired ,
domain : PropTypes . string . isRequired ,
2017-05-20 15:31:47 +00:00
admin : ImmutablePropTypes . map ,
2017-05-12 12:44:10 +00:00
} ;
state = {
2017-05-20 15:31:47 +00:00
currentIndex : 0 ,
2017-05-12 12:44:10 +00:00
} ;
2017-06-05 08:09:14 +00:00
componentWillMount ( ) {
const { me , admin , domain , intl } = this . props ;
this . pages = [
< PageOne acct = { me . get ( 'acct' ) } domain = { domain } / > ,
< PageTwo me = { me } / > ,
2017-06-23 14:05:04 +00:00
< PageThree me = { me } / > ,
2017-06-05 08:09:14 +00:00
< PageFour domain = { domain } intl = { intl } / > ,
< PageSix admin = { admin } domain = { domain } / > ,
] ;
} ;
componentDidMount ( ) {
window . addEventListener ( 'keyup' , this . handleKeyUp ) ;
}
componentWillUnmount ( ) {
window . addEventListener ( 'keyup' , this . handleKeyUp ) ;
}
2017-05-12 12:44:10 +00:00
handleSkip = ( e ) => {
2017-04-16 18:32:00 +00:00
e . preventDefault ( ) ;
this . props . onClose ( ) ;
2017-04-21 18:05:35 +00:00
}
2017-04-16 18:32:00 +00:00
2017-05-19 18:58:12 +00:00
handleDot = ( e ) => {
const i = Number ( e . currentTarget . getAttribute ( 'data-index' ) ) ;
2017-04-16 18:32:00 +00:00
e . preventDefault ( ) ;
this . setState ( { currentIndex : i } ) ;
2017-04-21 18:05:35 +00:00
}
2017-04-16 18:32:00 +00:00
2017-06-05 08:09:14 +00:00
handlePrev = ( ) => {
this . setState ( ( { currentIndex } ) => ( {
currentIndex : Math . max ( 0 , currentIndex - 1 ) ,
} ) ) ;
}
2017-05-26 12:10:37 +00:00
handleNext = ( ) => {
2017-06-05 08:09:14 +00:00
const { pages } = this ;
2017-05-26 12:10:37 +00:00
this . setState ( ( { currentIndex } ) => ( {
2017-06-05 08:09:14 +00:00
currentIndex : Math . min ( currentIndex + 1 , pages . length - 1 ) ,
2017-05-26 12:10:37 +00:00
} ) ) ;
}
2017-04-16 18:32:00 +00:00
2017-06-05 08:09:14 +00:00
handleKeyUp = ( { key } ) => {
switch ( key ) {
case 'ArrowLeft' :
this . handlePrev ( ) ;
break ;
case 'ArrowRight' :
this . handleNext ( ) ;
break ;
}
}
2017-05-26 12:10:37 +00:00
handleClose = ( ) => {
this . props . onClose ( ) ;
2017-04-21 18:05:35 +00:00
}
2017-04-16 18:32:00 +00:00
render ( ) {
2017-06-05 08:09:14 +00:00
const { pages } = this ;
2017-04-16 18:32:00 +00:00
const { currentIndex } = this . state ;
const hasMore = currentIndex < pages . length - 1 ;
2017-05-26 12:10:37 +00:00
const nextOrDoneBtn = hasMore ? (
< button
onClick = { this . handleNext }
className = 'onboarding-modal__nav onboarding-modal__next'
>
< FormattedMessage id = 'onboarding.next' defaultMessage = 'Next' / >
< / b u t t o n >
) : (
< button
onClick = { this . handleClose }
className = 'onboarding-modal__nav onboarding-modal__done'
>
< FormattedMessage id = 'onboarding.done' defaultMessage = 'Done' / >
< / b u t t o n >
) ;
2017-04-16 18:32:00 +00:00
2017-06-05 08:09:14 +00:00
const styles = pages . map ( ( data , i ) => ( {
2017-04-20 11:22:54 +00:00
key : ` page- ${ i } ` ,
2017-06-05 08:09:14 +00:00
data ,
style : {
opacity : spring ( i === currentIndex ? 1 : 0 ) ,
} ,
2017-04-16 18:32:00 +00:00
} ) ) ;
return (
< div className = 'modal-root__modal onboarding-modal' >
< TransitionMotion styles = { styles } >
2017-06-05 08:09:14 +00:00
{ interpolatedStyles => (
2017-04-16 18:32:00 +00:00
< div className = 'onboarding-modal__pager' >
2017-06-05 08:09:14 +00:00
{ interpolatedStyles . map ( ( { key , data , style } , i ) => {
const className = classNames ( 'onboarding-modal__page__wrapper' , {
'onboarding-modal__page__wrapper--active' : i === currentIndex ,
} ) ;
return (
< div key = { key } style = { style } className = { className } > { data } < / d i v >
) ;
} ) }
2017-04-16 18:32:00 +00:00
< / d i v >
2017-06-05 08:09:14 +00:00
) }
2017-04-16 18:32:00 +00:00
< / T r a n s i t i o n M o t i o n >
< div className = 'onboarding-modal__paginator' >
< div >
2017-05-26 12:10:37 +00:00
< button
onClick = { this . handleSkip }
className = 'onboarding-modal__nav onboarding-modal__skip'
>
< FormattedMessage id = 'onboarding.skip' defaultMessage = 'Skip' / >
< / b u t t o n >
2017-04-16 18:32:00 +00:00
< / d i v >
< div className = 'onboarding-modal__dots' >
2017-06-05 08:09:14 +00:00
{ pages . map ( ( _ , i ) => {
const className = classNames ( 'onboarding-modal__dot' , {
active : i === currentIndex ,
} ) ;
return (
< div
key = { ` dot- ${ i } ` }
role = 'button'
tabIndex = '0'
data - index = { i }
onClick = { this . handleDot }
className = { className }
/ >
) ;
} ) }
2017-04-16 18:32:00 +00:00
< / d i v >
< div >
{ nextOrDoneBtn }
< / d i v >
< / d i v >
< / d i v >
) ;
}
2017-04-21 18:05:35 +00:00
}