#163083132 Display redesigned societies page (#194)

* feat(societies): add ProgressBarComponent

* feat(societies): add SocietiesContainer

* feat(societies): add society actions, types, reducer and saga

 - add society initial state

* feat(societies): move TruncateDescriptionContainer to common folder

 - refactor societies path
 - add loggedActivities argument in fetchSocietyInfoSuccess action

* feat(societies): add SocietyActivitiesComponent

 - add defaultProps and propTypes in SocietiesContainer
 - refactor to add societyName object
 - refactor match propType
 - add societies scss file
 - add society image placeholder
 - add Activities and Redemption tabs
 - add className prop in SocietyStatsComponent
 - add background image on societies page profile
 - add SocietyActivitiesComponent tests

* feat(societies): add totalPoints and activitiesLogged props

* feat(societies): conditionally display total points & activities logged

 - refactor to remove unused classes
 - refactor styles under society-stats__desc class
 - refactor MyStatsComponent tests

* fetch(societies): add action, reducer, data tests

 - add SocietiesContainer tests
 - add media queries and modify styles
 - add userinfo prop when authenticating society pages
 - modify color of points subscript
 - add SocietyStatsComponent tests

src/app/Dashboard/components/MyActivitiesComponent.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dateFns from 'date-fns';
 
-import { TableComponent, StatusIndicatorComponent } from '../../common/components';
-import TruncateDescriptionContainer from './TruncateDescriptionContainer';
+import { TableComponent, StatusIndicatorComponent, TruncateDescriptionContainer } from '../../common/components';
 
 const MyActivitiesComponent = (props) => {
   const { userActivities } = props;

src/app/Dashboard/components/MyStatsComponent.js

@@ -11,14 +11,14 @@ const MyStatsComponent = (props) => {
         <p className='stats__description'>My Total Points Earned</p>
         <p className='stats__description__figure my-stats'>
           {points}
-          <span className='stats__description--footer--subsc'>Points</span>
+          <span>Points</span>
         </p>
       </div>
       <div className='stats__activities'>
         <p className='stats__description'>My Activities Logged</p>
         <p className='stats__description__figure my-stats'>
           {activities}
-          <span className='stats__description__figure--subsc'>Activities</span>
+          <span>Activities</span>
         </p>
       </div>
     </div>

src/app/Dashboard/components/SocietyStatsComponent.js

@@ -1,50 +1,68 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { StatusIndicatorComponent } from '../../common/components';
+import { StatusIndicatorComponent, ProgressBarComponent } from '../../common/components';
 
 import { societyStats } from '../constants';
 
 const SocietyStatsComponent = (props) => {
-  const { society, usedPoints, remainingPoints } = props;
-  return (
-    <div className='society-stats'>
-      <div className='progress'>
-        <div
-          className='progress-bar'
-          role='progressbar'
-          id='progress-bar--blue'
-          aria-valuenow='65'
-          aria-valuemin='0'
-          aria-valuemax='100'
-        />
-        <div
-          className='progress-bar'
-          role='progressbar'
-          id='progress-bar--green'
-          aria-valuenow='35'
-          aria-valuemin='0'
-          aria-valuemax='100'
-        />
+  const {
+    society, usedPoints, remainingPoints, className, totalPoints, activitiesLogged,
+  } = props;
+  let totalPointsActivitiesLoggedText;
+  let pointsHtml;
+  let separatorHtml;
+  if (totalPoints && activitiesLogged) {
+    totalPointsActivitiesLoggedText = (
+      <div className='society-stats__desc'>
+        <p>Total Points Earned</p>
+        <p className='right-side'>
+          Activities Logged
+        </p>
+      </div>
+    );
+    pointsHtml = (
+      <div className='society-stats__desc'>
+        <p className='stats__description__figure' id='points-earned'>
+          {totalPoints}
+          <span>Points</span>
+        </p>
+        <p className='stats__description__figure right-side' id='activities-logged'>
+          {activitiesLogged}
+          <span>
+            Activities
+          </span>
+        </p>
       </div>
+    );
+    separatorHtml = (
+      <div className='society-stats__separator' />
+    );
+  }
+  return (
+    <div className={`society-stats ${className}`}>
+      {totalPointsActivitiesLoggedText}
+      {pointsHtml}
+      <ProgressBarComponent earnedOrUsedPoints={usedPoints} remPointsOrActivitiesLogged={remainingPoints} />
+      {separatorHtml}
       <div className='society-stats__desc'>
         <div className='society-stats__desc__points'>
-          <StatusIndicatorComponent className='society-stats--used-points-indicator' status='completed' />
+          <StatusIndicatorComponent status='completed' />
           <span className='society-stats__desc-text'> Used points</span>
         </div>
-        <div className='society-stats__desc__points' id='society-stats__desc--remaining-points'>
+        <div className='society-stats__desc__points right-side' id='society-stats__desc--remaining-points'>
           <StatusIndicatorComponent status='approved' />
           <span className='society-stats__desc-text'> Total Remaining Points</span>
         </div>
       </div>
       <div className='society-stats__desc'>
         <p className='stats__description__figure' id='used-points'>
           {usedPoints}
-          <span className='stats__description__figure-subsc '>Points</span>
+          <span>Points</span>
         </p>
-        <p className='stats__description__figure' id='remaining-points'>
+        <p className='stats__description__figure right-side' id='remaining-points'>
           {remainingPoints}
-          <span className='stats__description__figure-subsc '>Points</span>
+          <span>Points</span>
         </p>
         <span className={`society-stats__desc__logo ${society.toLowerCase()}`} />
       </div>
@@ -55,13 +73,19 @@ const SocietyStatsComponent = (props) => {
 SocietyStatsComponent.defaultProps = {
   society: societyStats.society,
   usedPoints: societyStats.usedPoints,
+  className: '',
+  totalPoints: societyStats.totalPoints,
   remainingPoints: societyStats.remainingPoints,
+  activitiesLogged: societyStats.activitiesLogged,
 };
 
 SocietyStatsComponent.propTypes = {
   society: PropTypes.string,
   usedPoints: PropTypes.number,
   remainingPoints: PropTypes.number,
+  className: PropTypes.string,
+  totalPoints: PropTypes.number,
+  activitiesLogged: PropTypes.number,
 };
 
 export default SocietyStatsComponent;

src/app/Dashboard/components/index.js

@@ -1,4 +1,3 @@
 export { default } from './DashboardContainer';
 export { default as MyStatsComponent } from './MyStatsComponent';
 export { default as SocietyStatsComponent } from './SocietyStatsComponent';
-export { default as TruncateDescriptionComponent } from './TruncateDescriptionContainer';

src/app/Dashboard/components/tests/MyStatsComponent.test.js

@@ -11,6 +11,6 @@ describe('<MyStatsComponent />', () => {
   const shallowWrapper = shallow(<MyStatsComponent {...props} />);
 
   it('should contain Points subscript text', () => {
-    expect(shallowWrapper.find('.stats__description--footer--subsc').html()).toContain('Points');
+    expect(shallowWrapper.find('.stats__points').html()).toContain('My Total Points Earned');
   });
 });

src/app/Dashboard/components/tests/SocietyStatsComponent.test.js

@@ -6,10 +6,20 @@ describe('<SocietyStatsComponent />', () => {
   const props = {
     usedPoints: 0,
     remainingPoints: 0,
+    totalPoints: 200,
+    activitiesLogged: 4
   }
   const shallowWrapper = shallow(<SocietyStatsComponent {...props} />);
 
   it('should contain Total Remaining Points text', () => {
     expect(shallowWrapper.find('#society-stats__desc--remaining-points').html()).toContain('Total Remaining Points');
   });
+
+  it('should contain Activities when there is totalPoints and activitiesLogged props', () => {
+    expect(shallowWrapper.find('#activities-logged').html()).toContain('Activities');
+  });
+
+  it('should contain Total Points Earned text when there is totalPoints and activitiesLogged props', () => {
+    expect(shallowWrapper.find('.society-stats__separator')).toHaveLength(1);
+  });
 });

src/app/Dashboard/constants.js

@@ -8,4 +8,6 @@ export const societyStats = {
   society: '',
   usedPoints: 0,
   remainingPoints: 0,
+  totalPoints: 0,
+  activitiesLogged: 0,
 };

src/app/Dashboard/styles/dashboard.scss

@@ -55,8 +55,9 @@
 
 .user-dashboard__actions {
   display: flex;
-  margin-top: rem(45px);
+  margin-top: rem(33px);
   padding-left: rem(15px);
+  padding-bottom: rem(11px);
   justify-content: space-between;
 
   .user-dashboard__title {

src/app/Dashboard/styles/myActivities.scss

@@ -1,5 +1,5 @@
 .myactivities__table {
-  margin-top: rem(20px);
+  margin-top: rem(13px);
 }
 
 .myactivities__table__row {

src/app/Dashboard/styles/myStats.scss

@@ -22,6 +22,7 @@
 }
 
 .stats__description__figure {
+  margin-bottom: 0;
   @include text-styles(rem(28px), $andelaGold, normal, rem(0.33px), rem(21px));
 
   span {

src/app/Dashboard/styles/societyStats.scss

@@ -1,19 +1,18 @@
 .society-stats{
   @include widthAndHeight(38%, rem(134px));
   display: flex;
-  padding: 0 rem(10px);
+  padding:  rem(10px) rem(21px) rem(10px) rem(26px);
   font-family: 'DIN Pro';
   flex-direction: column;
   justify-content: space-evenly;
   background-color: $lightAccent;
 }
 
 .progress {
-  width: 95%;
+  @include widthAndHeight(100%, rem(10px));
   align-self: center;
-  height: rem(10px) !important;
   margin-top: rem(17px);
-  margin-bottom: rem(14px);
+  margin-bottom: rem(24px);
   border-radius: 0;
 
   #progress-bar--blue {
@@ -29,41 +28,56 @@
 
 .society-stats__desc {
   display: flex;
-  @include text-styles(rem(15px), $darkGray, 200, rem(0.33px), rem(15px));
+  font-family: 'Din Pro';
+  @include text-styles(rem(15px), $darkGray, 200, rem(-0.08px), rem(15px));
 
   .stats__description__figure {
     font-weight: bold;
+  }
+
+  #points-earned {
+    color: $andelaBlue;
+
+    span {
+      color: $pointsSubscriptColor;
+    }
+  }
+
+  #activities-logged {
+    color: $pointsSubscriptColor;
+  }
+
+  #used-points {
+    margin-top: rem(20px);
+    padding-left: rem(28px);
+  }
+
+  #remaining-points {
     margin-top: rem(20px);
-    padding-left: rem(20px);
+    padding-left: rem(60px);
   }
 }
 
+.society-stats__separator {
+  box-sizing: border-box;
+  @include widthAndHeight(100%, rem(2px));
+  margin-bottom: rem(18px);
+  border: 1px solid $separatorBgColor;
+}
+
 .society-stats__desc-text {
-  margin-left: rem(5px);
+  margin-left: rem(12px);
 }
 
 .society-stats__desc__points {
   display: flex;
 }
 
-#society-stats__desc--remaining-points {
+.right-side {
   margin-left: auto;
   margin-right: auto;
 }
 
-.society-stats--used-points-indicator {
-  margin-left: rem(10px);
-}
-
-
-#used-points {
-  margin-left: rem(10px);
-}
-
-#remaining-points {
-  margin-left: auto;
-}
-
 .society-stats__desc__logo {
   width: rem(50px);
   margin-left: auto;
@@ -99,9 +113,6 @@
     line-height: rem(13px);
   }
 
-  #used-points {
-    margin-left: auto;
-  }
 
   .society-stats__desc {
     .stats__description__figure {
@@ -123,6 +134,14 @@
     margin-bottom: rem(15px);
     flex: 0 0 100%;
   }
+
+  .progress {
+      margin-bottom: rem(8px);
+  }
+
+  .society-stats__separator {
+    margin-bottom: rem(8px);
+  }
 }
 
 // small devices