Add on click handler on submissions listing

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

@@ -9,7 +9,7 @@ import './style.scss';
 
 export default class Listing extends React.Component {
     renderListItems() {
-        const { isLoading, isError, items } = this.props;
+        const { isLoading, isError, items, onItemSelection } = this.props;
 
         if (isLoading) {
             return <p>Loading...</p>;
@@ -25,7 +25,7 @@ export default class Listing extends React.Component {
                     return (
                         <ListingGroup key={`listing-group-${v.group}`} item={v}>
                             {v.items.map(item => {
-                                return <ListingItem key={`listing-item-${item.id}`} item={item}/>;
+                                return <ListingItem onClick={onItemSelection} key={`listing-item-${item.id}`} item={item}/>;
                             })}
                         </ListingGroup>
                     );
@@ -75,4 +75,5 @@ Listing.propTypes = {
     isError: PropTypes.bool,
     groupBy: PropTypes.string,
     order: PropTypes.arrayOf(PropTypes.string),
+    onItemSelection: PropTypes.func,
 };

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

@@ -4,9 +4,12 @@ import PropTypes from 'prop-types';
 
 export default class ListingItem extends React.Component {
     render() {
+        const { onClick, item } = this.props;
         return (
             <li className="listing__item">
-                <a className="listing__link">{this.props.item.title}</a>
+                <a className="listing__link" onClick={() => onClick(item.id)}>
+                    {item.title}
+                </a>
             </li>
         );
     }
@@ -16,4 +19,5 @@ ListingItem.propTypes = {
     item: PropTypes.shape({
         title: PropTypes.string,
     }),
+    onClick: PropTypes.func,
 };

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

@@ -3,13 +3,17 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux'
 
 import Listing from '@components/Listing';
+import {
+    fetchSubmissionsByRound,
+    setCurrentSubmission,
+    setCurrentSubmissionRound,
+} from '@actions/submissions';
 import {
     getCurrentRoundID,
     getCurrentRoundSubmissions,
     getSubmissionsByRoundErrorState,
     getSubmissionsByRoundLoadingState,
 } from '@selectors/submissions';
-import { setCurrentSubmissionRound, fetchSubmissionsByRound } from '@actions/submissions';
 
 
 class ByStatusListing extends React.Component {
@@ -30,11 +34,12 @@ class ByStatusListing extends React.Component {
     }
 
     render() {
-        const { isLoading, isError } = this.props;
+        const { isLoading, isError, items, setCurrentItem } = this.props;
         return <Listing
                     isLoading={isLoading}
                     isError={isError}
-                    items={this.props.items}
+                    items={items}
+                    onItemSelection={setCurrentItem}
                     groupBy={'status'}
                     order={[
                         // TODO: Set the proper order of statuses.
@@ -60,6 +65,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
     loadSubmissions: id => dispatch(fetchSubmissionsByRound(id)),
+    setCurrentItem: id => dispatch(setCurrentSubmission(id)),
 });
 
 ByStatusListing.propTypes = {

opentech/static_src/src/app/src/redux/actions/submissions.js

@@ -3,6 +3,7 @@ import api from '@api';
 
 // Submissions by round
 export const SET_CURRENT_SUBMISSION_ROUND = 'SET_CURRENT_SUBMISSION_ROUND';
+export const SET_CURRENT_SUBMISSION = 'SET_CURRENT_SUBMISSION';
 export const UPDATE_SUBMISSIONS_BY_ROUND = 'UPDATE_SUBMISSIONS_BY_ROUND';
 export const START_LOADING_SUBMISSIONS_BY_ROUND = 'START_LOADING_SUBMISSIONS_BY_ROUND';
 export const FAIL_LOADING_SUBMISSIONS_BY_ROUND = 'FAIL_LOADING_SUBMISSIONS_BY_ROUND';
@@ -13,20 +14,25 @@ export const setCurrentSubmissionRound = id => ({
     id,
 });
 
+export const setCurrentSubmission = id => ({
+    type: SET_CURRENT_SUBMISSION,
+    id,
+});
+
 export const fetchSubmissionsByRound = roundId => {
     return async function(dispatch) {
-        dispatch(startLoadingSubmissionsByRound(roundId));
+        dispatch(startLoadingSubmissionsByRound());
         try {
             const response = await api.fetchSubmissionsByRound(roundId);
             const json = await response.json();
             if (!response.ok) {
-                dispatch(failLoadingSubmissionsByRound(roundId));
+                dispatch(failLoadingSubmissionsByRound());
                 return;
             }
             dispatch(updateSubmissionsByRound(roundId, json));
         } catch (e) {
             console.error(e);
-            dispatch(failLoadingSubmissionsByRound(roundId));
+            dispatch(failLoadingSubmissionsByRound());
         }
     };
 };
@@ -39,14 +45,12 @@ const updateSubmissionsByRound = (roundId, data) => ({
 });
 
 
-const startLoadingSubmissionsByRound = roundId => ({
+const startLoadingSubmissionsByRound = () => ({
     type: START_LOADING_SUBMISSIONS_BY_ROUND,
-    roundId,
 });
 
 
 
-const failLoadingSubmissionsByRound = roundId => ({
+const failLoadingSubmissionsByRound = () => ({
     type: FAIL_LOADING_SUBMISSIONS_BY_ROUND,
-    roundId,
 });

opentech/static_src/src/app/src/redux/reducers/submissions.js

 import {
     FAIL_LOADING_SUBMISSIONS_BY_ROUND,
+    SET_CURRENT_SUBMISSION,
     SET_CURRENT_SUBMISSION_ROUND,
     START_LOADING_SUBMISSIONS_BY_ROUND,
     UPDATE_SUBMISSIONS_BY_ROUND,
@@ -7,6 +8,7 @@ import {
 
 const initialState = {
     currentRound: null,
+    currenSubmission: null,
     submissionsByID: {},
     submissionsByRoundID: {},
     itemsLoadingError: false,
@@ -15,6 +17,11 @@ const initialState = {
 
 export default function submissions(state = initialState, action) {
     switch(action.type) {
+        case SET_CURRENT_SUBMISSION:
+            return {
+                ...state,
+                currentSubmission: action.id,
+            };
         case SET_CURRENT_SUBMISSION_ROUND:
             return {
                 ...state,