-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#164324997 Log Society Activity points (#188)
* Redux Saga setup * Clean Saga examples * Onboading screen * log points * merge conflicts * Log society activity points * Log points reducer tests * log activity points action tests * log activity points generators and component tests * refactor and implement review feedback * remove evaluation * update branch * add expects blocks to my tests * team feedback implementation * improve test coverage * improve test coverage * improve tests * Remove unnecessary code * logged activity should be added to the user activity list * Rename file * test componentDidUpdate * add snapshot * fix datefns time format error
- Loading branch information
Showing
37 changed files
with
1,196 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
190 changes: 190 additions & 0 deletions
190
src/app/Dashboard/components/LogPointsModalContainer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| import React, { Component } from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import TextField from '@material-ui/core/TextField'; | ||
| import StartIcon from '@material-ui/icons/Star'; | ||
| import { MenuItem, ButtonComponent } from '../../common/components'; | ||
| import actions from '../operations/actions'; | ||
|
|
||
| /** | ||
| * @summary Renders the Log society points Modal | ||
| * @class LogPointsModal | ||
| * @extends React.Component | ||
| */ | ||
| export class LogPointsModal extends Component { | ||
| state = { | ||
| categoryOption: '', | ||
| numberOfParticipants: '', | ||
| description: '', | ||
| activityDate: '', | ||
| selectCategory: { | ||
| value: 0, | ||
| supportsMultipleParticipants: false, | ||
| }, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| categories: [], | ||
| open: false, | ||
| logActivity: () => {}, | ||
| close: () => {}, | ||
| } | ||
|
|
||
| static propTypes = { | ||
| open: PropTypes.bool, | ||
| logActivity: PropTypes.func, | ||
| categories: PropTypes.arrayOf(PropTypes.shape({})), | ||
| close: PropTypes.func, | ||
| }; | ||
|
|
||
| componentDidUpdate(prevProps, prevState) { | ||
| const { categoryOption } = this.state; | ||
| const { categories } = this.props; | ||
| const categoryItem = categories.find(category => category.id === categoryOption); | ||
| this.setFormState(prevState, categoryItem, categoryOption); | ||
| } | ||
|
|
||
| setFormState = (prevState, categoryItem, categoryOption) => { | ||
| if (categoryOption !== prevState.categoryOption) { | ||
| this.setState({ | ||
| selectCategory: categoryItem, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @name handleChange | ||
| * @summary Maps the Society Activity inputs to the local state | ||
| * @return {void} | ||
| */ | ||
| handleChange = prop => (event) => { | ||
| this.setState({ [prop]: event.target.value }); | ||
| }; | ||
|
|
||
| /** | ||
| * @name handleSubmit | ||
| * @summary Handles submission of society activity points | ||
| * @return {void} | ||
| */ | ||
| handleSubmit = () => { | ||
| const { logActivity, close } = this.props; | ||
| const { | ||
| categoryOption, activityDate, numberOfParticipants, description, | ||
| } = this.state; | ||
| logActivity( | ||
| { | ||
| activityId: categoryOption, | ||
| date: activityDate, | ||
| noOfParticipants: numberOfParticipants, | ||
| description, | ||
| }, | ||
| ); | ||
| close(); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| categoryOption, | ||
| numberOfParticipants, | ||
| description, | ||
| activityDate, | ||
| selectCategory, | ||
| } = this.state; | ||
| const { | ||
| open, categories, close, | ||
| } = this.props; | ||
| const styles = { | ||
| login: { | ||
| transform: open ? 'translateY(0%)' : 'translateY(-100vh)', | ||
| opacity: open ? '1' : '0', | ||
| }, | ||
| textField: { | ||
| display: selectCategory.supportsMultipleParticipants ? '' : 'none', | ||
| }, | ||
| }; | ||
| return ( | ||
| <div className='login-jumbotron'> | ||
| <div | ||
| className='login-container' | ||
| style={styles.login} | ||
| > | ||
| <div className='log-points-ratings'> | ||
| <StartIcon className='ratings-icon' /> | ||
| <StartIcon className='ratings-icon' /> | ||
| <StartIcon className='ratings-icon' /> | ||
| </div> | ||
| <div className='log-points'> | ||
| <h5 className='log-points__heading'>Log in points</h5> | ||
| </div> | ||
| <form className='form-container'> | ||
| <MenuItem | ||
| handleChange={this.handleChange('categoryOption')} | ||
| categories={categories} | ||
| categoryId={categoryOption} | ||
| /> | ||
| <TextField | ||
| id='filled-number' | ||
| name='numberOfParticipants' | ||
| label='Number' | ||
| value={numberOfParticipants} | ||
| onChange={this.handleChange('numberOfParticipants')} | ||
| type='number' | ||
| style={styles.textField} | ||
| margin='normal' | ||
| fullWidth | ||
| /> | ||
| <TextField | ||
| required | ||
| id='date' | ||
| label='Date' | ||
| type='date' | ||
| value={activityDate} | ||
| margin='normal' | ||
| InputLabelProps={{ | ||
| shrink: true, | ||
| }} | ||
| fullWidth | ||
| onChange={this.handleChange('activityDate')} | ||
| /> | ||
| <TextField | ||
| required | ||
| id='standard-description' | ||
| label='Briefly what did you do' | ||
| margin='normal' | ||
| fullWidth | ||
| value={description} | ||
| onChange={this.handleChange('description')} | ||
| /> | ||
| <div> | ||
| <ButtonComponent type='button' className='btn-points'> | ||
| {selectCategory.value} | ||
| {' '} | ||
| Points | ||
| </ButtonComponent> | ||
| </div> | ||
| <div className='log-points-footer'> | ||
| <ButtonComponent | ||
| type='button' | ||
| className='btn-log' | ||
| onClick={this.handleSubmit} | ||
| > | ||
| Log | ||
| </ButtonComponent> | ||
| <ButtonComponent type='button' className='btn-abort' onClick={close}>Cancel</ButtonComponent> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export const mapStateToProps = state => ({ | ||
| categories: state.dashboard.categories, | ||
| }); | ||
|
|
||
|
|
||
| export default connect(mapStateToProps, { | ||
| logActivity: activity => actions.logPointsRequest(activity), | ||
| })(LogPointsModal); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
src/app/Dashboard/components/tests/LogPointsModalConatiner.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import { LogPointsModal } from '../LogPointsModalContainer'; | ||
| import { categories as activities } from '../../operations/tests/fixtures'; | ||
|
|
||
| describe('<LogPointsComponent />', () => { | ||
| const setUpWrapper = ({ | ||
| categories = activities, | ||
| } = {}) => { | ||
| const props = { | ||
| categories, | ||
| loadCategories: jest.fn(), | ||
| handleChange: jest.fn(), | ||
| }; | ||
| const shallowWrapper = shallow(<LogPointsModal {...props} />); | ||
| return { | ||
| shallowWrapper, | ||
| }; | ||
| }; | ||
|
|
||
| it('should submit the log society activity points data', () => { | ||
| const { shallowWrapper } = setUpWrapper(); | ||
| const instance = shallowWrapper.instance(); | ||
| instance.setState({ | ||
| logPoints: false, | ||
| }); | ||
| instance.handleSubmit(); | ||
| expect(instance.state.logPoints).toBe(false); | ||
| }); | ||
|
|
||
| it('should handleChange on the Textfields', () => { | ||
| const { shallowWrapper } = setUpWrapper(); | ||
| expect(shallowWrapper.find('#standard-description').simulate('change', { target: { value: 'Description' } })); | ||
| }); | ||
|
|
||
| it('should contain Log in points text', () => { | ||
| const { shallowWrapper } = setUpWrapper(); | ||
| expect(shallowWrapper.find('.log-points__heading').text()).toEqual('Log in points'); | ||
| }); | ||
|
|
||
| it('should call componentDidUpdate after state change', () => { | ||
| const { shallowWrapper } = setUpWrapper(); | ||
| const instance = shallowWrapper.instance(); | ||
| const categoryOption = 0; | ||
| expect(instance.setFormState(categoryOption, activities[0], categoryOption)).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.