88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import DVHeader from './../AppContent/CIDetailView/DVHeader';
|
|
import DVBody from './DVBody';
|
|
import Spinner from './../Spinner';
|
|
import Div100vh from 'react-div-100vh';
|
|
import { useSelector } from 'react-redux'
|
|
|
|
const CIDetailView = ({
|
|
activeItem,
|
|
isFirst,
|
|
isLast,
|
|
close,
|
|
catalog,
|
|
pending,
|
|
openDetail,
|
|
showNextItem,
|
|
showPrevItem,
|
|
match,
|
|
participated,
|
|
sendParticipation,
|
|
toggleParticipated,
|
|
color
|
|
}) => {
|
|
if (activeItem === null) {
|
|
// we have the catalog, but this view was not opened through an action
|
|
// but by it's URL. Now we need to dispatch an action that,
|
|
// depending on the current route, will tell which id the ID of the item to display.
|
|
if (catalog.length) {
|
|
catalog.forEach((item, i) => {
|
|
if (item.inventory_number === match.params.itemId.replace('__', ' ')) {
|
|
openDetail(i);
|
|
}
|
|
});
|
|
}
|
|
|
|
// we don't know yet what data to display.
|
|
// Most certainly the catalog is being fetched.
|
|
return (
|
|
<div className='CIDetailView__loading AppContent'>
|
|
<DVHeader close={close} />
|
|
{pending && <Spinner />}
|
|
</div>
|
|
);
|
|
}
|
|
if (activeItem.inventory_number !== match.params.itemId.replace('__', ' ')) {
|
|
window.history.pushState(null, null, activeItem.inventory_number.replace(' ', '__'));
|
|
}
|
|
|
|
const doYouKnowMoreURL = (
|
|
useSelector(state => state.urls.site) + "do-you-know-more/?object_id=" + activeItem.inventory_number
|
|
);
|
|
|
|
return (
|
|
<Div100vh>
|
|
<div className='CIDetailView AppContent' id='CIDetailView'>
|
|
<div id='CIDetailView-top-element'></div>
|
|
<DVHeader close={close} />
|
|
<DVBody
|
|
item={activeItem}
|
|
isFirst={isFirst}
|
|
isLast={isLast}
|
|
showNextItem={showNextItem}
|
|
showPrevItem={showPrevItem}
|
|
participated={participated}
|
|
sendParticipation={sendParticipation}
|
|
toggleParticipated={toggleParticipated}
|
|
doYouKnowMoreURL={doYouKnowMoreURL}
|
|
color={color}
|
|
/>
|
|
</div>
|
|
</Div100vh>
|
|
);
|
|
};
|
|
|
|
CIDetailView.propTypes = {
|
|
activeItem: PropTypes.object,
|
|
isFirst: PropTypes.bool,
|
|
isLast: PropTypes.bool,
|
|
close: PropTypes.func.isRequired,
|
|
catalog: PropTypes.array,
|
|
openDetail: PropTypes.func.isRequired,
|
|
showNextItem: PropTypes.func.isRequired,
|
|
showPrevItem: PropTypes.func.isRequired,
|
|
match: PropTypes.object.isRequired
|
|
};
|
|
export default CIDetailView;
|