Merge branch 'next_' into 'next'
next See merge request soapbox-pub/soapbox-fe!1212
This commit is contained in:
Alex Gleason
commit
543098e09b
|
|
@ -1,84 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Button } from 'soapbox/components/ui';
|
||||
|
||||
import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from '../../../actions/aliases';
|
||||
|
||||
const messages = defineMessages({
|
||||
search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
|
||||
searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
value: state.getIn(['aliases', 'suggestions', 'value']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onSubmit: value => dispatch(fetchAliasesSuggestions(value)),
|
||||
onClear: () => dispatch(clearAliasesSuggestions()),
|
||||
onChange: value => dispatch(changeAliasesSuggestions(value)),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class Search extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
onClear: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
this.props.onChange(e.target.value);
|
||||
}
|
||||
|
||||
handleKeyUp = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.props.onSubmit(this.props.value);
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
this.props.onSubmit(this.props.value);
|
||||
}
|
||||
|
||||
handleClear = () => {
|
||||
this.props.onClear();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, intl } = this.props;
|
||||
const hasValue = value.length > 0;
|
||||
|
||||
return (
|
||||
<div className='aliases_search search'>
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
||||
|
||||
<input
|
||||
className='search__input'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
onKeyUp={this.handleKeyUp}
|
||||
placeholder={intl.formatMessage(messages.search)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
||||
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||
</div>
|
||||
<Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Button } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
const messages = defineMessages({
|
||||
search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
|
||||
searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
||||
});
|
||||
|
||||
const Search: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const value = useAppSelector(state => state.aliases.getIn(['suggestions', 'value'])) as string;
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(changeAliasesSuggestions(e.target.value));
|
||||
};
|
||||
|
||||
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.keyCode === 13) {
|
||||
dispatch(fetchAliasesSuggestions(value));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
dispatch(fetchAliasesSuggestions(value));
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
dispatch(clearAliasesSuggestions());
|
||||
};
|
||||
|
||||
const hasValue = value.length > 0;
|
||||
|
||||
return (
|
||||
<div className='aliases_search search'>
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
||||
|
||||
<input
|
||||
className='search__input'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onKeyUp={handleKeyUp}
|
||||
placeholder={intl.formatMessage(messages.search)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||
</div>
|
||||
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import DisplayName from 'soapbox/components/display_name';
|
||||
import Permalink from 'soapbox/components/permalink';
|
||||
import ActionButton from 'soapbox/features/ui/components/action_button';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getAccount = makeGetAccount();
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
account: getAccount(state, props.id),
|
||||
});
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const getFirstSentence = str => {
|
||||
const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
|
||||
|
||||
return arr[0];
|
||||
};
|
||||
|
||||
export default @connect(makeMapStateToProps)
|
||||
class Account extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.record.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { account } = this.props;
|
||||
|
||||
return (
|
||||
<div className='account follow-recommendations-account'>
|
||||
<div className='account__wrapper'>
|
||||
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||
|
||||
<DisplayName account={account} />
|
||||
|
||||
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
|
||||
</Permalink>
|
||||
|
||||
<div className='account__relationship'>
|
||||
<ActionButton account={account} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react';
|
||||
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import DisplayName from 'soapbox/components/display_name';
|
||||
import Permalink from 'soapbox/components/permalink';
|
||||
import ActionButton from 'soapbox/features/ui/components/action_button';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
|
||||
const getAccount = makeGetAccount();
|
||||
|
||||
const getFirstSentence = (str: string) => {
|
||||
const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
|
||||
|
||||
return arr[0];
|
||||
};
|
||||
|
||||
interface IAccount {
|
||||
id: string,
|
||||
}
|
||||
|
||||
const Account: React.FC<IAccount> = ({ id }) => {
|
||||
const account = useAppSelector((state) => getAccount(state, id));
|
||||
|
||||
if (!account) return null;
|
||||
|
||||
return (
|
||||
<div className='account follow-recommendations-account'>
|
||||
<div className='account__wrapper'>
|
||||
<Permalink className='account__display-name account__display-name--with-note' title={account.acct} href={account.url} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||
|
||||
<DisplayName account={account} />
|
||||
|
||||
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
|
||||
</Permalink>
|
||||
|
||||
<div className='account__relationship'>
|
||||
<ActionButton account={account} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Account;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Button } from 'soapbox/components/ui';
|
||||
|
||||
import FollowRecommendationsList from './follow_recommendations_list';
|
||||
|
||||
export default class FollowRecommendationsContainer extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
onDone: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
handleDone = () => {
|
||||
this.props.onDone();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='scrollable follow-recommendations-container'>
|
||||
<div className='column-title'>
|
||||
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
|
||||
<h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let's get started!' /></h2>
|
||||
<p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don't be afraid to make mistakes; you can unfollow people at any time.' /></p>
|
||||
</div>
|
||||
|
||||
<FollowRecommendationsList />
|
||||
|
||||
<div className='column-actions'>
|
||||
<Button onClick={this.handleDone}>
|
||||
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Button } from 'soapbox/components/ui';
|
||||
|
||||
import FollowRecommendationsList from './follow_recommendations_list';
|
||||
|
||||
interface IFollowRecommendationsContainer {
|
||||
onDone: () => void,
|
||||
}
|
||||
|
||||
const FollowRecommendationsContainer: React.FC<IFollowRecommendationsContainer> = ({ onDone }) => (
|
||||
<div className='scrollable follow-recommendations-container'>
|
||||
<div className='column-title'>
|
||||
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
|
||||
<h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let's get started!' /></h2>
|
||||
<p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don't be afraid to make mistakes; you can unfollow people at any time.' /></p>
|
||||
</div>
|
||||
|
||||
<FollowRecommendationsList />
|
||||
|
||||
<div className='column-actions'>
|
||||
<Button onClick={onDone}>
|
||||
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default FollowRecommendationsContainer;
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { fetchSuggestions } from 'soapbox/actions/suggestions';
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
|
||||
import Account from './account';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
isLoading: state.getIn(['suggestions', 'isLoading']),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class FollowRecommendationsList extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
suggestions: ImmutablePropTypes.list,
|
||||
isLoading: PropTypes.bool,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch, suggestions } = this.props;
|
||||
|
||||
// Don't re-fetch if we're e.g. navigating backwards to this page,
|
||||
// since we don't want followed accounts to disappear from the list
|
||||
if (suggestions.size === 0) {
|
||||
dispatch(fetchSuggestions(true));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { suggestions, isLoading } = this.props;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className='column-list'>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='column-list'>
|
||||
{suggestions.size > 0 ? suggestions.map(suggestion => (
|
||||
<Account key={suggestion.get('account')} id={suggestion.get('account')} />
|
||||
)) : (
|
||||
<div className='column-list__empty-message'>
|
||||
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { fetchSuggestions } from 'soapbox/actions/suggestions';
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import Account from './account';
|
||||
|
||||
const FollowRecommendationsList: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const suggestions = useAppSelector((state) => state.suggestions.get('items'));
|
||||
const isLoading = useAppSelector((state) => state.suggestions.get('isLoading'));
|
||||
|
||||
useEffect(() => {
|
||||
if (suggestions.size === 0) {
|
||||
dispatch(fetchSuggestions());
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className='column-list'>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='column-list'>
|
||||
{suggestions.size > 0 ? suggestions.map((suggestion: { account: string }) => (
|
||||
<Account key={suggestion.account} id={suggestion.account} />
|
||||
)) : (
|
||||
<div className='column-list__empty-message'>
|
||||
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FollowRecommendationsList;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
|
||||
import FollowRecommendationsContainer from './components/follow_recommendations_container';
|
||||
|
||||
export default @withRouter
|
||||
class FollowRecommendations extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
history: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
onDone = () => {
|
||||
this.props.history.push('/');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Column>
|
||||
<FollowRecommendationsContainer onDone={this.onDone} />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
|
||||
import FollowRecommendationsContainer from './components/follow_recommendations_container';
|
||||
|
||||
const FollowRecommendations: React.FC = () => {
|
||||
const history = useHistory();
|
||||
|
||||
const onDone = () => {
|
||||
history.push('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<FollowRecommendationsContainer onDone={onDone} />
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default FollowRecommendations;
|
||||
|
|
@ -4,10 +4,8 @@ import React from 'react';
|
|||
* IntentionalError:
|
||||
* For testing logging/monitoring & previewing ErrorBoundary design.
|
||||
*/
|
||||
export default class IntentionalError extends React.Component {
|
||||
|
||||
render() {
|
||||
const IntentionalError: React.FC = () => {
|
||||
throw 'This error is intentional.';
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
export default IntentionalError;
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import { Button, Spinner } from 'soapbox/components/ui';
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
|
||||
import { fetchList, deleteList } from '../../actions/lists';
|
||||
import { openModal } from '../../actions/modals';
|
||||
import { connectListStream } from '../../actions/streaming';
|
||||
import { expandListTimeline } from '../../actions/timelines';
|
||||
import MissingIndicator from '../../components/missing_indicator';
|
||||
import StatusListContainer from '../ui/containers/status_list_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
|
||||
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
|
||||
deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
|
||||
});
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
list: state.getIn(['lists', props.params.id]),
|
||||
// hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
@withRouter
|
||||
class ListTimeline extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
// hasUnread: PropTypes.bool,
|
||||
list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
|
||||
intl: PropTypes.object.isRequired,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.handleConnect(this.props.params.id);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.handleDisconnect();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.params.id !== prevProps.params.id) {
|
||||
this.handleDisconnect();
|
||||
this.handleConnect(this.props.params.id);
|
||||
}
|
||||
}
|
||||
|
||||
handleConnect(id) {
|
||||
const { dispatch } = this.props;
|
||||
|
||||
dispatch(fetchList(id));
|
||||
dispatch(expandListTimeline(id));
|
||||
|
||||
this.disconnect = dispatch(connectListStream(id));
|
||||
}
|
||||
|
||||
handleDisconnect() {
|
||||
if (this.disconnect) {
|
||||
this.disconnect();
|
||||
this.disconnect = null;
|
||||
}
|
||||
}
|
||||
|
||||
handleLoadMore = maxId => {
|
||||
const { id } = this.props.params;
|
||||
this.props.dispatch(expandListTimeline(id, { maxId }));
|
||||
}
|
||||
|
||||
handleEditClick = () => {
|
||||
this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id }));
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
const { dispatch, intl } = this.props;
|
||||
const { id } = this.props.params;
|
||||
|
||||
dispatch(openModal('CONFIRM', {
|
||||
icon: require('@tabler/icons/icons/trash.svg'),
|
||||
heading: intl.formatMessage(messages.deleteHeading),
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => {
|
||||
dispatch(deleteList(id));
|
||||
this.props.history.push('/lists');
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { list } = this.props;
|
||||
const { id } = this.props.params;
|
||||
const title = list ? list.get('title') : id;
|
||||
|
||||
if (typeof list === 'undefined') {
|
||||
return (
|
||||
<Column>
|
||||
<div>
|
||||
<Spinner />
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
} else if (list === false) {
|
||||
return (
|
||||
<MissingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
const emptyMessage = (
|
||||
<div>
|
||||
<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.' />
|
||||
<br /><br />
|
||||
<Button onClick={this.handleEditClick}><FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' /></Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Column label={title} heading={title} transparent>
|
||||
{/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
|
||||
<div className='column-header__links'>
|
||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
|
||||
<Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
|
||||
</button>
|
||||
|
||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
|
||||
<Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
|
||||
<FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
|
||||
<Icon id='arrow-right' />
|
||||
</Link>
|
||||
</div>
|
||||
</HomeColumnHeader> */}
|
||||
|
||||
<StatusListContainer
|
||||
scrollKey='list_timeline'
|
||||
timelineId={`list:${id}`}
|
||||
onLoadMore={this.handleLoadMore}
|
||||
emptyMessage={emptyMessage}
|
||||
divideType='space'
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { fetchList } from 'soapbox/actions/lists';
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { connectListStream } from 'soapbox/actions/streaming';
|
||||
import { expandListTimeline } from 'soapbox/actions/timelines';
|
||||
import MissingIndicator from 'soapbox/components/missing_indicator';
|
||||
import { Button, Spinner } from 'soapbox/components/ui';
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import StatusListContainer from '../ui/containers/status_list_container';
|
||||
|
||||
// const messages = defineMessages({
|
||||
// deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
|
||||
// deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
|
||||
// deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
|
||||
// });
|
||||
|
||||
const ListTimeline: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
// const intl = useIntl();
|
||||
// const history = useHistory();
|
||||
|
||||
const list = useAppSelector((state) => state.lists.get(id));
|
||||
// const hasUnread = useAppSelector((state) => state.timelines.getIn([`list:${props.params.id}`, 'unread']) > 0);
|
||||
|
||||
useEffect(() => {
|
||||
const disconnect = handleConnect(id);
|
||||
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
const handleConnect = (id: string) => {
|
||||
dispatch(fetchList(id));
|
||||
dispatch(expandListTimeline(id));
|
||||
|
||||
return dispatch(connectListStream(id));
|
||||
};
|
||||
|
||||
const handleLoadMore = (maxId: string) => {
|
||||
dispatch(expandListTimeline(id, { maxId }));
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
dispatch(openModal('LIST_EDITOR', { listId: id }));
|
||||
};
|
||||
|
||||
// const handleDeleteClick = () => {
|
||||
// dispatch(openModal('CONFIRM', {
|
||||
// icon: require('@tabler/icons/icons/trash.svg'),
|
||||
// heading: intl.formatMessage(messages.deleteHeading),
|
||||
// message: intl.formatMessage(messages.deleteMessage),
|
||||
// confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
// onConfirm: () => {
|
||||
// dispatch(deleteList(id));
|
||||
// history.push('/lists');
|
||||
// },
|
||||
// }));
|
||||
// };
|
||||
|
||||
const title = list ? list.get('title') : id;
|
||||
|
||||
if (typeof list === 'undefined') {
|
||||
return (
|
||||
<Column>
|
||||
<div>
|
||||
<Spinner />
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
} else if (list === false) {
|
||||
return (
|
||||
<MissingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
const emptyMessage = (
|
||||
<div>
|
||||
<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.' />
|
||||
<br /><br />
|
||||
<Button onClick={handleEditClick}><FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' /></Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Column label={title} heading={title} transparent>
|
||||
{/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
|
||||
<div className='column-header__links'>
|
||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleEditClick}>
|
||||
<Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
|
||||
</button>
|
||||
|
||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleDeleteClick}>
|
||||
<Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
|
||||
<FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
|
||||
<Icon id='arrow-right' />
|
||||
</Link>
|
||||
</div>
|
||||
</HomeColumnHeader> */}
|
||||
|
||||
<StatusListContainer
|
||||
scrollKey='list_timeline'
|
||||
timelineId={`list:${id}`}
|
||||
onLoadMore={handleLoadMore}
|
||||
emptyMessage={emptyMessage}
|
||||
divideType='space'
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListTimeline;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
|
||||
import { Button } from '../../../components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
|
||||
title: { id: 'lists.new.create', defaultMessage: 'Add list' },
|
||||
create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
value: state.getIn(['listEditor', 'title']),
|
||||
disabled: state.getIn(['listEditor', 'isSubmitting']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onChange: value => dispatch(changeListEditorTitle(value)),
|
||||
onSubmit: () => dispatch(submitListEditor(true)),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class NewListForm extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
value: PropTypes.string.isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
this.props.onChange(e.target.value);
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
this.props.onSubmit();
|
||||
}
|
||||
|
||||
handleClick = e => {
|
||||
e.preventDefault();
|
||||
this.props.onSubmit();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, disabled, intl } = this.props;
|
||||
|
||||
const label = intl.formatMessage(messages.label);
|
||||
const create = intl.formatMessage(messages.create);
|
||||
|
||||
return (
|
||||
<form className='column-inline-form' method='post' onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{label}</span>
|
||||
|
||||
<input
|
||||
className='setting-text new-list-form__input'
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={this.handleChange}
|
||||
placeholder={label}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<Button
|
||||
className='new-list-form__btn'
|
||||
disabled={disabled}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{create}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
|
||||
import { Button } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
const messages = defineMessages({
|
||||
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
|
||||
title: { id: 'lists.new.create', defaultMessage: 'Add list' },
|
||||
create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
|
||||
});
|
||||
|
||||
const NewListForm: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const value = useAppSelector((state) => state.listEditor.get('title'));
|
||||
const disabled = useAppSelector((state) => !!state.listEditor.get('isSubmitting'));
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(changeListEditorTitle(e.target.value));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement | HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
dispatch(submitListEditor(true));
|
||||
};
|
||||
|
||||
const label = intl.formatMessage(messages.label);
|
||||
const create = intl.formatMessage(messages.create);
|
||||
|
||||
return (
|
||||
<form className='column-inline-form' method='post' onSubmit={handleSubmit}>
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{label}</span>
|
||||
|
||||
<input
|
||||
className='setting-text new-list-form__input'
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={handleChange}
|
||||
placeholder={label}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<Button
|
||||
// className='new-list-form__btn'
|
||||
disabled={disabled}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{create}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewListForm;
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { fetchLists } from 'soapbox/actions/lists';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
import { CardHeader, CardTitle } from 'soapbox/components/ui';
|
||||
|
||||
|
||||
import Column from '../ui/components/column';
|
||||
import ColumnLink from '../ui/components/column_link';
|
||||
|
||||
import NewListForm from './components/new_list_form';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.lists', defaultMessage: 'Lists' },
|
||||
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
|
||||
add: { id: 'lists.new.create', defaultMessage: 'Add list' },
|
||||
});
|
||||
|
||||
const getOrderedLists = createSelector([state => state.get('lists')], lists => {
|
||||
if (!lists) {
|
||||
return lists;
|
||||
}
|
||||
|
||||
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
lists: getOrderedLists(state),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class Lists extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
lists: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(fetchLists());
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, lists } = this.props;
|
||||
|
||||
if (!lists) {
|
||||
return (
|
||||
<Column>
|
||||
<Spinner />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
|
||||
|
||||
return (
|
||||
<Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
|
||||
<br />
|
||||
<CardHeader>
|
||||
<CardTitle title={intl.formatMessage(messages.add)} />
|
||||
</CardHeader>
|
||||
<NewListForm />
|
||||
<br />
|
||||
<CardHeader>
|
||||
<CardTitle title={intl.formatMessage(messages.subheading)} />
|
||||
</CardHeader>
|
||||
<ScrollableList
|
||||
scrollKey='lists'
|
||||
emptyMessage={emptyMessage}
|
||||
>
|
||||
{lists.map(list =>
|
||||
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { fetchLists } from 'soapbox/actions/lists';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
import { CardHeader, CardTitle } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import Column from '../ui/components/column';
|
||||
import ColumnLink from '../ui/components/column_link';
|
||||
|
||||
import NewListForm from './components/new_list_form';
|
||||
|
||||
import type { RootState } from 'soapbox/store';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.lists', defaultMessage: 'Lists' },
|
||||
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
|
||||
add: { id: 'lists.new.create', defaultMessage: 'Add list' },
|
||||
});
|
||||
|
||||
const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
|
||||
if (!lists) {
|
||||
return lists;
|
||||
}
|
||||
|
||||
return lists.toList().filter((item) => !!item).sort((a: any, b: any) => a.get('title').localeCompare(b.get('title')));
|
||||
});
|
||||
|
||||
const Lists: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const lists = useAppSelector((state) => getOrderedLists(state));
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchLists());
|
||||
}, []);
|
||||
|
||||
if (!lists) {
|
||||
return (
|
||||
<Column>
|
||||
<Spinner />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
|
||||
|
||||
return (
|
||||
<Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
|
||||
<br />
|
||||
<CardHeader>
|
||||
<CardTitle title={intl.formatMessage(messages.add)} />
|
||||
</CardHeader>
|
||||
<NewListForm />
|
||||
<br />
|
||||
<CardHeader>
|
||||
<CardTitle title={intl.formatMessage(messages.subheading)} />
|
||||
</CardHeader>
|
||||
<ScrollableList
|
||||
scrollKey='lists'
|
||||
emptyMessage={emptyMessage}
|
||||
>
|
||||
{lists.map((list: any) =>
|
||||
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lists;
|
||||
|
|
@ -5,6 +5,7 @@ export { ChatRecord, normalizeChat } from './chat';
|
|||
export { ChatMessageRecord, normalizeChatMessage } from './chat_message';
|
||||
export { EmojiRecord, normalizeEmoji } from './emoji';
|
||||
export { InstanceRecord, normalizeInstance } from './instance';
|
||||
export { ListRecord, normalizeList } from './list';
|
||||
export { MentionRecord, normalizeMention } from './mention';
|
||||
export { NotificationRecord, normalizeNotification } from './notification';
|
||||
export { PollRecord, PollOptionRecord, normalizePoll } from './poll';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* List normalizer:
|
||||
* Converts API lists into our internal format.
|
||||
* @see {@link https://docs.joinmastodon.org/entities/list/}
|
||||
*/
|
||||
import { Record as ImmutableRecord, Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
||||
// https://docs.joinmastodon.org/entities/list/
|
||||
export const ListRecord = ImmutableRecord({
|
||||
id: '',
|
||||
title: '',
|
||||
replies_policy: null as 'followed' | 'list' | 'none' | null,
|
||||
});
|
||||
|
||||
export const normalizeList = (list: Record<string, any>) => {
|
||||
return ListRecord(
|
||||
ImmutableMap(fromJS(list)),
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
|
||||
|
||||
import * as actions from 'soapbox/actions/lists';
|
||||
|
||||
|
|
@ -6,87 +6,87 @@ import reducer from '../list_adder';
|
|||
|
||||
describe('list_adder reducer', () => {
|
||||
it('should return the initial state', () => {
|
||||
expect(reducer(undefined, {})).toEqual(ImmutableMap({
|
||||
expect(reducer(undefined, {})).toMatchObject({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle LIST_ADDER_RESET', () => {
|
||||
const state = ImmutableMap({
|
||||
const state = ImmutableRecord({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: ImmutableRecord({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
});
|
||||
})(),
|
||||
})();
|
||||
const action = {
|
||||
type: actions.LIST_ADDER_RESET,
|
||||
};
|
||||
expect(reducer(state, action)).toEqual(ImmutableMap({
|
||||
expect(reducer(state, action)).toMatchObject({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle LIST_ADDER_LISTS_FETCH_REQUEST', () => {
|
||||
const state = ImmutableMap({
|
||||
const state = ImmutableRecord({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: ImmutableRecord({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
});
|
||||
})(),
|
||||
})();
|
||||
const action = {
|
||||
type: actions.LIST_ADDER_LISTS_FETCH_REQUEST,
|
||||
};
|
||||
expect(reducer(state, action)).toEqual(ImmutableMap({
|
||||
expect(reducer(state, action)).toMatchObject({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: true,
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle LIST_ADDER_LISTS_FETCH_FAIL', () => {
|
||||
const state = ImmutableMap({
|
||||
const state = ImmutableRecord({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: ImmutableRecord({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
});
|
||||
})(),
|
||||
})();
|
||||
const action = {
|
||||
type: actions.LIST_ADDER_LISTS_FETCH_FAIL,
|
||||
};
|
||||
expect(reducer(state, action)).toEqual(ImmutableMap({
|
||||
expect(reducer(state, action)).toMatchObject({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
lists: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// it('should handle LIST_ADDER_LISTS_FETCH_SUCCESS', () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import { Map as ImmutableMap, List as ImmutableList, Record as ImmutableRecord } from 'immutable';
|
||||
|
||||
import * as actions from 'soapbox/actions/lists';
|
||||
|
||||
|
|
@ -6,83 +6,83 @@ import reducer from '../list_editor';
|
|||
|
||||
describe('list_editor reducer', () => {
|
||||
it('should return the initial state', () => {
|
||||
expect(reducer(undefined, {})).toEqual(ImmutableMap({
|
||||
expect(reducer(undefined, {})).toMatchObject({
|
||||
listId: null,
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: '',
|
||||
|
||||
accounts: ImmutableMap({
|
||||
accounts: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
},
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
suggestions: {
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle LIST_EDITOR_RESET', () => {
|
||||
const state = ImmutableMap({
|
||||
const state = ImmutableRecord({
|
||||
listId: null,
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: '',
|
||||
|
||||
accounts: ImmutableMap({
|
||||
accounts: ImmutableRecord({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
})(),
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
suggestions: ImmutableRecord({
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
});
|
||||
})(),
|
||||
})();
|
||||
const action = {
|
||||
type: actions.LIST_EDITOR_RESET,
|
||||
};
|
||||
expect(reducer(state, action)).toEqual(ImmutableMap({
|
||||
expect(reducer(state, action)).toMatchObject({
|
||||
listId: null,
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: '',
|
||||
|
||||
accounts: ImmutableMap({
|
||||
accounts: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
},
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
suggestions: {
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle LIST_EDITOR_SETUP', () => {
|
||||
const state = ImmutableMap({
|
||||
const state = ImmutableRecord({
|
||||
listId: null,
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: '',
|
||||
|
||||
accounts: ImmutableMap({
|
||||
accounts: ImmutableRecord({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
})(),
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
suggestions: ImmutableRecord({
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
});
|
||||
})(),
|
||||
})();
|
||||
const action = {
|
||||
type: actions.LIST_EDITOR_SETUP,
|
||||
list: ImmutableMap({
|
||||
|
|
@ -90,23 +90,23 @@ describe('list_editor reducer', () => {
|
|||
title: 'list 1',
|
||||
}),
|
||||
};
|
||||
expect(reducer(state, action)).toEqual(ImmutableMap({
|
||||
expect(reducer(state, action)).toMatchObject({
|
||||
listId: '22',
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: 'list 1',
|
||||
|
||||
accounts: ImmutableMap({
|
||||
accounts: {
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
},
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
suggestions: {
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
}));
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle LIST_EDITOR_TITLE_CHANGE', () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
|
||||
import { AnyAction } from 'redux';
|
||||
|
||||
import {
|
||||
LIST_ADDER_RESET,
|
||||
|
|
@ -10,20 +11,24 @@ import {
|
|||
LIST_EDITOR_REMOVE_SUCCESS,
|
||||
} from '../actions/lists';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
const ListsRecord = ImmutableRecord({
|
||||
items: ImmutableList<string>(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
});
|
||||
|
||||
export default function listAdderReducer(state = initialState, action) {
|
||||
const ReducerRecord = ImmutableRecord({
|
||||
accountId: null as string | null,
|
||||
|
||||
lists: ListsRecord(),
|
||||
});
|
||||
|
||||
type State = ReturnType<typeof ReducerRecord>;
|
||||
|
||||
export default function listAdderReducer(state: State = ReducerRecord(), action: AnyAction) {
|
||||
switch(action.type) {
|
||||
case LIST_ADDER_RESET:
|
||||
return initialState;
|
||||
return ReducerRecord();
|
||||
case LIST_ADDER_SETUP:
|
||||
return state.withMutations(map => {
|
||||
map.set('accountId', action.account.get('id'));
|
||||
|
|
@ -36,12 +41,12 @@ export default function listAdderReducer(state = initialState, action) {
|
|||
return state.update('lists', lists => lists.withMutations(map => {
|
||||
map.set('isLoading', false);
|
||||
map.set('loaded', true);
|
||||
map.set('items', ImmutableList(action.lists.map(item => item.id)));
|
||||
map.set('items', ImmutableList(action.lists.map((item: { id: string }) => item.id)));
|
||||
}));
|
||||
case LIST_EDITOR_ADD_SUCCESS:
|
||||
return state.updateIn(['lists', 'items'], list => list.unshift(action.listId));
|
||||
return state.updateIn(['lists', 'items'], list => (list as ImmutableList<string>).unshift(action.listId));
|
||||
case LIST_EDITOR_REMOVE_SUCCESS:
|
||||
return state.updateIn(['lists', 'items'], list => list.filterNot(item => item === action.listId));
|
||||
return state.updateIn(['lists', 'items'], list => (list as ImmutableList<string>).filterNot(item => item === action.listId));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
|
||||
import { AnyAction } from 'redux';
|
||||
|
||||
import {
|
||||
LIST_CREATE_REQUEST,
|
||||
|
|
@ -20,28 +21,34 @@ import {
|
|||
LIST_EDITOR_REMOVE_SUCCESS,
|
||||
} from '../actions/lists';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
listId: null,
|
||||
const AccountsRecord = ImmutableRecord({
|
||||
items: ImmutableList<string>(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
});
|
||||
|
||||
const SuggestionsRecord = ImmutableRecord({
|
||||
value: '',
|
||||
items: ImmutableList<string>(),
|
||||
});
|
||||
|
||||
const ReducerRecord = ImmutableRecord({
|
||||
listId: null as string | null,
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: '',
|
||||
|
||||
accounts: ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
accounts: AccountsRecord(),
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
suggestions: SuggestionsRecord(),
|
||||
});
|
||||
|
||||
export default function listEditorReducer(state = initialState, action) {
|
||||
type State = ReturnType<typeof ReducerRecord>;
|
||||
|
||||
export default function listEditorReducer(state: State = ReducerRecord(), action: AnyAction) {
|
||||
switch(action.type) {
|
||||
case LIST_EDITOR_RESET:
|
||||
return initialState;
|
||||
return ReducerRecord();
|
||||
case LIST_EDITOR_SETUP:
|
||||
return state.withMutations(map => {
|
||||
map.set('listId', action.list.get('id'));
|
||||
|
|
@ -76,21 +83,21 @@ export default function listEditorReducer(state = initialState, action) {
|
|||
return state.update('accounts', accounts => accounts.withMutations(map => {
|
||||
map.set('isLoading', false);
|
||||
map.set('loaded', true);
|
||||
map.set('items', ImmutableList(action.accounts.map(item => item.id)));
|
||||
map.set('items', ImmutableList(action.accounts.map((item: { id: string }) => item.id)));
|
||||
}));
|
||||
case LIST_EDITOR_SUGGESTIONS_CHANGE:
|
||||
return state.setIn(['suggestions', 'value'], action.value);
|
||||
case LIST_EDITOR_SUGGESTIONS_READY:
|
||||
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
|
||||
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map((item: { id: string }) => item.id)));
|
||||
case LIST_EDITOR_SUGGESTIONS_CLEAR:
|
||||
return state.update('suggestions', suggestions => suggestions.withMutations(map => {
|
||||
map.set('items', ImmutableList());
|
||||
map.set('value', '');
|
||||
}));
|
||||
case LIST_EDITOR_ADD_SUCCESS:
|
||||
return state.updateIn(['accounts', 'items'], list => list.unshift(action.accountId));
|
||||
return state.updateIn(['accounts', 'items'], list => (list as ImmutableList<string>).unshift(action.accountId));
|
||||
case LIST_EDITOR_REMOVE_SUCCESS:
|
||||
return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId));
|
||||
return state.updateIn(['accounts', 'items'], list => (list as ImmutableList<string>).filterNot((item) => item === action.accountId));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
||||
import {
|
||||
LIST_FETCH_SUCCESS,
|
||||
LIST_FETCH_FAIL,
|
||||
LISTS_FETCH_SUCCESS,
|
||||
LIST_CREATE_SUCCESS,
|
||||
LIST_UPDATE_SUCCESS,
|
||||
LIST_DELETE_SUCCESS,
|
||||
} from '../actions/lists';
|
||||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
const normalizeList = (state, list) => state.set(list.id, fromJS(list));
|
||||
|
||||
const normalizeLists = (state, lists) => {
|
||||
lists.forEach(list => {
|
||||
state = normalizeList(state, list);
|
||||
});
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
export default function lists(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case LIST_FETCH_SUCCESS:
|
||||
case LIST_CREATE_SUCCESS:
|
||||
case LIST_UPDATE_SUCCESS:
|
||||
return normalizeList(state, action.list);
|
||||
case LISTS_FETCH_SUCCESS:
|
||||
return normalizeLists(state, action.lists);
|
||||
case LIST_DELETE_SUCCESS:
|
||||
case LIST_FETCH_FAIL:
|
||||
return state.set(action.id, false);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { Map as ImmutableMap } from 'immutable';
|
||||
import { AnyAction } from 'redux';
|
||||
|
||||
import {
|
||||
LIST_FETCH_SUCCESS,
|
||||
LIST_FETCH_FAIL,
|
||||
LISTS_FETCH_SUCCESS,
|
||||
LIST_CREATE_SUCCESS,
|
||||
LIST_UPDATE_SUCCESS,
|
||||
LIST_DELETE_SUCCESS,
|
||||
} from 'soapbox/actions/lists';
|
||||
import { normalizeList } from 'soapbox/normalizers';
|
||||
|
||||
type ListRecord = ReturnType<typeof normalizeList>;
|
||||
type APIEntity = Record<string, any>;
|
||||
type APIEntities = Array<APIEntity>;
|
||||
|
||||
type State = ImmutableMap<string, ListRecord | false>;
|
||||
|
||||
const initialState: State = ImmutableMap();
|
||||
|
||||
const importList = (state: State, list: APIEntity) => state.set(list.id, normalizeList(list));
|
||||
|
||||
const importLists = (state: State, lists: APIEntities) => {
|
||||
lists.forEach(list => {
|
||||
state = importList(state, list);
|
||||
});
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
export default function lists(state: State = initialState, action: AnyAction) {
|
||||
switch(action.type) {
|
||||
case LIST_FETCH_SUCCESS:
|
||||
case LIST_CREATE_SUCCESS:
|
||||
case LIST_UPDATE_SUCCESS:
|
||||
return importList(state, action.list);
|
||||
case LISTS_FETCH_SUCCESS:
|
||||
return importLists(state, action.lists);
|
||||
case LIST_DELETE_SUCCESS:
|
||||
case LIST_FETCH_FAIL:
|
||||
return state.set(action.id, false);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue