Fix duplicate and missing keys in search popout component in web UI (#28834)
This commit is contained in:
parent
93957daa50
commit
9f8e3cca9a
|
@ -179,6 +179,11 @@ export const openURL = (value, history, onFailure) => (dispatch, getState) => {
|
||||||
|
|
||||||
export const clickSearchResult = (q, type) => (dispatch, getState) => {
|
export const clickSearchResult = (q, type) => (dispatch, getState) => {
|
||||||
const previous = getState().getIn(['search', 'recent']);
|
const previous = getState().getIn(['search', 'recent']);
|
||||||
|
|
||||||
|
if (previous.some(x => x.get('q') === q && x.get('type') === type)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const me = getState().getIn(['meta', 'me']);
|
const me = getState().getIn(['meta', 'me']);
|
||||||
const current = previous.add(fromJS({ type, q })).takeLast(4);
|
const current = previous.add(fromJS({ type, q })).takeLast(4);
|
||||||
|
|
||||||
|
|
|
@ -62,14 +62,14 @@ class Search extends PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
defaultOptions = [
|
defaultOptions = [
|
||||||
{ label: <><mark>has:</mark> <FormattedList type='disjunction' value={['media', 'poll', 'embed']} /></>, action: e => { e.preventDefault(); this._insertText('has:'); } },
|
{ key: 'prompt-has', label: <><mark>has:</mark> <FormattedList type='disjunction' value={['media', 'poll', 'embed']} /></>, action: e => { e.preventDefault(); this._insertText('has:'); } },
|
||||||
{ label: <><mark>is:</mark> <FormattedList type='disjunction' value={['reply', 'sensitive']} /></>, action: e => { e.preventDefault(); this._insertText('is:'); } },
|
{ key: 'prompt-is', label: <><mark>is:</mark> <FormattedList type='disjunction' value={['reply', 'sensitive']} /></>, action: e => { e.preventDefault(); this._insertText('is:'); } },
|
||||||
{ label: <><mark>language:</mark> <FormattedMessage id='search_popout.language_code' defaultMessage='ISO language code' /></>, action: e => { e.preventDefault(); this._insertText('language:'); } },
|
{ key: 'prompt-language', label: <><mark>language:</mark> <FormattedMessage id='search_popout.language_code' defaultMessage='ISO language code' /></>, action: e => { e.preventDefault(); this._insertText('language:'); } },
|
||||||
{ label: <><mark>from:</mark> <FormattedMessage id='search_popout.user' defaultMessage='user' /></>, action: e => { e.preventDefault(); this._insertText('from:'); } },
|
{ key: 'prompt-from', label: <><mark>from:</mark> <FormattedMessage id='search_popout.user' defaultMessage='user' /></>, action: e => { e.preventDefault(); this._insertText('from:'); } },
|
||||||
{ label: <><mark>before:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('before:'); } },
|
{ key: 'prompt-before', label: <><mark>before:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('before:'); } },
|
||||||
{ label: <><mark>during:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('during:'); } },
|
{ key: 'prompt-during', label: <><mark>during:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('during:'); } },
|
||||||
{ label: <><mark>after:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('after:'); } },
|
{ key: 'prompt-after', label: <><mark>after:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('after:'); } },
|
||||||
{ label: <><mark>in:</mark> <FormattedList type='disjunction' value={['all', 'library', 'public']} /></>, action: e => { e.preventDefault(); this._insertText('in:'); } }
|
{ key: 'prompt-in', label: <><mark>in:</mark> <FormattedList type='disjunction' value={['all', 'library', 'public']} /></>, action: e => { e.preventDefault(); this._insertText('in:'); } }
|
||||||
];
|
];
|
||||||
|
|
||||||
setRef = c => {
|
setRef = c => {
|
||||||
|
@ -262,6 +262,8 @@ class Search extends PureComponent {
|
||||||
const { recent } = this.props;
|
const { recent } = this.props;
|
||||||
|
|
||||||
return recent.toArray().map(search => ({
|
return recent.toArray().map(search => ({
|
||||||
|
key: `${search.get('type')}/${search.get('q')}`,
|
||||||
|
|
||||||
label: labelForRecentSearch(search),
|
label: labelForRecentSearch(search),
|
||||||
|
|
||||||
action: () => this.handleRecentSearchClick(search),
|
action: () => this.handleRecentSearchClick(search),
|
||||||
|
@ -346,8 +348,8 @@ class Search extends PureComponent {
|
||||||
<h4><FormattedMessage id='search_popout.recent' defaultMessage='Recent searches' /></h4>
|
<h4><FormattedMessage id='search_popout.recent' defaultMessage='Recent searches' /></h4>
|
||||||
|
|
||||||
<div className='search__popout__menu'>
|
<div className='search__popout__menu'>
|
||||||
{recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => (
|
{recent.size > 0 ? this._getOptions().map(({ label, key, action, forget }, i) => (
|
||||||
<button key={label} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
|
<button key={key} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
|
||||||
<span>{label}</span>
|
<span>{label}</span>
|
||||||
<button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
|
<button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue