import React from 'react'; import { connect } from 'react-redux'; import { defineMessages, injectIntl } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Column from 'mastodon/components/column'; import ColumnHeader from 'mastodon/components/column_header'; import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodon/actions/columns'; import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory'; import { List as ImmutableList } from 'immutable'; import AccountCard from './components/account_card'; import RadioButton from 'mastodon/components/radio_button'; import LoadMore from 'mastodon/components/load_more'; import ScrollContainer from 'mastodon/containers/scroll_container'; import LoadingIndicator from 'mastodon/components/loading_indicator'; import { Helmet } from 'react-helmet'; const messages = defineMessages({ title: { id: 'column.directory', defaultMessage: 'Browse profiles' }, recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' }, newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' }, local: { id: 'directory.local', defaultMessage: 'From {domain} only' }, federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' }, }); const mapStateToProps = state => ({ accountIds: state.getIn(['user_lists', 'directory', 'items'], ImmutableList()), isLoading: state.getIn(['user_lists', 'directory', 'isLoading'], true), domain: state.getIn(['meta', 'domain']), }); export default @connect(mapStateToProps) @injectIntl class Directory extends React.PureComponent { static contextTypes = { router: PropTypes.object, }; static propTypes = { isLoading: PropTypes.bool, accountIds: ImmutablePropTypes.list.isRequired, dispatch: PropTypes.func.isRequired, columnId: PropTypes.string, intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, domain: PropTypes.string.isRequired, params: PropTypes.shape({ order: PropTypes.string, local: PropTypes.bool, }), }; state = { order: null, local: null, }; handlePin = () => { const { columnId, dispatch } = this.props; if (columnId) { dispatch(removeColumn(columnId)); } else { dispatch(addColumn('DIRECTORY', this.getParams(this.props, this.state))); } } getParams = (props, state) => ({ order: state.order === null ? (props.params.order || 'active') : state.order, local: state.local === null ? (props.params.local || false) : state.local, }); handleMove = dir => { const { columnId, dispatch } = this.props; dispatch(moveColumn(columnId, dir)); } handleHeaderClick = () => { this.column.scrollTop(); } componentDidMount () { const { dispatch } = this.props; dispatch(fetchDirectory(this.getParams(this.props, this.state))); } componentDidUpdate (prevProps, prevState) { const { dispatch } = this.props; const paramsOld = this.getParams(prevProps, prevState); const paramsNew = this.getParams(this.props, this.state); if (paramsOld.order !== paramsNew.order || paramsOld.local !== paramsNew.local) { dispatch(fetchDirectory(paramsNew)); } } setRef = c => { this.column = c; } handleChangeOrder = e => { const { dispatch, columnId } = this.props; if (columnId) { dispatch(changeColumnParams(columnId, ['order'], e.target.value)); } else { this.setState({ order: e.target.value }); } } handleChangeLocal = e => { const { dispatch, columnId } = this.props; if (columnId) { dispatch(changeColumnParams(columnId, ['local'], e.target.value === '1')); } else { this.setState({ local: e.target.value === '1' }); } } handleLoadMore = () => { const { dispatch } = this.props; dispatch(expandDirectory(this.getParams(this.props, this.state))); } render () { const { isLoading, accountIds, intl, columnId, multiColumn, domain } = this.props; const { order, local } = this.getParams(this.props, this.state); const pinned = !!columnId; const scrollableArea = (
{isLoading ? : accountIds.map(accountId => ( ))}
); return ( {multiColumn && !pinned ? {scrollableArea} : scrollableArea} {intl.formatMessage(messages.title)} ); } }