Make Groups functional

jsx/src/components/Groups/Groups.js

@@ -1,7 +1,7 @@
 import { compose, withProps } from "recompose";
 import { connect } from "react-redux";
 import { jhapiRequest } from "../../util/jhapiUtil";
-import { Groups } from "./Groups.pre";
+import Groups from "./Groups.pre";
 
 const withGroupsAPI = withProps((props) => ({
   refreshGroupsData: () =>

jsx/src/components/Groups/Groups.pre.jsx

@@ -2,27 +2,14 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
-export class Groups extends Component {
-  static get propTypes() {
-    return {
-      user_data: PropTypes.array,
-      groups_data: PropTypes.array,
-      refreshUserData: PropTypes.func,
-      refreshGroupsData: PropTypes.func,
-    };
-  }
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
+const Groups = (props) => {
   var {
     user_data,
     groups_data,
     refreshGroupsData,
     refreshUserData,
-    } = this.props;
+    history
+  } = props;
 
   if (!groups_data || !user_data) {
     return <div></div>;
@@ -72,7 +59,7 @@ export class Groups extends Component {
               <button
                 className="btn btn-primary adjacent-span-spacing"
                 onClick={() => {
-                    this.props.history.push("/create-group");
+                  history.push("/create-group");
                 }}
               >
                 New Group
@@ -83,5 +70,13 @@ export class Groups extends Component {
       </div>
     </div>
   );
-  }
-}
+};
+
+Groups.propTypes = {
+  user_data: PropTypes.array,
+  groups_data: PropTypes.array,
+  refreshUserData: PropTypes.func,
+  refreshGroupsData: PropTypes.func,
+};
+
+export default Groups;