adds listing dropdown component that scrolls to selected listing group

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';
@@ -43,7 +44,7 @@ export default class Listing extends React.Component {
         }
 
         return (
-            <ul className="listing__list">
+            <ul className="listing__list" ref={this.myRef}>
                 {items.map(v => renderItem(v))}
             </ul>
         );
@@ -64,7 +65,14 @@ export default class Listing extends React.Component {
     render() {
         return (
             <div className="listing">
-                <div className="listing__header"></div>
+                <div className="listing__header">
+                    <ListingDropdown
+                        list={this.myRef.current}
+                        error={this.props.isLoading}
+                        items={this.state.orderedItems}
+                        isLoading={this.props.isLoading}
+                    />
+                </div>
                 {this.renderListItems()}
             </div>
         );

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

+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ListingDropdown extends React.Component {
+    static propTypes = {
+        list: PropTypes.object,
+        items: PropTypes.array,
+        error: PropTypes.string,
+        isLoading: PropTypes.bool,
+    }
+
+    handleChange(e) {
+        const groupHeaderPosition = document.getElementById(e.target.value).offsetTop - 75;
+
+        this.props.list.scrollTo({
+            top: groupHeaderPosition
+        })
+    }
+
+    renderListDropdown() {
+        const { isLoading, error, items } = this.props;
+
+        if (isLoading || error) {
+            return;
+        }
+
+        return (
+            <form className="form form__select">
+                <select onChange={(e) => this.handleChange(e)}>
+                    {items.map(group => {
+                        return (
+                            <option key={`listing-heading-${group.name}`} value={group.name}>{group.name}</option>
+                        )
+                    })}
+                </select>
+            </form>
+        )
+    }
+
+    render() {
+        return (
+            <>
+                {this.renderListDropdown()}
+            </>
+        )
+    }
+}