2022-10-05 03:47:56 +02:00
import PropTypes from 'prop-types' ;
2022-10-09 03:49:51 +02:00
import React from 'react' ;
import { FormattedMessage , defineMessages , injectIntl } from 'react-intl' ;
2022-10-05 03:47:56 +02:00
import { connect } from 'react-redux' ;
2022-10-09 03:49:51 +02:00
import { fetchServer } from 'flavours/glitch/actions/server' ;
2022-10-05 03:47:56 +02:00
import ShortNumber from 'flavours/glitch/components/short_number' ;
2023-05-23 08:58:08 +02:00
import { Skeleton } from 'flavours/glitch/components/skeleton' ;
2022-10-09 03:49:51 +02:00
import Account from 'flavours/glitch/containers/account_container' ;
import { domain } from 'flavours/glitch/initial_state' ;
2023-05-09 23:08:28 +02:00
import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image' ;
2022-10-13 14:42:37 +02:00
import { Link } from 'react-router-dom' ;
2022-10-05 03:47:56 +02: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 14:42:37 +02:00
server : state . getIn ( [ 'server' , 'server' ] ) ,
2022-10-05 03:47:56 +02:00
} ) ;
class ServerBanner extends React . PureComponent {
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' >
< FormattedMessage id = 'server_banner.introduction' defaultMessage = '{domain} is part of the decentralized social network powered by {mastodon}.' values = { { domain : < strong > { domain } < / strong > , mastodon : < a href = 'https://joinmastodon.org' target = '_blank' > Mastodon < / a > } } / >
< / div >
2023-05-09 23:08:28 +02:00
< ServerHeroImage blurhash = { server . getIn ( [ 'thumbnail' , 'blurhash' ] ) } src = { server . getIn ( [ 'thumbnail' , 'url' ] ) } className = 'server-banner__hero' / >
2022-10-05 03:47:56 +02: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 >
2022-10-31 13:06:17 +01:00
< Account id = { server . getIn ( [ 'contact' , 'account' , 'id' ] ) } size = { 36 } / >
2022-10-05 03:47:56 +02: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 >
< hr className = 'spacer' / >
2022-10-13 14:42:37 +02:00
< Link className = 'button button--block button-secondary' to = '/about' > < FormattedMessage id = 'server_banner.learn_more' defaultMessage = 'Learn more' / > < / Link >
2022-10-05 03:47:56 +02:00
< / div >
) ;
}
}
2023-03-24 23:15:25 +01:00
export default connect ( mapStateToProps ) ( injectIntl ( ServerBanner ) ) ;