Add proptypes to listing

opentech/static_src/src/app/src/SubmissionsByRoundApp.js

@@ -6,32 +6,34 @@ import GroupByStatusDetailView from '@containers/GroupByStatusDetailView';
 
 
 class SubmissionsByRoundApp extends React.Component {
-    state = {
-        detailOpen: false,
-    };
+    state = { detailOpened: false };
 
-    constructor(props) {
-        super(props);
+    openDetail = () => {
+        this.setState(state => ({
+            style: { ...state.style, display: 'none' } ,
+            detailOpened: true,
+        }));
     }
 
-    detailOpen = (state) => {
-        this.setState({ style: { display: 'none' } })
-        this.setState({ detailOpen: true })
-    }
-
-    detailClose = () => {
-        this.setState({ style: {} })
-        this.setState({ detailOpen: false })
+    closeDetail = () => {
+        this.setState(state => {
+            const newStyle = { ...state.style };
+            delete newStyle.display;
+            return {
+                style: newStyle,
+                detailOpened: false,
+            };
+        });
     }
 
     render() {
         return (
             <>
-                <Switcher selector='submissions-by-round-app-react-switcher' open={this.state.detailOpen} handleOpen={this.detailOpen} handleClose={this.detailClose} />
+                <Switcher selector='submissions-by-round-app-react-switcher' open={this.state.detailOpened} handleOpen={this.openDetail} handleClose={this.closeDetail} />
 
                 <div style={this.state.style} ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
 
-                {this.state.detailOpen &&
+                {this.state.detailOpened &&
                     <GroupByStatusDetailView roundId={this.props.roundId} />
                 }
             </>

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

 import React from 'react';
+import PropTypes from 'prop-types';
+
 import ListingHeading from '@components/ListingHeading';
 import ListingItem from '@components/ListingItem';
 
@@ -47,3 +49,14 @@ export default class Listing extends React.Component {
         );
     }
 }
+
+Listing.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.string,
+        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        subitems: PropTypes.arrayOf(PropTypes.shape({
+            title: PropTypes.string,
+            id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        })),
+    })),
+};

opentech/static_src/src/app/src/containers/ByStatusListing.js

@@ -32,9 +32,10 @@ class ByStatusListing extends React.Component {
         return this.props.items.map(v => ({
             id: v.id,
             title: v.title,
-            subitems: [
-                ...v.submissions
-            ]
+            subitems: v.submissions.map(v => ({
+                title: v.title,
+                id: v.id,
+            })),
         }));
     }
 }