Add submissions list heading

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

@@ -34,9 +34,7 @@ class SubmissionsByRoundApp extends React.Component {
     }
 
   renderSubmissionsByRound() {
-    return <div>
-        <SubmissionsByRoundContainer />
-    </div>;
+    return <SubmissionsByRoundContainer />;
   }
 }
 

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

+import React from 'react';
+import SubmissionsByRoundListHeading from '@components/SubmissionsByRoundListHeading';
+
+
+export default class SubmissionsByRoundList extends React.Component {
+    renderListItems() {
+        return this.props.items.map(v => {
+            const applications = [];
+            return (
+                <>
+                    <SubmissionsByRoundListHeading key="status-{v.title}" title={v.title} count={v.applications.length} />
+                    <ul>
+                        {applications}
+                    </ul>
+                </>
+            );
+        });
+    }
+
+    render() {
+        return (
+            <ul>
+                {this.renderListItems()}
+            </ul>
+        );
+    }
+}

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

+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+export default class SubmissionsByRoundListHeading extends React.Component {
+    render() {
+        return (
+            <li>
+                <h2>{this.props.title}</h2>
+            </li>
+        );
+    }
+}
+
+SubmissionsByRoundListHeading.propTypes = {
+    title: PropTypes.string,
+    count: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+};

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

 import React from 'react';
+import SubmissionsByRoundList from '@components/SubmissionsByRoundList';
 
 export default class SubmissionsByRoundContainer extends React.Component {
     render() {
+        const mockItems = [
+            {
+                title: "Test stage 1",
+                applications: [],
+            },
+            {
+                title: "Test stage 2 blabla",
+                applications: [],
+            },
+        ];
         return (
-            <div>
-                <h2>Submissions by round container</h2>
-            </div>
+            <>
+                <SubmissionsByRoundList items={mockItems} />
+            </>
         );
     }
 }

package.json

@@ -23,6 +23,7 @@
         "gulp-touch-cmd": "0.0.1",
         "gulp-uglify": "^3.0.1",
         "node-sass-import-once": "^1.2.0",
+        "prop-types": "^15.6.2",
         "react": "^16.7.0",
         "react-dom": "^16.7.0"
     },