#163083355 Display redesigned my logged activities

src/app/Dashboard/components/DashboardComponent.js

@@ -5,7 +5,9 @@ import PropTypes from 'prop-types';
 import { ButtonComponent } from '../../common/components';
 import MyStatsComponent from './MyStatsComponent';
 import SocietyStatsComponent from './SocietyStatsComponent';
+import MyActivitiesComponent from './MyActivitiesComponent';
 
+import { myStats } from '../constants';
 import { actions } from '../operations';
 import { getUserInfo, getToken } from '../../utils/tokenIsValid';
 
@@ -24,8 +26,9 @@ export class DashboardComponent extends Component {
     error: {},
     society: '',
     loading: false,
-    pointsEarned: 0,
-    activitiesLogged: 0,
+    pointsEarned: myStats.points,
+    activitiesLogged: myStats.activities,
+    userActivities: myStats.userActivities,
     fetchUserActivites: () => {},
   };
 
@@ -42,6 +45,7 @@ export class DashboardComponent extends Component {
     pointsEarned: PropTypes.number,
     activitiesLogged: PropTypes.number,
     fetchUserActivites: PropTypes.func,
+    userActivities: PropTypes.arrayOf(PropTypes.shape({})),
   };
 
   componentDidMount() {
@@ -54,7 +58,7 @@ export class DashboardComponent extends Component {
 
   render() {
     const {
-      error, society, loading, pointsEarned, activitiesLogged,
+      error, loading, pointsEarned, activitiesLogged, userActivities, society,
     } = this.props;
     const { user } = this.state;
     let dashboardHtml;
@@ -66,7 +70,7 @@ export class DashboardComponent extends Component {
       dashboardHtml = (
         <div className='user-dashboard'>
           <h2 className='user-dashboard__name col-sm-12'>{user.name}</h2>
-          <div className='col-sm-12'>
+          <div className='col-sm-12 user-dashboard__level--container'>
             <h3 className='user-dashboard__level'>D2</h3>
           </div>
           <div className='profile-overview col-sm-12'>
@@ -87,6 +91,7 @@ export class DashboardComponent extends Component {
               </ButtonComponent>
             </div>
           </div>
+          <MyActivitiesComponent userActivities={userActivities} />
         </div>
       );
     }

src/app/Dashboard/components/MyActivitiesComponent.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import dateFns from 'date-fns';
+
+import { TableComponent, StatusIndicatorComponent } from '../../common/components';
+import TruncateDescriptionComponent from './TruncateDescriptionComponent';
+
+const MyActivitiesComponent = (props) => {
+  const { userActivities } = props;
+  const columnNames = ['Activity', 'Date', 'Description', 'Points', 'Status'];
+  let tableBodyHtml;
+  if (!userActivities.length) {
+    tableBodyHtml = (
+      <tr className='myactivities__table__row'>
+        <td colSpan={5} className='myactivities__table__data'> You have not logged any activities </td>
+      </tr>
+    );
+  } else {
+    tableBodyHtml = userActivities.map((activity) => {
+      const {
+        id, activityDate, description, points, status,
+      } = activity;
+      return (
+        <tr key={id} className='myactivities__table__row'>
+          <td>{activity.activity}</td>
+          <td>{dateFns.format(activityDate, 'MMM DD YYYY')}</td>
+          <td>
+            <TruncateDescriptionComponent description={description} wordCount={80} />
+          </td>
+          <td>{points}</td>
+          <td><StatusIndicatorComponent status={status} /></td>
+        </tr>
+      );
+    });
+  }
+  return (
+    <TableComponent tableClassName='myactivities__table' tableHeadings={columnNames}>
+      {tableBodyHtml}
+    </TableComponent>
+  );
+};
+
+MyActivitiesComponent.defaultProps = {
+  userActivities: [],
+};
+
+MyActivitiesComponent.propTypes = {
+  userActivities: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+export default MyActivitiesComponent;

src/app/Dashboard/components/SocietyStatsComponent.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { StatusIndicatorComponent } from '../../common/components';
+
 import { societyStats } from '../constants';
 
 const SocietyStatsComponent = (props) => {
@@ -27,11 +29,11 @@ const SocietyStatsComponent = (props) => {
       </div>
       <div className='society-stats__desc'>
         <div className='society-stats__desc__points'>
-          <span className='society-stats__desc-indicator' id='blue-circle' />
+          <StatusIndicatorComponent className='society-stats--used-points-indicator' status='completed' />
           <span className='society-stats__desc-text'> Used points</span>
         </div>
         <div className='society-stats__desc__points' id='society-stats__desc--remaining-points'>
-          <span className='society-stats__desc-indicator' id='green-circle' />
+          <StatusIndicatorComponent status='approved' />
           <span className='society-stats__desc-text'> Total Remaining Points</span>
         </div>
       </div>
@@ -50,7 +52,6 @@ const SocietyStatsComponent = (props) => {
   );
 };
 
-
 SocietyStatsComponent.defaultProps = {
   society: societyStats.society,
   usedPoints: societyStats.usedPoints,
@@ -63,5 +64,4 @@ SocietyStatsComponent.propTypes = {
   remainingPoints: PropTypes.number,
 };
 
-
 export default SocietyStatsComponent;

src/app/Dashboard/components/TruncateDescriptionComponent.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+
+// third party libraries
+import PropType from 'prop-types';
+
+import { ButtonComponent } from '../../common/components';
+
+/**
+ * @summary Renders description
+ * @class TruncateDescriptionComponent
+ * @extends React.Component
+ */
+class TruncateDescriptionComponent extends Component {
+  /**
+   * @name propTypes
+   * @type {PropType}
+   * @param {String} description - The description to shorten
+   */
+  static propTypes = {
+    description: PropType.string,
+    wordCount: PropType.number.isRequired,
+  }
+
+  static defaultProps = {
+    description: '',
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItALongDesc: true,
+    };
+  }
+
+  /**
+   * @name truncateDescription
+   * @summary Shortens the description passed as a param
+   * @param {String} desc - description to be shortened
+   * @param {Boolean} isItALongDesc - boolean value indicate if description is long
+   * @return {String} desc
+   */
+  truncateDescription = (desc, isItALongDesc) => {
+    const { wordCount } = this.props;
+    if (desc && desc.trim().length > wordCount && isItALongDesc) {
+      const shortDesc = desc.slice(0, wordCount + 1).concat('...');
+      return shortDesc;
+    }
+    return desc;
+  }
+
+  /**
+   * @name handleViewMoreLessClick
+   * @summary Handles showing of more or less text
+   * @return {void}
+   */
+  handleViewMoreLessClick = () => {
+    const { isItALongDesc } = this.state;
+    this.setState({ isItALongDesc: !isItALongDesc });
+  }
+
+  render() {
+    const { isItALongDesc } = this.state;
+    const { description, wordCount } = this.props;
+    let buttonHtml = null;
+    if (description && description.trim().length > wordCount) {
+      buttonHtml = (
+        <ButtonComponent className='button--see-more-or-less' onClick={this.handleViewMoreLessClick}>
+          {isItALongDesc ? 'see more' : 'see less'}
+        </ButtonComponent>
+      );
+    }
+    return (
+      <p>
+        {this.truncateDescription(description, isItALongDesc)}
+        {buttonHtml}
+      </p>
+    );
+  }
+}
+
+export default TruncateDescriptionComponent;

src/app/Dashboard/components/index.js

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+
 import { DashboardComponent } from '../DashboardComponent';
 
 describe('<DashboardComponent />', () => {
@@ -9,13 +10,15 @@ describe('<DashboardComponent />', () => {
     pointsEarned = 0,
     userActivities = [],
     activitiesLogged = 0,
+    society= ''
   } = {}) => {
     const props = {
       error,
       loading,
       pointsEarned,
       userActivities,
       activitiesLogged,
+      society,
     };
     const shallowWrapper = shallow(<DashboardComponent {...props} />);
     return {

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import dateFns from 'date-fns';
+
+import MyActivitiesComponent from '../MyActivitiesComponent';
+
+import activities, { activity } from '../../operations/tests/fixtures';
+
+describe('<MyActivitiesComponent />', () => {
+  const setUpWrapper = ({
+    userActivities = activities,
+  } = {}) => {
+    const props = {
+      userActivities,
+    };
+    const shallowWrapper = shallow(<MyActivitiesComponent {...props} />);
+    return {
+      shallowWrapper,
+    };
+  };
+
+  it('should have a TableComponent', () => {
+    const { shallowWrapper } = setUpWrapper();
+    expect(shallowWrapper.find('TableComponent')).toHaveLength(1);
+  });
+
+  it('should have a description of no logged activities when userActivities prop is empty', () => {
+    const { shallowWrapper } = setUpWrapper({ userActivities: [] });
+    expect(shallowWrapper.find('TableComponent').html()).toContain('You have not logged any activities');
+  });
+
+  it('should have date of activity in TableComponent', () => {
+    const { shallowWrapper } = setUpWrapper();
+    const activityDate = dateFns.format(activity.date, 'MMM DD YYYY');
+    expect(shallowWrapper.find('TableComponent').html()).toContain(`${activityDate}`);
+  });
+});

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import TruncateDescriptionComponent from '../TruncateDescriptionComponent';
+
+describe('<TruncateDescriptionComponent />', () => {
+  const setUpWrapper = ({
+      description = 'Jim Shelton of ChanZuckerberginitiative sits down with Andela fellows at Andela\'s Nairobi HQ in a Facebook Live event',
+      wordCount = 80
+    } = {}) => {
+    const props = { description, wordCount };
+    return shallow(<TruncateDescriptionComponent {...props} />);
+  };
+
+  it('should render TruncateDescriptionComponent', () => {
+    const shallowWrapper = setUpWrapper();
+    expect(shallowWrapper.length).toBe(1);
+  });
+
+  it('should show see more button when description is long', () => {
+    const shallowWrapper = setUpWrapper();
+    expect(shallowWrapper.find('.button--see-more-or-less').html()).toContain('see more');
+  });
+
+  it('should change state and button text to see less when see more is clicked', () => {
+    const shallowWrapper = setUpWrapper();
+    const seeMoreBtn = shallowWrapper.find('.button--see-more-or-less');
+    seeMoreBtn.simulate('click');
+    expect(shallowWrapper.state().isItALongDesc).toEqual(false);
+    expect(shallowWrapper.html()).toContain('see less');
+  });
+
+  it('should not see more button when description is short', () => {
+    const shallowWrapper = setUpWrapper({ description: 'Lorem ipsum dolor sit amet.' });
+    expect(shallowWrapper.find('.button--see-more-or-less').length).toBe(0);
+  });
+});

src/app/Dashboard/constants.js

@@ -1,6 +1,7 @@
 export const myStats = {
   points: 0,
   activities: 0,
+  userActivities: [],
 };
 
 export const societyStats = {

src/app/Dashboard/operations/actions.js

@@ -5,9 +5,9 @@ const fetchUserActivitiesRequest = userId => ({
   userId,
 });
 
-const fetchUserActivitiesSuccess = (activites, pointsEarned, activitiesLogged, society) => ({
+const fetchUserActivitiesSuccess = (activities, pointsEarned, activitiesLogged, society) => ({
   society,
-  activites,
+  activities,
   pointsEarned,
   activitiesLogged,
   type: types.FETCH_USER_ACTIVITIES_SUCCESS,

src/app/Dashboard/operations/tests/actions.test.js

@@ -28,7 +28,7 @@ describe('Dashboard actions', () => {
       const { data, pointsEarned, activitiesLogged } = myloggedActivities;
       const expected = {
         type: types.FETCH_USER_ACTIVITIES_SUCCESS,
-        activites: data,
+        activities: data,
         pointsEarned: pointsEarned,
         activitiesLogged: activitiesLogged,
       };

src/app/Dashboard/operations/tests/fixtures.js

@@ -1,10 +1,10 @@
 const numberOfItems = 4;
 
-const activity = {
+export const activity = {
   id: '',
-  category: 'Participating in a tech event',
+  category: 'Tech events',
   date: '2017-11-03',
-  activity: '',
+  activity: 'Participating in a tech event',
   points: 250,
   status: 'default',
   owner: 'Lawrence Wachira',
@@ -49,7 +49,7 @@ for (let i = 0; i < numberOfItems; i += 1) {
     ...activity,
     id: activityIDs[Math.floor(Math.random() * activityIDs.length)],
     status: statuses[Math.floor(Math.random() * statuses.length)],
-    activity: descriptions[Math.floor(Math.random() * descriptions.length)],
+    description: descriptions[Math.floor(Math.random() * descriptions.length)],
     society: societies[Math.floor(Math.random() * societies.length)],
   });
 }