From 40dbead6f5ea7f312e7496c23d19b8ab74b64601 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Fri, 15 Feb 2019 16:51:07 +0300 Subject: [PATCH 01/13] feat(loggedActivities): add TableComponent --- src/app/common/components/TableComponent.js | 51 +++++++++++++++++++++ src/app/common/components/index.js | 1 + 2 files changed, 52 insertions(+) create mode 100644 src/app/common/components/TableComponent.js diff --git a/src/app/common/components/TableComponent.js b/src/app/common/components/TableComponent.js new file mode 100644 index 00000000..2ca4fe45 --- /dev/null +++ b/src/app/common/components/TableComponent.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class TableComponent extends Component { + /** + * @name defaultProps + * @type {PropType} + * @property {array} tableHeadings + * + */ + static defaultProps = { + tableHeadings: [], + }; + + /** + * @name propTypes + * @type {PropType} + * @property {node} children + * @property {array} tableHeadings + * + */ + static propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]).isRequired, + tableHeadings: PropTypes.arrayOf(PropTypes.string), + }; + + renderTableHead = tableHeadings => ( + + {tableHeadings.map(tableHead => ( + + {tableHead} + + ))} + + ); + + render() { + const { children, tableHeadings } = this.props; + return ( + + {this.renderTableHead(tableHeadings)} + {children} +
+ ); + } +} + +export default TableComponent; diff --git a/src/app/common/components/index.js b/src/app/common/components/index.js index 2c3cdb6d..8949bf74 100644 --- a/src/app/common/components/index.js +++ b/src/app/common/components/index.js @@ -1,5 +1,6 @@ export { default as HeroComponent } from './HeroComponent'; export { default as LogoComponent } from './LogoComponent'; +export { default as TableComponent } from './TableComponent'; export { default as NavbarComponent } from './NavbarComponent'; export { default as ButtonComponent } from './ButtonComponent'; export { default as SidebarComponent } from './SidebarComponent'; From 2c7f10dff5ef99b540b21601ce28bf2f70e21eed Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Wed, 20 Feb 2019 17:26:01 +0300 Subject: [PATCH 02/13] feat(myActivities): add MyActivities component - add userActivities constant --- .../components/DashboardComponent.js | 11 +++++-- .../components/MyActivitiesComponent.js | 32 +++++++++++++++++++ src/app/Dashboard/constants.js | 1 + src/app/Dashboard/operations/actions.js | 4 +-- 4 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 src/app/Dashboard/components/MyActivitiesComponent.js diff --git a/src/app/Dashboard/components/DashboardComponent.js b/src/app/Dashboard/components/DashboardComponent.js index e354bb10..312825a9 100644 --- a/src/app/Dashboard/components/DashboardComponent.js +++ b/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, } = this.props; const { user } = this.state; let dashboardHtml; @@ -87,6 +91,7 @@ export class DashboardComponent extends Component { + ); } diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js new file mode 100644 index 00000000..2470bc99 --- /dev/null +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { TableComponent } from '../../common/components'; + +const MyActivitiesComponent = (props) => { + const { userActivities } = props; + const columnNames = ['Activity', 'Date', 'Description', 'Points', 'Status']; + return ( + + {userActivities.map(activity => ( + + {activity.activity} + {activity.activityDate} + {activity.description} + {activity.points} + {activity.status} + + ))} + + ); +}; + +MyActivitiesComponent.defaultProps = { + userActivities: [], +}; + +MyActivitiesComponent.propTypes = { + userActivities: PropTypes.arrayOf(PropTypes.shape({})), +}; + +export default MyActivitiesComponent; diff --git a/src/app/Dashboard/constants.js b/src/app/Dashboard/constants.js index fa20295f..211fdca1 100644 --- a/src/app/Dashboard/constants.js +++ b/src/app/Dashboard/constants.js @@ -1,6 +1,7 @@ export const myStats = { points: 0, activities: 0, + userActivities: [], }; export const societyStats = { diff --git a/src/app/Dashboard/operations/actions.js b/src/app/Dashboard/operations/actions.js index 3dc9ec7b..2a6ff543 100644 --- a/src/app/Dashboard/operations/actions.js +++ b/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, From 3e7770e91a5be491caf5173f1aa73f3b47015042 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Mon, 18 Feb 2019 10:21:20 +0300 Subject: [PATCH 03/13] feat(myActivities): add table component and its scss --- .../components/MyActivitiesComponent.js | 26 ++++++++++++------- src/app/common/components/TableComponent.js | 4 +-- src/app/common/styles/index.scss | 3 ++- src/app/common/styles/table.scss | 17 ++++++++++++ 4 files changed, 38 insertions(+), 12 deletions(-) create mode 100644 src/app/common/styles/table.scss diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js index 2470bc99..9955e282 100644 --- a/src/app/Dashboard/components/MyActivitiesComponent.js +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -2,21 +2,29 @@ import React from 'react'; import PropTypes from 'prop-types'; import { TableComponent } from '../../common/components'; +import TruncateDescriptionComponent from './TruncateDescriptionComponent'; const MyActivitiesComponent = (props) => { const { userActivities } = props; const columnNames = ['Activity', 'Date', 'Description', 'Points', 'Status']; return ( - {userActivities.map(activity => ( - - {activity.activity} - {activity.activityDate} - {activity.description} - {activity.points} - {activity.status} - - ))} + {userActivities.map((activity) => { + const { + activityId, activityDate, description, points, status, + } = activity; + return ( + + {activity.activity} + {activityDate} + + + + {points} + {status} + + ); + })} ); }; diff --git a/src/app/common/components/TableComponent.js b/src/app/common/components/TableComponent.js index 2ca4fe45..4c5db996 100644 --- a/src/app/common/components/TableComponent.js +++ b/src/app/common/components/TableComponent.js @@ -28,9 +28,9 @@ class TableComponent extends Component { }; renderTableHead = tableHeadings => ( - + {tableHeadings.map(tableHead => ( - + {tableHead} ))} diff --git a/src/app/common/styles/index.scss b/src/app/common/styles/index.scss index f6d65be1..599d8b6f 100644 --- a/src/app/common/styles/index.scss +++ b/src/app/common/styles/index.scss @@ -2,4 +2,5 @@ @import './hero.scss'; @import './navbar.scss'; @import './button.scss'; -@import './sidebar.scss'; \ No newline at end of file +@import './sidebar.scss'; +@import './table.scss'; diff --git a/src/app/common/styles/table.scss b/src/app/common/styles/table.scss new file mode 100644 index 00000000..ab2fd95e --- /dev/null +++ b/src/app/common/styles/table.scss @@ -0,0 +1,17 @@ +.table { + background-color: $lightAccent; + box-sizing: border-box; + font-family: 'DIN Pro'; +} + +.table__row--head { + height: rem(56px); + box-shadow: 0 rem(7px) rem(36px) 0 rgba(48,48,48,0.13); +} + +.table__head { + font-size: rem(14.56px); + // font-weight: 500; + letter-spacing: rem(0.2px); + line-height: rem(14px); +} \ No newline at end of file From 51e921af5e8eeb9cd5d44d28c378eb5ede961ee6 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Mon, 18 Feb 2019 10:22:58 +0300 Subject: [PATCH 04/13] feat(myActivities): add TruncateDescriptionComponent and its scss --- .../TruncateDescriptionComponent.js | 81 +++++++++++++++++++ src/app/Dashboard/components/index.js | 1 + .../Dashboard/styles/truncateDescription.scss | 7 ++ 3 files changed, 89 insertions(+) create mode 100644 src/app/Dashboard/components/TruncateDescriptionComponent.js create mode 100644 src/app/Dashboard/styles/truncateDescription.scss diff --git a/src/app/Dashboard/components/TruncateDescriptionComponent.js b/src/app/Dashboard/components/TruncateDescriptionComponent.js new file mode 100644 index 00000000..b1e29ec1 --- /dev/null +++ b/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 = ( + + {isItALongDesc ? 'see more' : 'see less'} + + ); + } + return ( +

+ {this.truncateDescription(description, isItALongDesc)} + {buttonHtml} +

+ ); + } +} + +export default TruncateDescriptionComponent; diff --git a/src/app/Dashboard/components/index.js b/src/app/Dashboard/components/index.js index f22e1973..ec7e80ae 100644 --- a/src/app/Dashboard/components/index.js +++ b/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'; diff --git a/src/app/Dashboard/styles/truncateDescription.scss b/src/app/Dashboard/styles/truncateDescription.scss new file mode 100644 index 00000000..5f143c99 --- /dev/null +++ b/src/app/Dashboard/styles/truncateDescription.scss @@ -0,0 +1,7 @@ +.button--see-more-or-less { + background: none; + padding: 0 auto; + border: none; + font: inherit; + color: $primary; +} From f8a13c5477bbdc6119677884853786ba4ad8c829 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Wed, 20 Feb 2019 17:29:16 +0300 Subject: [PATCH 05/13] feat(myActivities): rework dashboard to edit padding and margin values --- src/app/Dashboard/components/DashboardComponent.js | 2 +- src/app/Dashboard/styles/dashboard.scss | 11 +++++++++-- src/app/common/styles/navbar.scss | 3 +-- src/app/common/styles/sidebar.scss | 2 +- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/Dashboard/components/DashboardComponent.js b/src/app/Dashboard/components/DashboardComponent.js index 312825a9..b415fd3c 100644 --- a/src/app/Dashboard/components/DashboardComponent.js +++ b/src/app/Dashboard/components/DashboardComponent.js @@ -70,7 +70,7 @@ export class DashboardComponent extends Component { dashboardHtml = (

{user.name}

-
+

D2

diff --git a/src/app/Dashboard/styles/dashboard.scss b/src/app/Dashboard/styles/dashboard.scss index 65507d7c..cdc17a11 100644 --- a/src/app/Dashboard/styles/dashboard.scss +++ b/src/app/Dashboard/styles/dashboard.scss @@ -14,7 +14,7 @@ .sub-content { flex-grow: 100; font-family: 'DIN Pro'; - padding-top: rem(23px); + padding-top: rem(25px); } .user-dashboard { @@ -22,9 +22,15 @@ } .user-dashboard__name { + padding-left: rem(6px); + margin-bottom: rem(12px); @include text-styles(rem(27px), $lightAccent, 500, rem(0.56px), rem(27px)); } +.user-dashboard__level--container{ + padding-left: rem(6px); +} + .user-dashboard__level { @include widthAndHeight(rem(23px), rem(23px)); padding: rem(1px); @@ -36,6 +42,7 @@ .profile-overview { display: flex; justify-content: space-between; + padding-left: 0; } @@ -49,7 +56,7 @@ .user-dashboard__actions { display: flex; margin-top: rem(45px); - padding-left: rem(14px); + padding-left: rem(15px); justify-content: space-between; .user-dashboard__title { diff --git a/src/app/common/styles/navbar.scss b/src/app/common/styles/navbar.scss index 5cf71aaf..e34b46e8 100644 --- a/src/app/common/styles/navbar.scss +++ b/src/app/common/styles/navbar.scss @@ -1,6 +1,5 @@ .navbar { - padding-right: 0rem!important; - padding-left: 0rem!important; + padding: 0; .navbar__logo { display: none; diff --git a/src/app/common/styles/sidebar.scss b/src/app/common/styles/sidebar.scss index a0ecde10..034d5821 100644 --- a/src/app/common/styles/sidebar.scss +++ b/src/app/common/styles/sidebar.scss @@ -5,7 +5,7 @@ align-items: center; @include widthAndHeight(rem(142px), 100vh); margin-right: rem(40px); - padding-top: rem(28px); + padding-top: rem(25px); padding-bottom: rem(184px); .close-btn { From 6653b2a0b75b09fd302bfb6e0450a63f735948ed Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Wed, 20 Feb 2019 17:10:22 +0300 Subject: [PATCH 06/13] feat(myActivities): add onClick prop --- src/app/common/components/ButtonComponent.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/common/components/ButtonComponent.js b/src/app/common/components/ButtonComponent.js index b617ae73..64435994 100644 --- a/src/app/common/components/ButtonComponent.js +++ b/src/app/common/components/ButtonComponent.js @@ -2,9 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; const ButtonComponent = (props) => { - const { children, className } = props; + const { children, className, onClick } = props; return ( - ); @@ -12,6 +12,7 @@ const ButtonComponent = (props) => { ButtonComponent.defaultProps = { className: '', + onClick: () => {}, }; ButtonComponent.propTypes = { @@ -20,6 +21,7 @@ ButtonComponent.propTypes = { PropTypes.node, ]).isRequired, className: PropTypes.string, + onClick: PropTypes.func, }; From bcf892c0996a039499ac8f2d42e32cad4343c4ec Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Mon, 18 Feb 2019 21:21:06 +0300 Subject: [PATCH 07/13] feat(myActivities): Add tableClassName prop in TableComponent - add myActivities scss file - add truncateDescription scss file - add styles to TableComponent - refactor dashboard actions --- .../components/MyActivitiesComponent.js | 6 +++--- .../Dashboard/operations/tests/actions.test.js | 2 +- src/app/Dashboard/styles/index.scss | 4 +++- src/app/Dashboard/styles/myActivities.scss | 12 ++++++++++++ .../Dashboard/styles/truncateDescription.scss | 5 ++--- src/app/common/components/TableComponent.js | 9 ++++++--- src/app/common/styles/table.scss | 17 +++++++++++++++-- 7 files changed, 42 insertions(+), 13 deletions(-) create mode 100644 src/app/Dashboard/styles/myActivities.scss diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js index 9955e282..1dd8b376 100644 --- a/src/app/Dashboard/components/MyActivitiesComponent.js +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -8,17 +8,17 @@ const MyActivitiesComponent = (props) => { const { userActivities } = props; const columnNames = ['Activity', 'Date', 'Description', 'Points', 'Status']; return ( - + {userActivities.map((activity) => { const { activityId, activityDate, description, points, status, } = activity; return ( - + {activity.activity} {activityDate} - + {points} {status} diff --git a/src/app/Dashboard/operations/tests/actions.test.js b/src/app/Dashboard/operations/tests/actions.test.js index c827f527..81e98ac9 100644 --- a/src/app/Dashboard/operations/tests/actions.test.js +++ b/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, }; diff --git a/src/app/Dashboard/styles/index.scss b/src/app/Dashboard/styles/index.scss index 22988d87..d0a14a89 100644 --- a/src/app/Dashboard/styles/index.scss +++ b/src/app/Dashboard/styles/index.scss @@ -1,3 +1,5 @@ @import './myStats.scss'; @import './dashboard.scss'; -@import './societyStats.scss'; \ No newline at end of file +@import './societyStats.scss'; +@import './myActivities.scss'; +@import './truncateDescription.scss'; diff --git a/src/app/Dashboard/styles/myActivities.scss b/src/app/Dashboard/styles/myActivities.scss new file mode 100644 index 00000000..02d9e253 --- /dev/null +++ b/src/app/Dashboard/styles/myActivities.scss @@ -0,0 +1,12 @@ +.myactivities__table { + margin-top: rem(24px); +} + +.myactivities__table__row { + height: rem(56px); + background-color: $lightAccent; + + td:first-child { + padding-left: rem(30px); + } +} diff --git a/src/app/Dashboard/styles/truncateDescription.scss b/src/app/Dashboard/styles/truncateDescription.scss index 5f143c99..02e79e95 100644 --- a/src/app/Dashboard/styles/truncateDescription.scss +++ b/src/app/Dashboard/styles/truncateDescription.scss @@ -1,7 +1,6 @@ .button--see-more-or-less { - background: none; - padding: 0 auto; + background: transparent; border: none; font: inherit; - color: $primary; + color: $primaryBlue; } diff --git a/src/app/common/components/TableComponent.js b/src/app/common/components/TableComponent.js index 4c5db996..5d240dc8 100644 --- a/src/app/common/components/TableComponent.js +++ b/src/app/common/components/TableComponent.js @@ -38,10 +38,13 @@ class TableComponent extends Component { ); render() { - const { children, tableHeadings } = this.props; + const { children, tableHeadings, tableClassName } = this.props; return ( - - {this.renderTableHead(tableHeadings)} +
+ + {this.renderTableHead(tableHeadings)} + + {children}
); diff --git a/src/app/common/styles/table.scss b/src/app/common/styles/table.scss index ab2fd95e..6a233f2e 100644 --- a/src/app/common/styles/table.scss +++ b/src/app/common/styles/table.scss @@ -1,17 +1,30 @@ .table { - background-color: $lightAccent; + background-color: transparent; box-sizing: border-box; font-family: 'DIN Pro'; } .table__row--head { + background-color: $lightAccent; height: rem(56px); box-shadow: 0 rem(7px) rem(36px) 0 rgba(48,48,48,0.13); } +.table__row--separator { + border: none; + height: rem(3px); + background-color: transparent; +} + .table__head { font-size: rem(14.56px); - // font-weight: 500; + margin: auto 0; letter-spacing: rem(0.2px); line-height: rem(14px); + vertical-align: middle !important; + border-bottom: none !important; + + &:first-child { + padding-left: rem(30px); + } } \ No newline at end of file From 920503272bb7a814c452edad02ff02b7fd328246 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Thu, 21 Feb 2019 15:31:56 +0300 Subject: [PATCH 08/13] feat(myActivities): add society prop - rename color value --- src/app/Dashboard/components/DashboardComponent.js | 2 +- src/app/Dashboard/components/tests/DashboardComponent.test.js | 3 +++ src/app/Dashboard/styles/truncateDescription.scss | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/Dashboard/components/DashboardComponent.js b/src/app/Dashboard/components/DashboardComponent.js index b415fd3c..30711b63 100644 --- a/src/app/Dashboard/components/DashboardComponent.js +++ b/src/app/Dashboard/components/DashboardComponent.js @@ -58,7 +58,7 @@ export class DashboardComponent extends Component { render() { const { - error, loading, pointsEarned, activitiesLogged, userActivities, + error, loading, pointsEarned, activitiesLogged, userActivities, society, } = this.props; const { user } = this.state; let dashboardHtml; diff --git a/src/app/Dashboard/components/tests/DashboardComponent.test.js b/src/app/Dashboard/components/tests/DashboardComponent.test.js index 15a54687..1a1722a0 100644 --- a/src/app/Dashboard/components/tests/DashboardComponent.test.js +++ b/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('', () => { @@ -9,6 +10,7 @@ describe('', () => { pointsEarned = 0, userActivities = [], activitiesLogged = 0, + society= '' } = {}) => { const props = { error, @@ -16,6 +18,7 @@ describe('', () => { pointsEarned, userActivities, activitiesLogged, + society, }; const shallowWrapper = shallow(); return { diff --git a/src/app/Dashboard/styles/truncateDescription.scss b/src/app/Dashboard/styles/truncateDescription.scss index 02e79e95..e4b6039e 100644 --- a/src/app/Dashboard/styles/truncateDescription.scss +++ b/src/app/Dashboard/styles/truncateDescription.scss @@ -2,5 +2,5 @@ background: transparent; border: none; font: inherit; - color: $primaryBlue; + color: $andelaBlue; } From da80b611d7f2ea89a52e81aef8272ae3693e1286 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Thu, 21 Feb 2019 15:34:58 +0300 Subject: [PATCH 09/13] feat(myActivities): format date value - modify text styles for table body - add border collapse and spacing styles on table class --- src/app/Dashboard/components/MyActivitiesComponent.js | 5 +++-- src/app/Dashboard/styles/myActivities.scss | 4 +++- src/app/common/components/TableComponent.js | 10 ++++------ src/app/common/styles/table.scss | 10 +++------- src/styles/_vars.scss | 2 ++ 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js index 1dd8b376..eb04d2f3 100644 --- a/src/app/Dashboard/components/MyActivitiesComponent.js +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import dateFns from 'date-fns'; import { TableComponent } from '../../common/components'; import TruncateDescriptionComponent from './TruncateDescriptionComponent'; @@ -16,9 +17,9 @@ const MyActivitiesComponent = (props) => { return ( {activity.activity} - {activityDate} + {dateFns.format(activityDate, 'MMM DD YYYY')} - + {points} {status} diff --git a/src/app/Dashboard/styles/myActivities.scss b/src/app/Dashboard/styles/myActivities.scss index 02d9e253..c2c06acb 100644 --- a/src/app/Dashboard/styles/myActivities.scss +++ b/src/app/Dashboard/styles/myActivities.scss @@ -1,10 +1,12 @@ .myactivities__table { - margin-top: rem(24px); + margin-top: rem(20px); } .myactivities__table__row { height: rem(56px); background-color: $lightAccent; + box-shadow: 0 rem(7px) rem(36px) 0 $grayShadow; + @include text-styles(rem(14px), $tableBodyTextColor, normal, rem(-0.09px), rem(18px)); td:first-child { padding-left: rem(30px); diff --git a/src/app/common/components/TableComponent.js b/src/app/common/components/TableComponent.js index 5d240dc8..7295d362 100644 --- a/src/app/common/components/TableComponent.js +++ b/src/app/common/components/TableComponent.js @@ -10,6 +10,7 @@ class TableComponent extends Component { */ static defaultProps = { tableHeadings: [], + tableClassName: '', }; /** @@ -20,10 +21,8 @@ class TableComponent extends Component { * */ static propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]).isRequired, + tableClassName: PropTypes.string, + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired, tableHeadings: PropTypes.arrayOf(PropTypes.string), }; @@ -42,8 +41,7 @@ class TableComponent extends Component { return ( - {this.renderTableHead(tableHeadings)} - + {this.renderTableHead(tableHeadings)} {children}
diff --git a/src/app/common/styles/table.scss b/src/app/common/styles/table.scss index 6a233f2e..e82caf46 100644 --- a/src/app/common/styles/table.scss +++ b/src/app/common/styles/table.scss @@ -2,18 +2,14 @@ background-color: transparent; box-sizing: border-box; font-family: 'DIN Pro'; + border-collapse: separate !important; + border-spacing: 0 rem(4px); } .table__row--head { background-color: $lightAccent; height: rem(56px); - box-shadow: 0 rem(7px) rem(36px) 0 rgba(48,48,48,0.13); -} - -.table__row--separator { - border: none; - height: rem(3px); - background-color: transparent; + box-shadow: 0 rem(7px) rem(36px) 0 $grayShadow; } .table__head { diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss index a1005521..db4bd8fb 100644 --- a/src/styles/_vars.scss +++ b/src/styles/_vars.scss @@ -12,3 +12,5 @@ $darkBlue: #101444; $darkerBlue: #000564; $whiteShadow: rgba(255, 255, 255, 0.5); $darkShadow: rgba(0,0,0,0.08); +$grayShadow: rgba(48,48,48,0.13); +$tableBodyTextColor: #51516B; From 6fe42a4a717e4b61a68b2232d375adaa7bae1226 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Thu, 21 Feb 2019 17:23:03 +0300 Subject: [PATCH 10/13] feat(myActivities): add MyActivitiesComponent and TableComponent tests - add condition to check if there are userActivities --- .../components/MyActivitiesComponent.js | 46 ++++++++++++------- .../tests/MyActivitiesComponent.test.js | 40 ++++++++++++++++ .../Dashboard/operations/tests/fixtures.js | 2 +- .../components/tests/TableComponent.test.js | 35 ++++++++++++++ 4 files changed, 106 insertions(+), 17 deletions(-) create mode 100644 src/app/Dashboard/components/tests/MyActivitiesComponent.test.js create mode 100644 src/app/common/components/tests/TableComponent.test.js diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js index eb04d2f3..93c32859 100644 --- a/src/app/Dashboard/components/MyActivitiesComponent.js +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -8,24 +8,38 @@ import TruncateDescriptionComponent from './TruncateDescriptionComponent'; const MyActivitiesComponent = (props) => { const { userActivities } = props; const columnNames = ['Activity', 'Date', 'Description', 'Points', 'Status']; + let tableBodyHtml; + if (!userActivities.length) { + tableBodyHtml = ( + + + + You have not logged any activities + + + + ); + } else { + tableBodyHtml = userActivities.map((activity) => { + const { + id, activityDate, description, points, status, + } = activity; + return ( + + {activity.activity} + {dateFns.format(activityDate, 'MMM DD YYYY')} + + + + {points} + {status} + + ); + }); + } return ( - {userActivities.map((activity) => { - const { - activityId, activityDate, description, points, status, - } = activity; - return ( - - {activity.activity} - {dateFns.format(activityDate, 'MMM DD YYYY')} - - - - {points} - {status} - - ); - })} + {tableBodyHtml} ); }; diff --git a/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js b/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js new file mode 100644 index 00000000..1301395f --- /dev/null +++ b/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js @@ -0,0 +1,40 @@ +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('', () => { + const setUpWrapper = ({ + userActivities = activities, + } = {}) => { + const props = { + userActivities, + }; + const shallowWrapper = shallow(); + return { + shallowWrapper, + }; + }; + // const props = { + // userActivities: activities + // } + + 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}`); + }); +}); diff --git a/src/app/Dashboard/operations/tests/fixtures.js b/src/app/Dashboard/operations/tests/fixtures.js index 97050138..abd5c979 100644 --- a/src/app/Dashboard/operations/tests/fixtures.js +++ b/src/app/Dashboard/operations/tests/fixtures.js @@ -1,6 +1,6 @@ const numberOfItems = 4; -const activity = { +export const activity = { id: '', category: 'Participating in a tech event', date: '2017-11-03', diff --git a/src/app/common/components/tests/TableComponent.test.js b/src/app/common/components/tests/TableComponent.test.js new file mode 100644 index 00000000..45ec5625 --- /dev/null +++ b/src/app/common/components/tests/TableComponent.test.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TableComponent from '../TableComponent'; + +describe('', () => { + const setUpWrapper = ({ + tableHeadings = [], + children = [], + } = {}) => { + const props = { + children, + tableHeadings, + }; + const shallowWrapper = shallow(); + return { + shallowWrapper, + }; + }; + + it('should have two table heads columns', () => { + const { shallowWrapper } = setUpWrapper({ tableHeadings: ['Name', 'Age']}); + expect(shallowWrapper.find('.table__head')).toHaveLength(2); + }); + + it('should table rows in the table body section', () => { + const { shallowWrapper } = setUpWrapper({ + tableHeadings: ['Name', 'Age'], + children: [ + John10, + Doe20 + ] + }); + expect(shallowWrapper.find('tbody').text()).toContain('John10Doe20'); + }); +}); From ed356fd21fcfeb0b5e6f289345e4cde4cfa251b1 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Thu, 21 Feb 2019 23:22:55 +0300 Subject: [PATCH 11/13] feat(myActivities): Add StatusIndicatorComponent - add statusIndicator scss file - add colors representing the various statuses - make use of status indicator component in MyActivities and SocietyStats components --- .../components/MyActivitiesComponent.js | 4 ++-- .../components/SocietyStatsComponent.js | 8 +++---- .../tests/MyActivitiesComponent.test.js | 3 --- src/app/Dashboard/styles/societyStats.scss | 10 +++----- .../components/StatusIndicatorComponent.js | 18 ++++++++++++++ src/app/common/components/index.js | 1 + .../tests/StatusIndicatorComponent.test.js | 11 +++++++++ src/app/common/styles/index.scss | 1 + src/app/common/styles/statusIndicator.scss | 24 +++++++++++++++++++ src/app/common/styles/table.scss | 2 +- src/styles/_vars.scss | 5 ++-- 11 files changed, 68 insertions(+), 19 deletions(-) create mode 100644 src/app/common/components/StatusIndicatorComponent.js create mode 100644 src/app/common/components/tests/StatusIndicatorComponent.test.js create mode 100644 src/app/common/styles/statusIndicator.scss diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js index 93c32859..47be4681 100644 --- a/src/app/Dashboard/components/MyActivitiesComponent.js +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import dateFns from 'date-fns'; -import { TableComponent } from '../../common/components'; +import { TableComponent, StatusIndicatorComponent } from '../../common/components'; import TruncateDescriptionComponent from './TruncateDescriptionComponent'; const MyActivitiesComponent = (props) => { @@ -32,7 +32,7 @@ const MyActivitiesComponent = (props) => { {points} - {status} + ); }); diff --git a/src/app/Dashboard/components/SocietyStatsComponent.js b/src/app/Dashboard/components/SocietyStatsComponent.js index e65095fe..0afd5b1d 100644 --- a/src/app/Dashboard/components/SocietyStatsComponent.js +++ b/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) => {
- + Used points
- + Total Remaining Points
@@ -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; diff --git a/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js b/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js index 1301395f..4dee2c60 100644 --- a/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js +++ b/src/app/Dashboard/components/tests/MyActivitiesComponent.test.js @@ -18,9 +18,6 @@ describe('', () => { shallowWrapper, }; }; - // const props = { - // userActivities: activities - // } it('should have a TableComponent', () => { const { shallowWrapper } = setUpWrapper(); diff --git a/src/app/Dashboard/styles/societyStats.scss b/src/app/Dashboard/styles/societyStats.scss index 0ce2f63a..67bc092e 100644 --- a/src/app/Dashboard/styles/societyStats.scss +++ b/src/app/Dashboard/styles/societyStats.scss @@ -17,12 +17,12 @@ border-radius: 0; #progress-bar--blue { - background-color: $checkmarkBlue!important; + background-color: $andelaBlue!important; width: 60%; } #progress-bar--green { - background-color: $checkmarkGreen!important; + background-color: $approvedStatusGreen!important; width: 40%; } } @@ -56,14 +56,10 @@ font-size: rem(30px); } -#blue-circle { - color: $checkmarkBlue; +.society-stats--used-points-indicator { margin-left: rem(10px); } -#green-circle { - color: $checkmarkGreen; -} #used-points { margin-left: rem(10px); diff --git a/src/app/common/components/StatusIndicatorComponent.js b/src/app/common/components/StatusIndicatorComponent.js new file mode 100644 index 00000000..c12dfda2 --- /dev/null +++ b/src/app/common/components/StatusIndicatorComponent.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const StatusIndicatorComponent = ({ className, status }) => ( + +); + +StatusIndicatorComponent.defaultProps = { + status: '', + className: '', +}; + +StatusIndicatorComponent.propTypes = { + status: PropTypes.string, + className: PropTypes.string, +}; + +export default StatusIndicatorComponent; diff --git a/src/app/common/components/index.js b/src/app/common/components/index.js index 8949bf74..72767fc7 100644 --- a/src/app/common/components/index.js +++ b/src/app/common/components/index.js @@ -5,3 +5,4 @@ export { default as NavbarComponent } from './NavbarComponent'; export { default as ButtonComponent } from './ButtonComponent'; export { default as SidebarComponent } from './SidebarComponent'; export { default as NavItemComponent } from './NavItemComponent'; +export { default as StatusIndicatorComponent } from './StatusIndicatorComponent'; diff --git a/src/app/common/components/tests/StatusIndicatorComponent.test.js b/src/app/common/components/tests/StatusIndicatorComponent.test.js new file mode 100644 index 00000000..4951b06d --- /dev/null +++ b/src/app/common/components/tests/StatusIndicatorComponent.test.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import StatusIndicatorComponent from '../StatusIndicatorComponent'; + +describe('', () => { + const shallowWrapper = shallow(); + + it('should have span tag with class indicator', () => { + expect(shallowWrapper.find('.indicator')).toHaveLength(1); + }); +}); diff --git a/src/app/common/styles/index.scss b/src/app/common/styles/index.scss index 599d8b6f..3f14cc5a 100644 --- a/src/app/common/styles/index.scss +++ b/src/app/common/styles/index.scss @@ -4,3 +4,4 @@ @import './button.scss'; @import './sidebar.scss'; @import './table.scss'; +@import './statusIndicator.scss'; diff --git a/src/app/common/styles/statusIndicator.scss b/src/app/common/styles/statusIndicator.scss new file mode 100644 index 00000000..ae6a89d5 --- /dev/null +++ b/src/app/common/styles/statusIndicator.scss @@ -0,0 +1,24 @@ +.indicator:before { + content: ' \25CF'; + font-size: rem(30px); +} + +.completed { + color: $andelaBlue; +} + +.approved { + color: $approvedStatusGreen; +} + +.rejected { + color: $rejectedStatusRed; +} + +.pending { + color: $andelaGold; +} + +.inreview { + color: $inReviewStatusYellow; +} diff --git a/src/app/common/styles/table.scss b/src/app/common/styles/table.scss index e82caf46..995ce25b 100644 --- a/src/app/common/styles/table.scss +++ b/src/app/common/styles/table.scss @@ -23,4 +23,4 @@ &:first-child { padding-left: rem(30px); } -} \ No newline at end of file +} diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss index db4bd8fb..6342cbfd 100644 --- a/src/styles/_vars.scss +++ b/src/styles/_vars.scss @@ -4,8 +4,7 @@ $lightGray: #9B9B9B; $andelaBlue: #3359DF; $andelaGold: #FFAF30; $darkGray: #666666; -$checkmarkBlue: #3A84FF; -$checkmarkGreen: #7ED321; +$approvedStatusGreen: #7ED321; $separatorBlue: #5DA5F3; $footerTextGray: #ACACBF; $darkBlue: #101444; @@ -14,3 +13,5 @@ $whiteShadow: rgba(255, 255, 255, 0.5); $darkShadow: rgba(0,0,0,0.08); $grayShadow: rgba(48,48,48,0.13); $tableBodyTextColor: #51516B; +$rejectedStatusRed: #D0021B; +$inReviewStatusYellow: #F8E71C; From 9bf5bad22a3dd0b6f936c8a3f0bf6c477d647e28 Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Fri, 22 Feb 2019 14:05:45 +0300 Subject: [PATCH 12/13] feat(myActivities): Add TruncateDescriptionComponent tests --- .../TruncateDescriptionComponent.test.js | 37 +++++++++++++++++++ .../Dashboard/operations/tests/fixtures.js | 6 +-- 2 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 src/app/Dashboard/components/tests/TruncateDescriptionComponent.test.js diff --git a/src/app/Dashboard/components/tests/TruncateDescriptionComponent.test.js b/src/app/Dashboard/components/tests/TruncateDescriptionComponent.test.js new file mode 100644 index 00000000..e9ef5c58 --- /dev/null +++ b/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('', () => { + 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(); + }; + + 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); + }); +}); diff --git a/src/app/Dashboard/operations/tests/fixtures.js b/src/app/Dashboard/operations/tests/fixtures.js index abd5c979..72b24a30 100644 --- a/src/app/Dashboard/operations/tests/fixtures.js +++ b/src/app/Dashboard/operations/tests/fixtures.js @@ -2,9 +2,9 @@ const numberOfItems = 4; 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)], }); } From 9c455d9238f78a9fa9edefed38fdcaca88954e0f Mon Sep 17 00:00:00 2001 From: Chris Maina Date: Tue, 26 Feb 2019 13:54:28 +0300 Subject: [PATCH 13/13] feat(myActivities): add colSpan attribute on table data --- src/app/Dashboard/components/MyActivitiesComponent.js | 6 +----- src/app/Dashboard/styles/myActivities.scss | 4 ++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/Dashboard/components/MyActivitiesComponent.js b/src/app/Dashboard/components/MyActivitiesComponent.js index 47be4681..2d96390e 100644 --- a/src/app/Dashboard/components/MyActivitiesComponent.js +++ b/src/app/Dashboard/components/MyActivitiesComponent.js @@ -12,11 +12,7 @@ const MyActivitiesComponent = (props) => { if (!userActivities.length) { tableBodyHtml = ( - - - You have not logged any activities - - + You have not logged any activities ); } else { diff --git a/src/app/Dashboard/styles/myActivities.scss b/src/app/Dashboard/styles/myActivities.scss index c2c06acb..c9315611 100644 --- a/src/app/Dashboard/styles/myActivities.scss +++ b/src/app/Dashboard/styles/myActivities.scss @@ -12,3 +12,7 @@ padding-left: rem(30px); } } + +.myactivities__table__data { + text-align: center; +}