Make ServerDashboard functional

jsx/src/components/ServerDashboard/ServerDashboard.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { compose, withProps, withHandlers } from "recompose";
 import { connect } from "react-redux";
 import { jhapiRequest } from "../../util/jhapiUtil";
-import { ServerDashboard } from "./ServerDashboard.pre";
+import ServerDashboard from "./ServerDashboard.pre";
 
 const withHubActions = withProps((props) => ({
   updateUsers: (cb) => jhapiRequest("/users", "GET"),

jsx/src/components/ServerDashboard/ServerDashboard.pre.jsx

@@ -1,53 +1,31 @@
-import React, { Component } from "react";
-import { Table, Button } from "react-bootstrap";
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import "./server-dashboard.css";
 import { timeSince } from "../../util/timeSince";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 import PropTypes from "prop-types";
 
-export class ServerDashboard extends Component {
-  static get propTypes() {
-    return {
-      user_data: PropTypes.array,
-      updateUsers: PropTypes.func,
-      shutdownHub: PropTypes.func,
-      startServer: PropTypes.func,
-      stopServer: PropTypes.func,
-      startAll: PropTypes.func,
-      stopAll: PropTypes.func,
-      dispatch: PropTypes.func,
-      history: PropTypes.shape({
-        push: PropTypes.func,
-      }),
-    };
-  }
-
-  constructor(props) {
-    super(props);
-
-    (this.usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1))),
-      (this.usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1))),
-      (this.adminDesc = (e) => e.sort((a) => (a.admin ? -1 : 1))),
-      (this.adminAsc = (e) => e.sort((a) => (a.admin ? 1 : -1))),
-      (this.dateDesc = (e) =>
+const ServerDashboard = (props) => {
+  // sort methods
+  var usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1)),
+    usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1)),
+    adminDesc = (e) => e.sort((a) => (a.admin ? -1 : 1)),
+    adminAsc = (e) => e.sort((a) => (a.admin ? 1 : -1)),
+    dateDesc = (e) =>
       e.sort((a, b) =>
         new Date(a.last_activity) - new Date(b.last_activity) > 0 ? -1 : 1
-        )),
-      (this.dateAsc = (e) =>
+      ),
+    dateAsc = (e) =>
       e.sort((a, b) =>
         new Date(a.last_activity) - new Date(b.last_activity) > 0 ? 1 : -1
-        )),
-      (this.runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1))),
-      (this.runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1)));
+      ),
+    runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1)),
+    runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1));
 
-    this.state = {
-      addUser: false,
-      sortMethod: undefined,
-    };
-  }
+  var [addUser, setAddUser] = useState(false),
+    [sortMethod, setSortMethod] = useState(undefined);
 
-  render() {
   var {
     user_data,
     updateUsers,
@@ -56,8 +34,9 @@ export class ServerDashboard extends Component {
     stopServer,
     startAll,
     stopAll,
+    history,
     dispatch,
-    } = this.props;
+  } = props;
 
   var dispatchUserUpdate = (data) => {
     dispatch({
@@ -68,15 +47,11 @@ export class ServerDashboard extends Component {
 
   if (!user_data) return <div></div>;
 
-    if (this.state.sortMethod != undefined)
-      user_data = this.state.sortMethod(user_data);
+  if (sortMethod != undefined) user_data = sortMethod(user_data);
 
   return (
     <div className="container">
-        <div
-          className="manage-groups"
-          style={{ float: "right", margin: "20px" }}
-        >
+      <div className="manage-groups" style={{ float: "right", margin: "20px" }}>
         <Link to="/groups">{"> Manage Groups"}</Link>
       </div>
       <div className="server-dashboard-container">
@@ -86,45 +61,29 @@ export class ServerDashboard extends Component {
               <th id="user-header">
                 User{" "}
                 <SortHandler
-                    sorts={{ asc: this.usernameAsc, desc: this.usernameDesc }}
-                    callback={(e) =>
-                      this.setState(
-                        Object.assign({}, this.state, { sortMethod: e })
-                      )
-                    }
+                  sorts={{ asc: usernameAsc, desc: usernameDesc }}
+                  callback={(method) => setSortMethod(method)}
                 />
               </th>
               <th id="admin-header">
                 Admin{" "}
                 <SortHandler
-                    sorts={{ asc: this.adminAsc, desc: this.adminDesc }}
-                    callback={(e) =>
-                      this.setState(
-                        Object.assign({}, this.state, { sortMethod: e })
-                      )
-                    }
+                  sorts={{ asc: adminAsc, desc: adminDesc }}
+                  callback={(method) => setSortMethod(method)}
                 />
               </th>
               <th id="last-activity-header">
                 Last Activity{" "}
                 <SortHandler
-                    sorts={{ asc: this.dateAsc, desc: this.dateDesc }}
-                    callback={(e) =>
-                      this.setState(
-                        Object.assign({}, this.state, { sortMethod: e })
-                      )
-                    }
+                  sorts={{ asc: dateAsc, desc: dateDesc }}
+                  callback={(method) => setSortMethod(method)}
                 />
               </th>
               <th id="running-status-header">
                 Running{" "}
                 <SortHandler
-                    sorts={{ asc: this.runningAsc, desc: this.runningDesc }}
-                    callback={(e) =>
-                      this.setState(
-                        Object.assign({}, this.state, { sortMethod: e })
-                      )
-                    }
+                  sorts={{ asc: runningAsc, desc: runningDesc }}
+                  callback={(method) => setSortMethod(method)}
                 />
               </th>
               <th id="actions-header">Actions</th>
@@ -247,7 +206,7 @@ export class ServerDashboard extends Component {
                     className="btn btn-primary btn-xs"
                     style={{ marginRight: 20 }}
                     onClick={() =>
-                        this.props.history.push({
+                      history.push({
                         pathname: "/edit-user",
                         state: {
                           username: e.name,
@@ -266,51 +225,57 @@ export class ServerDashboard extends Component {
       </div>
     </div>
   );
-  }
-}
-
-class SortHandler extends Component {
-  static get propTypes() {
-    return {
-      sorts: PropTypes.object,
-      callback: PropTypes.func,
 };
-  }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      direction: undefined,
+ServerDashboard.propTypes = {
+  user_data: PropTypes.array,
+  updateUsers: PropTypes.func,
+  shutdownHub: PropTypes.func,
+  startServer: PropTypes.func,
+  stopServer: PropTypes.func,
+  startAll: PropTypes.func,
+  stopAll: PropTypes.func,
+  dispatch: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
 };
-  }
 
-  render() {
-    let { sorts, callback } = this.props;
+const SortHandler = (props) => {
+  var { sorts, callback } = props;
+
+  var [direction, setDirection] = useState(undefined);
 
   return (
     <div
       className="sort-icon"
       onClick={() => {
-          if (!this.state.direction) {
+        if (!direction) {
           callback(sorts.desc);
-            this.setState({ direction: "desc" });
-          } else if (this.state.direction == "asc") {
+          setDirection("desc");
+        } else if (direction == "asc") {
           callback(sorts.desc);
-            this.setState({ direction: "desc" });
+          setDirection("desc");
         } else {
           callback(sorts.asc);
-            this.setState({ direction: "asc" });
+          setDirection("asc");
         }
       }}
     >
-        {!this.state.direction ? (
+      {!direction ? (
         <FaSort />
-        ) : this.state.direction == "asc" ? (
+      ) : direction == "asc" ? (
         <FaSortDown />
       ) : (
         <FaSortUp />
       )}
     </div>
   );
-  }
-}
+};
+
+SortHandler.propTypes = {
+  sorts: PropTypes.object,
+  callback: PropTypes.func,
+};
+
+export default ServerDashboard;