me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add messages informing that collections are empty

Browse Source 
Port 6fae7f6a04 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
th-downstream
Jakub Mendyk 6 years ago committed by ThibG
parent c0f0a24e27
commit be07e0038c
10 changed files with 141 additions and 115 deletions
Show Stats Download Patch File Download Diff File

34
app/javascript/flavours/glitch/features/blocks/index.js
Unescape View File

@ -1,14 +1,15 @@
import React from 'react';
import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import PropTypes from 'prop-types';
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 ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import AccountContainer from 'flavours/glitch/containers/account_container';
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';
const messages = defineMessages({
@ -34,13 +35,9 @@ export default class Blocks extends ImmutablePureComponent {
this.props.dispatch(fetchBlocks());
}
handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target;
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandBlocks());
}
}
handleLoadMore = debounce(() => {
this.props.dispatch(expandBlocks());
}, 300, { leading: true });
shouldUpdateScroll = (prevRouterProps, { location }) => {
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 (
<Column name='blocks' icon='ban' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='blocks' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />
)}
</div>
</ScrollContainer>
<ScrollableList
scrollKey='blocks'
onLoadMore={this.handleLoadMore}
shouldUpdateScroll={this.shouldUpdateScroll}
emptyMessage={emptyMessage}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />
)}
</ScrollableList>
</Column>
);
}

14
app/javascript/flavours/glitch/features/domain_blocks/index.js
Unescape View File

@ -1,16 +1,16 @@
import React from 'react';
import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import PropTypes from 'prop-types';
import LoadingIndicator from '../../components/loading_indicator';
import Column from '../ui/components/column';
import ColumnBackButtonSlim from '../../components/column_back_button_slim';
import DomainContainer from '../../containers/domain_container';
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 { debounce } from 'lodash';
import ScrollableList from '../../components/scrollable_list';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({
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 (
<Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore}>
<ScrollableList
scrollKey='domain_blocks'
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
>
{domains.map(domain =>
<DomainContainer key={domain} domain={domain} />
)}

7
app/javascript/flavours/glitch/features/favourited_statuses/index.js
Unescape View File

@ -2,14 +2,14 @@ import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites';
import Column from 'flavours/glitch/features/ui/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header';
import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
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 { debounce } from 'lodash';
const messages = defineMessages({
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 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 (
<Column ref={this.setRef} name='favourites' label={intl.formatMessage(messages.heading)}>
<ColumnHeader
@ -90,6 +92,7 @@ export default class Favourites extends ImmutablePureComponent {
hasMore={hasMore}
isLoading={isLoading}
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
/>
</Column>
);

21
app/javascript/flavours/glitch/features/favourites/index.js
Unescape View File

@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { fetchFavourites } from 'flavours/glitch/actions/interactions';
import { ScrollContainer } from 'react-router-scroll-4';
import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column';
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 ScrollableList from '../../components/scrollable_list';
const messages = defineMessages({
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 (
<Column ref={this.setRef}>
<ColumnHeader
@ -72,12 +74,15 @@ export default class Favourites extends ImmutablePureComponent {
onClick={this.handleHeaderClick}
showBackButton
/>
<ScrollContainer scrollKey='favourites' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div>
</ScrollContainer>
<ScrollableList
scrollKey='favourites'
shouldUpdateScroll={this.shouldUpdateScroll}
emptyMessage={emptyMessage}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
)}
</ScrollableList>
</Column>
);
}

34
app/javascript/flavours/glitch/features/follow_requests/index.js
Unescape View File

@ -2,14 +2,15 @@ import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
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 ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import AccountAuthorizeContainer from './containers/account_authorize_container';
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 ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({
heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
@ -34,13 +35,9 @@ export default class FollowRequests extends ImmutablePureComponent {
this.props.dispatch(fetchFollowRequests());
}
handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target;
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowRequests());
}
}
handleLoadMore = debounce(() => {
this.props.dispatch(expandFollowRequests());
}, 300, { leading: true });
shouldUpdateScroll = (prevRouterProps, { location }) => {
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 (
<Column name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='follow_requests' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}>
{accountIds.map(id =>
<AccountAuthorizeContainer key={id} id={id} />
)}
</div>
</ScrollContainer>
<ScrollableList
scrollKey='follow_requests'
onLoadMore={this.handleLoadMore}
shouldUpdateScroll={this.shouldUpdateScroll}
emptyMessage={emptyMessage}
>
{accountIds.map(id =>
<AccountAuthorizeContainer key={id} id={id} />
)}
</ScrollableList>
</Column>
);
}

37
app/javascript/flavours/glitch/features/followers/index.js
Unescape View File

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

42
app/javascript/flavours/glitch/features/following/index.js
Unescape View File

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

13
app/javascript/flavours/glitch/features/lists/index.js
Unescape View File

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

34
app/javascript/flavours/glitch/features/mutes/index.js
Unescape View File

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

20
app/javascript/flavours/glitch/features/reblogs/index.js
Unescape View File

@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import { fetchReblogs } from 'flavours/glitch/actions/interactions';
import { ScrollContainer } from 'react-router-scroll-4';
import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column';
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 ScrollableList from 'flavours/glitch/components/scrollable_list';
const messages = defineMessages({
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 (
<Column ref={this.setRef}>
<ColumnHeader
@ -73,11 +75,15 @@ export default class Reblogs extends ImmutablePureComponent {
showBackButton
/>
<ScrollContainer scrollKey='reblogs' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable reblogs'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div>
</ScrollContainer>
<ScrollableList
scrollKey='reblogs'
shouldUpdateScroll={this.shouldUpdateScroll}
emptyMessage={emptyMessage}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
)}
</ScrollableList>
</Column>
);
}

Write Preview
Loading…
Cancel
Save