feat(userActivities): evaluate the right JSX before rendering

andela · Feb 11, 2019 · ad505ac · ad505ac
1 parent faa4989
commit ad505ac
Showing 1 changed file with 39 additions and 33 deletions.
diff --git a/src/app/Dashboard/components/DashboardComponent.js b/src/app/Dashboard/components/DashboardComponent.js
@@ -14,7 +14,7 @@ import { getUserInfo } from '../../utils/tokenIsValid';
 export class DashboardComponent extends Component {
   state = {
     user: {},
-  }
+  };
 
   /**
    * @name defaultProps
@@ -56,43 +56,49 @@ export class DashboardComponent extends Component {
       error, loading, pointsEarned, activitiesLogged,
     } = this.props;
     const { user } = this.state;
-    if (loading) return <p>Loading ...</p>;
-    if (!loading && error) return <p>The was an error while fetching your data. Please try again later.</p>;
-    return (
-      <div className='wrapper'>
-        <HeroComponent />
-        <div className='main-content'>
-          <SidebarComponent className='sidebar' />
-          <div className='sub-content'>
-            <NavbarComponent />
-            <div className='user-dashboard'>
-              <h2 className='user-dashboard__name col-sm-12'>{user.name}</h2>
-              <div className='col-sm-12'>
-                <h3 className='user-dashboard__level'>D2</h3>
-              </div>
-              <div className='profile-overview col-sm-12'>
-                <div className='profile-overview__image' />
-                <MyStatsComponent points={pointsEarned} activities={activitiesLogged} />
-                <SocietyStatsComponent usedPoints={1508} remainingPoints={326} />
-              </div>
-              <div className='user-dashboard__actions col-sm-12'>
-                <h3 className='user-dashboard__title'>My Activities</h3>
-                <div>
-                  <ButtonComponent className='button__add'>
-                    <span className='fa fa-plus' />
-                    <span>Log Points</span>
-                  </ButtonComponent>
-                  <ButtonComponent className='button__filter'>
-                    <span>Filter</span>
-                    <span className='fa fa-filter' />
-                  </ButtonComponent>
+    let dashboardHtml;
+    if (loading) {
+      dashboardHtml = <p>Loading ...</p>;
+    } else if (!loading && error) {
+      dashboardHtml = <p>The was an error while fetching your data. Please try again later.</p>;
+    } else {
+      dashboardHtml = (
+        <div className='wrapper'>
+          <HeroComponent />
+          <div className='main-content'>
+            <SidebarComponent className='sidebar' />
+            <div className='sub-content'>
+              <NavbarComponent />
+              <div className='user-dashboard'>
+                <h2 className='user-dashboard__name col-sm-12'>{user.name}</h2>
+                <div className='col-sm-12'>
+                  <h3 className='user-dashboard__level'>D2</h3>
+                </div>
+                <div className='profile-overview col-sm-12'>
+                  <div className='profile-overview__image' />
+                  <MyStatsComponent points={pointsEarned} activities={activitiesLogged} />
+                  <SocietyStatsComponent usedPoints={1508} remainingPoints={326} />
+                </div>
+                <div className='user-dashboard__actions col-sm-12'>
+                  <h3 className='user-dashboard__title'>My Activities</h3>
+                  <div>
+                    <ButtonComponent className='button__add'>
+                      <span className='fa fa-plus' />
+                      <span>Log Points</span>
+                    </ButtonComponent>
+                    <ButtonComponent className='button__filter'>
+                      <span>Filter</span>
+                      <span className='fa fa-filter' />
+                    </ButtonComponent>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    );
+      );
+    }
+    return dashboardHtml;
   }
 }