Update grouped listing to use new listing

opentech/static_src/src/app/src/components/GroupedListing.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Listing from '@components/Listing';
 import ListingGroup from '@components/ListingGroup';
 import ListingItem from '@components/ListingItem';
-import LoadingPanel from '@components/LoadingPanel';
 
 import '@components/Listing/style.scss';
 
@@ -45,49 +45,6 @@ export default class GroupedListing extends React.Component {
         }
     }
 
-    renderListItems() {
-        const { isLoading, error, items, onItemSelection, activeItem } = this.props;
-
-        if (isLoading) {
-            return (
-                <div className="listing__list is-loading">
-                    <LoadingPanel />
-                </div>
-            )
-        } else if (error) {
-            return (
-                <div className="listing__list is-loading">
-                    <p>Something went wrong. Please try again later.</p>
-                    <p>{ error }</p>
-                </div>
-            )
-        } else if (items.length === 0) {
-            return (
-                <div className="listing__list is-loading">
-                    <p>No results found.</p>
-                </div>
-            )
-        }
-
-        return (
-            <ul className="listing__list">
-                {this.state.orderedItems.map(group => {
-                    return (
-                        <ListingGroup key={`listing-group-${group.name}`} item={group}>
-                            {group.items.map(item => {
-                                return <ListingItem
-                                    selected={!!activeItem && activeItem===item.id}
-                                    onClick={() => onItemSelection(item.id)}
-                                    key={`listing-item-${item.id}`}
-                                    item={item}/>;
-                            })}
-                        </ListingGroup>
-                    );
-                })}
-            </ul>
-        );
-    }
-
     getGroupedItems() {
         const { groupBy, items } = this.props;
 
@@ -113,12 +70,26 @@ export default class GroupedListing extends React.Component {
         });
     }
 
-    render() {
+    renderItem = group => {
+        const { activeItem, onItemSelection } = this.props;
         return (
-            <div className="listing">
-                <div className="listing__header"></div>
-                {this.renderListItems()}
-            </div>
+            <ListingGroup key={`listing-group-${group.name}`} item={group}>
+                {group.items.map(item => {
+                    return <ListingItem
+                        selected={!!activeItem && activeItem===item.id}
+                        onClick={() => onItemSelection(item.id)}
+                        key={`listing-item-${item.id}`}
+                        item={item}/>;
+                })}
+            </ListingGroup>
         );
     }
+
+    render() {
+        const passProps = {
+            items: this.state.orderedItems,
+            renderItem: this.renderItem,
+        };
+        return <Listing {...passProps} />;
+    }
 }

opentech/static_src/src/app/src/components/Listing/index.js

@@ -7,8 +7,7 @@ import './style.scss';
 
 export default class Listing extends React.Component {
     static propTypes = {
-        items: PropTypes.array,
-        activeItem: PropTypes.number,
+        items: PropTypes.array.isRequired,
         isLoading: PropTypes.bool,
         isError: PropTypes.bool,
         error: PropTypes.string,