DEICH-5554 Deichman.no: Add info and placement to media page

deichman.no/components/PublicationCard/PublicationCard.js

@@ -15,13 +15,13 @@ import { translations as TRANSLATIONS } from "../../constants/translations";
 import { Block, Text, Flex } from "@digibib/deichman-ui";
 
 import "./styles.css";
+import PublicationDetailsButton from "../PublicationDetailsButton/PublicationDetailsButton";
 
 const Publicationcard = ({
   data,
   flags,
   parent,
   isFavourited,
-  onShowDetails,
   onFavourite,
   onReserve,
   userCategory
@@ -125,13 +125,9 @@ const Publicationcard = ({
         </Block>
 
         <Block top={2}>
-          <button
-            type="button"
-            className="link"
-            onClick={() => onShowDetails(id)}
-          >
+          <PublicationDetailsButton publication={data} className="link">
             Mer info og hylleplassering
-          </button>
+          </PublicationDetailsButton>
         </Block>
       </div>
     </article>
@@ -149,7 +145,6 @@ Publicationcard.propTypes = {
   isFavourited: PropTypes.bool.isRequired,
   onReserve: PropTypes.func.isRequired,
   onFavourite: PropTypes.func.isRequired,
-  onShowDetails: PropTypes.func.isRequired,
   tjenesteKatalogUrl: PropTypes.string.isRequired,
   userCategory: PropTypes.string.isRequired
 };

deichman.no/components/PublicationDetails/PublicationDetails.js

@@ -32,13 +32,10 @@ const PublicationDetails = ({ data, userCategory, showMazemap }) => {
     duration = false,
     ean = false,
     issn = [],
-    //items = [],
+    items = [],
     notes = []
   } = data;
 
-  // Temp FIX to filter out Hovedbilioteket items. TODO remove when all hutl items are deleted from koha.
-  const items = (data.items || []).filter(i => i.branchcode !== "hutl");
-
   const ageLimitLabel = ageLimit === "0" ? "Tillatt for alle" : ageLimit;
 
   let currentRowColor = "white";

deichman.no/components/PublicationDetailsButton/PublicationDetailsButton.js

+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+
+import PublicationDetails from "../PublicationDetails";
+
+import { Button, Modal } from "@digibib/deichman-ui";
+import FocusTrap from "focus-trap-react";
+import ModalPortal from "../ModalPortal/ModalPortal";
+import { useRouter } from "next/router";
+
+export default function PublicationDetailsButton(props) {
+  const { children, publication } = props;
+  const butttonsProps = { ...props };
+  delete butttonsProps.children;
+  delete butttonsProps.publication;
+
+  const category = useSelector(state => state.auth.userData.category);
+  const { query } = useRouter();
+
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showDelayedModal, setShowDelayedModal] = useState(false);
+  const show = () => {
+    setShowLoginModal(true);
+    setTimeout(() => setShowDelayedModal(true), 300);
+  };
+
+  const hide = () => {
+    setShowDelayedModal(false);
+    setTimeout(() => setShowLoginModal(false), 300);
+  };
+
+  return (
+    <>
+      {showLoginModal && (
+        <ModalPortal>
+          <FocusTrap
+            active={showDelayedModal}
+            focusTrapOptions={{
+              initialFocus: "#publication-details-trap"
+            }}
+          >
+            <Modal
+              name="Detaljer"
+              visible={showDelayedModal}
+              onClose={hide}
+              showClose
+              width="wide"
+            >
+              <div
+                className="focus-trap-target"
+                id="publication-details-trap"
+                tabIndex="-1"
+              >
+                <PublicationDetails
+                  data={publication}
+                  userCategory={category}
+                  onClose={hide}
+                  showMazemap={query && query.mazemap ? true : false}
+                />
+              </div>
+            </Modal>
+          </FocusTrap>
+        </ModalPortal>
+      )}
+      <Button {...butttonsProps} onClick={show}>
+        {children}
+      </Button>
+    </>
+  );
+}
+
+PublicationDetailsButton.prototypes = {
+  publication: PropTypes.object.isRequired
+};

deichman.no/components/PublicationDetailsManager/PublicationDetailsManager.js

-import React from "react";
-import PropTypes from "prop-types";
-import autoBind from "auto-bind";
-import { connect } from "react-redux";
-
-import FocusTrap from "focus-trap-react";
-
-import { toggleDetails } from "../../store/application";
-
-import PublicationDetails from "../PublicationDetails";
-
-import { Modal } from "@digibib/deichman-ui";
-
-/**
- * Responsible for reserving items from the catalog
- * -> Shows loginform if user is not logged in
- * -> Then shows remote/reservation-form
- */
-class PublicationDetailsManager extends React.Component {
-  constructor(props) {
-    super(props);
-    autoBind(this);
-    this.state = {
-      shouldRender: this.props.isVisible
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    // Prevent rendering of contents if not visible, but still allow for
-    // transition when showing/hiding by adding slight unmount-delay
-    if (prevProps.isVisible && !this.props.isVisible) {
-      setTimeout(() => this.setState({ shouldRender: false }), 300);
-    } else if (!prevProps.isVisible && this.props.isVisible) {
-      this.setState({ shouldRender: true }); // eslint-disable-line react/no-did-update-set-state
-    }
-  }
-
-  handleCloseModal(e) {
-    e.preventDefault();
-    this.props.toggleDetails();
-  }
-
-  render() {
-    const {
-      isVisible,
-      userCategory,
-      showMazemap,
-      data: { publication = {} },
-      query,
-    } = this.props;
-
-    return (
-      <FocusTrap
-        active={this.state.shouldRender}
-        focusTrapOptions={{
-          initialFocus: "#publication-details-trap"
-        }}
-      >
-        <Modal
-          name="Reserver"
-          visible={isVisible}
-          onClose={this.handleCloseModal}
-          showClose
-          width="wide"
-        >
-          <div
-            className="focus-trap-target"
-            id="publication-details-trap"
-            tabIndex="-1"
-          >
-            {this.state.shouldRender ? (
-              <PublicationDetails
-                data={publication}
-                userCategory={userCategory}
-                onClose={this.handleCloseModal}
-                showMazemap={query && query.mazemap ? true : false}
-              />
-            ) : (
-              ""
-            )}
-          </div>
-        </Modal>
-      </FocusTrap>
-    );
-  }
-}
-
-PublicationDetailsManager.propTypes = {
-  isVisible: PropTypes.bool.isRequired,
-  data: PropTypes.object,
-  userCategory: PropTypes.string,
-  toggleDetails: PropTypes.func.isRequired,
-};
-
-PublicationDetailsManager.defaultProps = {
-  data: {},
-  userCategory: ""
-};
-
-function mapStateToProps(state) {
-  const { details } = state.application;
-  const { category } = state.auth.userData;
-  return {
-    isVisible: details.visible,
-    data: details.data,
-    userCategory: category
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    toggleDetails: () => dispatch(toggleDetails())
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(PublicationDetailsManager);

deichman.no/components/PublicationDetailsManager/index.js

-import PublicationDetailsManager from "./PublicationDetailsManager";
-
-export default PublicationDetailsManager;

deichman.no/components/ReservePublicationWidget/ReservPublicationWidget.js → deichman.no/components/ReservePublicationWidget/ReservePublicationWidget.js

 import React, { useState } from "react";
-import { Button, Select } from "@digibib/deichman-ui";
+import { Block, Button, Select } from "@digibib/deichman-ui";
 import {
   AUDIO_BOOK,
   BOOK,
@@ -39,6 +39,7 @@ import ReservationContainer from "../ReservationsContainer/ReservationContainer"
 import { useEffect } from "react";
 import { useSelector } from "react-redux";
 import LoginButton from "../LoginButton/LoginButton";
+import PublicationDetailsButton from "../PublicationDetailsButton/PublicationDetailsButton";
 
 export default function ReservePublicationWidget({
   publications,
@@ -173,6 +174,17 @@ export default function ReservePublicationWidget({
           </>
         </div>
       )}
+      <Block top={2}>
+        <PublicationDetailsButton
+          className="link"
+          publication={{
+            ...currentPublication,
+            items: copies[currentPublication.recordId]?.items
+          }}
+        >
+          Mer info og hylleplassering
+        </PublicationDetailsButton>
+      </Block>
     </div>
   );
 }

deichman.no/components/ReservePublicationWidget/styles.css

 .reserve-work-widget {
+  h3 {
+    margin-bottom: var(--spacing-2);
+  }
   & > div {
     display: flex;
     flex-direction: row;
-    margin-top: var(--spacing-2);
 
     & button {
       flex-grow: 1;

deichman.no/components/WorkHero/WorkHero.js

@@ -14,7 +14,7 @@ import "./styles.css";
 import WorkTitle from "../WorkTitle/WorkTitle";
 import HighlightedWorkDetails from "../HilightedWorkDetails/HighlightedWorkDetails";
 import TextClamp from "../TextClamp/TextClamp";
-import ReservePublicationWidget from "../ReservePublicationWidget/ReservPublicationWidget";
+import ReservePublicationWidget from "../ReservePublicationWidget/ReservePublicationWidget";
 
 const WorkHero = ({
   workData,

deichman.no/pages/utgivelse/[publicationId].js

@@ -7,7 +7,6 @@ import { getPublication } from "../../store/resources";
 
 import Head from "../../components/Head";
 import FullScreen from "../../components/FullScreen";
-import PublicationDetailsManager from "../../components/PublicationDetailsManager";
 import { Block, Container, Loader, Text } from "@digibib/deichman-ui";
 import TabPane from "../../components/TabPane";
 import { translations } from "../../constants/translations";
@@ -31,7 +30,7 @@ class PublicationPage extends React.Component {
     await reduxStore.dispatch(
       getPublication(publicationId, req, showDraftRecommendationById)
     );
-    return { publicationId, showDraftRecommendationById, query };
+    return { publicationId, showDraftRecommendationById };
   };
 
   componentDidUpdate(prevProps) {
@@ -60,7 +59,6 @@ class PublicationPage extends React.Component {
 
   render() {
     const {
-      query,
       publication,
       resourceApi: { error: resourceError },
       publicationId
@@ -113,7 +111,6 @@ class PublicationPage extends React.Component {
               <WorkRecommendationContainer />
             </Container>
             {/*Should the components below still be included here? Why is the visibility state in redux? */}
-            <PublicationDetailsManager query={query} />
           </>
         </WorkPageWrapper>
       </Fragment>
@@ -124,7 +121,6 @@ class PublicationPage extends React.Component {
 PublicationPage.propTypes = {
   publicationId: PropTypes.string.isRequired,
   publication: PropTypes.object.isRequired,
-  query: PropTypes.object.isRequired,
   resourceApi: PropTypes.object.isRequired
 };