Update code to comply with new styling

10 files changed, 142 insertions, 75 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'],
     });