banner: add support for new invenio-banners version and multiple banners

Author: JakobMiesner

src/lib/api/banners/banner.js

@@ -1,12 +1,18 @@
 import { http } from '@api/base';
+import { getSearchTotal } from '@api/utils';
 
 const bannerURL = '/banners/';
 
 const getActive = async () => {
   const URLPath = window.location.pathname;
-  return await http.get(`${bannerURL}active`, {
-    params: { url_path: URLPath },
+  const response = await http.get(`${bannerURL}`, {
+    params: { url_path: URLPath, active: true },
   });
+
+  response.data.total = getSearchTotal(response.data.hits);
+  response.data.hits = response.data.hits.hits;
+
+  return response;
 };
 
 export const bannerApi = {

src/lib/authentication/pages/Login/Login.js

@@ -1,7 +1,7 @@
 import { parseParams } from '@authentication/utils';
 import { EnvironmentLabel } from '@components/EnvironmentLabel';
 import { Media } from '@components/Media';
-import { Banner } from '@components/Banner';
+import { Banners } from '@components/Banners';
 import { Notifications } from '@components/Notifications';
 import { invenioConfig } from '@config';
 import { goTo } from '@history';
@@ -248,7 +248,7 @@ class Login extends Component {
     return (
       <>
         <Overridable id="Login.extras">
-          <Banner />
+          <Banners />
         </Overridable>
         <LoginLayout
           hasError={hasError}

src/lib/components/Banner/index.js

@@ -18,9 +18,10 @@ const BannerCmp = ({ message, category }) => {
     default:
       break;
   }
+
   return (
     <Overridable
-      id="Banner.layout"
+      id="Banners.layout"
       message={message}
       category={category}
       colorProp={colorProp}
@@ -37,45 +38,48 @@ BannerCmp.propTypes = {
   category: PropTypes.string.isRequired,
 };
 
-class Banner extends Component {
+class Banners extends Component {
   componentDidMount() {
-    const { fetchBanner, resetBanner } = this.props;
+    const { fetchBanners, resetBanner } = this.props;
     resetBanner();
-    fetchBanner();
-    this.intervalFetchBannerId = setInterval(
-      fetchBanner,
+    fetchBanners();
+    this.intervalfetchBannersId = setInterval(
+      fetchBanners,
       FETCH_BANNER_EVERY_SECS * 1000
     );
   }
 
   componentWillUnmount() {
-    this.intervalFetchBannerId && clearInterval(this.intervalFetchBannerId);
+    this.intervalfetchBannersId && clearInterval(this.intervalfetchBannersId);
   }
 
   render() {
-    const { banner, children } = this.props;
+    const { banners, children } = this.props;
+
     return (
       <>
-        {!_isEmpty(banner) ? <BannerCmp {...banner} /> : null} {children}
+        {!_isEmpty(banners) ? banners.hits.map(banner => (<BannerCmp key={banner.id} {...banner} />)) : null} {children}
       </>
     );
   }
 }
 
-Banner.propTypes = {
+Banners.propTypes = {
   children: PropTypes.node,
   /* REDUX */
-  banner: PropTypes.shape({
-    message: PropTypes.string,
-    category: PropTypes.string,
-  }),
-  fetchBanner: PropTypes.func.isRequired,
-  resetBanner: PropTypes.func.isRequired,
+  banners: PropTypes.arrayOf(
+    PropTypes.shape({
+      message: PropTypes.string,
+      category: PropTypes.string,
+    })
+  ),
+  fetchBanners: PropTypes.func.isRequired,
+  resetBanners: PropTypes.func.isRequired,
 };
 
-Banner.defaultProps = {
-  banner: null,
+Banners.defaultProps = {
+  banners: null,
   children: null,
 };
 
-export default Overridable.component('Banner', Banner);
+export default Overridable.component('Banners', Banners);

src/lib/components/Banner/Banner.js src/lib/components/Banners/Banners.jssrc/lib/components/Banner/Banner.js renamed to src/lib/components/Banners/Banners.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import BannerComponent from './Banners';
+import { fetchBanners, resetBanner } from './state/actions';
+
+const mapStateToProps = (state) => ({
+  banners: state.banners.data,
+  error: state.banners.error,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchBanners: () => dispatch(fetchBanners()),
+  resetBanner: () => dispatch(resetBanner()),
+});
+
+export const Banners = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BannerComponent);

src/lib/components/Banners/index.js

@@ -1,8 +1,8 @@
 import { bannerApi } from '@api/banners';
 
-export const BANNER_RESET = 'fetchBanner/RESET';
-export const BANNER_SUCCESS = 'fetchBanner/SUCCESS';
-export const BANNER_HAS_ERROR = 'fetchBanner/HAS_ERROR';
+export const BANNER_RESET = 'fetchBanners/RESET';
+export const BANNER_SUCCESS = 'fetchBanners/SUCCESS';
+export const BANNER_HAS_ERROR = 'fetchBanners/HAS_ERROR';
 
 export const resetBanner = () => {
   return async (dispatch) =>
@@ -11,7 +11,7 @@ export const resetBanner = () => {
     });
 };
 
-export const fetchBanner = () => {
+export const fetchBanners = () => {
   return async (dispatch) => {
     try {
       const response = await bannerApi.getActive();

…c/lib/components/Banner/state/actions.js …/lib/components/Banners/state/actions.jssrc/lib/components/Banner/state/actions.js renamed to src/lib/components/Banners/state/actions.js src/lib/components/Banner/state/actions.js renamed to src/lib/components/Banners/state/actions.js

@@ -5,7 +5,7 @@ export const initialState = {
   error: {},
 };
 
-export const fetchBannerReducer = (state = initialState, action) => {
+export const fetchBannersReducer = (state = initialState, action) => {
   switch (action.type) {
     case BANNER_RESET:
       return {

…c/lib/components/Banner/state/reducer.js …/lib/components/Banners/state/reducer.jssrc/lib/components/Banner/state/reducer.js renamed to src/lib/components/Banners/state/reducer.js src/lib/components/Banner/state/reducer.js renamed to src/lib/components/Banners/state/reducer.js

@@ -1,6 +1,6 @@
 import { authenticationReducer } from '@authentication/reducer';
 import { deleteRecordModalReducer } from '@components/backoffice/DeleteRecordModal/reducer';
-import { fetchBannerReducer } from '@components/Banner/state/reducer';
+import { fetchBannersReducer } from '@components/Banners/state/reducer';
 import { notificationsReducer } from '@components/Notifications/reducer';
 import { overdueLoanSendNotificationModalReducer } from '@modules/Loan/backoffice/OverdueLoanSendNotificationModal/reducer';
 import { loanActionReducer, loanDetailsReducer } from '@modules/Loan/reducer';
@@ -123,7 +123,7 @@ export default function createILSReducer(asyncReducers) {
     borrowingRequestLoanExtension: borrowingRequestLoanExtensionReducer,
     itemsCheckIn: itemsCheckInReducer,
     checkOut: checkOutReducer,
-    banner: fetchBannerReducer,
+    banners: fetchBannersReducer,
     bulkLoanExtend: patronBulkExtendLoans,
     ...asyncReducers,
   });

src/lib/reducers.js

@@ -1,5 +1,5 @@
 import { Sidebar } from '@components/backoffice/Sidebar';
-import { Banner } from '@components/Banner';
+import { Banners } from '@components/Banners';
 import { Notifications } from '@components/Notifications';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -12,7 +12,7 @@ export class BackOffice extends Component {
     return (
       <>
         <Overridable id="BackOffice.extras">
-          <Banner />
+          <Banners />
         </Overridable>
         <div className="backoffice">
           <div className="bo-sidebar">

src/lib/routes/backoffice/BackOffice.js

@@ -1,4 +1,4 @@
-import { Banner } from '@components/Banner';
+import { Banners } from '@components/Banners';
 import { NotFound } from '@components/HttpErrors';
 import { ILSFooter } from '@components/ILSFooter';
 import { ILSMenu } from '@components/ILSMenu';
@@ -38,7 +38,7 @@ export default class FrontSite extends Component {
         <Notifications className="compact" />
         <Container fluid className="fs-content">
           <Overridable id="FrontSite.extras">
-            <Banner />
+            <Banners />
           </Overridable>
           <Switch>
             <Route