From 315adeb5e2012b7f7bcfcd1478f9d6dd2cc1092d Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 26 Jun 2018 21:46:41 +0200 Subject: Update code to comply with new styling --- src/client/react/components/container/HelpBox.js | 3 +- src/client/react/components/container/Menu.js | 38 +++++++++++++++----- src/client/react/components/container/Results.js | 29 +++++++++------ .../react/components/container/RoomFinder.js | 34 +++++++++++------- src/client/react/components/container/Search.js | 41 ++++++++++++++-------- .../react/components/container/WeekSelector.js | 39 ++++++++++++-------- src/client/react/components/page/User.js | 3 +- .../components/presentational/IconFromUserType.js | 7 ++-- .../react/components/presentational/Result.js | 18 +++++----- .../react/components/presentational/Schedule.js | 5 +-- 10 files changed, 142 insertions(+), 75 deletions(-) (limited to 'src/client/react/components') diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js index 8b53382..6579383 100644 --- a/src/client/react/components/container/HelpBox.js +++ b/src/client/react/components/container/HelpBox.js @@ -32,7 +32,8 @@ class HelpBox extends React.Component { } render() { - if (this.props.results.length > 0 || this.props.searchText !== '') { + const { results, searchText } = this.props; + if (results.length > 0 || searchText !== '') { return
; } diff --git a/src/client/react/components/container/Menu.js b/src/client/react/components/container/Menu.js index 0b5c4dc..474444d 100644 --- a/src/client/react/components/container/Menu.js +++ b/src/client/react/components/container/Menu.js @@ -44,14 +44,20 @@ class Menu extends React.Component { onItemSelected(index) { switch (index) { case 'room_finder': { - const user = userFromMatch(this.props.match); + const { + match, + location, + history, + dispatch, + } = this.props; + const user = userFromMatch(match); if (user == null || users.byId[user].type !== 'r') { // We are not currently viewing a room, correct the situation. - setUser(users.allRoomIds[0], this.props.location, this.props.history); + setUser(users.allRoomIds[0], location, history); } - this.props.dispatch({ type: 'ROOM_FINDER/SHOW' }); + dispatch({ type: 'ROOM_FINDER/SHOW' }); break; } default: @@ -63,17 +69,33 @@ class Menu extends React.Component { return (
} + handle={( + +)} onSelected={(event) => { // Send the `data-type` of the selected this.onItemSelected(event.detail.item.dataset.type); }} > - Voeg label toe - Maak favoriet + + +Voeg label toe + + + +Maak favoriet +
- Lokaal zoeken - Oud rooster gebruiken + + +Lokaal zoeken + + + +Oud rooster gebruiken +
); diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index 82e37cb..314bbca 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -50,34 +50,43 @@ class Results extends React.Component { }; render() { - const user = userFromMatch(this.props.match); + const { + searchText, + results, + selectedResult, + match, + location, + history, + dispatch, + } = this.props; + const user = userFromMatch(match); - const isExactMatch = - user != null && - this.props.searchText === users.byId[user].value; + const isExactMatch = ( + user != null && searchText === users.byId[user].value + ); return (
0, + hasResults: !isExactMatch && results.length > 0, })} style={{ - minHeight: isExactMatch ? 0 : this.props.results.length * 54, + minHeight: isExactMatch ? 0 : results.length * 54, }} > - {!isExactMatch && this.props.results.map(userId => ( + {!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. - this.props.dispatch({ type: 'SEARCH/SET_USER', user }); + dispatch({ type: 'SEARCH/SET_USER', user }); } else { - setUser(userId, this.props.location, this.props.history); + setUser(userId, location, history); } }} /> diff --git a/src/client/react/components/container/RoomFinder.js b/src/client/react/components/container/RoomFinder.js index b729ee3..0d296a2 100644 --- a/src/client/react/components/container/RoomFinder.js +++ b/src/client/react/components/container/RoomFinder.js @@ -41,24 +41,29 @@ class RoomFinder extends React.Component { } componentWillMount() { - const user = userFromMatch(this.props.match); - if (this.props.isVisible && users.byId[user].type !== 'r') { + const { isVisible, match, dispatch } = this.props; + const user = userFromMatch(match); + + if (isVisible && users.byId[user].type !== 'r') { // We are not currently viewing a room, so just hide. - this.props.dispatch({ type: 'ROOM_FINDER/HIDE' }); + dispatch({ type: 'ROOM_FINDER/HIDE' }); } } componentWillReceiveProps(nextProps) { - const user = userFromMatch(nextProps.match); - if (nextProps.isVisible && users.byId[user].type !== 'r') { + const { isVisible, match, dispatch } = nextProps; + + const user = userFromMatch(match); + if (isVisible && users.byId[user].type !== 'r') { // We are not currently viewing a room, so just hide. - this.props.dispatch({ type: 'ROOM_FINDER/HIDE' }); + dispatch({ type: 'ROOM_FINDER/HIDE' }); } } changeRoom(change) { + const { match, location, history } = this.props; const { allRoomIds } = users; - const currentRoom = userFromMatch(this.props.match); + const currentRoom = userFromMatch(match); const currentRoomIndex = allRoomIds.indexOf(currentRoom); let nextRoomIndex = currentRoomIndex + change; if (nextRoomIndex < 0) { @@ -68,22 +73,27 @@ class RoomFinder extends React.Component { } const nextRoom = allRoomIds[nextRoomIndex]; - setUser(nextRoom, this.props.location, this.props.history); + setUser(nextRoom, location, history); } render() { - if (!this.props.isVisible) { + const { isVisible, dispatch } = this.props; + if (!isVisible) { return
; } return (
- - + +
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js index a124b21..5f00384 100644 --- a/src/client/react/components/container/Search.js +++ b/src/client/react/components/container/Search.js @@ -67,14 +67,18 @@ class Search extends React.Component { } componentDidMount() { - const urlUser = userFromMatch(this.props.match); - this.props.dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); + const { dispatch, match } = this.props; + const urlUser = userFromMatch(match); + + dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); } componentWillReceiveProps(nextProps) { - if (nextProps.match !== this.props.match) { + const { dispatch, match } = this.props; + + if (nextProps.match !== match) { const urlUser = userFromMatch(nextProps.match); - this.props.dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); + dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); } } @@ -91,23 +95,32 @@ class Search extends React.Component { } onKeyDown(event) { - const urlUser = userFromMatch(this.props.match); - const result = this.props.selectedResult || this.props.results[0]; + const { + selectedResult, + results, + match, + location, + history, + dispatch, + } = this.props; + + const urlUser = userFromMatch(match); + const result = selectedResult || results[0]; switch (event.key) { case 'ArrowUp': event.preventDefault(); - this.props.dispatch({ type: 'SEARCH/CHANGE_SELECTED_RESULT', relativeChange: -1 }); + dispatch({ type: 'SEARCH/CHANGE_SELECTED_RESULT', relativeChange: -1 }); break; case 'ArrowDown': event.preventDefault(); - this.props.dispatch({ type: 'SEARCH/CHANGE_SELECTED_RESULT', relativeChange: +1 }); + dispatch({ type: 'SEARCH/CHANGE_SELECTED_RESULT', relativeChange: +1 }); break; case 'Escape': event.preventDefault(); - this.props.dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); + dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); break; case 'Enter': @@ -116,9 +129,9 @@ class Search extends React.Component { // 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({ type: 'SEARCH/SET_USER', user: urlUser }); + dispatch({ type: 'SEARCH/SET_USER', user: urlUser }); } else if (result) { - setUser(result, this.props.location, this.props.history); + setUser(result, location, history); } break; @@ -140,9 +153,9 @@ class Search extends React.Component { const urlUser = userFromMatch(match); - const isExactMatch = - urlUser != null && - searchText === users.byId[urlUser].value; + const isExactMatch = ( + urlUser != null && searchText === users.byId[urlUser].value + ); return (
diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js index a8f5936..80ad754 100644 --- a/src/client/react/components/container/WeekSelector.js +++ b/src/client/react/components/container/WeekSelector.js @@ -39,40 +39,49 @@ class WeekSelector extends React.Component { }; getWeekText() { - const week = weekFromLocation(this.props.location); + const { location } = this.props; + 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}`; + switch (week) { + case currentWeek: + return `Huidige week • ${week}`; + case currentWeek + 1: + return `Volgende week • ${week}`; + case currentWeek - 1: + return `Vorige week • ${week}`; + default: + return `Week ${week}`; } - - return `Week ${week}`; } updateWeek(change) { - const week = weekFromLocation(this.props.location); + const { location, history } = this.props; + const week = weekFromLocation(location); const newWeek = purifyWeek(week + change); const isCurrentWeek = moment().week() === newWeek; setWeek( isCurrentWeek ? undefined : newWeek, - this.props.location, - this.props.history, + location, + history, ); } render() { return (
- -
{this.getWeekText()}
- + +
+ {this.getWeekText()} +
+
); } diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js index 6f9373f..4b9af64 100644 --- a/src/client/react/components/page/User.js +++ b/src/client/react/components/page/User.js @@ -37,7 +37,8 @@ class UserPage extends React.Component { }; render() { - const user = userFromMatch(this.props.match); + const { match } = this.props; + const user = userFromMatch(match); if (!user) { // Invalid user, redirect to index. diff --git a/src/client/react/components/presentational/IconFromUserType.js b/src/client/react/components/presentational/IconFromUserType.js index 3a7350c..0cb5154 100644 --- a/src/client/react/components/presentational/IconFromUserType.js +++ b/src/client/react/components/presentational/IconFromUserType.js @@ -37,7 +37,8 @@ class IconFromUserType extends React.Component { }; render() { - switch (this.props.userType) { + const { userType, defaultIcon } = this.props; + switch (userType) { case 'c': return ; case 't': @@ -47,8 +48,8 @@ class IconFromUserType extends React.Component { case 'r': return ; default: - if (this.props.defaultIcon) { - return this.props.defaultIcon; + if (defaultIcon) { + return defaultIcon; } throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.'); diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js index 900d3ac..d80554c 100644 --- a/src/client/react/components/presentational/Result.js +++ b/src/client/react/components/presentational/Result.js @@ -35,25 +35,25 @@ class Result extends React.Component { }; render() { + const { onClick, isSelected, userId } = this.props; + return ( /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */
- +
- {users.byId[this.props.userId].value} - {users.byId[this.props.userId].alt && + {users.byId[userId].value} + {users.byId[userId].alt && ( - {` ${users.byId[this.props.userId].alt}`} + {` ${users.byId[userId].alt}`} - } + )}
); diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js index 7823238..727a1f4 100644 --- a/src/client/react/components/presentational/Schedule.js +++ b/src/client/react/components/presentational/Schedule.js @@ -66,9 +66,10 @@ class Schedule extends React.Component { } render() { - const DOMPurify = createDOMPurify(window); + const { htmlStr } = this.props; - const cleanHTML = DOMPurify.sanitize(this.props.htmlStr, { + const DOMPurify = createDOMPurify(window); + const cleanHTML = DOMPurify.sanitize(htmlStr, { ADD_ATTR: ['rules'], }); -- cgit v1.1