This reverts merge request !1384environments/review-revert-f5c-zjed2b/deployments/4
Alex Gleason
2 years ago
parent
25f865272f
commit
a20328b66c
@ -0,0 +1,174 @@
|
||||
import classNames from 'classnames';
|
||||
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 { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
|
||||
import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
|
||||
import Hashtag from '../../../components/hashtag';
|
||||
import { Tabs } from '../../../components/ui';
|
||||
import AccountContainer from '../../../containers/account_container';
|
||||
import StatusContainer from '../../../containers/status_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
|
||||
statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
|
||||
hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
|
||||
});
|
||||
|
||||
export default @injectIntl
|
||||
class SearchResults extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
value: PropTypes.string,
|
||||
results: ImmutablePropTypes.map.isRequired,
|
||||
submitted: PropTypes.bool,
|
||||
expandSearch: PropTypes.func.isRequired,
|
||||
selectedFilter: PropTypes.string.isRequired,
|
||||
selectFilter: PropTypes.func.isRequired,
|
||||
features: PropTypes.object.isRequired,
|
||||
suggestions: ImmutablePropTypes.list,
|
||||
trendingStatuses: ImmutablePropTypes.list,
|
||||
trends: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
handleLoadMore = () => this.props.expandSearch(this.props.selectedFilter);
|
||||
|
||||
handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter);
|
||||
|
||||
componentDidMount() {
|
||||
this.props.fetchTrendingStatuses();
|
||||
}
|
||||
|
||||
renderFilterBar() {
|
||||
const { intl, selectedFilter } = this.props;
|
||||
|
||||
const items = [
|
||||
{
|
||||
text: intl.formatMessage(messages.accounts),
|
||||
action: () => this.handleSelectFilter('accounts'),
|
||||
name: 'accounts',
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.statuses),
|
||||
action: () => this.handleSelectFilter('statuses'),
|
||||
name: 'statuses',
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.hashtags),
|
||||
action: () => this.handleSelectFilter('hashtags'),
|
||||
name: 'hashtags',
|
||||
},
|
||||
];
|
||||
|
||||
return <Tabs items={items} activeItem={selectedFilter} />;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, results, submitted, selectedFilter, suggestions, trendingStatuses, trends } = this.props;
|
||||
|
||||
let searchResults;
|
||||
let hasMore = false;
|
||||
let loaded;
|
||||
let noResultsMessage;
|
||||
let placeholderComponent = PlaceholderStatus;
|
||||
|
||||
if (selectedFilter === 'accounts') {
|
||||
hasMore = results.get('accountsHasMore');
|
||||
loaded = results.get('accountsLoaded');
|
||||
placeholderComponent = PlaceholderAccount;
|
||||
|
||||
if (results.get('accounts') && results.get('accounts').size > 0) {
|
||||
searchResults = results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />);
|
||||
} else if (!submitted && suggestions && !suggestions.isEmpty()) {
|
||||
searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.get('account')} id={suggestion.get('account')} />);
|
||||
} else if (loaded) {
|
||||
noResultsMessage = (
|
||||
<div className='empty-column-indicator'>
|
||||
<FormattedMessage
|
||||
id='empty_column.search.accounts'
|
||||
defaultMessage='There are no people results for "{term}"'
|
||||
values={{ term: value }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedFilter === 'statuses') {
|
||||
hasMore = results.get('statusesHasMore');
|
||||
loaded = results.get('statusesLoaded');
|
||||
|
||||
if (results.get('statuses') && results.get('statuses').size > 0) {
|
||||
searchResults = results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />);
|
||||
} else if (!submitted && trendingStatuses && !trendingStatuses.isEmpty()) {
|
||||
searchResults = trendingStatuses.map(statusId => <StatusContainer key={statusId} id={statusId} />);
|
||||
} else if (loaded) {
|
||||
noResultsMessage = (
|
||||
<div className='empty-column-indicator'>
|
||||
<FormattedMessage
|
||||
id='empty_column.search.statuses'
|
||||
defaultMessage='There are no posts results for "{term}"'
|
||||
values={{ term: value }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedFilter === 'hashtags') {
|
||||
hasMore = results.get('hashtagsHasMore');
|
||||
loaded = results.get('hashtagsLoaded');
|
||||
placeholderComponent = PlaceholderHashtag;
|
||||
|
||||
if (results.get('hashtags') && results.get('hashtags').size > 0) {
|
||||
searchResults = results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />);
|
||||
} else if (!submitted && suggestions && !suggestions.isEmpty()) {
|
||||
searchResults = trends.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />);
|
||||
} else if (loaded) {
|
||||
noResultsMessage = (
|
||||
<div className='empty-column-indicator'>
|
||||
<FormattedMessage
|
||||
id='empty_column.search.hashtags'
|
||||
defaultMessage='There are no hashtags results for "{term}"'
|
||||
values={{ term: value }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{this.renderFilterBar()}
|
||||
|
||||
{noResultsMessage || (
|
||||
<ScrollableList
|
||||
key={selectedFilter}
|
||||
scrollKey={`${selectedFilter}:${value}`}
|
||||
isLoading={submitted && !loaded}
|
||||
showLoading={submitted && !loaded && results.isEmpty()}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={this.handleLoadMore}
|
||||
placeholderComponent={placeholderComponent}
|
||||
placeholderCount={20}
|
||||
className={classNames({
|
||||
'divide-gray-200 dark:divide-slate-700 divide-solid divide-y': selectedFilter === 'statuses',
|
||||
})}
|
||||
itemClassName={classNames({ 'pb-4': selectedFilter === 'accounts' })}
|
||||
>
|
||||
{searchResults}
|
||||
</ScrollableList>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { useEffect } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { expandSearch, setFilter } from 'soapbox/actions/search';
|
||||
import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
|
||||
import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import Hashtag from '../../../components/hashtag';
|
||||
import { Tabs } from '../../../components/ui';
|
||||
import AccountContainer from '../../../containers/account_container';
|
||||
import StatusContainer from '../../../containers/status_container';
|
||||
|
||||
import type { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
const messages = defineMessages({
|
||||
accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
|
||||
statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
|
||||
hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
|
||||
});
|
||||
|
||||
type SearchFilter = 'accounts' | 'statuses' | 'hashtags';
|
||||
|
||||
/** Displays search results depending on the active tab. */
|
||||
const SearchResults: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const value = useAppSelector(state => state.search.submittedValue);
|
||||
const results = useAppSelector(state => state.search.results);
|
||||
const suggestions = useAppSelector(state => state.suggestions.items);
|
||||
const trendingStatuses = useAppSelector(state => state.trending_statuses.items);
|
||||
const trends = useAppSelector(state => state.trends.items);
|
||||
const submitted = useAppSelector(state => state.search.submitted);
|
||||
const selectedFilter = useAppSelector(state => state.search.filter);
|
||||
|
||||
const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
|
||||
const handleSelectFilter = (newActiveFilter: SearchFilter) => dispatch(setFilter(newActiveFilter));
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchTrendingStatuses());
|
||||
}, []);
|
||||
|
||||
const renderFilterBar = () => {
|
||||
const items = [
|
||||
{
|
||||
text: intl.formatMessage(messages.accounts),
|
||||
action: () => handleSelectFilter('accounts'),
|
||||
name: 'accounts',
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.statuses),
|
||||
action: () => handleSelectFilter('statuses'),
|
||||
name: 'statuses',
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.hashtags),
|
||||
action: () => handleSelectFilter('hashtags'),
|
||||
name: 'hashtags',
|
||||
},
|
||||
];
|
||||
|
||||
return <Tabs items={items} activeItem={selectedFilter} />;
|
||||
};
|
||||
|
||||
let searchResults;
|
||||
let hasMore = false;
|
||||
let loaded;
|
||||
let noResultsMessage;
|
||||
let placeholderComponent: React.ComponentType<any> = PlaceholderStatus;
|
||||
|
||||
if (selectedFilter === 'accounts') {
|
||||
hasMore = results.get('accountsHasMore');
|
||||
loaded = results.get('accountsLoaded');
|
||||
placeholderComponent = PlaceholderAccount;
|
||||
|
||||
if (results.get('accounts') && results.get('accounts').size > 0) {
|
||||
searchResults = results.get('accounts').map((accountId: string) => <AccountContainer key={accountId} id={accountId} />);
|
||||
} else if (!submitted && suggestions && !suggestions.isEmpty()) {
|
||||
searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.get('account')} id={suggestion.get('account')} />);
|
||||
} else if (loaded) {
|
||||
noResultsMessage = (
|
||||
<div className='empty-column-indicator'>
|
||||
<FormattedMessage
|
||||
id='empty_column.search.accounts'
|
||||
defaultMessage='There are no people results for "{term}"'
|
||||
values={{ term: value }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedFilter === 'statuses') {
|
||||
hasMore = results.get('statusesHasMore');
|
||||
loaded = results.get('statusesLoaded');
|
||||
|
||||
if (results.get('statuses') && results.get('statuses').size > 0) {
|
||||
searchResults = results.get('statuses').map((statusId: string) => (
|
||||
// @ts-ignore
|
||||
<StatusContainer key={statusId} id={statusId} />
|
||||
));
|
||||
} else if (!submitted && trendingStatuses && !trendingStatuses.isEmpty()) {
|
||||
searchResults = trendingStatuses.map(statusId => (
|
||||
// @ts-ignore
|
||||
<StatusContainer key={statusId} id={statusId} />
|
||||
));
|
||||
} else if (loaded) {
|
||||
noResultsMessage = (
|
||||
<div className='empty-column-indicator'>
|
||||
<FormattedMessage
|
||||
id='empty_column.search.statuses'
|
||||
defaultMessage='There are no posts results for "{term}"'
|
||||
values={{ term: value }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedFilter === 'hashtags') {
|
||||
hasMore = results.get('hashtagsHasMore');
|
||||
loaded = results.get('hashtagsLoaded');
|
||||
placeholderComponent = PlaceholderHashtag;
|
||||
|
||||
if (results.get('hashtags') && results.get('hashtags').size > 0) {
|
||||
searchResults = results.get('hashtags').map((hashtag: ImmutableMap<string, any>) => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />);
|
||||
} else if (!submitted && suggestions && !suggestions.isEmpty()) {
|
||||
searchResults = trends.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />);
|
||||
} else if (loaded) {
|
||||
noResultsMessage = (
|
||||
<div className='empty-column-indicator'>
|
||||
<FormattedMessage
|
||||
id='empty_column.search.hashtags'
|
||||
defaultMessage='There are no hashtags results for "{term}"'
|
||||
values={{ term: value }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderFilterBar()}
|
||||
|
||||
{noResultsMessage || (
|
||||
<ScrollableList
|
||||
key={selectedFilter}
|
||||
scrollKey={`${selectedFilter}:${value}`}
|
||||
isLoading={submitted && !loaded}
|
||||
showLoading={submitted && !loaded && results.isEmpty()}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
placeholderComponent={placeholderComponent}
|
||||
placeholderCount={20}
|
||||
className={classNames({
|
||||
'divide-gray-200 dark:divide-slate-700 divide-solid divide-y': selectedFilter === 'statuses',
|
||||
})}
|
||||
itemClassName={classNames({ 'pb-4': selectedFilter === 'accounts' })}
|
||||
>
|
||||
{searchResults}
|
||||
</ScrollableList>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchResults;
|
||||
@ -0,0 +1,33 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
||||
import { expandSearch, setFilter } from '../../../actions/search';
|
||||
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
|
||||
import SearchResults from '../components/search_results';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const instance = state.get('instance');
|
||||
|
||||
return {
|
||||
value: state.getIn(['search', 'submittedValue']),
|
||||
results: state.getIn(['search', 'results']),
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
trendingStatuses: state.getIn(['trending_statuses', 'items']),
|
||||
trends: state.getIn(['trends', 'items']),
|
||||
submitted: state.getIn(['search', 'submitted']),
|
||||
selectedFilter: state.getIn(['search', 'filter']),
|
||||
features: getFeatures(instance),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
fetchSuggestions: () => dispatch(fetchSuggestions()),
|
||||
fetchTrendingStatuses: () => dispatch(fetchTrendingStatuses()),
|
||||
expandSearch: type => dispatch(expandSearch(type)),
|
||||
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
|
||||
selectFilter: newActiveFilter => dispatch(setFilter(newActiveFilter)),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(SearchResults);
|
||||
@ -1,12 +1,12 @@
|
||||
import { Record as ImmutableRecord } from 'immutable';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
|
||||
import reducer from '../trends';
|
||||
|
||||
describe('trends reducer', () => {
|
||||
it('should return the initial state', () => {
|
||||
const result = reducer(undefined, {});
|
||||
expect(ImmutableRecord.isRecord(result)).toBe(true);
|
||||
expect(result.items.isEmpty()).toBe(true);
|
||||
expect(result.isLoading).toBe(false);
|
||||
expect(reducer(undefined, {})).toEqual(ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
isLoading: false,
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
|
||||
import {
|
||||
TRENDING_STATUSES_FETCH_REQUEST,
|
||||
TRENDING_STATUSES_FETCH_SUCCESS,
|
||||
} from 'soapbox/actions/trending_statuses';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
items: ImmutableOrderedSet(),
|
||||
isLoading: false,
|
||||
});
|
||||
|
||||
const toIds = items => ImmutableOrderedSet(items.map(item => item.id));
|
||||
|
||||
const importStatuses = (state, statuses) => {
|
||||
return state.withMutations(state => {
|
||||
state.set('items', toIds(statuses));
|
||||
state.set('isLoading', false);
|
||||
});
|
||||
};
|
||||
|
||||
export default function trending_statuses(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case TRENDING_STATUSES_FETCH_REQUEST:
|
||||
return state.set('isLoading', true);
|
||||
case TRENDING_STATUSES_FETCH_SUCCESS:
|
||||
return importStatuses(state, action.statuses);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import { Record as ImmutableRecord, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
|
||||
import {
|
||||
TRENDING_STATUSES_FETCH_REQUEST,
|
||||
TRENDING_STATUSES_FETCH_SUCCESS,
|
||||
} from 'soapbox/actions/trending_statuses';
|
||||
|
||||
import type { AnyAction } from 'redux';
|
||||
|
||||
const ReducerRecord = ImmutableRecord({
|
||||
items: ImmutableOrderedSet<string>(),
|
||||
isLoading: false,
|
||||
});
|
||||
|
||||
type State = ReturnType<typeof ReducerRecord>;
|
||||
|
||||
type IdEntity = { id: string };
|
||||
|
||||
const toIds = (items: IdEntity[]) => ImmutableOrderedSet(items.map(item => item.id));
|
||||
|
||||
const importStatuses = (state: State, statuses: IdEntity[]): State => {
|
||||
return state.withMutations(state => {
|
||||
state.set('items', toIds(statuses));
|
||||
state.set('isLoading', false);
|
||||
});
|
||||
};
|
||||
|
||||
export default function trending_statuses(state = ReducerRecord(), action: AnyAction) {
|
||||
switch (action.type) {
|
||||
case TRENDING_STATUSES_FETCH_REQUEST:
|
||||
return state.set('isLoading', true);
|
||||
case TRENDING_STATUSES_FETCH_SUCCESS:
|
||||
return importStatuses(state, action.statuses);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue