Merge pull request RedHatInsights#227 from Hyperkid123/add-pagination…

…-portfolios-portfolios

Add pagination portfolios portfolios

src/helpers/portfolio/portfolio-helper.js

@@ -5,8 +5,8 @@ const axiosInstance = getAxiosInstance();
 const portfolioApi = getPortfolioApi();
 const portfolioItemApi = getPortfolioItemApi();
 
-export function listPortfolios() {
-  return portfolioApi.listPortfolios();
+export function listPortfolios(_apiProps, { limit, offset, filter, ...options } = {}) {
+  return portfolioApi.listPortfolios(limit, offset, filter, options);
 }
 
 export function getPortfolioItems() {
@@ -25,8 +25,8 @@ export function getPortfolio(portfolioId) {
   return portfolioApi.showPortfolio(portfolioId);
 }
 
-export function getPortfolioItemsWithPortfolio(portfolioId) {
-  return axiosInstance.get(`${CATALOG_API_BASE}/portfolios/${portfolioId}/portfolio_items`);
+export function getPortfolioItemsWithPortfolio(portfolioId, { limit, offset } = {}) {
+  return portfolioApi.fetchPortfolioItemsWithPortfolio(portfolioId, limit, offset);
 }
 
 // TO DO - change to use the API call that adds multiple items to a portfolio when available

src/redux/actions/portfolio-actions.js

@@ -5,26 +5,28 @@ import { ADD_NOTIFICATION, CLEAR_NOTIFICATIONS } from '@redhat-cloud-services/fr
 import * as ActionTypes from '../action-types';
 import * as PortfolioHelper from '../../helpers/portfolio/portfolio-helper';
 
-export const doFetchPortfolios = apiProps => ({
+export const doFetchPortfolios = (...args) => ({
   type: ActionTypes.FETCH_PORTFOLIOS,
-  payload: PortfolioHelper.listPortfolios(apiProps).then(({ data }) => data)
+  payload: PortfolioHelper.listPortfolios(...args)
 });
 
-export const fetchPortfolios = apiProps => (dispatch) => dispatch(doFetchPortfolios(apiProps));
+export const fetchPortfolios = (...args) => (dispatch) => {
+  return dispatch(doFetchPortfolios(...args));
+};
 
 export const fetchPortfolioItems = apiProps => ({
   type: ActionTypes.FETCH_PORTFOLIO_ITEMS,
-  payload: PortfolioHelper.getPortfolioItems(apiProps).then(({ data }) => data)
+  payload: PortfolioHelper.getPortfolioItems(apiProps)
 });
 
 export const fetchPortfolioItem = (portfolioItemId) => ({
   type: ActionTypes.FETCH_PORTFOLIO_ITEM,
   payload: PortfolioHelper.getPortfolioItem(portfolioItemId)
 });
 
-export const fetchPortfolioItemsWithPortfolio = apiProps => ({
+export const fetchPortfolioItemsWithPortfolio = (...args) => ({
   type: ActionTypes.FETCH_PORTFOLIO_ITEMS_WITH_PORTFOLIO,
-  payload: PortfolioHelper.getPortfolioItemsWithPortfolio(apiProps).then(({ data }) => data)
+  payload: PortfolioHelper.getPortfolioItemsWithPortfolio(...args)
 });
 
 export const fetchSelectedPortfolio = id => ({
@@ -135,9 +137,9 @@ export const removeProductsFromPortfolio = (portfolioItems, portfolioName) => (d
   dispatch({
     type: `${ActionTypes.REMOVE_PORTFOLIO_ITEMS}_PENDING`
   });
-  const { portfolioReducer: { selectedPortfolio: { id: portfolioId }}} = getState();
+  const { portfolioReducer: { portfolioItems: { meta }, selectedPortfolio: { id: portfolioId }}} = getState();
   return PortfolioHelper.removePortfolioItems(portfolioItems)
-  .then(data => dispatch(fetchPortfolioItemsWithPortfolio(portfolioId)).then(() => data))
+  .then(data => dispatch(fetchPortfolioItemsWithPortfolio(portfolioId, meta)).then(() => data))
   .then(data => {
     return dispatch({
       type: ADD_NOTIFICATION,

src/redux/reducers/portfolio-reducer.js

@@ -13,9 +13,9 @@ import {
 
 // Initial State
 export const portfoliosInitialState = {
-  portfolioItems: [],
+  portfolioItems: { data: [], meta: {}},
   portfolioItem: {},
-  portfolios: [],
+  portfolios: { data: [], meta: {}},
   portfolio: {},
   filterValue: '',
   isLoading: false

src/smart-components/portfolio/add-products-to-portfolio/add-products-pagination.js → src/smart-components/common/async-pagination.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import debouncePromise from 'awesome-debounce-promise';
 
 import { Pagination } from '@redhat-cloud-services/frontend-components';
 
-import { getCurrentPage, getNewPage } from '../../../helpers/shared/pagination';
-import { fetchPlatformItems } from '../../../redux/actions/platform-actions';
+import { getCurrentPage, getNewPage } from '../../helpers/shared/pagination';
 
-const AddProductsPagination = ({ meta: { limit, count, offset }, platformId, fetchPlatformItems }) => {
+const AsyncPagination = ({ meta: { limit, count, offset }, apiProps, apiRequest }) => {
 
-  const handleOnPerPageSelect = limit => fetchPlatformItems(platformId, {
+  const handleOnPerPageSelect = limit => apiRequest(apiProps, {
     offset,
     limit
   });
@@ -22,7 +19,7 @@ const AddProductsPagination = ({ meta: { limit, count, offset }, platformId, fet
       limit
     };
 
-    const request = () => fetchPlatformItems(platformId, options);
+    const request = () => apiRequest(apiProps, options);
     if (debounce) {
       return debouncePromise(request, 250)();
     }
@@ -42,27 +39,23 @@ const AddProductsPagination = ({ meta: { limit, count, offset }, platformId, fet
   );
 };
 
-AddProductsPagination.propTypes = {
+AsyncPagination.propTypes = {
   meta: PropTypes.shape({
     count: PropTypes.number.isRequired,
     limit: PropTypes.number.isRequired,
     offset: PropTypes.number.isRequired
   }),
-  fetchPlatformItems: PropTypes.func.isRequired,
-  platformId: PropTypes.string.isRequired
+  apiRequest: PropTypes.func.isRequired,
+  apiProps: PropTypes.any
 };
 
-AddProductsPagination.defaultProps = {
+AsyncPagination.defaultProps = {
   meta: {
     count: 0,
     limit: 50,
     offset: 0
   }
 };
 
-const mapDistapchToProps = dispatch => bindActionCreators({
-  fetchPlatformItems
-}, dispatch);
-
-export default connect(() => ({}), mapDistapchToProps)(AddProductsPagination);
+export default AsyncPagination;
 

src/smart-components/order/order-item.js

@@ -148,7 +148,7 @@ OrderItem.defaultProps = {
 
 const mapStateToProps = ({ orderReducer: { linkedOrders }, portfolioReducer: { portfolioItems }}, { index, type }) => ({
   item: linkedOrders[type][index],
-  portfolioItems
+  portfolioItems: portfolioItems.data
 });
 
 export default connect(mapStateToProps)(OrderItem);

src/smart-components/order/orders.js

@@ -70,7 +70,7 @@ const Orders = ({ getLinkedOrders, fetchPortfolioItems, isLoading, linkedOrders:
 const mapStateToProps = ({ orderReducer: { linkedOrders, isLoading }, portfolioReducer: { portfolioItems, isLoading: portfolioLoading }}) => ({
   linkedOrders,
   isLoading: isLoading || portfolioLoading,
-  portfolioItems
+  portfolioItems: portfolioItems.data
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({

src/smart-components/portfolio/add-portfolio-modal.js

@@ -72,7 +72,7 @@ AddPortfolioModal.propTypes = {
 };
 
 const mapStateToProps = ({ approvalReducer: { workflows }, portfolioReducer: { portfolios }}, { match: { params: { id }}}) => ({
-  initialValues: id && portfolios.find(item => item.id === id),
+  initialValues: id && portfolios.data.find(item => item.id === id),
   portfolioId: id,
   workflows
 });

src/smart-components/portfolio/add-products-to-portfolio/index.js

@@ -82,7 +82,8 @@ const AddProductsToPortfolio = ({
         onClickAddToPortfolio: handleAddToPortfolio,
         meta,
         platformId: selectedPlatform && selectedPlatform.id,
-        searchValue
+        searchValue,
+        fetchPlatformItems
       }) } />
       <AddProductsGallery
         platform={ !!selectedPlatform }

src/smart-components/portfolio/portfolio-item-detail/copy-portfolio-item-modal.js

@@ -109,7 +109,7 @@ CopyPortfolioItemModal.propTypes = {
 };
 
 const mapStateToProps = ({ portfolioReducer: { portfolios }}) => ({
-  portfolios
+  portfolios: portfolios.data
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({

src/smart-components/portfolio/portfolio-items.js

@@ -25,7 +25,10 @@ const PortolioItems = ({
   copyInProgress,
   removeProducts,
   copyPortfolio,
-  portfolioRoute
+  portfolioRoute,
+  pagination,
+  fetchPortfolioItemsWithPortfolio,
+  portfolio: { id }
 }) => (
   <Fragment>
     <ToolbarRenderer schema={ createPortfolioToolbarSchema({
@@ -43,7 +46,10 @@ const PortolioItems = ({
       isLoading,
       copyInProgress,
       removeProducts: () => removeProducts(selectedItems),
-      itemsSelected: selectedItems.length > 0
+      itemsSelected: selectedItems.length > 0,
+      meta: pagination,
+      fetchPortfolioItemsWithPortfolio,
+      portfolioId: id
     }) } />
     <Route exact path="/portfolios/detail/:id/edit-portfolio" component={ AddPortfolioModal } />
     <Route exact path="/portfolios/detail/:id/remove-portfolio" component={ RemovePortfolioModal } />
@@ -67,8 +73,14 @@ PortolioItems.propTypes = {
   isLoading: PropTypes.bool,
   copyInProgress: PropTypes.bool,
   removeProducts: PropTypes.func.isRequired,
-  copyPortfolio: PropTypes.func.isRequired
+  copyPortfolio: PropTypes.func.isRequired,
+  pagination: PropTypes.object.isRequired,
+  fetchPortfolioItemsWithPortfolio: PropTypes.func.isRequired,
+  portfolio: PropTypes.shape({ id: PropTypes.string })
+};
 
+PortolioItems.defaultProps = {
+  portfolio: {}
 };
 
 export default PortolioItems;

src/smart-components/portfolio/portfolio.js

@@ -8,6 +8,7 @@ import PortfolioItem from './portfolio-item';
 import PortolioItems from './portfolio-items';
 import { scrollToTop } from '../../helpers/shared/helpers';
 import AddProductsToPortfolio from './add-products-to-portfolio';
+import { defaultSettings } from '../../helpers/shared/pagination';
 import { filterServiceOffering } from '../../helpers/shared/helpers';
 import { toggleArraySelection } from '../../helpers/shared/redux-mutators';
 import PortfolioItemDetail from './portfolio-item-detail/portfolio-item-detail';
@@ -43,7 +44,7 @@ const Portfolio = props => {
     dispatch({ type: 'setIsFetching', payload: true });
     Promise.all([
       props.fetchSelectedPortfolio(apiProps),
-      props.fetchPortfolioItemsWithPortfolio(apiProps)
+      props.fetchPortfolioItemsWithPortfolio(apiProps, defaultSettings)
     ])
     .then(() => dispatch({ type: 'setIsFetching', payload: false }))
     .catch(() => dispatch({ type: 'setIsFetching', payload: false }));
@@ -99,7 +100,7 @@ const Portfolio = props => {
         removeInProgress={ removeInProgress }
       />
     )),
-    isLoading: isFetching
+    isLoading: isFetching || props.isLoading
   };
   return (
     <Switch>
@@ -110,10 +111,10 @@ const Portfolio = props => {
       <Route path={ `${routes.orderUrl}/:portfolioItemId` } component={ PortfolioItemDetail }/>
       <Route
         path={ routes.portfolioRoute }
-        render={ props => (
+        render={ args => (
           <PortolioItems
             { ...routes }
-            { ...props }
+            { ...args }
             selectedItems={ selectedItems }
             filteredItems={ galleryItems }
             title={ title }
@@ -123,16 +124,21 @@ const Portfolio = props => {
             copyInProgress={ copyInProgress }
             removeProducts={ removeProducts }
             copyPortfolio={ copyPortfolio }
+            fetchPortfolioItemsWithPortfolio={ props.fetchPortfolioItemsWithPortfolio }
+            portfolio={ props.portfolio }
+            pagination={ props.pagination }
           />
         ) }
       />
     </Switch>
   );
 };
 
-const mapStateToProps = ({ portfolioReducer: { selectedPortfolio, portfolioItems }}) => ({
+const mapStateToProps = ({ portfolioReducer: { selectedPortfolio, portfolioItems, isLoading }}) => ({
   portfolio: selectedPortfolio,
-  portfolioItems
+  portfolioItems: portfolioItems.data,
+  pagination: portfolioItems.meta,
+  isLoading
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
@@ -150,17 +156,20 @@ Portfolio.propTypes = {
   fetchPortfolios: PropTypes.func.isRequired,
   portfolio: PropTypes.shape({
     name: PropTypes.string,
-    id: PropTypes.string.isRequired
+    id: PropTypes.string
   }),
   location: PropTypes.object,
   history: PropTypes.object,
   portfolioItems: PropTypes.array,
   removeProductsFromPortfolio: PropTypes.func.isRequired,
-  copyPortfolio: PropTypes.func.isRequired
+  copyPortfolio: PropTypes.func.isRequired,
+  pagination: PropTypes.object,
+  isLoading: PropTypes.bool
 };
 
 Portfolio.defaultProps = {
-  portfolioItems: []
+  portfolioItems: [],
+  portfolio: {}
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Portfolio));