Further updates and fixes in the payments segment

Author: birdofpreyru

src/shared/actions/direct.js

@@ -14,6 +14,27 @@ function dropAll() {
   return null;
 }
 
+/**
+ * Payload creator for the action that inits loading of the specified project
+ * details.
+ * @param {Number} projectId
+ * @return {Number}
+ */
+function getProjectDetailsInit(projectId) {
+  return projectId;
+}
+
+/**
+ * Payload creator for the action that actually loads the details of
+ * the specified project.
+ * @param {Number} projectId
+ * @param {String} tokenV3 Topcoder auth token v3.
+ * @return {Promise} Resolves to the project details object.
+ */
+function getProjectDetailsDone(projectId, tokenV3) {
+  return getService(tokenV3).getProjectDetails(projectId);
+}
+
 /**
  * Payload creator for the action that inits the loading of projects related to
  * the user.
@@ -38,6 +59,8 @@ async function getUserProjectsDone(tokenV3) {
 export default createActions({
   DIRECT: {
     DROP_ALL: dropAll,
+    GET_PROJECT_DETAILS_INIT: getProjectDetailsInit,
+    GET_PROJECT_DETAILS_DONE: getProjectDetailsDone,
     GET_USER_PROJECTS_INIT: getUserProjectsInit,
     GET_USER_PROJECTS_DONE: getUserProjectsDone,
   },

src/shared/actions/page/sandbox/payments/editor.js

@@ -2,7 +2,6 @@
  * Actions related to the UI state of payment editor page.
  */
 
-import _ from 'lodash';
 import { createActions } from 'redux-actions';
 
 /**
@@ -11,7 +10,7 @@ import { createActions } from 'redux-actions';
  * @return {String} Action payload.
  */
 function selectProject(projectId) {
-  return _.toString(projectId);
+  return projectId;
 }
 
 export default createActions({

src/shared/actions/page/sandbox/payments/listing.js

@@ -2,16 +2,15 @@
  * Actions related to the UI state of member payments listing page.
  */
 
-import _ from 'lodash';
 import { createActions } from 'redux-actions';
 
 /**
  * Payload creator for the action that selects the specified project.
- * @param {String} projectId
+ * @param {Number} projectId
  * @return {String} Action payload.
  */
 function selectProject(projectId) {
-  return _.toString(projectId);
+  return projectId;
 }
 
 export default createActions({

src/shared/components/sandbox/payments/Background/index.jsx

@@ -30,7 +30,7 @@ export default function Background({ children, onExit, escapeButton }) {
 
 Background.defaultProps = {
   children: null,
-  escapeButton: true,
+  escapeButton: false,
   onExit: () => {},
 };
 

src/shared/components/sandbox/payments/Editor/index.jsx

@@ -18,7 +18,7 @@ export default function Editor({
   selectProject,
 }) {
   return (
-    <Background>
+    <Background escapeButton>
       <div styleName="container">
         <h1 styleName="title">New Member Payment</h1>
         <div styleName="form">
@@ -79,6 +79,6 @@ export default function Editor({
 
 Editor.propTypes = {
   projects: PT.arrayOf(PT.object).isRequired,
-  selectedProjectId: PT.string.isRequired,
+  selectedProjectId: PT.number.isRequired,
   selectProject: PT.func.isRequired,
 };

src/shared/components/sandbox/payments/Listing/PaymentRow/index.jsx

@@ -13,7 +13,7 @@ import './style.scss';
 
 export default function PaymentRow({ challenge }) {
   return (
-    <tr styleName="paymentRow" key={challenge.id}>
+    <tr styleName="paymentRow">
       <td styleName="icon">
         <TrackAbbreviationTooltip track={challenge.track} subTrack={challenge.subTrack}>
           <span>

src/shared/components/sandbox/payments/Listing/index.jsx

@@ -19,9 +19,45 @@ export default function Listing({
   selectProject,
 }) {
   const selectedProjectIdNum = Number(selectedProjectId);
-  const content = memberTasks
+  let content = memberTasks
     .filter(item => item.projectId === selectedProjectIdNum)
-    .map(challenge => <PaymentRow challenge={challenge} />);
+    .map(challenge => (
+      <PaymentRow
+        challenge={challenge}
+        key={challenge.id}
+      />
+    ));
+
+  if (content.length) {
+    content = (
+      <table styleName="table">
+        <thead>
+          <tr>
+            <th />
+            <th styleName="name">Payment</th>
+            <th>Amount</th>
+            <th>Member</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {content}
+          {
+            loadingMemberTasks ? (
+              <tr>
+                <td colSpan={5}>
+                  <LoadingIndicator />
+                </td>
+              </tr>
+            ) : null
+          }
+        </tbody>
+      </table>
+    );
+  } else if (loadingMemberTasks) {
+    content = <LoadingIndicator />;
+  } else content = 'No member payments associated with this project so far';
+
   return (
     <Background>
       <div styleName="container">
@@ -43,29 +79,7 @@ export default function Listing({
             >New payment</PrimaryButton>
           </div>
         </div>
-        <table styleName="table">
-          <thead>
-            <tr>
-              <th />
-              <th styleName="name">Payment</th>
-              <th>Amount</th>
-              <th>Member</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {content}
-            {
-              loadingMemberTasks ? (
-                <tr>
-                  <td colSpan={5}>
-                    <LoadingIndicator />
-                  </td>
-                </tr>
-              ) : null
-            }
-          </tbody>
-        </table>
+        {content}
       </div>
     </Background>
   );
@@ -75,6 +89,6 @@ Listing.propTypes = {
   loadingMemberTasks: PT.bool.isRequired,
   memberTasks: PT.arrayOf(PT.shape()).isRequired,
   projects: PT.arrayOf(PT.shape()).isRequired,
-  selectedProjectId: PT.string.isRequired,
+  selectedProjectId: PT.number.isRequired,
   selectProject: PT.func.isRequired,
 };

src/shared/containers/sandbox/payments/Editor.jsx

@@ -1,13 +1,37 @@
 /**
  * Payment editor.
  */
+/* NOTE: Many props in this module are consumed indirectly via helper functions,
+ * ESLint is not able to track them, hence the rule is disabled for now. */
+/* eslint-disable react/no-unused-prop-types */
 
 import _ from 'lodash';
 import actions from 'actions';
 import Editor from 'components/sandbox/payments/Editor';
+import LoadingIndicator from 'components/LoadingIndicator';
 import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { goToLogin } from 'utils/tc';
+
+/**
+ * Handles the loading of project details, if necessary for the specified set
+ * of props.
+ * @param {Object} props
+ */
+function handleProjectDetailsLoading(props) {
+  const {
+    loadingProjectDetailsForId,
+    loadProjectDetails,
+    projectDetails,
+    selectedProjectId,
+    tokenV3,
+  } = props;
+  if (!projectDetails && selectedProjectId
+  && selectedProjectId !== loadingProjectDetailsForId) {
+    loadProjectDetails(selectedProjectId, tokenV3);
+  }
+}
 
 class EditorContainer extends React.Component {
   componentDidMount() {
@@ -20,12 +44,15 @@ class EditorContainer extends React.Component {
       tokenV3,
       username,
     } = this.props;
+    if (!tokenV3) return goToLogin();
     if (username && username !== loadingProjectsForUsername) {
       loadProjects(tokenV3);
     }
     if (!selectedProjectId && projects.length) {
       selectProject(projects[0].id);
     }
+    handleProjectDetailsLoading(this.props);
+    return undefined;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -38,6 +65,7 @@ class EditorContainer extends React.Component {
       tokenV3,
       username,
     } = nextProps;
+    if (!tokenV3) return goToLogin();
     const {
       projects: oldProjects,
       username: oldUsername,
@@ -57,14 +85,18 @@ class EditorContainer extends React.Component {
     )) {
       selectProject(projects[0].id);
     }
+    handleProjectDetailsLoading(nextProps);
+    return undefined;
   }
 
   render() {
     const {
       projects,
       selectedProjectId,
       selectProject,
+      tokenV3,
     } = this.props;
+    if (!tokenV3) return <LoadingIndicator />;
     return (
       <Editor
         projects={projects}
@@ -75,11 +107,18 @@ class EditorContainer extends React.Component {
   }
 }
 
+EditorContainer.defaultProps = {
+  projectDetails: null,
+};
+
 EditorContainer.propTypes = {
+  loadingProjectDetailsForId: PT.number.isRequired,
   loadingProjectsForUsername: PT.string.isRequired,
+  loadProjectDetails: PT.func.isRequired,
   loadProjects: PT.func.isRequired,
+  projectDetails: PT.shape(),
   projects: PT.arrayOf(PT.object).isRequired,
-  selectedProjectId: PT.string.isRequired,
+  selectedProjectId: PT.number.isRequired,
   selectProject: PT.func.isRequired,
   tokenV3: PT.string.isRequired,
   username: PT.string.isRequired,
@@ -88,8 +127,16 @@ EditorContainer.propTypes = {
 function mapStateToProps(state) {
   const { auth, direct } = state;
   const page = state.page.sandbox.payments.editor;
+
+  let projectDetails = direct.projectDetails;
+  if (_.get(projectDetails, 'project.projectId') !== page.selectedProjectId) {
+    projectDetails = null;
+  }
+
   return {
+    loadingProjectDetailsForId: direct.loadingProjectDetailsForId,
     loadingProjectsForUsername: direct.loadingProjectsForUsername,
+    projectDetails,
     projects: direct.projects,
     selectedProjectId: page.selectedProjectId,
     tokenV3: auth.tokenV3,
@@ -101,6 +148,10 @@ function mapDispatchToProps(dispatch) {
   const { direct } = actions;
   const page = actions.page.sandbox.payments.editor;
   return {
+    loadProjectDetails: (projectId, tokenV3) => {
+      dispatch(direct.getProjectDetailsInit(projectId));
+      dispatch(direct.getProjectDetailsDone(projectId, tokenV3));
+    },
     loadProjects: (tokenV3) => {
       dispatch(direct.getUserProjectsInit(tokenV3));
       dispatch(direct.getUserProjectsDone(tokenV3));