forked from treehouse/mastodon
[Glitch] Add messages informing that collections are empty
Port 5129f6f2aa
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
signup-info-prompt
parent
f1597e1ab9
commit
e9f88f4005
|
@ -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;
|
|
||||||
|
|
||||||
if (scrollTop === scrollHeight - clientHeight) {
|
|
||||||
this.props.dispatch(expandBlocks());
|
this.props.dispatch(expandBlocks());
|
||||||
}
|
}, 300, { leading: true });
|
||||||
}
|
|
||||||
|
|
||||||
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'
|
||||||
|
onLoadMore={this.handleLoadMore}
|
||||||
|
shouldUpdateScroll={this.shouldUpdateScroll}
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
>
|
||||||
{accountIds.map(id =>
|
{accountIds.map(id =>
|
||||||
<AccountContainer key={id} id={id} />
|
<AccountContainer key={id} id={id} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</ScrollableList>
|
||||||
</ScrollContainer>
|
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
|
|
||||||
if (scrollTop === scrollHeight - clientHeight) {
|
|
||||||
this.props.dispatch(expandFollowRequests());
|
this.props.dispatch(expandFollowRequests());
|
||||||
}
|
}, 300, { leading: true });
|
||||||
}
|
|
||||||
|
|
||||||
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'
|
||||||
|
onLoadMore={this.handleLoadMore}
|
||||||
|
shouldUpdateScroll={this.shouldUpdateScroll}
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
>
|
||||||
{accountIds.map(id =>
|
{accountIds.map(id =>
|
||||||
<AccountAuthorizeContainer key={id} id={id} />
|
<AccountAuthorizeContainer key={id} id={id} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</ScrollableList>
|
||||||
</ScrollContainer>
|
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}>
|
|
||||||
<div className='scrollable' onScroll={this.handleScroll}>
|
|
||||||
<div className='followers'>
|
|
||||||
<HeaderContainer accountId={this.props.params.accountId} hideTabs />
|
<HeaderContainer accountId={this.props.params.accountId} hideTabs />
|
||||||
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
|
|
||||||
{loadMore}
|
<ScrollableList
|
||||||
</div>
|
scrollKey='followers'
|
||||||
</div>
|
hasMore={hasMore}
|
||||||
</ScrollContainer>
|
onLoadMore={this.handleLoadMore}
|
||||||
|
shouldUpdateScroll={this.shouldUpdateScroll}
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
>
|
||||||
|
{accountIds.map(id =>
|
||||||
|
<AccountContainer key={id} id={id} withNote={false} />
|
||||||
|
)}
|
||||||
|
</ScrollableList>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}>
|
|
||||||
<div className='scrollable' onScroll={this.handleScroll}>
|
|
||||||
<div className='following'>
|
|
||||||
<HeaderContainer accountId={this.props.params.accountId} hideTabs />
|
<HeaderContainer accountId={this.props.params.accountId} hideTabs />
|
||||||
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
|
|
||||||
{loadMore}
|
<ScrollableList
|
||||||
</div>
|
scrollKey='following'
|
||||||
</div>
|
hasMore={hasMore}
|
||||||
</ScrollContainer>
|
onLoadMore={this.handleLoadMore}
|
||||||
|
shouldUpdateScroll={this.shouldUpdateScroll}
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
>
|
||||||
|
{accountIds.map(id =>
|
||||||
|
<AccountContainer key={id} id={id} withNote={false} />
|
||||||
|
)}
|
||||||
|
</ScrollableList>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
|
|
||||||
if (scrollTop === scrollHeight - clientHeight) {
|
|
||||||
this.props.dispatch(expandMutes());
|
this.props.dispatch(expandMutes());
|
||||||
}
|
}, 300, { leading: true });
|
||||||
}
|
|
||||||
|
|
||||||
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'
|
||||||
|
onLoadMore={this.handleLoadMore}
|
||||||
|
shouldUpdateScroll={this.shouldUpdateScroll}
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
>
|
||||||
{accountIds.map(id =>
|
{accountIds.map(id =>
|
||||||
<AccountContainer key={id} id={id} />
|
<AccountContainer key={id} id={id} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</ScrollableList>
|
||||||
</ScrollContainer>
|
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue