Use classes instead of stateless functions for Components

4 files changed, 59 insertions, 49 deletions

diff --git a/src/client/react/components/presentational/IconFromUserType.js b/src/client/react/components/presentational/IconFromUserType.js
index ee0e04b..2ef95b7 100644
--- a/src/client/react/components/presentational/IconFromUserType.js
+++ b/src/client/react/components/presentational/IconFromUserType.js
@@ -5,33 +5,35 @@ import RoomIcon from 'react-icons/lib/md/room';
 import ClassIcon from 'react-icons/lib/md/group';
 import TeacherIcon from 'react-icons/lib/md/account-circle';
 
-const IconFromUserType = ({ userType, defaultIcon }) => {
-  switch (userType) {
-    case 'c':
-      return <ClassIcon />;
-    case 't':
-      return <TeacherIcon />;
-    case 's':
-      return <StudentIcon />;
-    case 'r':
-      return <RoomIcon />;
-    default:
-      if (defaultIcon) {
-        return defaultIcon;
-      }
+class IconFromUserType extends React.Component {
+  static propTypes = {
+    userType: PropTypes.string,
+    defaultIcon: PropTypes.element,
+  };
 
-      throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.');
-  }
-};
+  static defaultProps = {
+    userType: null,
+    defaultIcon: null,
+  };
 
-IconFromUserType.propTypes = {
-  userType: PropTypes.string,
-  defaultIcon: PropTypes.element,
-};
+  render() {
+    switch (this.props.userType) {
+      case 'c':
+        return <ClassIcon />;
+      case 't':
+        return <TeacherIcon />;
+      case 's':
+        return <StudentIcon />;
+      case 'r':
+        return <RoomIcon />;
+      default:
+        if (this.props.defaultIcon) {
+          return this.props.defaultIcon;
+        }
 
-IconFromUserType.defaultProps = {
-  userType: null,
-  defaultIcon: null,
-};
+        throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.');
+    }
+  }
+}
 
 export default IconFromUserType;
diff --git a/src/client/react/components/presentational/Loading.js b/src/client/react/components/presentational/Loading.js
index 84eaac7..2ab80da 100644
--- a/src/client/react/components/presentational/Loading.js
+++ b/src/client/react/components/presentational/Loading.js
@@ -1,5 +1,9 @@
 import React from 'react';
 
-const Loading = () => <div>Loading...</div>;
+class Loading extends React.Component {
+  render() {
+    return <div>Loading...</div>;
+  }
+}
 
 export default Loading;
diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js
index 6d39a80..a30cf52 100644
--- a/src/client/react/components/presentational/Result.js
+++ b/src/client/react/components/presentational/Result.js
@@ -5,25 +5,29 @@ import users from '../../users';
 
 import IconFromUserType from './IconFromUserType';
 
-const Result = ({ userId, isSelected, onClick }) => (
-  // eslint-disable-next-line
-  <div
-    className={classnames('search__result', {
-      'search__result--selected': isSelected,
-    })}
-    onClick={onClick}
-  >
-    <div className="search__icon-wrapper">
-      <IconFromUserType userType={users.byId[userId].type} />
-    </div>
-    <div className="search__result__text">{users.byId[userId].value}</div>
-  </div>
-);
+class Result extends React.Component {
+  static propTypes = {
+    userId: PropTypes.string.isRequired,
+    isSelected: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+  };
 
-Result.propTypes = {
-  userId: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
+  render() {
+    return (
+      // eslint-disable-next-line
+      <div
+        className={classnames('search__result', {
+          'search__result--selected': this.props.isSelected,
+        })}
+        onClick={this.props.onClick}
+      >
+        <div className="search__icon-wrapper">
+          <IconFromUserType userType={users.byId[this.props.userId].type} />
+        </div>
+        <div className="search__result__text">{users.byId[this.props.userId].value}</div>
+      </div>
+    );
+  }
+}
 
 export default Result;
diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js
index 3f17adc..85cf72f 100644
--- a/src/client/react/components/presentational/Schedule.js
+++ b/src/client/react/components/presentational/Schedule.js
@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 import createDOMPurify from 'dompurify';
 
 class Schedule extends React.Component {
+  static propTypes = {
+    htmlStr: PropTypes.string.isRequired,
+  };
+
   constructor(props) {
     super(props);
 
@@ -58,8 +62,4 @@ class Schedule extends React.Component {
   }
 }
 
-Schedule.propTypes = {
-  htmlStr: PropTypes.string.isRequired,
-};
-
 export default Schedule;