Fix double API call for billing account and billing account look and feel

Author: jmgasper

src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss

@@ -28,6 +28,12 @@
       font-weight: bold;
       color: #BE405E;
   }
+  .active {
+    color: #008000;
+  }
+  .inactive {
+    color: #BE405E;
+  }
 }
 
 .header {

src/components/ChallengesComponent/ChallengeList/index.js

@@ -178,12 +178,12 @@ class ChallengeList extends Component {
         <div className={styles.row}>
           {!isBillingAccountLoading && !isBillingAccountLoadingFailed && !isBillingAccountExpired && (
             <div className={'col-9'}>
-              Billing Account: {status} Start Date {billingStartDate} End Date {billingEndDate}
+              Billing Account: <span className={styles.active}>{status}</span> Start Date: {billingStartDate} End Date: {billingEndDate}
             </div>
           )}
           {!isBillingAccountLoading && !isBillingAccountLoadingFailed && isBillingAccountExpired && (
             <div className={'col-9'}>
-              Billing Account: <span className={styles.title}>INACTIVE</span> Start Date {billingStartDate} End Date {billingEndDate}
+              Billing Account: <span className={styles.inactive}>INACTIVE</span> Start Date: {billingStartDate} End Date: {billingEndDate}
             </div>
           )}
           {!isBillingAccountLoading && isBillingAccountLoadingFailed && (

src/containers/Challenges/index.js

@@ -34,6 +34,7 @@ class Challenges extends Component {
       resetSidebarActiveParams()
     } else if (projectId || selfService) {
       if (projectId) {
+        window.localStorage.setItem('projectLoading', 'true')
         this.props.loadProject(projectId)
       }
       this.reloadChallenges(this.props)
@@ -51,9 +52,12 @@ class Challenges extends Component {
     if (activeProjectId !== challengeProjectId || selfService) {
       const isAdmin = checkAdmin(this.props.auth.token)
       this.props.loadChallengesByPage(1, projectId ? parseInt(projectId) : -1, CHALLENGE_STATUS.ACTIVE, '', selfService, isAdmin ? null : this.props.auth.user.handle)
-      if (!selfService && (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId)
+      const projectLoading = window.localStorage.getItem('projectLoading') !== null
+      if (!selfService && (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId) && !projectLoading
       ) {
         loadProject(projectId)
+      } else {
+        window.localStorage.removeItem('projectLoading')
       }
     }
   }

src/reducers/projects.js

@@ -30,6 +30,7 @@ const checkBillingExpired = (active, endDate) => {
   }
   return true
 }
+const dateFormat = 'MMM DD, YYYY'
 
 const initialState = {
   isLoading: false,
@@ -71,8 +72,8 @@ export default function (state = initialState, action) {
         ...state,
         isBillingAccountLoading: false,
         isBillingAccountExpired: checkBillingExpired(action.payload.active, action.payload.endDate),
-        billingStartDate: action.payload.startDate,
-        billingEndDate: action.payload.endDate,
+        billingStartDate: moment(action.payload.startDate).format(dateFormat),
+        billingEndDate: moment(action.payload.endDate).format(dateFormat),
         isBillingAccountLoadingFailed: false
       }
     case LOAD_PROJECT_BILLING_ACCOUNT_FAILURE: