aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/container
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components/container')
-rw-r--r--src/client/react/components/container/HelpBox.js3
-rw-r--r--src/client/react/components/container/Menu.js38
-rw-r--r--src/client/react/components/container/Results.js29
-rw-r--r--src/client/react/components/container/RoomFinder.js34
-rw-r--r--src/client/react/components/container/Search.js41
-rw-r--r--src/client/react/components/container/WeekSelector.js39
6 files changed, 124 insertions, 60 deletions
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 <div />;
}
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 (
<div className="Menu">
<SimpleMenu
- handle={<Button><ButtonIcon use="more_vert" /></Button>}
+ handle={(
+ <Button>
+ <ButtonIcon use="more_vert" />
+ </Button>
+)}
onSelected={(event) => {
// Send the `data-type` of the selected <MenuItem />
this.onItemSelected(event.detail.item.dataset.type);
}}
>
- <MenuItem data-type="add_label"><Icon use="bookmark_border" />Voeg label toe</MenuItem>
- <MenuItem data-type="make_favorite"><Icon use="star_border" />Maak favoriet</MenuItem>
+ <MenuItem data-type="add_label">
+ <Icon use="bookmark_border" />
+Voeg label toe
+ </MenuItem>
+ <MenuItem data-type="make_favorite">
+ <Icon use="star_border" />
+Maak favoriet
+ </MenuItem>
<div className="mdc-list-divider" role="separator" />
- <MenuItem data-type="room_finder"><Icon use="location_searching" />Lokaal zoeken</MenuItem>
- <MenuItem data-type="use_legacy_schedule"><Icon use="launch" />Oud rooster gebruiken</MenuItem>
+ <MenuItem data-type="room_finder">
+ <Icon use="location_searching" />
+Lokaal zoeken
+ </MenuItem>
+ <MenuItem data-type="use_legacy_schedule">
+ <Icon use="launch" />
+Oud rooster gebruiken
+ </MenuItem>
</SimpleMenu>
</div>
);
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 (
<div
className={classnames('Results', {
- hasResults: !isExactMatch && this.props.results.length > 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 => (
<Result
key={userId}
userId={userId}
- isSelected={userId === this.props.selectedResult}
+ isSelected={userId === selectedResult}
onClick={() => {
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 <div />;
}
return (
<div className="RoomFinder">
- <Button onClick={() => this.changeRoom(-1)}>Vorige</Button>
- <Button onClick={() => this.changeRoom(+1)}>Volgende</Button>
+ <Button onClick={() => this.changeRoom(-1)}>
+ Vorige
+ </Button>
+ <Button onClick={() => this.changeRoom(+1)}>
+ Volgende
+ </Button>
<div className="grow" />
<Button
className="closeButton"
- onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/HIDE' })}
+ onClick={() => dispatch({ type: 'ROOM_FINDER/HIDE' })}
>
<ButtonIcon use="close" />
</Button>
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 (
<div className="Search">
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 (
<div className="WeekSelector">
- <button onClick={() => this.updateWeek(-1)}><ArrowBackIcon /></button>
- <div className="text">{this.getWeekText()}</div>
- <button onClick={() => this.updateWeek(+1)}><ArrowForwardIcon /></button>
+ <button type="button" onClick={() => this.updateWeek(-1)}>
+ <ArrowBackIcon />
+ </button>
+ <div className="text">
+ {this.getWeekText()}
+ </div>
+ <button type="button" onClick={() => this.updateWeek(+1)}>
+ <ArrowForwardIcon />
+ </button>
</div>
);
}
generated by cgit v1.1 at 2024-12-26 19:06:40 +0000