move listing dropdown in to grouped listing

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

@@ -4,6 +4,9 @@ import PropTypes from 'prop-types';
 import Listing from '@components/Listing';
 import ListingGroup from '@components/ListingGroup';
 import ListingItem from '@components/ListingItem';
+import ListingDropdown from '@components/ListingDropdown';
+
+// add styles from listing header
 
 export default class GroupedListing extends React.Component {
     static propTypes = {
@@ -26,6 +29,11 @@ export default class GroupedListing extends React.Component {
         orderedItems: [],
     };
 
+    constructor(props) {
+        super(props);
+        this.listRef = React.createRef();
+    }
+
     componentDidMount() {
         this.orderItems();
     }
@@ -79,7 +87,7 @@ export default class GroupedListing extends React.Component {
     renderItem = group => {
         const { activeItem, onItemSelection } = this.props;
         return (
-            <ListingGroup key={`listing-group-${group.name}`} item={group}>
+            <ListingGroup key={`listing-group-${group.name}`} item={group} ref={this.listRef}>
                 {group.items.map(item => {
                     return <ListingItem
                         selected={!!activeItem && activeItem===item.id}
@@ -92,13 +100,31 @@ export default class GroupedListing extends React.Component {
     }
 
     render() {
+        const { isLoading, error } = this.props;
+        const isError = Boolean(error);
+
         const passProps = {
             items: this.state.orderedItems,
             renderItem: this.renderItem,
-            isLoading: this.props.isLoading,
-            isError: Boolean(this.error),
-            error: this.error,
+            isLoading,
+            isError,
+            error
         };
-        return <Listing {...passProps} />;
+
+        return  (
+            <div className="grouped-listing">
+                <div className="grouped-listing__dropdown">
+                    {!error && !isLoading &&
+                        <ListingDropdown
+                            list={this.listRef.current}
+                            error={this.props.isLoading}
+                            items={this.state.orderedItems}
+                            isLoading={this.props.isLoading}
+                        />
+                    }
+                </div>
+                <Listing {...passProps} />
+            </div>
+        );
     }
 }

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

 import React from 'react';
 import PropTypes from 'prop-types';
 
-import ListingDropdown from '@components/ListingDropdown';
 import LoadingPanel from '@components/LoadingPanel';
 
 import './style.scss';
@@ -19,11 +18,6 @@ export default class Listing extends React.Component {
         handleRetry: PropTypes.func,
     };
 
-    constructor(props) {
-        super(props);
-        this.listRef = React.createRef();
-    }
-
     renderListItems() {
         const {
             isError,
@@ -49,7 +43,7 @@ export default class Listing extends React.Component {
         }
 
         return (
-            <ul className="listing__list" ref={this.listRef}>
+            <ul className="listing__list">
                 {items.map(v => renderItem(v))}
             </ul>
         );
@@ -70,14 +64,6 @@ export default class Listing extends React.Component {
     render() {
         return (
             <div className="listing">
-                <div className="listing__header">
-                    <ListingDropdown
-                        list={this.listRef.current}
-                        error={this.props.isLoading}
-                        items={this.props.items}
-                        isLoading={this.props.isLoading}
-                    />
-                </div>
                 {this.renderListItems()}
             </div>
         );

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

@@ -5,8 +5,6 @@ export default class ListingDropdown extends React.Component {
     static propTypes = {
         list: PropTypes.object,
         items: PropTypes.array,
-        error: PropTypes.string,
-        isLoading: PropTypes.bool,
     }
 
     handleChange(e) {
@@ -18,11 +16,7 @@ export default class ListingDropdown extends React.Component {
     }
 
     renderListDropdown() {
-        const { isLoading, error, items } = this.props;
-
-        if (isLoading || error) {
-            return;
-        }
+        const { items } = this.props;
 
         return (
             <form className="form form__select">