2017-05-02 19:04:16 -05:00
import React from 'react' ;
2017-04-16 13:32:00 -05:00
import { connect } from 'react-redux' ;
2017-04-21 13:05:35 -05:00
import PropTypes from 'prop-types' ;
2017-04-16 13:32:00 -05:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-07-09 08:02:26 -05:00
import ReactSwipeableViews from 'react-swipeable-views' ;
2017-06-05 03:09:14 -05:00
import classNames from 'classnames' ;
2017-12-04 01:26:40 -06:00
import Permalink from 'flavours/glitch/components/permalink' ;
2017-12-27 16:28:41 -06:00
import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer' ;
2017-12-29 16:55:06 -06:00
import DrawerAccount from 'flavours/glitch/features/drawer/account' ;
2017-12-27 16:28:41 -06:00
import DrawerSearch from 'flavours/glitch/features/drawer/search' ;
2017-04-16 13:32:00 -05:00
import ColumnHeader from './column_header' ;
2017-12-04 01:26:40 -06:00
import { me } from 'flavours/glitch/util/initial_state' ;
2017-04-16 13:32:00 -05: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 10:31:47 -05:00
federated _title : { id : 'column.public' , defaultMessage : 'Federated timeline' } ,
2017-04-16 13:32:00 -05: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 12:02:02 -05: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-08-08 15:13:04 -05: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 13:32:00 -05:00
< / d i v >
< / d i v >
) ;
PageOne . propTypes = {
2017-04-21 13:05:35 -05:00
acct : PropTypes . string . isRequired ,
2017-05-20 10:31:47 -05:00
domain : PropTypes . string . isRequired ,
2017-04-16 13:32:00 -05:00
} ;
2017-12-27 16:28:41 -06:00
const PageTwo = ( { intl , myAccount } ) => (
2017-04-16 13:32:00 -05:00
< div className = 'onboarding-modal__page onboarding-modal__page-two' >
< div className = 'figure non-interactive' >
2017-04-26 08:15:47 -05:00
< div className = 'pseudo-drawer' >
2017-12-29 16:55:06 -06:00
< DrawerAccount account = { myAccount } / >
2017-12-27 16:28:41 -06:00
< RawComposer
intl = { intl }
2018-01-14 16:13:24 -06:00
privacy = 'public'
text = 'Awoo! #introductions'
2017-12-27 16:28:41 -06:00
/ >
2017-04-26 08:15:47 -05:00
< / d i v >
2017-04-16 13:32:00 -05: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 08:15:47 -05:00
PageTwo . propTypes = {
2017-12-27 16:28:41 -06:00
intl : PropTypes . object . isRequired ,
2017-10-30 21:27:48 -05:00
myAccount : ImmutablePropTypes . map . isRequired ,
2017-04-26 08:15:47 -05:00
} ;
2017-12-27 16:28:41 -06:00
const PageThree = ( { intl , myAccount } ) => (
2017-04-16 13:32:00 -05:00
< div className = 'onboarding-modal__page onboarding-modal__page-three' >
< div className = 'figure non-interactive' >
2017-12-27 16:28:41 -06:00
< DrawerSearch intl = { intl } / >
2017-04-16 13:32:00 -05:00
< div className = 'pseudo-drawer' >
2017-12-29 16:55:06 -06:00
< DrawerAccount account = { myAccount } / >
2017-04-16 13:32:00 -05:00
< / d i v >
< / d i v >
2017-06-06 06:20:07 -05: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 13:32:00 -05: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 = {
2017-12-27 16:28:41 -06:00
intl : PropTypes . object . isRequired ,
2017-10-30 21:27:48 -05:00
myAccount : ImmutablePropTypes . map . isRequired ,
2017-04-16 13:32:00 -05:00
} ;
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 06:20:07 -05:00
< p > < FormattedMessage id = 'onboarding.page_four.home' defaultMessage = 'The home timeline shows posts from people you follow.' / > < / p >
2017-04-16 13:32:00 -05: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 11:20:40 -05:00
< p > < FormattedMessage id = 'onboarding.page_four.notifications' defaultMessage = 'The notifications column shows when someone interacts with you.' / > < / p >
2017-04-16 13:32:00 -05:00
< / d i v >
< / d i v >
< div className = 'row' >
< div >
2017-04-20 11:20:40 -05:00
< div className = 'figure non-interactive' style = { { marginBottom : 0 } } > < ColumnHeader icon = 'users' type = { intl . formatMessage ( messages . local _title ) } / > < / d i v >
2017-04-16 13:32:00 -05:00
< / d i v >
< div >
2017-04-20 11:20:40 -05:00
< div className = 'figure non-interactive' style = { { marginBottom : 0 } } > < ColumnHeader icon = 'globe' type = { intl . formatMessage ( messages . federated _title ) } / > < / d i v >
2017-04-16 13:32:00 -05:00
< / d i v >
< / d i v >
2017-04-20 11:20:40 -05: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 13:32:00 -05:00
< / d i v >
< / d i v >
) ;
PageFour . propTypes = {
2017-04-21 13:05:35 -05:00
domain : PropTypes . string . isRequired ,
2017-05-20 10:31:47 -05:00
intl : PropTypes . object . isRequired ,
2017-04-16 13:32:00 -05:00
} ;
2017-04-26 07:54:12 -05:00
const PageSix = ( { admin , domain } ) => {
2017-04-16 13:32:00 -05: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 06:20:07 -05: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 13:32:00 -05: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 12:02:02 -05: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>
2018-10-07 13:51:50 -05:00
< 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://joinmastodon.org/apps' target = '_blank' rel = 'noopener' > < FormattedMessage id = 'onboarding.page_six.various_app' defaultMessage = 'mobile apps' / > < /a> }} / > < / p >
2017-04-20 11:20:40 -05:00
< p > < em > < FormattedMessage id = 'onboarding.page_six.appetoot' defaultMessage = 'Bon Appetoot!' / > < / e m > < / p >
2017-04-16 13:32:00 -05:00
< / d i v >
) ;
} ;
PageSix . propTypes = {
2017-04-26 07:54:12 -05:00
admin : ImmutablePropTypes . map ,
2017-05-20 10:31:47 -05:00
domain : PropTypes . string . isRequired ,
2017-04-16 13:32:00 -05:00
} ;
const mapStateToProps = state => ( {
2017-10-30 21:27:48 -05:00
myAccount : state . getIn ( [ 'accounts' , me ] ) ,
2017-04-16 13:32:00 -05:00
admin : state . getIn ( [ 'accounts' , state . getIn ( [ 'meta' , 'admin' ] ) ] ) ,
2017-05-20 10:31:47 -05:00
domain : state . getIn ( [ 'meta' , 'domain' ] ) ,
2017-04-16 13:32:00 -05:00
} ) ;
2017-06-23 12:36:54 -05:00
@ connect ( mapStateToProps )
@ injectIntl
export default class OnboardingModal extends React . PureComponent {
2017-04-16 13:32:00 -05:00
2017-05-12 07:44:10 -05:00
static propTypes = {
onClose : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
2017-10-30 21:27:48 -05:00
myAccount : ImmutablePropTypes . map . isRequired ,
2017-05-12 07:44:10 -05:00
domain : PropTypes . string . isRequired ,
2017-05-20 10:31:47 -05:00
admin : ImmutablePropTypes . map ,
2017-05-12 07:44:10 -05:00
} ;
state = {
2017-05-20 10:31:47 -05:00
currentIndex : 0 ,
2017-05-12 07:44:10 -05:00
} ;
2017-06-05 03:09:14 -05:00
componentWillMount ( ) {
2017-10-30 21:27:48 -05:00
const { myAccount , admin , domain , intl } = this . props ;
2017-06-05 03:09:14 -05:00
this . pages = [
2017-10-30 21:27:48 -05:00
< PageOne acct = { myAccount . get ( 'acct' ) } domain = { domain } / > ,
2017-12-27 16:28:41 -06:00
< PageTwo myAccount = { myAccount } intl = { intl } / > ,
< PageThree myAccount = { myAccount } intl = { intl } / > ,
2017-06-05 03:09:14 -05: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 07:44:10 -05:00
handleSkip = ( e ) => {
2017-04-16 13:32:00 -05:00
e . preventDefault ( ) ;
this . props . onClose ( ) ;
2017-04-21 13:05:35 -05:00
}
2017-04-16 13:32:00 -05:00
2017-05-19 13:58:12 -05:00
handleDot = ( e ) => {
const i = Number ( e . currentTarget . getAttribute ( 'data-index' ) ) ;
2017-04-16 13:32:00 -05:00
e . preventDefault ( ) ;
this . setState ( { currentIndex : i } ) ;
2017-04-21 13:05:35 -05:00
}
2017-04-16 13:32:00 -05:00
2017-06-05 03:09:14 -05:00
handlePrev = ( ) => {
this . setState ( ( { currentIndex } ) => ( {
currentIndex : Math . max ( 0 , currentIndex - 1 ) ,
} ) ) ;
}
2017-05-26 07:10:37 -05:00
handleNext = ( ) => {
2017-06-05 03:09:14 -05:00
const { pages } = this ;
2017-05-26 07:10:37 -05:00
this . setState ( ( { currentIndex } ) => ( {
2017-06-05 03:09:14 -05:00
currentIndex : Math . min ( currentIndex + 1 , pages . length - 1 ) ,
2017-05-26 07:10:37 -05:00
} ) ) ;
}
2017-04-16 13:32:00 -05:00
2017-07-09 08:02:26 -05:00
handleSwipe = ( index ) => {
this . setState ( { currentIndex : index } ) ;
}
2017-06-05 03:09:14 -05:00
handleKeyUp = ( { key } ) => {
switch ( key ) {
case 'ArrowLeft' :
this . handlePrev ( ) ;
break ;
case 'ArrowRight' :
this . handleNext ( ) ;
break ;
}
}
2017-05-26 07:10:37 -05:00
handleClose = ( ) => {
this . props . onClose ( ) ;
2017-04-21 13:05:35 -05:00
}
2017-04-16 13:32:00 -05:00
render ( ) {
2017-06-05 03:09:14 -05:00
const { pages } = this ;
2017-04-16 13:32:00 -05:00
const { currentIndex } = this . state ;
const hasMore = currentIndex < pages . length - 1 ;
2017-05-26 07:10:37 -05: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 13:32:00 -05:00
return (
< div className = 'modal-root__modal onboarding-modal' >
2017-07-09 08:02:26 -05:00
< ReactSwipeableViews index = { currentIndex } onChangeIndex = { this . handleSwipe } className = 'onboarding-modal__pager' >
{ pages . map ( ( page , i ) => {
const className = classNames ( 'onboarding-modal__page__wrapper' , {
'onboarding-modal__page__wrapper--active' : i === currentIndex ,
} ) ;
return (
< div key = { i } className = { className } > { page } < / d i v >
) ;
} ) }
< / R e a c t S w i p e a b l e V i e w s >
2017-04-16 13:32:00 -05:00
< div className = 'onboarding-modal__paginator' >
< div >
2017-05-26 07:10:37 -05: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 13:32:00 -05:00
< / d i v >
< div className = 'onboarding-modal__dots' >
2017-06-05 03:09:14 -05: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 13:32:00 -05:00
< / d i v >
< div >
{ nextOrDoneBtn }
< / d i v >
< / d i v >
< / d i v >
) ;
}
2017-04-21 13:05:35 -05:00
}