Fixing context menu trigger silencing; Search form polish

src/js/components/Header.js

@@ -1,25 +1,16 @@
 
-import React from 'react';
+import React, { memo } from 'react';
 import ContextMenuTrigger from './ContextMenuTrigger';
 
-export default class Header extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      expanded: false,
-    };
-  }
-
-  handleContextMenuTrigger = (e, options) => {
-    const {
-      title,
-      handleContextMenuTrigger,
-      uiActions: {
-        showContextMenu,
-      },
-    } = this.props;
-
+export default memo(({
+  handleContextMenuTrigger,
+  options,
+  title,
+  uiActions,
+  className,
+  children,
+}) => {
+  const onTrigger = (e) => {
     if (handleContextMenuTrigger) return handleContextMenuTrigger(e);
 
     e.preventDefault();
@@ -29,48 +20,25 @@ export default class Header extends React.Component {
       title,
       options,
     };
-    showContextMenu(data);
-  }
+    uiActions.showContextMenu(data);
+    return true;
+  };
 
-  renderContextMenuTrigger = () => {
-    const {
-      handleContextMenuTrigger,
-      options,
-    } = this.props;
-
-    if (!handleContextMenuTrigger && !options) return null;
-
-    return <ContextMenuTrigger onTrigger={(e) => this.handleContextMenuTrigger(e, options)} />;
-  }
-
-  renderOptions = () => {
-    const {
-      handleContextMenuTrigger,
-      options,
-    } = this.props;
-
-    if (!options && !handleContextMenuTrigger) return null;
-
-    return (
-      <div className="header__options">
-        {this.renderContextMenuTrigger()}
-        <div className="header__options__wrapper">
-          {options || null}
-        </div>
-      </div>
-    );
-  }
-
-  render = () => {
-    const { className, children } = this.props;
-
-    return (
-      <header className={className}>
-        <h1>
-          {children}
-        </h1>
-        {this.renderOptions()}
-      </header>
-    );
-  }
-}
+  return (
+    <header className={className}>
+      <h1>
+        {children}
+      </h1>
+      {
+        (options || handleContextMenuTrigger) && (
+          <div className="header__options">
+            <ContextMenuTrigger onTrigger={onTrigger} />
+            <div className="header__options__wrapper">
+              {options || null}
+            </div>
+          </div>
+        )
+      }
+    </header>
+  );
+});

src/js/components/SearchResults.js

@@ -24,9 +24,14 @@ const SearchResults = ({
   all,
 }) => {
   const encodedTerm = encodeURIComponent(query.term);
-
+  const resultsMatchQuery = (results) => {
+    if (!results.query) return false;
+    if (results.query.term !== query.term) return false;
+    if (results.query.type !== query.type) return false;
+    return true;
+  };
   let results = [];
-  if (mopidy_search_results.query === query.term && mopidy_search_results[type]) {
+  if (resultsMatchQuery(mopidy_search_results) && mopidy_search_results[type]) {
     results = [
       ...results,
       ...(
@@ -37,7 +42,7 @@ const SearchResults = ({
     ];
   }
 
-  if (spotify_search_results.query === query.term && spotify_search_results[type]) {
+  if (resultsMatchQuery(spotify_search_results) && spotify_search_results[type]) {
     results = [
       ...results,
       ...(
@@ -116,7 +121,7 @@ const mapStateToProps = (state, ownProps) => ({
   uri_schemes_priority: state.ui.uri_schemes_priority || [],
   mopidy_search_results: state.mopidy.search_results || {},
   spotify_search_results: state.spotify.search_results || {},
-  sort: state.ui.search_results_sort || 'followers.total',
+  sort: state.ui.search_results_sort || 'followers',
   sort_reverse: !!state.ui.search_results_sort_reverse,
 });