2022-10-05 01:47:56 +00:00
import PropTypes from 'prop-types' ;
2023-05-23 08:52:27 +00:00
import { PureComponent } from 'react' ;
2023-05-23 15:15:17 +00:00
2022-10-09 01:49:51 +00:00
import { FormattedMessage , defineMessages , injectIntl } from 'react-intl' ;
2023-05-23 15:15:17 +00:00
import { Link } from 'react-router-dom' ;
2022-10-05 01:47:56 +00:00
import { connect } from 'react-redux' ;
2023-05-23 15:15:17 +00:00
2022-10-09 01:49:51 +00:00
import { fetchServer } from 'mastodon/actions/server' ;
2023-05-23 15:15:17 +00:00
import { ServerHeroImage } from 'mastodon/components/server_hero_image' ;
2023-07-08 09:11:58 +00:00
import { ShortNumber } from 'mastodon/components/short_number' ;
2023-05-23 06:58:08 +00:00
import { Skeleton } from 'mastodon/components/skeleton' ;
2022-10-09 01:49:51 +00:00
import Account from 'mastodon/containers/account_container' ;
import { domain } from 'mastodon/initial_state' ;
2022-10-05 01:47:56 +00:00
const messages = defineMessages ( {
aboutActiveUsers : { id : 'server_banner.about_active_users' , defaultMessage : 'People using this server during the last 30 days (Monthly Active Users)' } ,
} ) ;
const mapStateToProps = state => ( {
2022-10-13 12:42:37 +00:00
server : state . getIn ( [ 'server' , 'server' ] ) ,
2022-10-05 01:47:56 +00:00
} ) ;
2023-05-23 08:52:27 +00:00
class ServerBanner extends PureComponent {
2022-10-05 01:47:56 +00:00
static propTypes = {
server : PropTypes . object ,
dispatch : PropTypes . func ,
intl : PropTypes . object ,
} ;
componentDidMount ( ) {
const { dispatch } = this . props ;
dispatch ( fetchServer ( ) ) ;
}
render ( ) {
const { server , intl } = this . props ;
const isLoading = server . get ( 'isLoading' ) ;
return (
< div className = 'server-banner' >
< div className = 'server-banner__introduction' >
2024-06-14 13:04:20 +00:00
< FormattedMessage id = 'server_banner.is_one_of_many' defaultMessage = '{domain} is one of the many independent Mastodon servers you can use to participate in the fediverse.' values = { { domain : < strong > { domain } < / strong > , mastodon : < a href = 'https://joinmastodon.org' target = '_blank' > Mastodon < / a > } } / >
2022-10-05 01:47:56 +00:00
< / div >
2024-06-14 13:04:20 +00:00
< Link to = '/about' >
< ServerHeroImage blurhash = { server . getIn ( [ 'thumbnail' , 'blurhash' ] ) } src = { server . getIn ( [ 'thumbnail' , 'url' ] ) } className = 'server-banner__hero' / >
< / Link >
2022-10-05 01:47:56 +00:00
< div className = 'server-banner__description' >
{ isLoading ? (
< >
< Skeleton width = '100%' / >
< br / >
< Skeleton width = '100%' / >
< br / >
< Skeleton width = '70%' / >
< / >
) : server . get ( 'description' ) }
< / div >
< div className = 'server-banner__meta' >
< div className = 'server-banner__meta__column' >
< h4 > < FormattedMessage id = 'server_banner.administered_by' defaultMessage = 'Administered by:' / > < / h4 >
2023-04-01 07:27:23 +00:00
< Account id = { server . getIn ( [ 'contact' , 'account' , 'id' ] ) } size = { 36 } minimal / >
2022-10-05 01:47:56 +00:00
< / div >
< div className = 'server-banner__meta__column' >
< h4 > < FormattedMessage id = 'server_banner.server_stats' defaultMessage = 'Server stats:' / > < / h4 >
{ isLoading ? (
< >
< strong className = 'server-banner__number' > < Skeleton width = '10ch' / > < / strong >
< br / >
< span className = 'server-banner__number-label' > < Skeleton width = '5ch' / > < / span >
< / >
) : (
< >
< strong className = 'server-banner__number' > < ShortNumber value = { server . getIn ( [ 'usage' , 'users' , 'active_month' ] ) } / > < / strong >
< br / >
< span className = 'server-banner__number-label' title = { intl . formatMessage ( messages . aboutActiveUsers ) } > < FormattedMessage id = 'server_banner.active_users' defaultMessage = 'active users' / > < / span >
< / >
) }
< / div >
< / div >
< / div >
) ;
}
}
2023-03-24 02:17:53 +00:00
export default connect ( mapStateToProps ) ( injectIntl ( ServerBanner ) ) ;