2017-12-08 19:40:49 -06:00
import PropTypes from 'prop-types' ;
2023-05-28 07:18:23 -05:00
import { PureComponent } from 'react' ;
2023-05-28 09:38:10 -05:00
import { FormattedMessage , defineMessages , injectIntl } from 'react-intl' ;
2022-10-08 20:55:09 -05:00
import { Helmet } from 'react-helmet' ;
2023-10-19 12:44:55 -05:00
import { withRouter } from 'react-router-dom' ;
2023-05-28 09:38:10 -05:00
2017-12-08 19:40:49 -06:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2022-10-08 20:55:09 -05:00
import { connect } from 'react-redux' ;
2023-05-28 09:38:10 -05:00
2023-06-05 02:37:02 -05:00
import Toggle from 'react-toggle' ;
2022-10-08 20:55:09 -05:00
import { addColumn , removeColumn , moveColumn } from 'flavours/glitch/actions/columns' ;
2018-11-04 06:00:59 -06:00
import { fetchList , deleteList , updateList } from 'flavours/glitch/actions/lists' ;
2017-12-08 19:40:49 -06:00
import { openModal } from 'flavours/glitch/actions/modal' ;
2022-10-08 20:55:09 -05:00
import { connectListStream } from 'flavours/glitch/actions/streaming' ;
import { expandListTimeline } from 'flavours/glitch/actions/timelines' ;
import Column from 'flavours/glitch/components/column' ;
import ColumnHeader from 'flavours/glitch/components/column_header' ;
2023-11-15 06:19:17 -06:00
import { Icon } from 'flavours/glitch/components/icon' ;
2023-06-13 12:26:25 -05:00
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator' ;
2023-05-08 20:11:56 -05:00
import { RadioButton } from 'flavours/glitch/components/radio_button' ;
2023-04-12 05:44:58 -05:00
import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error' ;
2023-05-28 09:38:10 -05:00
import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container' ;
2023-10-19 12:44:55 -05:00
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router' ;
2024-01-12 14:16:48 -06:00
import DeleteIcon from 'mastodon/../material-icons/400-24px/delete.svg?react' ;
import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react' ;
import ListAltIcon from 'mastodon/../material-icons/400-24px/list_alt.svg?react' ;
2017-12-08 19:40:49 -06:00
const messages = defineMessages ( {
deleteMessage : { id : 'confirmations.delete_list.message' , defaultMessage : 'Are you sure you want to permanently delete this list?' } ,
deleteConfirm : { id : 'confirmations.delete_list.confirm' , defaultMessage : 'Delete' } ,
2020-12-08 21:34:17 -06:00
followed : { id : 'lists.replies_policy.followed' , defaultMessage : 'Any followed user' } ,
none : { id : 'lists.replies_policy.none' , defaultMessage : 'No one' } ,
list : { id : 'lists.replies_policy.list' , defaultMessage : 'Members of the list' } ,
2017-12-08 19:40:49 -06:00
} ) ;
const mapStateToProps = ( state , props ) => ( {
list : state . getIn ( [ 'lists' , props . params . id ] ) ,
hasUnread : state . getIn ( [ 'timelines' , ` list: ${ props . params . id } ` , 'unread' ] ) > 0 ,
} ) ;
2023-05-28 07:18:23 -05:00
class ListTimeline extends PureComponent {
2017-12-08 19:40:49 -06:00
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
columnId : PropTypes . string ,
hasUnread : PropTypes . bool ,
multiColumn : PropTypes . bool ,
list : PropTypes . oneOfType ( [ ImmutablePropTypes . map , PropTypes . bool ] ) ,
intl : PropTypes . object . isRequired ,
2023-10-19 12:44:55 -05:00
... WithRouterPropTypes ,
2017-12-08 19:40:49 -06:00
} ;
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'LIST' , { id : this . props . params . id } ) ) ;
2023-10-19 12:44:55 -05:00
this . props . history . push ( '/' ) ;
2017-12-08 19:40:49 -06:00
}
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
componentDidMount ( ) {
const { dispatch } = this . props ;
const { id } = this . props . params ;
dispatch ( fetchList ( id ) ) ;
2018-05-27 12:10:37 -05:00
dispatch ( expandListTimeline ( id ) ) ;
2017-12-08 19:40:49 -06:00
this . disconnect = dispatch ( connectListStream ( id ) ) ;
}
2023-05-10 02:05:32 -05:00
UNSAFE _componentWillReceiveProps ( nextProps ) {
2019-06-06 06:04:49 -05:00
const { dispatch } = this . props ;
const { id } = nextProps . params ;
if ( id !== this . props . params . id ) {
if ( this . disconnect ) {
this . disconnect ( ) ;
this . disconnect = null ;
}
dispatch ( fetchList ( id ) ) ;
dispatch ( expandListTimeline ( id ) ) ;
this . disconnect = dispatch ( connectListStream ( id ) ) ;
}
}
2017-12-08 19:40:49 -06:00
componentWillUnmount ( ) {
if ( this . disconnect ) {
this . disconnect ( ) ;
this . disconnect = null ;
}
}
setRef = c => {
this . column = c ;
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
2018-05-27 12:10:37 -05:00
handleLoadMore = maxId => {
2017-12-08 19:40:49 -06:00
const { id } = this . props . params ;
2018-05-27 12:10:37 -05:00
this . props . dispatch ( expandListTimeline ( id , { maxId } ) ) ;
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
handleEditClick = ( ) => {
2023-05-25 08:42:37 -05:00
this . props . dispatch ( openModal ( {
modalType : 'LIST_EDITOR' ,
modalProps : { listId : this . props . params . id } ,
} ) ) ;
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
handleDeleteClick = ( ) => {
const { dispatch , columnId , intl } = this . props ;
const { id } = this . props . params ;
2023-05-25 08:42:37 -05:00
dispatch ( openModal ( {
modalType : 'CONFIRM' ,
modalProps : {
message : intl . formatMessage ( messages . deleteMessage ) ,
confirm : intl . formatMessage ( messages . deleteConfirm ) ,
onConfirm : ( ) => {
dispatch ( deleteList ( id ) ) ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
2023-10-19 12:44:55 -05:00
this . props . history . push ( '/lists' ) ;
2023-05-25 08:42:37 -05:00
}
} ,
2017-12-08 19:40:49 -06:00
} ,
} ) ) ;
2023-02-03 13:52:07 -06:00
} ;
2017-12-08 19:40:49 -06:00
2018-11-28 09:57:26 -06:00
handleRepliesPolicyChange = ( { target } ) => {
2023-05-07 14:43:25 -05:00
const { dispatch } = this . props ;
2018-11-04 06:00:59 -06:00
const { id } = this . props . params ;
2023-06-05 02:37:02 -05:00
dispatch ( updateList ( id , undefined , false , undefined , target . value ) ) ;
} ;
onExclusiveToggle = ( { target } ) => {
const { dispatch } = this . props ;
const { id } = this . props . params ;
dispatch ( updateList ( id , undefined , false , target . checked , undefined ) ) ;
2023-02-03 13:52:07 -06:00
} ;
2018-11-04 06:00:59 -06:00
2017-12-08 19:40:49 -06:00
render ( ) {
2018-11-04 06:00:59 -06:00
const { hasUnread , columnId , multiColumn , list , intl } = this . props ;
2017-12-08 19:40:49 -06:00
const { id } = this . props . params ;
const pinned = ! ! columnId ;
const title = list ? list . get ( 'title' ) : id ;
2018-11-04 06:00:59 -06:00
const replies _policy = list ? list . get ( 'replies_policy' ) : undefined ;
2023-06-05 02:37:02 -05:00
const isExclusive = list ? list . get ( 'exclusive' ) : undefined ;
2017-12-08 19:40:49 -06:00
if ( typeof list === 'undefined' ) {
return (
< Column >
2018-01-18 10:25:37 -06:00
< div className = 'scrollable' >
< LoadingIndicator / >
< / div >
2017-12-08 19:40:49 -06:00
< / Column >
) ;
} else if ( list === false ) {
return (
2023-04-12 05:44:58 -05:00
< BundleColumnError multiColumn = { multiColumn } errorType = 'routing' / >
2017-12-08 19:40:49 -06:00
) ;
}
return (
2022-10-03 02:15:00 -05:00
< Column bindToDocument = { ! multiColumn } ref = { this . setRef } label = { title } >
2017-12-08 19:40:49 -06:00
< ColumnHeader
2017-12-17 21:25:18 -06:00
icon = 'list-ul'
2023-10-24 12:45:08 -05:00
iconComponent = { ListAltIcon }
2017-12-08 19:40:49 -06:00
active = { hasUnread }
title = { title }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
>
2020-09-01 03:21:45 -05:00
< div className = 'column-settings__row column-header__links' >
2023-05-07 14:43:25 -05:00
< button type = 'button' className = 'text-btn column-header__setting-btn' tabIndex = { 0 } onClick = { this . handleEditClick } >
2023-10-24 12:45:08 -05:00
< Icon id = 'pencil' icon = { EditIcon } / > < FormattedMessage id = 'lists.edit' defaultMessage = 'Edit list' / >
2017-12-08 19:40:49 -06:00
< / button >
2023-05-07 14:43:25 -05:00
< button type = 'button' className = 'text-btn column-header__setting-btn' tabIndex = { 0 } onClick = { this . handleDeleteClick } >
2023-10-24 12:45:08 -05:00
< Icon id = 'trash' icon = { DeleteIcon } / > < FormattedMessage id = 'lists.delete' defaultMessage = 'Delete list' / >
2017-12-08 19:40:49 -06:00
< / button >
< / div >
2023-06-05 02:37:02 -05:00
< div className = 'setting-toggle' >
2023-11-13 18:39:54 -06:00
< Toggle id = { ` list- ${ id } -exclusive ` } checked = { isExclusive } onChange = { this . onExclusiveToggle } / >
2023-06-05 02:37:02 -05:00
< label htmlFor = { ` list- ${ id } -exclusive ` } className = 'setting-toggle__label' >
< FormattedMessage id = 'lists.exclusive' defaultMessage = 'Hide these posts from home' / >
< / label >
< / div >
2018-11-28 09:57:26 -06:00
{ replies _policy !== undefined && (
2020-09-01 03:21:45 -05:00
< div role = 'group' aria - labelledby = { ` list- ${ id } -replies-policy ` } >
< span id = { ` list- ${ id } -replies-policy ` } className = 'column-settings__section' >
< FormattedMessage id = 'lists.replies_policy.title' defaultMessage = 'Show replies to:' / >
< / span >
2018-11-28 09:57:26 -06:00
< div className = 'column-settings__row' >
2020-12-08 21:34:17 -06:00
{ [ 'none' , 'list' , 'followed' ] . map ( policy => (
2021-01-05 12:57:50 -06:00
< RadioButton name = 'order' key = { policy } value = { policy } label = { intl . formatMessage ( messages [ policy ] ) } checked = { replies _policy === policy } onChange = { this . handleRepliesPolicyChange } / >
2020-09-01 03:21:45 -05:00
) ) }
2018-11-28 09:57:26 -06:00
< / div >
< / div >
) }
2017-12-08 19:40:49 -06:00
< hr / >
< / ColumnHeader >
< StatusListContainer
trackScroll = { ! pinned }
scrollKey = { ` list_timeline- ${ columnId } ` }
timelineId = { ` list: ${ id } ` }
2018-05-27 12:10:37 -05:00
onLoadMore = { this . handleLoadMore }
2023-05-07 14:43:25 -05:00
emptyMessage = { < FormattedMessage id = 'empty_column.list' defaultMessage = 'There is nothing in this list yet. When members of this list post new statuses, they will appear here.' / > }
2019-07-19 02:25:22 -05:00
bindToDocument = { ! multiColumn }
2017-12-08 19:40:49 -06:00
/ >
2022-10-08 20:55:09 -05:00
< Helmet >
< title > { title } < / title >
2022-10-20 07:35:29 -05:00
< meta name = 'robots' content = 'noindex' / >
2022-10-08 20:55:09 -05:00
< / Helmet >
2017-12-08 19:40:49 -06:00
< / Column >
) ;
}
}
2023-03-24 17:15:25 -05:00
2023-10-19 12:44:55 -05:00
export default withRouter ( connect ( mapStateToProps ) ( injectIntl ( ListTimeline ) ) ) ;