GH-991: make sure we order items if the order changes after the submissions

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

@@ -19,7 +19,9 @@ export default class GroupedListing extends React.Component {
         order: PropTypes.arrayOf(PropTypes.shape({
             key: PropTypes.string.isRequired,
             display: PropTypes.string.isRequired,
-            values: PropTypes.arrayOf(PropTypes.number),
+            values: PropTypes.arrayOf(
+                PropTypes.oneOf(PropTypes.number, PropTypes.string),
+            )
         })),
         onItemSelection: PropTypes.func,
         shouldSelectFirst: PropTypes.bool,
@@ -47,7 +49,7 @@ export default class GroupedListing extends React.Component {
 
     componentDidUpdate(prevProps, prevState) {
         // Order items
-        if (this.props.items !== prevProps.items) {
+        if (this.props.items !== prevProps.items || this.props.order !== prevProps.order) {
             this.orderItems();
         }
 

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

@@ -57,11 +57,11 @@ class ByStatusListing extends React.Component {
         const slugify = value => value.toLowerCase().replace(/\s/g, '-')
         const workflow = round.workflow
         const order = workflow.reduce((accumulator, {display, value}, idx) => {
-            const key = slugify(display);
+            const key = slugify(value);
             const existing = accumulator[key] || {}
             const existingValues = existing.values || []
             const position = existing.position || idx
-            accumulator[key] = {key, display, position, values: [...existingValues, parseInt(value)]}
+            accumulator[key] = {key, display, position, values: [...existingValues, value]}
             return accumulator
         }, {})
         const arrayOrder = Object.values(order).sort((a,b) => a.position - b.position)