Commit 17d0440d authored by deb355529's avatar deb355529
Browse files

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

parent 29bfba43
import React, { Component } from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import autoBind from "auto-bind";
import classNames from "classnames"; import classNames from "classnames";
import Router, { withRouter } from "next/router"; import Router, { withRouter } from "next/router";
...@@ -14,20 +13,28 @@ import { Container, Block, ShowMore, Loader } from "@digibib/deichman-ui"; ...@@ -14,20 +13,28 @@ import { Container, Block, ShowMore, Loader } from "@digibib/deichman-ui";
import "./styles.css"; import "./styles.css";
class SearchResults extends Component { const SearchResults = props => {
constructor() { const {
super(); query,
autoBind(this); initialRender,
} searchQuery,
results,
handleNextPage() { listMode,
const { query, router } = this.props; favourites,
isSearching,
error,
onFavourite,
tracker,
router
} = props;
const handleNextPage = () => {
const { pathname = "/", asPath = "/" } = router; const { pathname = "/", asPath = "/" } = router;
const newQueries = { const newQueries = {
...query, ...query,
page: parseInt(query.page || 1, 10) + 1 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 searchQuery (should not appear in url as a query param, part of route)
delete newQueries.searchQuery; delete newQueries.searchQuery;
...@@ -41,99 +48,85 @@ class SearchResults extends Component { ...@@ -41,99 +48,85 @@ class SearchResults extends Component {
query: newQueries query: newQueries
} }
); );
} };
render() { const { hits = [] } = results;
const { const noHits = hits.length < 1 && !isSearching;
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>
);
}
// If there's no results and user hasn't been filtering, const searchClass = classNames({
if (noHits && !isFiltering) { "search-results": true,
return ( "search-results--empty": searchQuery === "",
<FullScreen> "search-results--no-hits": noHits
<NoHitsMessage searchQuery={searchQuery} /> });
</FullScreen>
);
}
// If there's an error const canFetchMore = results.totalHits > hits.length;
if (error !== null) { const isFiltering = Object.keys(query).length > 1;
return <FullScreen>{error !== null && <p>En feil har oppstått</p>}</FullScreen>;
}
const searchQuerySegments = getSearchQuerySegments(searchQuery); // If search in progress (unless filtering) OR initial server render
const WorkComponent = listMode === "list" ? WorkList : WorkGrid; if ((!isFiltering && isSearching) || initialRender) {
return (
<FullScreen>
<Loader />
</FullScreen>
);
}
// If there's no results and user hasn't been filtering,
if (noHits && !isFiltering) {
return ( return (
<section className={searchClass}> <FullScreen>
<Container id="results"> <NoHitsMessage searchQuery={searchQuery} />
<Block top={8} bottom={8} responsive> </FullScreen>
<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>
); );
} }
}
// 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 = { SearchResults.defaultProps = {
query: {}, query: {},
...@@ -159,7 +152,7 @@ SearchResults.propTypes = { ...@@ -159,7 +152,7 @@ SearchResults.propTypes = {
export default withRouter(SearchResults); export default withRouter(SearchResults);
//---- Utils below ---- // ---- Utils below ----
function getSearchQuerySegments(searchQuery) { function getSearchQuerySegments(searchQuery) {
const fieldExpression = RegExp('([^:\\s]+):\\s*"([^"]+)"', "g"); const fieldExpression = RegExp('([^:\\s]+):\\s*"([^"]+)"', "g");
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment