parent
9fbaaefe59
commit
360fbf1bd4
@ -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; |
||||
} |
||||
}; |
Loading…
Reference in new issue