From 315adeb5e2012b7f7bcfcd1478f9d6dd2cc1092d Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
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 ++++++++++++--------
 6 files changed, 124 insertions(+), 60 deletions(-)

(limited to 'src/client/react/components/container')

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>
     );
   }
-- 
cgit v1.1