Fix "exact match" being applied to Recommended #6460

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) => {

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}` });

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,
   };
 };

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<string>,
-  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={
                 <SearchOptions
                   simple={SIMPLE_SITE}
-                  additionalOptions={additionalOptions}
+                  additionalOptions={searchOptions}
                   onSearchOptionsChanged={resetPage}
                 />
               }

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,
       });

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),