Update topbar search

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2020-XX-XX
 
+- [change] Make Topbar search configurable and use keyword-search there
+  [#20](https://github.com/sharetribe/ftw-product/pull/20)
 - [change] Move stripe related forms and forms directory
   [#17](https://github.com/sharetribe/ftw-product/pull/17)
 - [change] Remove PayoutDetailsForm and rename some functions

src/components/Logo/Logo.js

@@ -1,21 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 import config from '../../config';
-import IconLogo from './IconLogo';
-import LogoImage from './saunatime-logo.png';
-import css from './Logo.module.css';
+import LogoImageMobile from './sneakertime-logo-mobile.png';
+import LogoImage from './sneakertime-logo.png';
 
 const Logo = props => {
   const { className, format, ...rest } = props;
-  const mobileClasses = classNames(css.logoMobile, className);
 
   if (format === 'desktop') {
     return <img className={className} src={LogoImage} alt={config.siteTitle} {...rest} />;
   }
 
-  return <IconLogo className={mobileClasses} {...rest} />;
+  return <img className={className} src={LogoImageMobile} alt={config.siteTitle} {...rest} />;
 };
 
 const { oneOf, string } = PropTypes;

src/components/Topbar/Topbar.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routing/routeConfiguration';
 import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
+import { isMainSearchTypeKeywords, isOriginInUse } from '../../util/search';
 import { withViewport } from '../../util/contextHelpers';
 import { parse, stringify } from '../../util/urlHelpers';
 import { createResourceLocatorString, pathByRouteName } from '../../util/routes';
@@ -99,15 +100,26 @@ class TopbarComponent extends Component {
 
   handleSubmit(values) {
     const { currentSearchParams } = this.props;
-    const { search, selectedPlace } = values.location;
     const { history } = this.props;
-    const { origin, bounds } = selectedPlace;
-    const originMaybe = config.sortSearchByDistance ? { origin } : {};
+
+    const topbarSearchParams = () => {
+      if (isMainSearchTypeKeywords(config)) {
+        return { keywords: values?.keywords };
+      }
+      // topbar search defaults to 'location' search
+      const { search, selectedPlace } = values?.location;
+      const { origin, bounds } = selectedPlace;
+      const originMaybe = isOriginInUse(config) ? { origin } : {};
+
+      return {
+        ...originMaybe,
+        address: search,
+        bounds,
+      };
+    };
     const searchParams = {
       ...currentSearchParams,
-      ...originMaybe,
-      address: search,
-      bounds,
+      ...topbarSearchParams(),
     };
     history.push(createResourceLocatorString('SearchPage', routeConfiguration(), {}, searchParams));
   }
@@ -154,7 +166,7 @@ class TopbarComponent extends Component {
       showGenericError,
     } = this.props;
 
-    const { mobilemenu, mobilesearch, address, origin, bounds } = parse(location.search, {
+    const { mobilemenu, mobilesearch, keywords, address, origin, bounds } = parse(location.search, {
       latlng: ['origin'],
       latlngBounds: ['bounds'],
     });
@@ -176,18 +188,25 @@ class TopbarComponent extends Component {
       />
     );
 
-    // Only render current search if full place object is available in the URL params
-    const locationFieldsPresent = config.sortSearchByDistance
-      ? address && origin && bounds
-      : address && bounds;
-    const initialSearchFormValues = {
-      location: locationFieldsPresent
-        ? {
-            search: address,
-            selectedPlace: { address, origin, bounds },
-          }
-        : null,
+    const topbarSearcInitialValues = () => {
+      if (isMainSearchTypeKeywords(config)) {
+        return { keywords };
+      }
+
+      // Only render current search if full place object is available in the URL params
+      const locationFieldsPresent = isOriginInUse(config)
+        ? address && origin && bounds
+        : address && bounds;
+      return {
+        location: locationFieldsPresent
+          ? {
+              search: address,
+              selectedPlace: { address, origin, bounds },
+            }
+          : null,
+      };
     };
+    const initialSearchFormValues = topbarSearcInitialValues();
 
     const classes = classNames(rootClassName || css.root, className);
 
@@ -236,6 +255,7 @@ class TopbarComponent extends Component {
             notificationCount={notificationCount}
             onLogout={this.handleLogout}
             onSearchSubmit={this.handleSubmit}
+            appConfig={config}
           />
         </div>
         <Modal
@@ -260,6 +280,7 @@ class TopbarComponent extends Component {
               onSubmit={this.handleSubmit}
               initialValues={initialSearchFormValues}
               isMobile
+              appConfig={config}
             />
             <p className={css.mobileHelp}>
               <FormattedMessage id="Topbar.mobileSearchHelp" />

src/components/Topbar/TopbarDesktop/TopbarDesktop.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { any, bool, func, object, number, string } from 'prop-types';
 import classNames from 'classnames';
 
 import { FormattedMessage, intlShape } from '../../../util/reactIntl';
@@ -23,6 +23,7 @@ import css from './TopbarDesktop.module.css';
 const TopbarDesktop = props => {
   const {
     className,
+    appConfig,
     currentUser,
     currentPage,
     rootClassName,
@@ -51,6 +52,7 @@ const TopbarDesktop = props => {
       desktopInputRoot={css.topbarSearchWithLeftPadding}
       onSubmit={onSearchSubmit}
       initialValues={initialSearchFormValues}
+      appConfig={appConfig}
     />
   );
 
@@ -157,15 +159,14 @@ const TopbarDesktop = props => {
   );
 };
 
-const { bool, func, object, number, string } = PropTypes;
-
 TopbarDesktop.defaultProps = {
   rootClassName: null,
   className: null,
   currentUser: null,
   currentPage: null,
   notificationCount: 0,
   initialSearchFormValues: {},
+  appConfig: null,
 };
 
 TopbarDesktop.propTypes = {
@@ -180,6 +181,7 @@ TopbarDesktop.propTypes = {
   onSearchSubmit: func.isRequired,
   initialSearchFormValues: object,
   intl: intlShape.isRequired,
+  appConfig: object,
 };
 
 export default TopbarDesktop;

src/components/Topbar/TopbarDesktop/TopbarDesktop.test.js

@@ -6,7 +6,7 @@ import TopbarDesktop from './TopbarDesktop';
 const noop = () => null;
 
 describe('TopbarDesktop', () => {
-  it('data matches snapshot', () => {
+  it('data with location search matches snapshot', () => {
     window.google = { maps: {} };
     const topbarProps = {
       isAuthenticated: true,
@@ -15,6 +15,23 @@ describe('TopbarDesktop', () => {
       onSearchSubmit: noop,
       intl: fakeIntl,
       onLogout: noop,
+      appConfig: { mainSearchType: 'location' },
+    };
+    const tree = renderDeep(<TopbarDesktop {...topbarProps} />);
+    delete window.google;
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('data with keywords search matches snapshot', () => {
+    window.google = { maps: {} };
+    const topbarProps = {
+      isAuthenticated: true,
+      currentUserHasListings: true,
+      name: 'John Doe',
+      onSearchSubmit: noop,
+      intl: fakeIntl,
+      onLogout: noop,
+      appConfig: { mainSearchType: 'keywords' },
     };
     const tree = renderDeep(<TopbarDesktop {...topbarProps} />);
     delete window.google;