Use classes instead of stateless functions for Components

2 files changed, 39 insertions, 33 deletions

diff --git a/src/client/react/components/page/Index.js b/src/client/react/components/page/Index.js
index e5e47c5..c48ebe0 100644
--- a/src/client/react/components/page/Index.js
+++ b/src/client/react/components/page/Index.js
@@ -2,14 +2,18 @@ import React from 'react';
 import Search from '../container/Search';
 import HelpBox from '../container/HelpBox';
 
-const IndexPage = () => (
-  <div className="page-index">
-    <div className="container">
-      <img src="/icons/mml-logo.png" alt="Metis" />
-      <Search />
-      <HelpBox />
-    </div>
-  </div>
-);
+class IndexPage extends React.Component {
+  render() {
+    return (
+      <div className="page-index">
+        <div className="container">
+          <img src="/icons/mml-logo.png" alt="Metis" />
+          <Search />
+          <HelpBox />
+        </div>
+      </div>
+    );
+  }
+}
 
 export default IndexPage;
diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js
index ae1dcc2..b520f90 100644
--- a/src/client/react/components/page/User.js
+++ b/src/client/react/components/page/User.js
@@ -6,34 +6,36 @@ import View from '../container/View';
 import { userFromMatch } from '../../lib/url';
 import WeekSelector from '../container/WeekSelector';
 
-const UserPage = ({ match }) => {
-  const user = userFromMatch(match);
+class UserPage extends React.Component {
+  static propTypes = {
+    // react-router
+    match: PropTypes.object.isRequired,
+  };
 
-  if (!user) {
-    // Invalid user, redirect to index.
-    return <Redirect to="/" />;
-  }
+  render() {
+    const user = userFromMatch(this.props.match);
+
+    if (!user) {
+      // Invalid user, redirect to index.
+      return <Redirect to="/" />;
+    }
 
-  return (
-    <div className="page-user">
-      <div className="search-wrapper">
-        <div className="search-container">
-          <Search />
+    return (
+      <div className="page-user">
+        <div className="search-wrapper">
+          <div className="search-container">
+            <Search />
+          </div>
         </div>
-      </div>
-      <div className="menu">
-        <div className="menu-container">
-          <WeekSelector />
+        <div className="menu">
+          <div className="menu-container">
+            <WeekSelector />
+          </div>
         </div>
+        <View />
       </div>
-      <View />
-    </div>
-  );
-};
-
-UserPage.propTypes = {
-  // react-router
-  match: PropTypes.object.isRequired,
-};
+    );
+  }
+}
 
 export default UserPage;