DEICH-5813: deichman.no: added option to add items to "huskeliste", also did a cleanup

deichman.no/components/SearchResults/SearchResults.js

-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import autoBind from "auto-bind";
 import classNames from "classnames";
 import Router, { withRouter } from "next/router";
 
@@ -14,20 +13,28 @@ import { Container, Block, ShowMore, Loader } from "@digibib/deichman-ui";
 
 import "./styles.css";
 
-class SearchResults extends Component {
-  constructor() {
-    super();
-    autoBind(this);
-  }
-
-  handleNextPage() {
-    const { query, router } = this.props;
+const SearchResults = props => {
+  const {
+    query,
+    initialRender,
+    searchQuery,
+    results,
+    listMode,
+    favourites,
+    isSearching,
+    error,
+    onFavourite,
+    tracker,
+    router
+  } = props;
+
+  const handleNextPage = () => {
     const { pathname = "/", asPath = "/" } = router;
     const newQueries = {
       ...query,
       page: parseInt(query.page || 1, 10) + 1
     };
-    this.props.tracker.loadMore(newQueries.page, this.props.searchQuery);
+    props.tracker.loadMore(newQueries.page, props.searchQuery);
     // Delete searchQuery (should not appear in url as a query param, part of route)
     delete newQueries.searchQuery;
 
@@ -41,99 +48,85 @@ class SearchResults extends Component {
         query: newQueries
       }
     );
-  }
+  };
 
-  render() {
-    const {
-      query,
-      initialRender,
-      searchQuery,
-      results,
-      listMode,
-      favourites,
-      isSearching,
-      error,
-      onFavourite,
-      tracker
-    } = this.props;
-
-    const { hits = [] } = results;
-    const noHits = hits.length < 1 && !isSearching;
-
-    const searchClass = classNames({
-      "search-results": true,
-      "search-results--empty": searchQuery === "",
-      "search-results--no-hits": noHits
-    });
-
-    const canFetchMore = results.totalHits > hits.length;
-    const isFiltering = Object.keys(query).length > 1;
-
-    // If search in progress (unless filtering) OR initial server render
-    if ((!isFiltering && isSearching) || initialRender) {
-      return (
-        <FullScreen>
-          <Loader />
-        </FullScreen>
-      );
-    }
+  const { hits = [] } = results;
+  const noHits = hits.length < 1 && !isSearching;
 
-    // If there's no results and user hasn't been filtering,
-    if (noHits && !isFiltering) {
-      return (
-        <FullScreen>
-          <NoHitsMessage searchQuery={searchQuery} />
-        </FullScreen>
-      );
-    }
+  const searchClass = classNames({
+    "search-results": true,
+    "search-results--empty": searchQuery === "",
+    "search-results--no-hits": noHits
+  });
 
-    // If there's an error
-    if (error !== null) {
-      return <FullScreen>{error !== null && <p>En feil har oppstått</p>}</FullScreen>;
-    }
+  const canFetchMore = results.totalHits > hits.length;
+  const isFiltering = Object.keys(query).length > 1;
 
-    const searchQuerySegments = getSearchQuerySegments(searchQuery);
-    const WorkComponent = listMode === "list" ? WorkList : WorkGrid;
+  // If search in progress (unless filtering) OR initial server render
+  if ((!isFiltering && isSearching) || initialRender) {
+    return (
+      <FullScreen>
+        <Loader />
+      </FullScreen>
+    );
+  }
 
+  // If there's no results and user hasn't been filtering,
+  if (noHits && !isFiltering) {
     return (
-      <section className={searchClass}>
-        <Container id="results">
-          <Block top={8} bottom={8} responsive>
-            <h2>
-              {`${results.totalHits} Resultater`}
-              {searchQuerySegments.length > 0 && (
-                <>
-                  <span> for </span>
-                  <mark>
-                    {searchQuery !== "*" &&
-                      searchQuerySegments.filter(Boolean).join(", ")}
-                  </mark>
-                </>
-              )}
-            </h2>
-            <WorkComponent
-              items={hits}
-              tracker={addArgs(tracker, "click", searchQuery)}
-              totalCount={results.totalHits}
-              favourites={favourites}
-              onFavourite={onFavourite}
-            />
-          </Block>
-
-          <Block top={3} bottom={8} responsive>
-            {canFetchMore && (
-              <ShowMore
-                text="Hent flere resultater"
-                onClick={this.handleNextPage}
-                disabled={isSearching}
-              />
-            )}
-          </Block>
-        </Container>
-      </section>
+      <FullScreen>
+        <NoHitsMessage searchQuery={searchQuery} />
+      </FullScreen>
     );
   }
-}
+
+  // If there's an error
+  if (error !== null) {
+    return <FullScreen>{<p>En feil har oppstått</p>}</FullScreen>;
+  }
+
+  const searchQuerySegments = getSearchQuerySegments(searchQuery);
+  const WorkComponent = listMode === "list" ? WorkList : WorkGrid;
+
+  return (
+    <section className={searchClass}>
+      <Container id="results">
+        <Block top={8} bottom={8} responsive>
+          <h2>
+            {`${results.totalHits} Resultater`}
+            {searchQuerySegments.length > 0 && (
+              <>
+                <span> for </span>
+                <mark>
+                  {searchQuery !== "*" &&
+                  searchQuerySegments.filter(Boolean).join(", ")}
+                </mark>
+              </>
+            )}
+          </h2>
+          <WorkComponent
+            items={hits}
+            tracker={addArgs(tracker, "click", searchQuery)}
+            totalCount={results.totalHits}
+            favourites={favourites}
+            onFavourite={onFavourite}
+            showFavorite
+          />
+        </Block>
+
+        <Block top={3} bottom={8} responsive>
+          {canFetchMore && (
+            <ShowMore
+              text="Hent flere resultater"
+              onClick={handleNextPage}
+              disabled={isSearching}
+            />
+          )}
+        </Block>
+      </Container>
+    </section>
+  );
+};
 
 SearchResults.defaultProps = {
   query: {},
@@ -159,7 +152,7 @@ SearchResults.propTypes = {
 
 export default withRouter(SearchResults);
 
-//---- Utils below ----
+// ---- Utils below ----
 
 function getSearchQuerySegments(searchQuery) {
   const fieldExpression = RegExp('([^:\\s]+):\\s*"([^"]+)"', "g");