diff --git a/ui/component/searchOptions/index.js b/ui/component/searchOptions/index.js index 125535276..3d4902bad 100644 --- a/ui/component/searchOptions/index.js +++ b/ui/component/searchOptions/index.js @@ -1,14 +1,13 @@ import { connect } from 'react-redux'; import { doUpdateSearchOptions } from 'redux/actions/search'; -import { selectSearchOptions, makeSelectQueryWithOptions } from 'redux/selectors/search'; +import { selectSearchOptions } from 'redux/selectors/search'; import { doToggleSearchExpanded } from 'redux/actions/app'; import { selectSearchOptionsExpanded } from 'redux/selectors/app'; import SearchOptions from './view'; -const select = state => ({ +const select = (state) => ({ options: selectSearchOptions(state), expanded: selectSearchOptionsExpanded(state), - query: makeSelectQueryWithOptions(undefined, {})(state), }); const perform = (dispatch, ownProps) => { diff --git a/ui/component/wunderbarSuggestions/index.js b/ui/component/wunderbarSuggestions/index.js index 5a43cc271..e849fd5a1 100644 --- a/ui/component/wunderbarSuggestions/index.js +++ b/ui/component/wunderbarSuggestions/index.js @@ -2,7 +2,6 @@ import * as MODALS from 'constants/modal_types'; import { connect } from 'react-redux'; import { selectLanguage, selectShowMatureContent } from 'redux/selectors/settings'; import { doToast } from 'redux/actions/notifications'; -import { doSearch } from 'redux/actions/search'; import { doOpenModal, doHideModal } from 'redux/actions/app'; import { withRouter } from 'react-router'; import { doResolveUris } from 'lbry-redux'; @@ -16,7 +15,6 @@ const select = (state, props) => ({ const perform = (dispatch, ownProps) => ({ doResolveUris: (uris) => dispatch(doResolveUris(uris)), - doSearch: (query, options) => dispatch(doSearch(query, options)), navigateToSearchPage: (query) => { let encodedQuery = encodeURIComponent(query); ownProps.history.push({ pathname: `/$/search`, search: `?q=${encodedQuery}` }); diff --git a/ui/page/search/index.js b/ui/page/search/index.js index 7be30b4c8..30558e61a 100644 --- a/ui/page/search/index.js +++ b/ui/page/search/index.js @@ -1,43 +1,42 @@ import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { doSearch } from 'redux/actions/search'; -import { SIMPLE_SITE } from 'config'; import { selectIsSearching, makeSelectSearchUris, - makeSelectQueryWithOptions, selectSearchOptions, makeSelectHasReachedMaxResultsLength, } from 'redux/selectors/search'; import { selectShowMatureContent } from 'redux/selectors/settings'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { getSearchQueryString } from 'util/query-params'; import SearchPage from './view'; const select = (state, props) => { const showMature = selectShowMatureContent(state); const urlParams = new URLSearchParams(props.location.search); + let urlQuery = urlParams.get('q') || null; if (urlQuery) { urlQuery = urlQuery.replace(/^lbry:\/\//i, '').replace(/\//, ' '); } - const query = makeSelectQueryWithOptions( - urlQuery, - SIMPLE_SITE - ? { nsfw: false, isBackgroundSearch: false } - : showMature === false - ? { nsfw: false, isBackgroundSearch: false } - : { isBackgroundSearch: false } - )(state); + const searchOptions = { + ...selectSearchOptions(state), + isBackgroundSearch: false, + nsfw: showMature, + }; + + const query = getSearchQueryString(urlQuery, searchOptions); const uris = makeSelectSearchUris(query)(state); const hasReachedMaxResultsLength = makeSelectHasReachedMaxResultsLength(query)(state); return { + urlQuery, + searchOptions, isSearching: selectIsSearching(state), - showNsfw: showMature, uris: uris, isAuthenticated: selectUserVerifiedEmail(state), - searchOptions: selectSearchOptions(state), hasReachedMaxResultsLength: hasReachedMaxResultsLength, }; }; diff --git a/ui/page/search/view.jsx b/ui/page/search/view.jsx index 87731f257..1499e7c33 100644 --- a/ui/page/search/view.jsx +++ b/ui/page/search/view.jsx @@ -11,43 +11,21 @@ import { formatLbryUrlForWeb } from 'util/url'; import { useHistory } from 'react-router'; import { SEARCH_PAGE_SIZE } from 'constants/search'; -type AdditionalOptions = { - isBackgroundSearch: boolean, - nsfw?: boolean, - from?: number, -}; - type Props = { - search: (string, AdditionalOptions) => void, - searchOptions: {}, + urlQuery: string, + searchOptions: SearchOptions, + search: (string, SearchOptions) => void, isSearching: boolean, - location: UrlLocation, uris: Array, - showNsfw: boolean, isAuthenticated: boolean, hasReachedMaxResultsLength: boolean, }; export default function SearchPage(props: Props) { - const { - search, - uris, - location, - isSearching, - showNsfw, - isAuthenticated, - searchOptions, - hasReachedMaxResultsLength, - } = props; + const { urlQuery, searchOptions, search, uris, isSearching, isAuthenticated, hasReachedMaxResultsLength } = props; const { push } = useHistory(); - const urlParams = new URLSearchParams(location.search); - const urlQuery = urlParams.get('q') || ''; - const additionalOptions: AdditionalOptions = { isBackgroundSearch: false }; const [from, setFrom] = React.useState(0); - additionalOptions['nsfw'] = SIMPLE_SITE ? false : showNsfw; - additionalOptions['from'] = from; - const modifiedUrlQuery = urlQuery.trim().replace(/\s+/g, '').replace(/:/g, '#'); const uriFromQuery = `lbry://${modifiedUrlQuery}`; @@ -78,14 +56,14 @@ export default function SearchPage(props: Props) { } catch (e) {} } - const stringifiedOptions = JSON.stringify(additionalOptions); const stringifiedSearchOptions = JSON.stringify(searchOptions); + useEffect(() => { if (urlQuery) { - const jsonOptions = JSON.parse(stringifiedOptions); - search(urlQuery, jsonOptions); + const searchOptions = JSON.parse(stringifiedSearchOptions); + search(urlQuery, { ...searchOptions, from: from }); } - }, [search, urlQuery, stringifiedOptions, stringifiedSearchOptions]); + }, [search, urlQuery, stringifiedSearchOptions, from]); function loadMore() { if (!isSearching && !hasReachedMaxResultsLength) { @@ -114,7 +92,7 @@ export default function SearchPage(props: Props) { header={ } diff --git a/ui/redux/actions/search.js b/ui/redux/actions/search.js index 036c5c614..129afbecf 100644 --- a/ui/redux/actions/search.js +++ b/ui/redux/actions/search.js @@ -1,13 +1,9 @@ // @flow import * as ACTIONS from 'constants/action_types'; import { buildURI, doResolveUris, batchActions, isURIValid, makeSelectClaimForUri } from 'lbry-redux'; -import { - makeSelectSearchUris, - makeSelectQueryWithOptions, - selectSearchValue, - selectSearchOptions, -} from 'redux/selectors/search'; +import { makeSelectSearchUris, selectSearchValue } from 'redux/selectors/search'; import handleFetchResponse from 'util/handle-fetch'; +import { getSearchQueryString } from 'util/query-params'; type Dispatch = (action: any) => any; type GetState = () => { search: SearchState }; @@ -44,10 +40,9 @@ export const doSearch = (rawQuery: string, searchOptions: SearchOptions) => ( const state = getState(); - const mainOptions: any = selectSearchOptions(state); - const queryWithOptions = makeSelectQueryWithOptions(query, searchOptions)(state); + const queryWithOptions = getSearchQueryString(query, searchOptions); - const size = mainOptions.size; + const size = searchOptions.size; const from = searchOptions.from; // If we have already searched for something, we don't need to do anything @@ -101,7 +96,7 @@ export const doSearch = (rawQuery: string, searchOptions: SearchOptions) => ( }); dispatch(batchActions(...actions)); }) - .catch((e) => { + .catch(() => { dispatch({ type: ACTIONS.SEARCH_FAIL, }); diff --git a/ui/redux/selectors/search.js b/ui/redux/selectors/search.js index b36717076..d864ea00d 100644 --- a/ui/redux/selectors/search.js +++ b/ui/redux/selectors/search.js @@ -57,25 +57,6 @@ export const makeSelectHasReachedMaxResultsLength = (query: string): ((state: St return hasReachedMaxResultsLength[query]; }); -// Creates a query string based on the state in the search reducer -// Can be overrided by passing in custom sizes/from values for other areas pagination - -type CustomOptions = { - isBackgroundSearch?: boolean, - size?: number, - from?: number, - related_to?: string, - nsfw?: boolean, -}; - -export const makeSelectQueryWithOptions = (customQuery: ?string, options: CustomOptions) => - createSelector(selectSearchValue, selectSearchOptions, (query, defaultOptions) => { - const searchOptions = { ...defaultOptions, ...options }; - const queryString = getSearchQueryString(customQuery || query, searchOptions); - - return queryString; - }); - export const makeSelectRecommendedContentForUri = (uri: string) => createSelector( makeSelectClaimForUri(uri),