From 6926de1108b1a084e133d5f8363f080d7c20a99f Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 9 Feb 2018 17:04:12 +0100 Subject: Use classes instead of stateless functions for Components --- src/client/react/components/container/HelpBox.js | 33 ++++--- src/client/react/components/container/Results.js | 103 ++++++++++----------- src/client/react/components/container/Search.js | 34 +++---- src/client/react/components/container/View.js | 29 +++--- .../react/components/container/WeekSelector.js | 66 ++++++------- src/client/react/components/page/Index.js | 22 +++-- src/client/react/components/page/User.js | 50 +++++----- .../components/presentational/IconFromUserType.js | 52 ++++++----- .../react/components/presentational/Loading.js | 6 +- .../react/components/presentational/Result.js | 42 +++++---- .../react/components/presentational/Schedule.js | 8 +- 11 files changed, 235 insertions(+), 210 deletions(-) (limited to 'src/client') diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js index a74b43c..effe4f5 100644 --- a/src/client/react/components/container/HelpBox.js +++ b/src/client/react/components/container/HelpBox.js @@ -2,26 +2,37 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -const HelpBox = ({ results, searchText }) => { - if (results.length > 0 || searchText !== '') { - return
; +class HelpBox extends React.Component { + static propTypes = { + // redux + results: PropTypes.arrayOf(PropTypes.string).isRequired, + searchText: PropTypes.string.isRequired, } - return ( -
-
-
- Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in. + render() { + if (this.props.results.length > 0 || this.props.searchText !== '') { + return
; + } + + return ( +
+
+
+ Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in. +
-
- ); -}; + ); + } +} HelpBox.propTypes = { + // redux results: PropTypes.arrayOf(PropTypes.string).isRequired, searchText: PropTypes.string.isRequired, }; +HelpBox.propTypes + const mapStateToProps = state => ({ results: state.search.results, searchText: state.search.searchText, diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index f65c0c8..41030e7 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -9,66 +9,61 @@ import { setUser } from '../../actions/search'; import { userFromMatch } from '../../lib/url'; import Result from '../presentational/Result'; -const Results = ({ - results, - searchText, - selectedResult, - match, - history, - dispatch, -}) => { - const user = userFromMatch(match); +class Results extends React.Component { + static propTypes = { + results: PropTypes.arrayOf(PropTypes.string).isRequired, + searchText: PropTypes.string.isRequired, + selectedResult: PropTypes.string, - const isExactMatch = - user != null && - searchText === users.byId[user].value; + // react-router + match: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, - return ( -
0, - })} - style={{ - minHeight: isExactMatch ? 0 : results.length * 54, - }} - > - {!isExactMatch && results.map(userId => ( - { - if (userId === user) { - // EDGE CASE: The user is set if the user changes, but it doesn't - // change if the result is already the one we are viewing. - // Therefor, we need to dispatch the SET_USER command manually. - dispatch(setUser(user)); - } else { - history.push(`/${userId}`); - } - }} - /> - ))} -
- ); -}; + // redux + dispatch: PropTypes.func.isRequired, + }; -Results.propTypes = { - results: PropTypes.arrayOf(PropTypes.string).isRequired, - searchText: PropTypes.string.isRequired, - selectedResult: PropTypes.string, + static defaultProps = { + selectedResult: null, + }; - // react-router - match: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, + render() { + const user = userFromMatch(this.props.match); - // redux - dispatch: PropTypes.func.isRequired, -}; + const isExactMatch = + user != null && + this.props.searchText === users.byId[user].value; -Results.defaultProps = { - selectedResult: null, -}; + return ( +
0, + })} + style={{ + minHeight: isExactMatch ? 0 : this.props.results.length * 54, + }} + > + {!isExactMatch && this.props.results.map(userId => ( + { + if (userId === user) { + // EDGE CASE: The user is set if the user changes, but it doesn't + // change if the result is already the one we are viewing. + // Therefor, we need to dispatch the SET_USER command manually. + this.props.dispatch(setUser(user)); + } else { + this.props.history.push(`/${userId}`); + } + }} + /> + ))} +
+ ); + } +} const mapStateToProps = state => ({ results: state.search.results, diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js index 8ca386c..44f2ba1 100644 --- a/src/client/react/components/container/Search.js +++ b/src/client/react/components/container/Search.js @@ -14,6 +14,23 @@ import Results from './Results'; import IconFromUserType from '../presentational/IconFromUserType'; class Search extends React.Component { + static propTypes = { + results: PropTypes.arrayOf(PropTypes.string).isRequired, + selectedResult: PropTypes.string, + searchText: PropTypes.string.isRequired, + + // react-router + match: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, + + // redux + dispatch: PropTypes.func.isRequired, + }; + + static defaultProps = { + selectedResult: null, + }; + constructor(props) { super(props); @@ -132,23 +149,6 @@ class Search extends React.Component { } } -Search.propTypes = { - results: PropTypes.arrayOf(PropTypes.string).isRequired, - selectedResult: PropTypes.string, - searchText: PropTypes.string.isRequired, - - // react-router - match: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, - - // redux - dispatch: PropTypes.func.isRequired, -}; - -Search.defaultProps = { - selectedResult: null, -}; - const mapStateToProps = state => ({ results: state.search.results, searchText: state.search.searchText, diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js index f919dbc..96611d5 100644 --- a/src/client/react/components/container/View.js +++ b/src/client/react/components/container/View.js @@ -11,6 +11,20 @@ import Schedule from '../presentational/Schedule'; import Loading from '../presentational/Loading'; class View extends React.Component { + static propTypes = { + schedules: PropTypes.objectOf(PropTypes.objectOf(PropTypes.shape({ + state: PropTypes.string.isRequired, + htmlStr: PropTypes.string, + }))).isRequired, + + // react-router + match: PropTypes.object.isRequired, + location: PropTypes.object.isRequired, + + // redux + dispatch: PropTypes.func.isRequired, + }; + componentDidMount() { this.fetchScheduleIfNeeded(); } @@ -49,7 +63,6 @@ class View extends React.Component { switch (schedule.state) { case 'NOT_REQUESTED': - return ; case 'FETCHING': return ; case 'FINISHED': @@ -60,20 +73,6 @@ class View extends React.Component { } } -View.propTypes = { - schedules: PropTypes.objectOf(PropTypes.objectOf(PropTypes.shape({ - state: PropTypes.string.isRequired, - htmlStr: PropTypes.string, - }))).isRequired, - - // react-router - match: PropTypes.object.isRequired, - location: PropTypes.object.isRequired, - - // redux - dispatch: PropTypes.func.isRequired, -}; - const mapStateToProps = state => ({ schedules: state.view.schedules, }); diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js index b8b5c2b..002128b 100644 --- a/src/client/react/components/container/WeekSelector.js +++ b/src/client/react/components/container/WeekSelector.js @@ -10,46 +10,50 @@ import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward'; import purifyWeek from '../../lib/purifyWeek'; import { weekFromLocation } from '../../lib/url'; -function weekName(week) { - const currentWeek = moment().week(); - - if (currentWeek === week) { - return `Huidige week • ${week}`; - } else if (currentWeek + 1 === week) { - return `Volgende week • ${week}`; - } else if (currentWeek - 1 === week) { - return `Vorige week • ${week}`; - } +class WeekSelector extends React.Component { + static propTypes = { + // react-router + location: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, + }; - return `Week ${week}`; -} + getWeekText() { + const week = weekFromLocation(this.props.location); -const WeekSelector = ({ location, history }) => { - const week = weekFromLocation(location); + const currentWeek = moment().week(); + + if (currentWeek === week) { + return `Huidige week • ${week}`; + } else if (currentWeek + 1 === week) { + return `Volgende week • ${week}`; + } else if (currentWeek - 1 === week) { + return `Vorige week • ${week}`; + } + + return `Week ${week}`; + } + + updateWeek(change) { + const week = weekFromLocation(this.props.location); - const updateWeek = (change) => { const newWeek = purifyWeek(week + change); const isCurrentWeek = moment().week() === newWeek; const query = queryString.stringify({ week: isCurrentWeek ? undefined : newWeek, }); - history.push(`${location.pathname}?${query}`); - }; + this.props.history.push(`${this.props.location.pathname}?${query}`); + } - return ( -
- -
{weekName(week)}
- -
- ); -}; - -WeekSelector.propTypes = { - // react-router - location: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, -}; + render() { + return ( +
+ +
{this.getWeekText()}
+ +
+ ); + } +} export default withRouter(WeekSelector); diff --git a/src/client/react/components/page/Index.js b/src/client/react/components/page/Index.js index e5e47c5..c48ebe0 100644 --- a/src/client/react/components/page/Index.js +++ b/src/client/react/components/page/Index.js @@ -2,14 +2,18 @@ import React from 'react'; import Search from '../container/Search'; import HelpBox from '../container/HelpBox'; -const IndexPage = () => ( -
-
- Metis - - -
-
-); +class IndexPage extends React.Component { + render() { + return ( +
+
+ Metis + + +
+
+ ); + } +} export default IndexPage; diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js index ae1dcc2..b520f90 100644 --- a/src/client/react/components/page/User.js +++ b/src/client/react/components/page/User.js @@ -6,34 +6,36 @@ import View from '../container/View'; import { userFromMatch } from '../../lib/url'; import WeekSelector from '../container/WeekSelector'; -const UserPage = ({ match }) => { - const user = userFromMatch(match); +class UserPage extends React.Component { + static propTypes = { + // react-router + match: PropTypes.object.isRequired, + }; - if (!user) { - // Invalid user, redirect to index. - return ; - } + render() { + const user = userFromMatch(this.props.match); + + if (!user) { + // Invalid user, redirect to index. + return ; + } - return ( -
-
-
- + return ( +
+
+
+ +
-
-
-
- +
+
+ +
+
- -
- ); -}; - -UserPage.propTypes = { - // react-router - match: PropTypes.object.isRequired, -}; + ); + } +} export default UserPage; diff --git a/src/client/react/components/presentational/IconFromUserType.js b/src/client/react/components/presentational/IconFromUserType.js index ee0e04b..2ef95b7 100644 --- a/src/client/react/components/presentational/IconFromUserType.js +++ b/src/client/react/components/presentational/IconFromUserType.js @@ -5,33 +5,35 @@ import RoomIcon from 'react-icons/lib/md/room'; import ClassIcon from 'react-icons/lib/md/group'; import TeacherIcon from 'react-icons/lib/md/account-circle'; -const IconFromUserType = ({ userType, defaultIcon }) => { - switch (userType) { - case 'c': - return ; - case 't': - return ; - case 's': - return ; - case 'r': - return ; - default: - if (defaultIcon) { - return defaultIcon; - } +class IconFromUserType extends React.Component { + static propTypes = { + userType: PropTypes.string, + defaultIcon: PropTypes.element, + }; - throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.'); - } -}; + static defaultProps = { + userType: null, + defaultIcon: null, + }; -IconFromUserType.propTypes = { - userType: PropTypes.string, - defaultIcon: PropTypes.element, -}; + render() { + switch (this.props.userType) { + case 'c': + return ; + case 't': + return ; + case 's': + return ; + case 'r': + return ; + default: + if (this.props.defaultIcon) { + return this.props.defaultIcon; + } -IconFromUserType.defaultProps = { - userType: null, - defaultIcon: null, -}; + throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.'); + } + } +} export default IconFromUserType; diff --git a/src/client/react/components/presentational/Loading.js b/src/client/react/components/presentational/Loading.js index 84eaac7..2ab80da 100644 --- a/src/client/react/components/presentational/Loading.js +++ b/src/client/react/components/presentational/Loading.js @@ -1,5 +1,9 @@ import React from 'react'; -const Loading = () =>
Loading...
; +class Loading extends React.Component { + render() { + return
Loading...
; + } +} export default Loading; diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js index 6d39a80..a30cf52 100644 --- a/src/client/react/components/presentational/Result.js +++ b/src/client/react/components/presentational/Result.js @@ -5,25 +5,29 @@ import users from '../../users'; import IconFromUserType from './IconFromUserType'; -const Result = ({ userId, isSelected, onClick }) => ( - // eslint-disable-next-line -
-
- -
-
{users.byId[userId].value}
-
-); +class Result extends React.Component { + static propTypes = { + userId: PropTypes.string.isRequired, + isSelected: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, + }; -Result.propTypes = { - userId: PropTypes.string.isRequired, - isSelected: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, -}; + render() { + return ( + // eslint-disable-next-line +
+
+ +
+
{users.byId[this.props.userId].value}
+
+ ); + } +} export default Result; diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js index 3f17adc..85cf72f 100644 --- a/src/client/react/components/presentational/Schedule.js +++ b/src/client/react/components/presentational/Schedule.js @@ -3,6 +3,10 @@ import PropTypes from 'prop-types'; import createDOMPurify from 'dompurify'; class Schedule extends React.Component { + static propTypes = { + htmlStr: PropTypes.string.isRequired, + }; + constructor(props) { super(props); @@ -58,8 +62,4 @@ class Schedule extends React.Component { } } -Schedule.propTypes = { - htmlStr: PropTypes.string.isRequired, -}; - export default Schedule; -- cgit v1.1