Add list of lists component to web UI (#5811)
* Add list of lists component to web UI * Add list adding * Add list removing * List editor modal * Add API account search limited by following=true relation * Rework list editor modal * Remove mandatory pagination of GET /api/v1/lists/:id/accounts * Adjust search input placeholder * Fix rspec (#5890) * i18n: (zh-CN) Add missing translations for #5811 (#5891) * i18n: (zh-CN) yarn manage:translations -- zh-CN * i18n: (zh-CN) Add missing translations for #5811 * Fix some issues - Display loading/missing state for list timelines - Order lists alphabetically in overview - Fix async list editor reset - Redirect to /lists after deleting unpinned list - Redirect to / after pinning a list * Remove dead list columns when a list is deleted or fetch returns 404master
Eugen Rochko
7 years ago
committed by
GitHub
parent
12cea76634
commit
e20895f251
@ -0,0 +1,77 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { connect } from 'react-redux'; |
||||
import { makeGetAccount } from '../../../selectors'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import Avatar from '../../../components/avatar'; |
||||
import DisplayName from '../../../components/display_name'; |
||||
import IconButton from '../../../components/icon_button'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import { removeFromListEditor, addToListEditor } from '../../../actions/lists'; |
||||
|
||||
const messages = defineMessages({ |
||||
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' }, |
||||
add: { id: 'lists.account.add', defaultMessage: 'Add to list' }, |
||||
}); |
||||
|
||||
const makeMapStateToProps = () => { |
||||
const getAccount = makeGetAccount(); |
||||
|
||||
const mapStateToProps = (state, { accountId, added }) => ({ |
||||
account: getAccount(state, accountId), |
||||
added: typeof added === 'undefined' ? state.getIn(['listEditor', 'accounts', 'items']).includes(accountId) : added, |
||||
}); |
||||
|
||||
return mapStateToProps; |
||||
}; |
||||
|
||||
const mapDispatchToProps = (dispatch, { accountId }) => ({ |
||||
onRemove: () => dispatch(removeFromListEditor(accountId)), |
||||
onAdd: () => dispatch(addToListEditor(accountId)), |
||||
}); |
||||
|
||||
@connect(makeMapStateToProps, mapDispatchToProps) |
||||
@injectIntl |
||||
export default class Account extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
account: ImmutablePropTypes.map.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
onRemove: PropTypes.func.isRequired, |
||||
onAdd: PropTypes.func.isRequired, |
||||
added: PropTypes.bool, |
||||
}; |
||||
|
||||
static defaultProps = { |
||||
added: false, |
||||
}; |
||||
|
||||
render () { |
||||
const { account, intl, onRemove, onAdd, added } = this.props; |
||||
|
||||
let button; |
||||
|
||||
if (added) { |
||||
button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />; |
||||
} else { |
||||
button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />; |
||||
} |
||||
|
||||
return ( |
||||
<div className='account'> |
||||
<div className='account__wrapper'> |
||||
<div className='account__display-name'> |
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div> |
||||
<DisplayName account={account} /> |
||||
</div> |
||||
|
||||
<div className='account__relationship'> |
||||
{button} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { connect } from 'react-redux'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists'; |
||||
import classNames from 'classnames'; |
||||
|
||||
const messages = defineMessages({ |
||||
search: { id: 'lists.search', defaultMessage: 'Search among people you follow' }, |
||||
}); |
||||
|
||||
const mapStateToProps = state => ({ |
||||
value: state.getIn(['listEditor', 'suggestions', 'value']), |
||||
}); |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
onSubmit: value => dispatch(fetchListSuggestions(value)), |
||||
onClear: () => dispatch(clearListSuggestions()), |
||||
onChange: value => dispatch(changeListSuggestions(value)), |
||||
}); |
||||
|
||||
@connect(mapStateToProps, mapDispatchToProps) |
||||
@injectIntl |
||||
export default 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); |
||||
} |
||||
} |
||||
|
||||
handleClear = () => { |
||||
this.props.onClear(); |
||||
} |
||||
|
||||
render () { |
||||
const { value, intl } = this.props; |
||||
const hasValue = value.length > 0; |
||||
|
||||
return ( |
||||
<div className='list-editor__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}> |
||||
<i className={classNames('fa fa-search', { active: !hasValue })} /> |
||||
<i aria-label={intl.formatMessage(messages.search)} className={classNames('fa fa-times-circle', { active: hasValue })} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,80 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import { connect } from 'react-redux'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import { injectIntl } from 'react-intl'; |
||||
import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists'; |
||||
import Account from './components/account'; |
||||
import Search from './components/search'; |
||||
import Motion from '../ui/util/optional_motion'; |
||||
import spring from 'react-motion/lib/spring'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
title: state.getIn(['listEditor', 'title']), |
||||
accountIds: state.getIn(['listEditor', 'accounts', 'items']), |
||||
searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']), |
||||
}); |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
onInitialize: listId => dispatch(setupListEditor(listId)), |
||||
onClear: () => dispatch(clearListSuggestions()), |
||||
onReset: () => dispatch(resetListEditor()), |
||||
}); |
||||
|
||||
@connect(mapStateToProps, mapDispatchToProps) |
||||
@injectIntl |
||||
export default class ListEditor extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
listId: PropTypes.string.isRequired, |
||||
onClose: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
onInitialize: PropTypes.func.isRequired, |
||||
onClear: PropTypes.func.isRequired, |
||||
onReset: PropTypes.func.isRequired, |
||||
title: PropTypes.string.isRequired, |
||||
accountIds: ImmutablePropTypes.list.isRequired, |
||||
searchAccountIds: ImmutablePropTypes.list.isRequired, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { onInitialize, listId } = this.props; |
||||
onInitialize(listId); |
||||
} |
||||
|
||||
componentWillUnmount () { |
||||
const { onReset } = this.props; |
||||
onReset(); |
||||
} |
||||
|
||||
render () { |
||||
const { title, accountIds, searchAccountIds, onClear } = this.props; |
||||
const showSearch = searchAccountIds.size > 0; |
||||
|
||||
return ( |
||||
<div className='modal-root__modal list-editor'> |
||||
<h4>{title}</h4> |
||||
|
||||
<Search /> |
||||
|
||||
<div className='drawer__pager'> |
||||
<div className='drawer__inner list-editor__accounts'> |
||||
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)} |
||||
</div> |
||||
|
||||
{showSearch && <div role='button' tabIndex='-1' className='drawer__backdrop' onClick={onClear} />} |
||||
|
||||
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}> |
||||
{({ x }) => |
||||
<div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}> |
||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)} |
||||
</div> |
||||
} |
||||
</Motion> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,80 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists'; |
||||
import IconButton from '../../../components/icon_button'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
|
||||
const messages = defineMessages({ |
||||
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' }, |
||||
title: { id: 'lists.new.create', defaultMessage: 'Add list' }, |
||||
}); |
||||
|
||||
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)), |
||||
}); |
||||
|
||||
@connect(mapStateToProps, mapDispatchToProps) |
||||
@injectIntl |
||||
export default 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); |
||||
} |
||||
|
||||
handleKeyUp = e => { |
||||
if (e.keyCode === 13) { |
||||
this.props.onSubmit(); |
||||
} |
||||
} |
||||
|
||||
handleClick = () => { |
||||
this.props.onSubmit(); |
||||
} |
||||
|
||||
render () { |
||||
const { value, disabled, intl } = this.props; |
||||
|
||||
const label = intl.formatMessage(messages.label); |
||||
const title = intl.formatMessage(messages.title); |
||||
|
||||
return ( |
||||
<div className='column-inline-form'> |
||||
<label> |
||||
<span style={{ display: 'none' }}>{label}</span> |
||||
|
||||
<input |
||||
className='setting-text' |
||||
value={value} |
||||
disabled={disabled} |
||||
onChange={this.handleChange} |
||||
onKeyUp={this.handleKeyUp} |
||||
placeholder={label} |
||||
/> |
||||
</label> |
||||
|
||||
<IconButton |
||||
disabled={disabled} |
||||
icon='plus' |
||||
title={title} |
||||
onClick={this.handleClick} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,76 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import LoadingIndicator from '../../components/loading_indicator'; |
||||
import Column from '../ui/components/column'; |
||||
import ColumnBackButtonSlim from '../../components/column_back_button_slim'; |
||||
import { fetchLists } from '../../actions/lists'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import ColumnLink from '../ui/components/column_link'; |
||||
import ColumnSubheading from '../ui/components/column_subheading'; |
||||
import NewListForm from './components/new_list_form'; |
||||
import { createSelector } from 'reselect'; |
||||
|
||||
const messages = defineMessages({ |
||||
heading: { id: 'column.lists', defaultMessage: 'Lists' }, |
||||
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' }, |
||||
}); |
||||
|
||||
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), |
||||
}); |
||||
|
||||
@connect(mapStateToProps) |
||||
@injectIntl |
||||
export default class Lists extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
params: PropTypes.object.isRequired, |
||||
dispatch: PropTypes.func.isRequired, |
||||
lists: ImmutablePropTypes.list, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
componentWillMount () { |
||||
this.props.dispatch(fetchLists()); |
||||
} |
||||
|
||||
render () { |
||||
const { intl, lists } = this.props; |
||||
|
||||
if (!lists) { |
||||
return ( |
||||
<Column> |
||||
<LoadingIndicator /> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Column icon='bars' heading={intl.formatMessage(messages.heading)}> |
||||
<ColumnBackButtonSlim /> |
||||
|
||||
<NewListForm /> |
||||
|
||||
<div className='scrollable'> |
||||
<ColumnSubheading text={intl.formatMessage(messages.subheading)} /> |
||||
|
||||
{lists.map(list => |
||||
<ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='bars' text={list.get('title')} /> |
||||
)} |
||||
</div> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,89 @@ |
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; |
||||
import { |
||||
LIST_CREATE_REQUEST, |
||||
LIST_CREATE_FAIL, |
||||
LIST_CREATE_SUCCESS, |
||||
LIST_UPDATE_REQUEST, |
||||
LIST_UPDATE_FAIL, |
||||
LIST_UPDATE_SUCCESS, |
||||
LIST_EDITOR_RESET, |
||||
LIST_EDITOR_SETUP, |
||||
LIST_EDITOR_TITLE_CHANGE, |
||||
LIST_ACCOUNTS_FETCH_REQUEST, |
||||
LIST_ACCOUNTS_FETCH_SUCCESS, |
||||
LIST_ACCOUNTS_FETCH_FAIL, |
||||
LIST_EDITOR_SUGGESTIONS_READY, |
||||
LIST_EDITOR_SUGGESTIONS_CLEAR, |
||||
LIST_EDITOR_SUGGESTIONS_CHANGE, |
||||
LIST_EDITOR_ADD_SUCCESS, |
||||
LIST_EDITOR_REMOVE_SUCCESS, |
||||
} from '../actions/lists'; |
||||
|
||||
const initialState = ImmutableMap({ |
||||
listId: null, |
||||
isSubmitting: false, |
||||
title: '', |
||||
|
||||
accounts: ImmutableMap({ |
||||
items: ImmutableList(), |
||||
loaded: false, |
||||
isLoading: false, |
||||
}), |
||||
|
||||
suggestions: ImmutableMap({ |
||||
value: '', |
||||
items: ImmutableList(), |
||||
}), |
||||
}); |
||||
|
||||
export default function listEditorReducer(state = initialState, action) { |
||||
switch(action.type) { |
||||
case LIST_EDITOR_RESET: |
||||
return initialState; |
||||
case LIST_EDITOR_SETUP: |
||||
return state.withMutations(map => { |
||||
map.set('listId', action.list.get('id')); |
||||
map.set('title', action.list.get('title')); |
||||
map.set('isSubmitting', false); |
||||
}); |
||||
case LIST_EDITOR_TITLE_CHANGE: |
||||
return state.set('title', action.value); |
||||
case LIST_CREATE_REQUEST: |
||||
case LIST_UPDATE_REQUEST: |
||||
return state.set('isSubmitting', true); |
||||
case LIST_CREATE_FAIL: |
||||
case LIST_UPDATE_FAIL: |
||||
return state.set('isSubmitting', false); |
||||
case LIST_CREATE_SUCCESS: |
||||
case LIST_UPDATE_SUCCESS: |
||||
return state.withMutations(map => { |
||||
map.set('isSubmitting', false); |
||||
map.set('listId', action.list.id); |
||||
}); |
||||
case LIST_ACCOUNTS_FETCH_REQUEST: |
||||
return state.setIn(['accounts', 'isLoading'], true); |
||||
case LIST_ACCOUNTS_FETCH_FAIL: |
||||
return state.setIn(['accounts', 'isLoading'], false); |
||||
case LIST_ACCOUNTS_FETCH_SUCCESS: |
||||
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))); |
||||
})); |
||||
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))); |
||||
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)); |
||||
case LIST_EDITOR_REMOVE_SUCCESS: |
||||
return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId)); |
||||
default: |
||||
return state; |
||||
} |
||||
}; |
||||
Loading…
Reference in new issue