moved grouped listing component into folder, add styles and update the ref to the list

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

@@ -6,7 +6,7 @@ import ListingGroup from '@components/ListingGroup';
 import ListingItem from '@components/ListingItem';
 import ListingDropdown from '@components/ListingDropdown';
 
-// add styles from listing header
+import './styles.scss'
 
 export default class GroupedListing extends React.Component {
     static propTypes = {
@@ -87,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} ref={this.listRef}>
+            <ListingGroup key={`listing-group-${group.name}`} item={group}>
                 {group.items.map(item => {
                     return <ListingItem
                         selected={!!activeItem && activeItem===item.id}
@@ -116,14 +116,14 @@ export default class GroupedListing extends React.Component {
                 <div className="grouped-listing__dropdown">
                     {!error && !isLoading &&
                         <ListingDropdown
-                            list={this.listRef.current}
-                            error={this.props.isLoading}
-                            items={this.state.orderedItems}
-                            isLoading={this.props.isLoading}
+                            error={error}
+                            isLoading={isLoading}
+                            listRef={this.listRef}
+                            groups={this.state.orderedItems}
                         />
                     }
                 </div>
-                <Listing {...passProps} />
+                <Listing {...passProps} listRef={this.listRef} />
             </div>
         );
     }

opentech/static_src/src/app/src/components/GroupedListing/styles.scss

+.grouped-listing {
+    &__dropdown {
+        @include submission-list-item;
+        height: $listing-header-height;
+        padding: 20px;
+    }
+}

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

@@ -16,6 +16,7 @@ export default class Listing extends React.Component {
         onItemSelection: PropTypes.func,
         renderItem: PropTypes.func.isRequired,
         handleRetry: PropTypes.func,
+        listRef: PropTypes.object,
     };
 
     renderListItems() {
@@ -43,7 +44,7 @@ export default class Listing extends React.Component {
         }
 
         return (
-            <ul className="listing__list">
+            <ul className="listing__list" ref={this.props.listRef}>
                 {items.map(v => renderItem(v))}
             </ul>
         );

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

@@ -3,25 +3,25 @@ import PropTypes from 'prop-types';
 
 export default class ListingDropdown extends React.Component {
     static propTypes = {
-        list: PropTypes.object,
-        items: PropTypes.array,
+        listRef: PropTypes.object,
+        groups: PropTypes.array,
     }
 
     handleChange(e) {
         const groupHeaderPosition = document.getElementById(e.target.value).offsetTop - 75;
 
-        this.props.list.scrollTo({
+        this.props.listRef.current.scrollTo({
             top: groupHeaderPosition
         })
     }
 
     renderListDropdown() {
-        const { items } = this.props;
+        const { groups } = this.props;
 
         return (
             <form className="form form__select">
                 <select onChange={(e) => this.handleChange(e)} aria-label="Jump to listing group">
-                    {items.map(group => {
+                    {groups.map(group => {
                         return (
                             <option key={`listing-heading-${group.name}`} value={group.name}>{group.name}</option>
                         )