Commit 9a34bd7e authored by David Björkheim's avatar David Björkheim
Browse files

DEICH-5558 Deichman.no: fix condition + better loading for reserve widget

parent 5aad36cb
...@@ -51,6 +51,7 @@ export default function ReservePublicationWidget({ ...@@ -51,6 +51,7 @@ export default function ReservePublicationWidget({
const [platform, setPlatform] = useState(platforms?.[0]); const [platform, setPlatform] = useState(platforms?.[0]);
const [copies, setCopies] = useState({}); const [copies, setCopies] = useState({});
const [isLoading, setLoading] = useState(true);
const [reservationPublications, setReservationPublications] = useState([]); const [reservationPublications, setReservationPublications] = useState([]);
const isLoggedIn = useSelector(state => state.auth.isLoggedIn); const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
...@@ -60,9 +61,13 @@ export default function ReservePublicationWidget({ ...@@ -60,9 +61,13 @@ export default function ReservePublicationWidget({
useEffect( useEffect(
() => { () => {
let cancelUpdate = false; let cancelUpdate = false;
getCopies(currentPublication).then( setLoading(true);
newCopies => !cancelUpdate && setCopies(newCopies) getCopies(currentPublication).then(newCopies => {
); if (!cancelUpdate) {
setCopies(newCopies);
setLoading(false);
}
});
return () => (cancelUpdate = true); return () => (cancelUpdate = true);
}, },
[currentPublication] [currentPublication]
...@@ -152,67 +157,74 @@ export default function ReservePublicationWidget({ ...@@ -152,67 +157,74 @@ export default function ReservePublicationWidget({
.map(p => notReservableReason(p, copies)) .map(p => notReservableReason(p, copies))
.reduce((reasons, reason) => ({ ...reasons, [reason]: reason }), {}) .reduce((reasons, reason) => ({ ...reasons, [reason]: reason }), {})
); );
if (reasons.length > 0) { if (isLoading) {
return null;
}
if (publications.every(p => notReservableReason(p, copies))) {
return ( return (
<div className="reserve-work-widget"> <div data-animate-in="top" data-animation-order="4">
<h3>{title}</h3> <div className="reserve-work-widget">
<p> <h3>{title}</h3>
{reasons.length === 1 && <>{reasons[0]}</>} <p>
{reasons.length > 1 && "Kan ikke bestilles"} {reasons.length === 1 && <>{reasons[0]}</>}
</p> {reasons.length > 1 && "Kan ikke bestilles"}
</p>
</div>
</div> </div>
); );
} }
return ( return (
<div className="reserve-work-widget"> <div data-animate-in="top" data-animation-order="4">
<h3>{title}</h3> <div className="reserve-work-widget">
{!isLoggedIn && ( <h3>{title}</h3>
<div> {!isLoggedIn && (
<LoginButton primary>Logg inn og bestill</LoginButton> <div>
</div> <LoginButton primary>Logg inn og bestill</LoginButton>
)} </div>
{isLoggedIn && ( )}
<div> {isLoggedIn && (
{reserveChoices.map(choice => { <div>
return ( {reserveChoices.map(choice => {
<fieldset return (
key={choice.choice} <fieldset
disabled={choice.alternatives.length <= 1} key={choice.choice}
> disabled={choice.alternatives.length <= 1}
<Select >
name={choice.choice} <Select
options={choice.alternatives} name={choice.choice}
onChange={choice.onChange} options={choice.alternatives}
selected={choice.selected} onChange={choice.onChange}
selected={choice.selected}
/>
</fieldset>
);
})}
<>
<Button primary onClick={() => onReserve(reserveChoices)}>
Bestill
</Button>
{!!reservationPublications.length && (
<ReservationContainer
publications={reservationPublications}
copies={copies}
onClose={() => setReservationPublications([])}
/> />
</fieldset> )}
); </>
})} </div>
<> )}
<Button primary onClick={() => onReserve(reserveChoices)}> <Block top={2}>
Bestill <PublicationDetailsButton
</Button> className="link"
{!!reservationPublications.length && ( publication={{
<ReservationContainer ...currentPublication,
publications={reservationPublications} items: copies[currentPublication.recordId]?.items
copies={copies} }}
onClose={() => setReservationPublications([])} >
/> Mer info og hylleplassering
)} </PublicationDetailsButton>
</> </Block>
</div> </div>
)}
<Block top={2}>
<PublicationDetailsButton
className="link"
publication={{
...currentPublication,
items: copies[currentPublication.recordId]?.items
}}
>
Mer info og hylleplassering
</PublicationDetailsButton>
</Block>
</div> </div>
); );
} }
...@@ -236,7 +248,7 @@ export function notReservableReason(publication, copies) { ...@@ -236,7 +248,7 @@ export function notReservableReason(publication, copies) {
const isOnlyForBranchUse = items.every(item => item.notforloan); const isOnlyForBranchUse = items.every(item => item.notforloan);
if ( if (
publication.formats.includes( publication.formats?.includes(
"http://data.deichman.no/format#MusicalInstrument" "http://data.deichman.no/format#MusicalInstrument"
) )
) { ) {
......
...@@ -120,12 +120,10 @@ const WorkHero = ({ ...@@ -120,12 +120,10 @@ const WorkHero = ({
</Block> </Block>
<Block top={6} responsive> <Block top={6} responsive>
<div data-animate-in="top" data-animation-order="4"> <ReservePublicationWidget
<ReservePublicationWidget publications={publications}
publications={publications} currentPublication={publicationData}
currentPublication={publicationData} />
/>
</div>
</Block> </Block>
</div> </div>
</GridItem> </GridItem>
......
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