@ -0,0 +1,24 @@ | |||
import React from 'react'; | |||
import { connect } from 'react-redux'; | |||
import { makeGetAccount } from 'flavours/glitch/selectors'; | |||
import { injectIntl } from 'react-intl'; | |||
import { pinAccount, unpinAccount } from 'flavours/glitch/actions/accounts'; | |||
import Account from 'flavours/glitch/features/list_editor/components/account'; | |||
const makeMapStateToProps = () => { | |||
const getAccount = makeGetAccount(); | |||
const mapStateToProps = (state, { accountId, added }) => ({ | |||
account: getAccount(state, accountId), | |||
added: typeof added === 'undefined' ? state.getIn(['pinnedAccountsEditor', 'accounts', 'items']).includes(accountId) : added, | |||
}); | |||
return mapStateToProps; | |||
}; | |||
const mapDispatchToProps = (dispatch, { accountId }) => ({ | |||
onRemove: () => dispatch(unpinAccount(accountId)), | |||
onAdd: () => dispatch(pinAccount(accountId)), | |||
}); | |||
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account)); |
@ -0,0 +1,21 @@ | |||
import React from 'react'; | |||
import { connect } from 'react-redux'; | |||
import { injectIntl } from 'react-intl'; | |||
import { | |||
fetchPinnedAccountsSuggestions, | |||
clearPinnedAccountsSuggestions, | |||
changePinnedAccountsSuggestions | |||
} from '../../../actions/accounts'; | |||
import Search from 'flavours/glitch/features/list_editor/components/search'; | |||
const mapStateToProps = state => ({ | |||
value: state.getIn(['pinnedAccountsEditor', 'suggestions', 'value']), | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onSubmit: value => dispatch(fetchPinnedAccountsSuggestions(value)), | |||
onClear: () => dispatch(clearPinnedAccountsSuggestions()), | |||
onChange: value => dispatch(changePinnedAccountsSuggestions(value)), | |||
}); | |||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Search)); |
@ -0,0 +1,78 @@ | |||
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, FormattedMessage } from 'react-intl'; | |||
import { fetchPinnedAccounts, clearPinnedAccountsSuggestions, resetPinnedAccountsEditor } from 'flavours/glitch/actions/accounts'; | |||
import AccountContainer from './containers/account_container'; | |||
import SearchContainer from './containers/search_container'; | |||
import Motion from 'flavours/glitch/util/optional_motion'; | |||
import spring from 'react-motion/lib/spring'; | |||
const mapStateToProps = state => ({ | |||
accountIds: state.getIn(['pinnedAccountsEditor', 'accounts', 'items']), | |||
searchAccountIds: state.getIn(['pinnedAccountsEditor', 'suggestions', 'items']), | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onInitialize: () => dispatch(fetchPinnedAccounts()), | |||
onClear: () => dispatch(clearPinnedAccountsSuggestions()), | |||
onReset: () => dispatch(resetPinnedAccountsEditor()), | |||
}); | |||
@connect(mapStateToProps, mapDispatchToProps) | |||
@injectIntl | |||
export default class PinnedAccountsEditor extends ImmutablePureComponent { | |||
static propTypes = { | |||
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 } = this.props; | |||
onInitialize(); | |||
} | |||
componentWillUnmount () { | |||
const { onReset } = this.props; | |||
onReset(); | |||
} | |||
render () { | |||
const { accountIds, searchAccountIds, onClear } = this.props; | |||
const showSearch = searchAccountIds.size > 0; | |||
return ( | |||
<div className='modal-root__modal list-editor'> | |||
<h4><FormattedMessage id='endorsed_accounts_editor.endorsed_accounts' defaultMessage='Featured accounts' /></h4> | |||
<SearchContainer /> | |||
<div className='drawer__pager'> | |||
<div className='drawer__inner list-editor__accounts'> | |||
{accountIds.map(accountId => <AccountContainer 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 => <AccountContainer key={accountId} accountId={accountId} />)} | |||
</div>) | |||
} | |||
</Motion> | |||
</div> | |||
</div> | |||
); | |||
} | |||
} |
@ -0,0 +1,57 @@ | |||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; | |||
import { | |||
PINNED_ACCOUNTS_EDITOR_RESET, | |||
PINNED_ACCOUNTS_FETCH_REQUEST, | |||
PINNED_ACCOUNTS_FETCH_SUCCESS, | |||
PINNED_ACCOUNTS_FETCH_FAIL, | |||
PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY, | |||
PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR, | |||
PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CHANGE, | |||
ACCOUNT_PIN_SUCCESS, | |||
ACCOUNT_UNPIN_SUCCESS, | |||
} from '../actions/accounts'; | |||
const initialState = ImmutableMap({ | |||
accounts: ImmutableMap({ | |||
items: ImmutableList(), | |||
loaded: false, | |||
isLoading: false, | |||
}), | |||
suggestions: ImmutableMap({ | |||
value: '', | |||
items: ImmutableList(), | |||
}), | |||
}); | |||
export default function listEditorReducer(state = initialState, action) { | |||
switch(action.type) { | |||
case PINNED_ACCOUNTS_EDITOR_RESET: | |||
return initialState; | |||
case PINNED_ACCOUNTS_FETCH_REQUEST: | |||
return state.setIn(['accounts', 'isLoading'], true); | |||
case PINNED_ACCOUNTS_FETCH_FAIL: | |||
return state.setIn(['accounts', 'isLoading'], false); | |||
case PINNED_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 PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CHANGE: | |||
return state.setIn(['suggestions', 'value'], action.value); | |||
case PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY: | |||
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id))); | |||
case PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR: | |||
return state.update('suggestions', suggestions => suggestions.withMutations(map => { | |||
map.set('items', ImmutableList()); | |||
map.set('value', ''); | |||
})); | |||
case ACCOUNT_PIN_SUCCESS: | |||
return state.updateIn(['accounts', 'items'], list => list.unshift(action.relationship.id)); | |||
case ACCOUNT_UNPIN_SUCCESS: | |||
return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.relationship.id)); | |||
default: | |||
return state; | |||
} | |||
}; |