Commit e2dbac4c authored by Øyvind Julsrud's avatar Øyvind Julsrud
Browse files

DEICH-5917: deichman.no refactor of HoldList.js, Nav.js and laan.js

parent 8c3255c6
import React, { Component } from "react";
import autoBind from "auto-bind";
import { Block } from "@digibib/deichman-ui";
import classNames from "classnames";
import PropTypes from "prop-types";
import React from "react";
import HoldCard from "../HoldCard";
import { Block } from "@digibib/deichman-ui";
import "./styles.css";
import classNames from "classnames";
class HoldList extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {};
}
render() {
const {
headline,
loanerCategory,
items,
branches,
onCancel,
onToggleSuspend,
onChangePickupBranch,
isCompact
} = this.props;
const HoldList = props => {
const {
headline,
loanerCategory,
items,
branches,
onCancel,
onToggleSuspend,
onChangePickupBranch,
isCompact
} = props;
const holdList = classNames({
"hold-list": true,
"hold-list--compact": isCompact
});
const holdList = classNames({
"hold-list": true,
"hold-list--compact": isCompact
});
return (
<section className={holdList}>
<h3>{headline}</h3>
<Block top={6}>
<ul className="hold-list__items">
{items.map(item => (
<li className="hold-list__item" key={item.id}>
<HoldCard
data={item}
branches={branches}
loanerCategory={loanerCategory}
flags={item.flags}
onToggleSuspend={onToggleSuspend}
onChangePickupBranch={onChangePickupBranch}
onCancel={onCancel}
/>
</li>
))}
</ul>
</Block>
</section>
);
}
}
return (
<section className={holdList}>
<h3>{headline}</h3>
<Block top={6}>
<ul className="hold-list__items">
{items.map(item => (
<li className="hold-list__item" key={item.id}>
<HoldCard
data={item}
branches={branches}
loanerCategory={loanerCategory}
flags={item.flags}
onToggleSuspend={onToggleSuspend}
onChangePickupBranch={onChangePickupBranch}
onCancel={onCancel}
/>
</li>
))}
</ul>
</Block>
</section>
);
};
HoldList.defaultProps = {
headline: "",
......
import React, { Fragment, Component } from "react";
import Router from "next/router";
import { connect } from "react-redux";
import autoBind from "auto-bind";
import PropTypes from "prop-types";
import Link from "next/link";
import FocusTrap from "focus-trap-react";
import { showSearchField, showSearchOverlay } from "../../store/search";
import { toggleNav } from "../../store/application";
import { logout } from "../../store/auth";
import { mainNav } from "../../constants/navItems";
import URL_TO_QUERY_MAP from "../../constants/inspirationUrlToQueryMap";
import LogoFull from "./LogoFull";
import {
Accordion,
Block,
Overlay,
Sidebar,
Button,
Hr,
Icon,
Accordion
Overlay,
Sidebar
} from "@digibib/deichman-ui";
import FocusTrap from "focus-trap-react";
import Link from "next/link";
import Router from "next/router";
import PropTypes from "prop-types";
import React, { useEffect } from "react";
import { connect } from "react-redux";
import URL_TO_QUERY_MAP from "../../constants/inspirationUrlToQueryMap";
import { mainNav } from "../../constants/navItems";
import { toggleNav } from "../../store/application";
import { logout } from "../../store/auth";
import { showSearchField, showSearchOverlay } from "../../store/search";
import LogoFull from "./LogoFull";
import "./styles.css";
const mediaTypes = Object.keys(URL_TO_QUERY_MAP);
class Nav extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {};
}
componentDidMount() {
Router.events.on("routeChangeStart", this.handleRouteChange);
}
const Nav = props => {
const { isVisible, isLoggedIn, userData } = props;
const { borrowerName = "" } = userData;
componentWillUnmount() {
Router.events.off("routeChangeStart", this.handleRouteChange);
}
useEffect(() => {
Router.events.on("routeChangeStart", handleRouteChange);
onToggle() {
this.props.toggleNav();
}
return () => {
Router.events.off("routeChangeStart", handleRouteChange);
};
}, []);
handleShowSearch() {
this.props.showSearchField();
this.props.showSearchOverlay();
}
const onToggle = () => {
props.toggleNav();
};
handleRouteChange() {
const handleRouteChange = () => {
// Ensure navigation closes when changing routes
const { isVisible } = this.props;
const { isVisible } = props;
if (isVisible) {
this.onToggle();
onToggle();
}
}
};
handleSignup() {
const handleSignup = () => {
Router.push("/registrer-deg");
}
};
handleLogin() {
const handleLogin = () => {
Router.push("/logg-inn");
}
};
async handleLogOut(e) {
const handleLogOut = async e => {
e.preventDefault();
await this.props.logout();
// No redirect here, should be handled by auth server
}
render() {
const { isVisible, isLoggedIn, userData } = this.props;
const { borrowerName = "" } = userData;
return (
<FocusTrap active={isVisible}>
<div className="nav">
<Sidebar open={isVisible} position="right">
<div className="nav__inner">
<div className="nav__top-bar">
<div className="nav__logo">
<Link href="/">
<a tabIndex="-1" role="link" title="Hjem">
<LogoFull />
await props.logout();
};
return (
<FocusTrap active={isVisible}>
<div className="nav">
<Sidebar open={isVisible} position="right">
<div className="nav__inner">
<div className="nav__top-bar">
<div className="nav__logo">
<Link href="/">
<a tabIndex="-1" role="link" title="Hjem">
<LogoFull />
</a>
</Link>
</div>
<div className="nav__actions">
<button
className="nav__button"
onClick={onToggle}
type="button"
>
<Icon type="close" />
<span className="nav__button-text">Lukk</span>
</button>
</div>
</div>
<nav className="nav__menu">
<section className="nav__section">
<div className="nav__inspiration-accordion">
<Accordion text="Finn noe å låne" name="Inspirasjon">
<Block bottom={4}>
{mediaTypes.map(item => (
<Link
href="/inspirasjon/[mediaType]"
as={`/inspirasjon/${item}`}
key={item}
>
<a>{item}</a>
</Link>
))}
</Block>
</Accordion>
</div>
{mainNav.mobile.map(i => (
<Link href={i.url} key={`${i.text}-${i.url}`}>
<a>
<span className="h4">{i.text}</span>
</a>
</Link>
</div>
<div className="nav__actions">
<button
className="nav__button"
onClick={this.onToggle}
type="button"
>
<Icon type="close" />
<span className="nav__button-text">Lukk</span>
</button>
</div>
</div>
))}
<nav className="nav__menu">
<section className="nav__section">
<div className="nav__inspiration-accordion">
<Accordion text="Finn noe å låne" name="Inspirasjon">
<Block bottom={4}>
{mediaTypes.map(item => (
<Link
href="/inspirasjon/[mediaType]"
as={`/inspirasjon/${item}`}
key={item}
>
<a>{item}</a>
</Link>
))}
</Block>
</Accordion>
</div>
{mainNav.mobile.map(i => (
<Link href={i.url} key={`${i.text}-${i.url}`}>
{/* Logged in shortcuts */}
{isLoggedIn && (
<>
<Block top={4} bottom={4}>
<Hr />
</Block>
<Link href="/min-side">
<a>
<span className="h4">{i.text}</span>
<span className="h4">{borrowerName}</span>
</a>
</Link>
))}
{/* Logged in shortcuts */}
{isLoggedIn && (
<Fragment>
<Block top={4} bottom={4}>
<Hr />
</Block>
<Link href="/min-side">
<a>
<span className="h4">{borrowerName}</span>
</a>
</Link>
<Link href="/min-side">
<a> til min side</a>
</Link>
</Fragment>
<Link href="/min-side">
<a> til min side</a>
</Link>
</>
)}
</section>
{/* Bottom actions */}
<section className="nav__footer">
<Block top={isLoggedIn ? 4 : 6} bottom={4}>
<Hr />
</Block>
<div className="nav__footer-inner">
{!isLoggedIn && (
<Button primary full onClick={handleSignup}>
Bli låner
</Button>
)}
</section>
{/* Bottom actions */}
<section className="nav__footer">
<Block top={isLoggedIn ? 4 : 6} bottom={4}>
<Hr />
</Block>
<div className="nav__footer-inner">
{!isLoggedIn && (
<Button primary full onClick={this.handleSignup}>
Bli låner
<Block top={2}>
{isLoggedIn ? (
<Button full onClick={handleLogOut}>
Logg ut
</Button>
) : (
<Button full onClick={handleLogin}>
Logg inn
</Button>
)}
<Block top={2}>
{isLoggedIn ? (
<Button full onClick={this.handleLogOut}>
Logg ut
</Button>
) : (
<Button full onClick={this.handleLogin}>
Logg inn
</Button>
)}
</Block>
</div>
</section>
</nav>
</div>
</Sidebar>
<Overlay visible={isVisible} onClick={this.onToggle} />
</div>
</FocusTrap>
);
}
}
</Block>
</div>
</section>
</nav>
</div>
</Sidebar>
<Overlay visible={isVisible} onClick={onToggle} />
</div>
</FocusTrap>
);
};
Nav.defaultProps = {
navItems: [{ url: "/", text: "test" }]
navItems: [{ url: "/", text: "" }]
};
Nav.propTypes = {
......
import React, { Fragment } from "react";
import { Block, Button, Container, Flex, Loader } from "@digibib/deichman-ui";
import { parse } from "date-fns";
import PropTypes from "prop-types";
import { loggedInPages } from "../../constants/navItems";
import { withAuthSync } from "../../utilities/auth";
import React, { useEffect } from "react";
import { connect } from "react-redux";
import FullScreen from "../../components/FullScreen";
import Head from "../../components/Head";
import SubNav from "../../components/SubNav";
import LoanList from "../../components/LoanList";
import Outlined from "../../components/Outlined";
import FullScreen from "../../components/FullScreen";
import { Container, Block, Loader, Button, Flex } from "@digibib/deichman-ui";
import { fetchAllProfileData } from "../../store/profile";
import { startPayFine } from "../../store/payments";
import SubNav from "../../components/SubNav";
import { loggedInPages } from "../../constants/navItems";
import { extendAllLoans } from "../../store/checkouts";
import { getFavourites } from "../../store/favourites";
import { startPayFine } from "../../store/payments";
import { fetchAllProfileData } from "../../store/profile";
import { withAuthSync } from "../../utilities/auth";
const dueDateComparator = (a, b) => {
if (parse(b.dueDate) < parse(a.dueDate)) {
......@@ -26,176 +25,170 @@ const dueDateComparator = (a, b) => {
return 0;
};
class MyLoans extends React.Component {
constructor(props) {
super(props);
this.state = {};
const MyLoans = props => {
useEffect(() => {
props.fetchAllProfileData();
props.getFavourites();
}, []);
const {
isRequestingLoansAndReservations,
personalInformation
} = props.profile;
const { loanerCategory } = personalInformation;
const isJuvenile = loanerCategory === "B" ? true : false;
const { isRequestingNetsUrl } = props.payments;
const {
loans = [],
purresaker = [],
kemnersaker = [],
remoteLoans = []
} = props.profile.loansAndReservations;
const { isRequestingExtendAllLoans, hasRequestedRenewAll } = props.checkouts;
const sortedActiveLoans = loans
.sort(dueDateComparator)
.filter(loan => loan.isPurresak !== true && loan.isKemnersak !== true);
const sortedRemoteLoans = remoteLoans.sort(dueDateComparator);
const noLoans =
kemnersaker.length < 1 &&
purresaker.length < 1 &&
sortedActiveLoans.length < 1 &&
sortedRemoteLoans.length < 1;
let purreId = -1;
if (purresaker && purresaker.length > 0) {
purreId = purresaker[0].purreId;
}
componentDidMount() {
// TODO don't fetch if allready in state
this.props.fetchAllProfileData();
this.props.getFavourites();
let hasPurreOrKemnerSak = false;
if (
(purresaker && purresaker.length > 0) ||
(kemnersaker && kemnersaker.length > 0)
) {
hasPurreOrKemnerSak = true;
}
render() {
const { isRequestingLoansAndReservations, personalInformation } = this.props.profile;
const { loanerCategory } = personalInformation;
const isJuvenile = loanerCategory === "B" ? true: false
const { isRequestingNetsUrl } = this.props.payments;
const {
loans = [],
purresaker = [],
kemnersaker = [],
remoteLoans = []
} = this.props.profile.loansAndReservations;
const {
isRequestingExtendAllLoans,
hasRequestedRenewAll
} = this.props.checkouts;
const sortedActiveLoans = loans
.sort(dueDateComparator)
.filter(loan => loan.isPurresak !== true && loan.isKemnersak !== true);
const sortedRemoteLoans = remoteLoans.sort(dueDateComparator);
const noLoans =
kemnersaker.length < 1 &&
purresaker.length < 1 &&
sortedActiveLoans.length < 1 &&
sortedRemoteLoans.length < 1;
let purreId = -1;
if (purresaker && purresaker.length > 0) {
purreId = purresaker[0].purreId;
}
let hasPurreOrKemnerSak = false;
if (
(purresaker && purresaker.length > 0) ||
(kemnersaker && kemnersaker.length > 0)
) {
hasPurreOrKemnerSak = true;
}
return (
<Fragment>
<Head title="Min side - Deichman.no" />
<SubNav items={loggedInPages} />
{isRequestingLoansAndReservations ? (
<FullScreen>
<Loader />
</FullScreen>
) : (
<Container>
{noLoans && (
<Block top={8} bottom={8} responsive>
<p>Du har for tiden ingen lån.</p>
</Block>
)}
{kemnersaker && kemnersaker.length > 0 && (
<Block top={8} bottom={8} responsive>
return (
<>
<Head title="Min side - Deichman.no" />
<SubNav items={loggedInPages} />
{isRequestingLoansAndReservations ? (
<FullScreen>
<Loader />
</FullScreen>
) : (
<Container>
{noLoans && (
<Block top={8} bottom={8} responsive>
<p>Du har for tiden ingen lån.</p>
</Block>
)}
{kemnersaker && kemnersaker.length > 0 && (
<Block top={8} bottom={8} responsive>
<Outlined>
<LoanList
items={kemnersaker}
hasPurreOrKemnerSak={hasPurreOrKemnerSak}
>
<Block>
<h3>Lån med erstatningskrav</h3>