[Glitch] Add messages informing that collections are empty

Port 5129f6f2aa to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Jakub Mendyk 2018-08-26 16:39:37 +02:00 committed by ThibG
parent f1597e1ab9
commit e9f88f4005
10 changed files with 141 additions and 115 deletions

View File

@ -1,14 +1,15 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { ScrollContainer } from 'react-router-scroll-4'; import ScrollableList from '../../components/scrollable_list';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import { fetchBlocks, expandBlocks } from 'flavours/glitch/actions/blocks'; import { fetchBlocks, expandBlocks } from 'flavours/glitch/actions/blocks';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
const messages = defineMessages({ const messages = defineMessages({
@ -34,13 +35,9 @@ export default class Blocks extends ImmutablePureComponent {
this.props.dispatch(fetchBlocks()); this.props.dispatch(fetchBlocks());
} }
handleScroll = (e) => { handleLoadMore = debounce(() => {
const { scrollTop, scrollHeight, clientHeight } = e.target; this.props.dispatch(expandBlocks());
}, 300, { leading: true });
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandBlocks());
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => { shouldUpdateScroll = (prevRouterProps, { location }) => {
if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false; if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false;
@ -58,16 +55,21 @@ export default class Blocks extends ImmutablePureComponent {
); );
} }
const emptyMessage = <FormattedMessage id='empty_column.blocks' defaultMessage="You haven't blocked any users yet." />;
return ( return (
<Column name='blocks' icon='ban' heading={intl.formatMessage(messages.heading)}> <Column name='blocks' icon='ban' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<ScrollContainer scrollKey='blocks' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollableList
<div className='scrollable' onScroll={this.handleScroll}> scrollKey='blocks'
{accountIds.map(id => onLoadMore={this.handleLoadMore}
<AccountContainer key={id} id={id} /> shouldUpdateScroll={this.shouldUpdateScroll}
)} emptyMessage={emptyMessage}
</div> >
</ScrollContainer> {accountIds.map(id =>
<AccountContainer key={id} id={id} />
)}
</ScrollableList>
</Column> </Column>
); );
} }

View File

@ -1,16 +1,16 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import ColumnBackButtonSlim from '../../components/column_back_button_slim'; import ColumnBackButtonSlim from '../../components/column_back_button_slim';
import DomainContainer from '../../containers/domain_container'; import DomainContainer from '../../containers/domain_container';
import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks'; import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { debounce } from 'lodash'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
import ScrollableList from '../../components/scrollable_list';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' }, heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
@ -51,10 +51,16 @@ export default class Blocks extends ImmutablePureComponent {
); );
} }
const emptyMessage = <FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />;
return ( return (
<Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}> <Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore}> <ScrollableList
scrollKey='domain_blocks'
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
>
{domains.map(domain => {domains.map(domain =>
<DomainContainer key={domain} domain={domain} /> <DomainContainer key={domain} domain={domain} />
)} )}

View File

@ -2,14 +2,14 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites'; import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
import StatusList from 'flavours/glitch/components/status_list'; import StatusList from 'flavours/glitch/components/status_list';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { debounce } from 'lodash';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.favourites', defaultMessage: 'Favourites' }, heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
@ -70,6 +70,8 @@ export default class Favourites extends ImmutablePureComponent {
const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props; const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
const emptyMessage = <FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any favourite toots yet. When you favourite one, it will show up here." />;
return ( return (
<Column ref={this.setRef} name='favourites' label={intl.formatMessage(messages.heading)}> <Column ref={this.setRef} name='favourites' label={intl.formatMessage(messages.heading)}>
<ColumnHeader <ColumnHeader
@ -90,6 +92,7 @@ export default class Favourites extends ImmutablePureComponent {
hasMore={hasMore} hasMore={hasMore}
isLoading={isLoading} isLoading={isLoading}
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
/> />
</Column> </Column>
); );

View File

@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { fetchFavourites } from 'flavours/glitch/actions/interactions'; import { fetchFavourites } from 'flavours/glitch/actions/interactions';
import { ScrollContainer } from 'react-router-scroll-4';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ScrollableList from '../../components/scrollable_list';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' }, heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' },
@ -64,6 +64,8 @@ export default class Favourites extends ImmutablePureComponent {
); );
} }
const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has favourited this toot yet. When someone does, they will show up here.' />;
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
<ColumnHeader <ColumnHeader
@ -72,12 +74,15 @@ export default class Favourites extends ImmutablePureComponent {
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
showBackButton showBackButton
/> />
<ScrollableList
<ScrollContainer scrollKey='favourites' shouldUpdateScroll={this.shouldUpdateScroll}> scrollKey='favourites'
<div className='scrollable'> shouldUpdateScroll={this.shouldUpdateScroll}
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} emptyMessage={emptyMessage}
</div> >
</ScrollContainer> {accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
)}
</ScrollableList>
</Column> </Column>
); );
} }

View File

@ -2,14 +2,15 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { ScrollContainer } from 'react-router-scroll-4';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import AccountAuthorizeContainer from './containers/account_authorize_container'; import AccountAuthorizeContainer from './containers/account_authorize_container';
import { fetchFollowRequests, expandFollowRequests } from 'flavours/glitch/actions/accounts'; import { fetchFollowRequests, expandFollowRequests } from 'flavours/glitch/actions/accounts';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }, heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
@ -34,13 +35,9 @@ export default class FollowRequests extends ImmutablePureComponent {
this.props.dispatch(fetchFollowRequests()); this.props.dispatch(fetchFollowRequests());
} }
handleScroll = (e) => { handleLoadMore = debounce(() => {
const { scrollTop, scrollHeight, clientHeight } = e.target; this.props.dispatch(expandFollowRequests());
}, 300, { leading: true });
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowRequests());
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => { shouldUpdateScroll = (prevRouterProps, { location }) => {
if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false; if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false;
@ -58,17 +55,22 @@ export default class FollowRequests extends ImmutablePureComponent {
); );
} }
const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />;
return ( return (
<Column name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}> <Column name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<ScrollContainer scrollKey='follow_requests' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollableList
<div className='scrollable' onScroll={this.handleScroll}> scrollKey='follow_requests'
{accountIds.map(id => onLoadMore={this.handleLoadMore}
<AccountAuthorizeContainer key={id} id={id} /> shouldUpdateScroll={this.shouldUpdateScroll}
)} emptyMessage={emptyMessage}
</div> >
</ScrollContainer> {accountIds.map(id =>
<AccountAuthorizeContainer key={id} id={id} />
)}
</ScrollableList>
</Column> </Column>
); );
} }

View File

@ -2,20 +2,21 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { import {
fetchAccount, fetchAccount,
fetchFollowers, fetchFollowers,
expandFollowers, expandFollowers,
} from 'flavours/glitch/actions/accounts'; } from 'flavours/glitch/actions/accounts';
import { ScrollContainer } from 'react-router-scroll-4'; import { FormattedMessage } from 'react-intl';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header'; import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container'; import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';
import LoadMore from 'flavours/glitch/components/load_more';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import MissingIndicator from 'flavours/glitch/components/missing_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
isAccount: !!state.getIn(['accounts', props.params.accountId]), isAccount: !!state.getIn(['accounts', props.params.accountId]),
@ -58,10 +59,10 @@ export default class Followers extends ImmutablePureComponent {
} }
} }
handleLoadMore = (e) => { handleLoadMore = debounce(() => {
e.preventDefault(); e.preventDefault();
this.props.dispatch(expandFollowers(this.props.params.accountId)); this.props.dispatch(expandFollowers(this.props.params.accountId));
} }, 300, { leading: true });
shouldUpdateScroll = (prevRouterProps, { location }) => { shouldUpdateScroll = (prevRouterProps, { location }) => {
if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false; if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false;
@ -83,8 +84,6 @@ export default class Followers extends ImmutablePureComponent {
); );
} }
let loadMore = null;
if (!accountIds) { if (!accountIds) {
return ( return (
<Column> <Column>
@ -93,23 +92,25 @@ export default class Followers extends ImmutablePureComponent {
); );
} }
if (hasMore) { const emptyMessage = <FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />;
loadMore = <LoadMore onClick={this.handleLoadMore} />;
}
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} /> <ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}> <HeaderContainer accountId={this.props.params.accountId} hideTabs />
<div className='scrollable' onScroll={this.handleScroll}>
<div className='followers'> <ScrollableList
<HeaderContainer accountId={this.props.params.accountId} hideTabs /> scrollKey='followers'
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} hasMore={hasMore}
{loadMore} onLoadMore={this.handleLoadMore}
</div> shouldUpdateScroll={this.shouldUpdateScroll}
</div> emptyMessage={emptyMessage}
</ScrollContainer> >
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
)}
</ScrollableList>
</Column> </Column>
); );
} }

View File

@ -2,20 +2,21 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { import {
fetchAccount, fetchAccount,
fetchFollowing, fetchFollowing,
expandFollowing, expandFollowing,
} from 'flavours/glitch/actions/accounts'; } from 'flavours/glitch/actions/accounts';
import { ScrollContainer } from 'react-router-scroll-4'; import { FormattedMessage } from 'react-intl';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header'; import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container'; import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';
import LoadMore from 'flavours/glitch/components/load_more';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import MissingIndicator from 'flavours/glitch/components/missing_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
isAccount: !!state.getIn(['accounts', props.params.accountId]), isAccount: !!state.getIn(['accounts', props.params.accountId]),
@ -58,15 +59,10 @@ export default class Following extends ImmutablePureComponent {
} }
} }
handleLoadMore = (e) => { handleLoadMore = debounce(() => {
e.preventDefault(); e.preventDefault();
this.props.dispatch(expandFollowing(this.props.params.accountId)); this.props.dispatch(expandFollowing(this.props.params.accountId));
} }, 300, { leading: true });
shouldUpdateScroll = (prevRouterProps, { location }) => {
if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false;
return !(location.state && location.state.mastodonModalOpen);
}
setRef = c => { setRef = c => {
this.column = c; this.column = c;
@ -83,8 +79,6 @@ export default class Following extends ImmutablePureComponent {
); );
} }
let loadMore = null;
if (!accountIds) { if (!accountIds) {
return ( return (
<Column> <Column>
@ -93,23 +87,25 @@ export default class Following extends ImmutablePureComponent {
); );
} }
if (hasMore) { const emptyMessage = <FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />;
loadMore = <LoadMore onClick={this.handleLoadMore} />;
}
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} /> <ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}> <HeaderContainer accountId={this.props.params.accountId} hideTabs />
<div className='scrollable' onScroll={this.handleScroll}>
<div className='following'> <ScrollableList
<HeaderContainer accountId={this.props.params.accountId} hideTabs /> scrollKey='following'
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} hasMore={hasMore}
{loadMore} onLoadMore={this.handleLoadMore}
</div> shouldUpdateScroll={this.shouldUpdateScroll}
</div> emptyMessage={emptyMessage}
</ScrollContainer> >
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
)}
</ScrollableList>
</Column> </Column>
); );
} }

View File

@ -6,12 +6,13 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import { fetchLists } from 'flavours/glitch/actions/lists'; import { fetchLists } from 'flavours/glitch/actions/lists';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading'; import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
import NewListForm from './components/new_list_form'; import NewListForm from './components/new_list_form';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.lists', defaultMessage: 'Lists' }, heading: { id: 'column.lists', defaultMessage: 'Lists' },
@ -62,13 +63,15 @@ export default class Lists extends ImmutablePureComponent {
<NewListForm /> <NewListForm />
<div className='scrollable'> <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
<ColumnSubheading text={intl.formatMessage(messages.subheading)} /> <ScrollableList
scrollKey='lists'
emptyMessage={emptyMessage}
>
{lists.map(list => {lists.map(list =>
<ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} /> <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />
)} )}
</div> </ScrollableList>
</Column> </Column>
); );
} }

View File

@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { ScrollContainer } from 'react-router-scroll-4';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes'; import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.mutes', defaultMessage: 'Muted users' }, heading: { id: 'column.mutes', defaultMessage: 'Muted users' },
@ -34,13 +35,9 @@ export default class Mutes extends ImmutablePureComponent {
this.props.dispatch(fetchMutes()); this.props.dispatch(fetchMutes());
} }
handleScroll = (e) => { handleLoadMore = debounce(() => {
const { scrollTop, scrollHeight, clientHeight } = e.target; this.props.dispatch(expandMutes());
}, 300, { leading: true });
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandMutes());
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => { shouldUpdateScroll = (prevRouterProps, { location }) => {
if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false; if ((((prevRouterProps || {}).location || {}).state || {}).mastodonModalOpen) return false;
@ -58,16 +55,21 @@ export default class Mutes extends ImmutablePureComponent {
); );
} }
const emptyMessage = <FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />;
return ( return (
<Column name='mutes' icon='volume-off' heading={intl.formatMessage(messages.heading)}> <Column name='mutes' icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<ScrollContainer scrollKey='mutes' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollableList
<div className='scrollable mutes' onScroll={this.handleScroll}> scrollKey='mutes'
{accountIds.map(id => onLoadMore={this.handleLoadMore}
<AccountContainer key={id} id={id} /> shouldUpdateScroll={this.shouldUpdateScroll}
)} emptyMessage={emptyMessage}
</div> >
</ScrollContainer> {accountIds.map(id =>
<AccountContainer key={id} id={id} />
)}
</ScrollableList>
</Column> </Column>
); );
} }

View File

@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { fetchReblogs } from 'flavours/glitch/actions/interactions'; import { fetchReblogs } from 'flavours/glitch/actions/interactions';
import { ScrollContainer } from 'react-router-scroll-4';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.reblogged_by', defaultMessage: 'Boosted by' }, heading: { id: 'column.reblogged_by', defaultMessage: 'Boosted by' },
@ -64,6 +64,8 @@ export default class Reblogs extends ImmutablePureComponent {
); );
} }
const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has boosted this toot yet. When someone does, they will show up here.' />;
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
<ColumnHeader <ColumnHeader
@ -73,11 +75,15 @@ export default class Reblogs extends ImmutablePureComponent {
showBackButton showBackButton
/> />
<ScrollContainer scrollKey='reblogs' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollableList
<div className='scrollable reblogs'> scrollKey='reblogs'
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} shouldUpdateScroll={this.shouldUpdateScroll}
</div> emptyMessage={emptyMessage}
</ScrollContainer> >
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
)}
</ScrollableList>
</Column> </Column>
); );
} }