Commit 7f040ba2 authored by deb355529's avatar deb355529 Committed by Oyvind
Browse files

DEICH-5899: deichman.no: modified router for selected components, also did a...

DEICH-5899: deichman.no: modified router for selected components, also did a cleanup and rewrite to hooks
parent 6895f08d
import React, { Fragment } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import autoBind from "auto-bind";
import Router from "next/router";
import { getEvents } from "../store/events";
......@@ -16,91 +15,87 @@ import SearchFilters from "../components/SearchFilters";
import { Container, Block, ShowMore } from "@digibib/deichman-ui";
import { getCampaigns } from "../store/campaigns";
class WhatsUpPage extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {};
}
static getInitialProps = async ({ reduxStore, req, query }) => {
const page = parseInt(query.page || 1, 10);
await Promise.all([
reduxStore.dispatch(getCampaigns(req)),
reduxStore.dispatch(getEvents(page, null, req, query))
]);
return {
query
};
};
const WhatsUpPage = props => {
const { query } = props;
handleNextPage() {
const { query } = this.props;
const handleNextPage = () => {
const newQueries = {
...query,
page: parseInt(query.page || 1, 10) + 1
};
Router.replace({
pathname: "/hva-skjer",
query: newQueries
});
}
render() {
const { allEvents = [], results } = this.props.events;
const { query } = this.props;
const totalEvents = results.total;
const groupedEvents = groupEventsByDate(allEvents);
const todaysEvents = groupedEvents.find(group => group.isToday) || {};
// Only show campaignZone if we're not filtering (but allow pagination)
const showCampaignZone = !Object.keys(query).some(key => key !== "page");
const showCampaignZoneInList =
(todaysEvents.items && todaysEvents.items.length < 16) || query.page > 1;
return (
<Fragment>
<Head
title="Hva skjer? - Deichman.no"
description="Bibliotek og åpningstider"
/>
<A11yJumpTo target="#results" text="Hopp til resultater" />
<SearchFilters type="events" results={results} />
<Container>
<div id="results" data-cy="event-search-results">
{groupedEvents.map((group, index) => (
<Block key={group.headline} top={8}>
{/* WIP - Add campaignZone here */}
<EventGrid
headline={group.headline}
items={group.items}
hideDateBadge
/>
{showCampaignZone && index === 0 && showCampaignZoneInList && (
<CampaignZone type="midi" page="Hva skjer" withSpacing />
)}
</Block>
))}
</div>
{totalEvents > allEvents.length && (
<Block top={8} bottom={8} responsive>
<ShowMore text="Se flere" onClick={this.handleNextPage} />
Router.replace(
{
pathname: "/hva-skjer",
query: newQueries
},
{},
{ scroll: false }
);
};
const { allEvents = [], results } = props.events;
const totalEvents = results.total;
const groupedEvents = groupEventsByDate(allEvents);
const todaysEvents = groupedEvents.find(group => group.isToday) || {};
// Only show campaignZone if we're not filtering (but allow pagination)
const showCampaignZone = !Object.keys(query).some(key => key !== "page");
const showCampaignZoneInList =
(todaysEvents.items && todaysEvents.items.length < 16) || query.page > 1;
return (
<Fragment>
<Head
title="Hva skjer? - Deichman.no"
description="Bibliotek og åpningstider"
/>
<A11yJumpTo target="#results" text="Hopp til resultater" />
<SearchFilters type="events" results={results} />
<Container>
<div id="results" data-cy="event-search-results">
{groupedEvents.map((group, index) => (
<Block key={group.headline} top={8}>
{/* WIP - Add campaignZone here */}
<EventGrid
headline={group.headline}
items={group.items}
hideDateBadge
/>
{showCampaignZone && index === 0 && showCampaignZoneInList && (
<CampaignZone type="midi" page="Hva skjer" withSpacing />
)}
</Block>
)}
))}
</div>
{totalEvents > allEvents.length && (
<Block top={8} bottom={8} responsive>
<ShowMore text="Se flere" onClick={handleNextPage} />
</Block>
)}
{showCampaignZone && !showCampaignZoneInList && (
<CampaignZone type="midi" page="Hva skjer" withSpacing />
)}
</Container>
</Fragment>
);
};
{showCampaignZone && !showCampaignZoneInList && (
<CampaignZone type="midi" page="Hva skjer" withSpacing />
)}
</Container>
</Fragment>
);
}
}
WhatsUpPage.getInitialProps = async ({ reduxStore, req, query }) => {
const page = parseInt(query.page || 1, 10);
await Promise.all([
reduxStore.dispatch(getCampaigns(req)),
reduxStore.dispatch(getEvents(page, null, req, query))
]);
return {
query
};
};
WhatsUpPage.propTypes = {
events: PropTypes.object.isRequired,
......
import React, { Component, Fragment } from "react";
import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import autoBind from "auto-bind";
import Router from "next/router";
import URL_TO_QUERY_MAP from "../../../constants/inspirationUrlToQueryMap";
......@@ -21,29 +20,17 @@ import SearchFilters from "../../../components/SearchFilters";
import { Block, Container, ShowMore } from "@digibib/deichman-ui";
class RecommendedPage extends Component {
constructor(props) {
super(props);
autoBind(this);
}
static async getInitialProps({ query = {} }) {
const { mediaType = "" } = query;
// Determine what mediatype to display
const mediaTypeQuery = URL_TO_QUERY_MAP[mediaType];
const invalidMediaType = mediaTypeQuery === undefined;
return {
mediaType,
mediaTypeQuery,
invalidMediaType,
query
};
}
handleNextPage() {
const { query, mediaType } = this.props;
const RecommendedPage = props => {
const {
results,
filters,
mediaType,
mediaTypeQuery,
invalidMediaType,
query
} = props;
const handleNextPage = () => {
const newQueries = {
...query,
page: parseInt(query.page || 1, 10) + 1
......@@ -60,76 +47,84 @@ class RecommendedPage extends Component {
{
pathname: `/inspirasjon/${mediaType}/anbefalte`,
query: newQueries
},
{
scroll: false
}
);
}
};
// Generate different spellings for different media types
generateHeadTitle(mediaType) {
const generateHeadTitle = mediaType => {
if (mediaType === "musikk") {
return "Anbefalt musikk";
}
return `Anbefalte ${pluraliseString(mediaType)}`;
}
};
render() {
const {
results,
filters,
mediaType,
mediaTypeQuery,
invalidMediaType
} = this.props;
const { hits = [] } = results;
const canFetchMore = results.totalHits > hits.length;
const expandText =
mediaType === "musikk"
? "Se mer anbefalt musikk"
: `Se flere anbefalte ${pluraliseString(mediaType)}`;
if (invalidMediaType) {
return <Error headline="404" message="Denne siden finnes ikke." />;
}
const { hits = [] } = results;
const canFetchMore = results.totalHits > hits.length;
const expandText =
mediaType === "musikk"
? "Se mer anbefalt musikk"
: `Se flere anbefalte ${pluraliseString(mediaType)}`;
if (invalidMediaType) {
return <Error headline="404" message="Denne siden finnes ikke." />;
}
return (
<Fragment>
<Head title={`${this.generateHeadTitle(mediaType)} - Deichman.no`} />
<A11yJumpTo target="#results" text="Hopp til resultater" />
<InspirationSubNav mediaType={mediaType} />
<SearchFilters type="inspiration" results={{ filters }} />
<Container id="results">
<Block top={8} bottom={8} responsive>
<InlineSearch
query={`*?mediatype=${mediaTypeQuery}&recommended=recommended&sort=recommendations.created:desc&excludeSatellites=excludeSatellites`}
>
{({ data, favourites, onFavourite }) => (
<InspirationGrid
headline="Vi anbefaler"
items={data.hits}
totalCount={data.totalHits}
noHits={data.noHits}
favourites={favourites}
onFavourite={onFavourite}
/>
)}
</InlineSearch>
return (
<Fragment>
<Head title={`${generateHeadTitle(mediaType)} - Deichman.no`} />
<A11yJumpTo target="#results" text="Hopp til resultater" />
<InspirationSubNav mediaType={mediaType} />
<SearchFilters type="inspiration" results={{ filters }} />
<Container id="results">
<Block top={8} bottom={8} responsive>
<InlineSearch
query={`*?mediatype=${mediaTypeQuery}&recommended=recommended&sort=recommendations.created:desc&excludeSatellites=excludeSatellites`}
>
{({ data, favourites, onFavourite }) => (
<InspirationGrid
headline="Vi anbefaler"
items={data.hits}
totalCount={data.totalHits}
noHits={data.noHits}
favourites={favourites}
onFavourite={onFavourite}
/>
)}
</InlineSearch>
</Block>
{canFetchMore && (
<Block bottom={8}>
<ShowMore text={expandText} onClick={handleNextPage} />
</Block>
)}
</Container>
</Fragment>
);
};
{canFetchMore && (
<Block bottom={8}>
<ShowMore text={expandText} onClick={this.handleNextPage} />
</Block>
)}
</Container>
</Fragment>
);
}
}
RecommendedPage.getInitialProps = async ({ query = {} }) => {
const { mediaType = "" } = query;
// Determine what mediatype to display
const mediaTypeQuery = URL_TO_QUERY_MAP[mediaType];
const invalidMediaType = mediaTypeQuery === undefined;
return {
mediaType,
mediaTypeQuery,
invalidMediaType,
query
};
};
RecommendedPage.propTypes = {
query: PropTypes.object.isRequired,
......
import React, { Component, Fragment } from "react";
import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import autoBind from "auto-bind";
import URL_TO_QUERY_MAP from "../../../constants/inspirationUrlToQueryMap";
import { filtersForAllInlineSearchesSelector } from "../../../store/search";
......@@ -21,208 +20,189 @@ import ListGrid from "../../../components/ListGrid";
import { Block, Container } from "@digibib/deichman-ui";
class InspirationMediaPage extends Component {
constructor(props) {
super(props);
autoBind(this);
}
static async getInitialProps({ query = {} }) {
const { mediaType = "" } = query;
const InspirationMediaPage = props => {
const { filters, lists, mediaType, mediaTypeQuery, invalidMediaType } = props;
// Determine what mediatype to display
const mediaTypeQuery = URL_TO_QUERY_MAP[mediaType];
const invalidMediaType = mediaTypeQuery === undefined;
// ComponentDidUpdate
useEffect(() => {
fetchLists();
}, [mediaType]);
return {
mediaType,
mediaTypeQuery,
invalidMediaType,
query
};
}
componentDidMount() {
this.fetchLists();
}
const fetchLists = () => {
props.getLists(props.mediaTypeQuery);
};
componentDidUpdate(prevProps) {
// Only get new list if mediatype has changed
if (this.props.mediaType !== prevProps.mediaType) {
this.fetchLists();
const { hits = [] } = lists;
const showLists = hits.length > 0;
const inlineFilterOptions = [
{
text: "2021",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2021:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2021",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2021`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2020",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2020:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2020",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2020`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2019",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2019:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2019",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2019`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2018",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2018:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2018",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2018`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2017",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2017:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2017",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2017`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2016",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2016:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2016",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2016`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "Alle",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesTotal:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen",
as: `/inspirasjon/${mediaType}/utlanstoppen`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
}
}
];
fetchLists() {
this.props.getLists(this.props.mediaTypeQuery);
if (invalidMediaType) {
return <Error headline="404" message="Denne siden finnes ikke." />;
}
render() {
const {
filters,
lists,
mediaType,
mediaTypeQuery,
invalidMediaType
} = this.props;
const { hits = [] } = lists;
const showLists = hits.length > 0;
const inlineFilterOptions = [
{
text: "2021",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2021:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2021",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2021`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2020",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2020:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2020",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2020`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2019",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2019:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2019",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2019`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2018",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2018:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2018",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2018`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2017",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2017:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2017",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2017`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "2016",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesByYear.2016:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen?issuesByYear=2016",
as: `/inspirasjon/${mediaType}/utlanstoppen?issuesByYear=2016`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
},
{
text: "Alle",
value: `*?mediatype=${mediaTypeQuery}&sort=issuesTotal:desc`,
dynamicLink: {
href: "/inspirasjon/[mediaType]/utlanstoppen",
as: `/inspirasjon/${mediaType}/utlanstoppen`,
text: `Se utlånstoppen for ${pluraliseString(mediaType)}`
}
}
];
if (invalidMediaType) {
return <Error headline="404" message="Denne siden finnes ikke." />;
}
return (
<Fragment>
<Head title={`Inspirasjon til ${mediaType} - Deichman.no`} />
return (
<Fragment>
<Head title={`Inspirasjon til ${mediaType} - Deichman.no`} />
<A11yJumpTo target="#results" text="Hopp til resultater" />
<A11yJumpTo target="#results" text="Hopp til resultater" />
<InspirationSubNav mediaType={mediaType} />
<InspirationSubNav mediaType={mediaType} />
<SearchFilters type="inspiration" results={{ filters }} />
<SearchFilters type="inspiration" results={{ filters }} />
<Container id="results">
<Block top={8} responsive>
<DynamicListFromQuery