Load related tag resources from redux store

gsa/src/web/pages/tags/resourcelist.js

@@ -26,13 +26,12 @@ import _ from 'gmp/locale';
 
 import styled from 'styled-components';
 
+import {connect} from 'react-redux';
+
 import Filter from 'gmp/models/filter';
 import {pluralizeType, normalizeType} from 'gmp/utils/entitytype';
 import {isDefined} from 'gmp/utils/identity';
 
-import PropTypes from 'web/utils/proptypes';
-import withGmp from 'web/utils/withGmp';
-
 import ListIcon from 'web/components/icon/listicon';
 
 import Divider from 'web/components/layout/divider';
@@ -42,6 +41,16 @@ import Loading from 'web/components/loading/loading';
 
 import {MAX_RESOURCES} from 'web/pages/tags/component';
 
+import {
+  createLoadEntities,
+  createEntitiesActions,
+} from 'web/store/entities/utils/actions';
+import {createSelector} from 'web/store/entities/utils/selectors';
+
+import compose from 'web/utils/compose';
+import PropTypes from 'web/utils/proptypes';
+import withGmp from 'web/utils/withGmp';
+
 const Spacer = styled.div`
   height: 12px,
 `;
@@ -80,24 +89,16 @@ class ResourceList extends React.Component {
   }
 
   componentDidMount() {
-    const {gmp, entity} = this.props;
-    if (isDefined(entity)) {
-      const {id, resourceType} = entity;
-      const filter = 'tag_id="' + id + '" rows=' + MAX_RESOURCES;
-      gmp[pluralizeType(resourceType)].get({filter})
-        .then(resources =>
-          this.setState({
-            isLoading: false,
-            res: resources.data,
-          })
-        );
+    const {loadResources} = this.props;
+
+    if (isDefined(loadResources)) {
+      loadResources();
     }
   }
 
   render() {
-    const {entity} = this.props;
+    const {entity, resources = [], isLoading} = this.props;
     const {id, resourceCount, resourceType} = entity;
-    const {isLoading, res} = this.state;
     const showNotification = resourceCount > MAX_RESOURCES;
 
     return (
@@ -113,7 +114,7 @@ class ResourceList extends React.Component {
             }
             <Spacer/>
             <ul>
-              {res.map(resource =>
+              {resources.map(resource =>
                 (<li key={resource.id}>
                   <DetailsLink
                     id={resource.id}
@@ -132,10 +133,53 @@ class ResourceList extends React.Component {
 }
 
 ResourceList.propTypes = {
-  entity: PropTypes.object,
-  gmp: PropTypes.gmp.isRequired,
+  entity: PropTypes.model.isRequired,
+  isLoading: PropTypes.bool,
+  loadResources: PropTypes.func,
+  resources: PropTypes.array,
+};
+
+const resourcesFilter = id => Filter.fromString(
+  'tag_id="' + id + '" rows=' + MAX_RESOURCES);
+
+const mapStateToProps = (rootState, {entity}) => {
+  if (!isDefined(entity)) {
+    return {
+      isLoading: true,
+    };
+  }
+  const {resourceType: entityType} = entity;
+  const selector = createSelector(entityType);
+  const select = selector(rootState);
+  const filter = resourcesFilter(entity.id);
+  return {
+    resources: select.getEntities(filter),
+    isLoading: select.isLoadingEntities(filter),
+  };
+};
+
+const mapDispatchToProps = (dispatch, {entity, gmp}) => {
+  if (!isDefined(entity)) {
+    return undefined;
+  }
+
+  const {resourceType: entityType} = entity;
+  const selector = createSelector(entityType);
+  const actions = createEntitiesActions(entityType);
+  const loadEntities = createLoadEntities({
+    selector,
+    actions,
+    entityType,
+  });
+  return {
+    loadResources: () => dispatch(loadEntities(gmp)(
+      resourcesFilter(entity.id))),
+  };
 };
 
-export default withGmp(ResourceList);
+export default compose(
+  withGmp,
+  connect(mapStateToProps, mapDispatchToProps),
+)(ResourceList);
 
 // vim: set ts=2 sw=2 tw=80: