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,86 +2,81 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
-export class Groups extends Component {
+const Groups = (props) => {
-  static get propTypes() {
+  var {
-    return {
+    user_data,
-      user_data: PropTypes.array,
+    groups_data,
-      groups_data: PropTypes.array,
+    refreshGroupsData,
-      refreshUserData: PropTypes.func,
+    refreshUserData,
-      refreshGroupsData: PropTypes.func,
+    history
-    };
+  } = props;
+
+  if (!groups_data || !user_data) {
+    return <div></div>;
   }
 
-  constructor(props) {
+  return (
-    super(props);
+    <div className="container">
-  }
+      <div className="row">
-
+        <div className="col-md-12 col-lg-10 col-lg-offset-1">
-  render() {
+          <div className="panel panel-default">
-    var {
+            <div className="panel-heading">
-      user_data,
+              <h4>Groups</h4>
-      groups_data,
+            </div>
-      refreshGroupsData,
+            <div className="panel-body">
-      refreshUserData,
+              {groups_data.length > 0 ? (
-    } = this.props;
+                groups_data.map((e, i) => (
-
+                  <div key={"group-edit" + i} className="group-edit-link">
-    if (!groups_data || !user_data) {
+                    <h4>
-      return <div></div>;
+                      <Link
-    }
+                        to={{
-
+                          pathname: "/group-edit",
-    return (
+                          state: {
-      <div className="container">
+                            group_data: e,
-        <div className="row">
+                            user_data: user_data,
-          <div className="col-md-12 col-lg-10 col-lg-offset-1">
+                            callback: () => {
-            <div className="panel panel-default">
+                              refreshGroupsData();
-              <div className="panel-heading">
+                              refreshUserData();
-                <h4>Groups</h4>
-              </div>
-              <div className="panel-body">
-                {groups_data.length > 0 ? (
-                  groups_data.map((e, i) => (
-                    <div key={"group-edit" + i} className="group-edit-link">
-                      <h4>
-                        <Link
-                          to={{
-                            pathname: "/group-edit",
-                            state: {
-                              group_data: e,
-                              user_data: user_data,
-                              callback: () => {
-                                refreshGroupsData();
-                                refreshUserData();
-                              },
                             },
-                          }}
+                          },
-                        >
+                        }}
-                          {e.name}
+                      >
-                        </Link>
+                        {e.name}
-                      </h4>
+                      </Link>
-                    </div>
+                    </h4>
-                  ))
-                ) : (
-                  <div>
-                    <h4>no groups created...</h4>
                   </div>
-                )}
+                ))
-              </div>
+              ) : (
-              <div className="panel-footer">
+                <div>
-                <button className="btn btn-light adjacent-span-spacing">
+                  <h4>no groups created...</h4>
-                  <Link to="/">Back</Link>
+                </div>
-                </button>
+              )}
-                <button
+            </div>
-                  className="btn btn-primary adjacent-span-spacing"
+            <div className="panel-footer">
-                  onClick={() => {
+              <button className="btn btn-light adjacent-span-spacing">
-                    this.props.history.push("/create-group");
+                <Link to="/">Back</Link>
-                  }}
+              </button>
-                >
+              <button
-                  New Group
+                className="btn btn-primary adjacent-span-spacing"
-                </button>
+                onClick={() => {
-              </div>
+                  history.push("/create-group");
+                }}
+              >
+                New Group
+              </button>
             </div>
           </div>
         </div>
       </div>
-    );
+    </div>
-  }
+  );
-}
+};
+
+Groups.propTypes = {
+  user_data: PropTypes.array,
+  groups_data: PropTypes.array,
+  refreshUserData: PropTypes.func,
+  refreshGroupsData: PropTypes.func,
+};
+
+export default Groups;