aboutsummaryrefslogtreecommitdiff
path: root/src/client/react
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react')
-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
-rw-r--r--src/client/react/components/page/User.js3
-rw-r--r--src/client/react/components/presentational/IconFromUserType.js7
-rw-r--r--src/client/react/components/presentational/Result.js18
-rw-r--r--src/client/react/components/presentational/Schedule.js5
-rw-r--r--src/client/react/lib/getSearchResults.js1
-rw-r--r--src/client/react/reducers.js10
12 files changed, 146 insertions, 82 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>
);
}
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 <ClassIcon />;
case 't':
@@ -47,8 +48,8 @@ class IconFromUserType extends React.Component {
case 'r':
return <RoomIcon />;
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 */
<div
- className={classnames('Result', {
- isSelected: this.props.isSelected,
- })}
- onClick={this.props.onClick}
+ className={classnames('Result', { isSelected })}
+ onClick={onClick}
>
<div className="iconWrapper">
- <IconFromUserType userType={users.byId[this.props.userId].type} />
+ <IconFromUserType userType={users.byId[userId].type} />
</div>
<div className="text">
- {users.byId[this.props.userId].value}
- {users.byId[this.props.userId].alt &&
+ {users.byId[userId].value}
+ {users.byId[userId].alt && (
<span className="alt">
- {` ${users.byId[this.props.userId].alt}`}
+ {` ${users.byId[userId].alt}`}
</span>
- }
+ )}
</div>
</div>
);
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'],
});
diff --git a/src/client/react/lib/getSearchResults.js b/src/client/react/lib/getSearchResults.js
index fa012ac..fafbd0b 100644
--- a/src/client/react/lib/getSearchResults.js
+++ b/src/client/react/lib/getSearchResults.js
@@ -19,4 +19,3 @@ function getSearchResults(query) {
}
export default getSearchResults;
-
diff --git a/src/client/react/reducers.js b/src/client/react/reducers.js
index e2b8448..37d26f2 100644
--- a/src/client/react/reducers.js
+++ b/src/client/react/reducers.js
@@ -87,8 +87,7 @@ function reducer(state = DEFAULT_STATE, action) {
case 'SEARCH/CHANGE_SELECTED_RESULT': {
const prevSelectedResult = state.search.selected;
const prevSelectedResultIndex = state.search.results.indexOf(prevSelectedResult);
- let nextSelectedResultIndex =
- prevSelectedResultIndex + action.relativeChange;
+ let nextSelectedResultIndex = prevSelectedResultIndex + action.relativeChange;
if (nextSelectedResultIndex < -1) {
nextSelectedResultIndex = state.search.results.length - 1;
@@ -96,10 +95,9 @@ function reducer(state = DEFAULT_STATE, action) {
nextSelectedResultIndex = -1;
}
- const nextSelectedResult =
- nextSelectedResultIndex === -1
- ? null
- : state.search.results[nextSelectedResultIndex];
+ const nextSelectedResult = nextSelectedResultIndex === -1
+ ? null
+ : state.search.results[nextSelectedResultIndex];
return {
...state,
generated by cgit v1.1 at 2024-12-27 07:42:11 +0000