Lint and make App (Component) functional

jsx/src/App.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useEffect } from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
@@ -17,11 +17,10 @@ import EditUser from "./components/EditUser/EditUser";
 
 import "./style/root.css";
 
-const store = createStore(reducers, initialState),
+const store = createStore(reducers, initialState)
-  routerHistory = createBrowserHistory();
 
-class App extends Component {
+const App = (props) => {
-  componentDidMount() {
+  useEffect(() => {
     jhapiRequest("/users", "GET")
       .then((data) => data.json())
       .then((data) => store.dispatch({ type: "USER_DATA", value: data }))
@@ -31,26 +30,24 @@ class App extends Component {
       .then((data) => data.json())
       .then((data) => store.dispatch({ type: "GROUPS_DATA", value: data }))
       .catch((err) => console.log(err));
-  }
+  });
 
-  render() {
+  return (
-    return (
+    <div className="resets">
-      <div className="resets">
+      <Provider store={store}>
-        <Provider store={store}>
+        <HashRouter>
-          <HashRouter>
+          <Switch>
-            <Switch>
+            <Route exact path="/" component={ServerDashboard} />
-              <Route exact path="/" component={ServerDashboard} />
+            <Route exact path="/groups" component={Groups} />
-              <Route exact path="/groups" component={Groups} />
+            <Route exact path="/group-edit" component={GroupEdit} />
-              <Route exact path="/group-edit" component={GroupEdit} />
+            <Route exact path="/create-group" component={CreateGroup} />
-              <Route exact path="/create-group" component={CreateGroup} />
+            <Route exact path="/add-users" component={AddUser} />
-              <Route exact path="/add-users" component={AddUser} />
+            <Route exact path="/edit-user" component={EditUser} />
-              <Route exact path="/edit-user" component={EditUser} />
+          </Switch>
-            </Switch>
+        </HashRouter>
-          </HashRouter>
+      </Provider>
-        </Provider>
+    </div>
-      </div>
+  );
-    );
+};
-  }
-}
 
 ReactDOM.render(<App />, document.getElementById("react-admin-hook"));

jsx/src/components/AddUser/AddUser.test.js

@@ -19,27 +19,27 @@ describe("AddUser Component: ", () => {
   );
 
   it("Renders", () => {
-    let component = shallow(addUserJsx(mockAsync()))
+    let component = shallow(addUserJsx(mockAsync()));
-    expect(component.find(".container").length).toBe(1)
+    expect(component.find(".container").length).toBe(1);
-  })
+  });
 
   it("Removes users when they fail Regex", () => {
     let callbackSpy = mockAsync(),
       component = shallow(addUserJsx(callbackSpy)),
-      textarea = component.find("textarea").first()
+      textarea = component.find("textarea").first();
-    textarea.simulate("blur", { target: { value: "foo\nbar\n!!*&*"}})
+    textarea.simulate("blur", { target: { value: "foo\nbar\n!!*&*" } });
-    let submit = component.find("#submit")
+    let submit = component.find("#submit");
-    submit.simulate("click")
+    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenCalledWith(["foo", "bar"], false)
+    expect(callbackSpy).toHaveBeenCalledWith(["foo", "bar"], false);
-  })
+  });
 
   it("Correctly submits admin", () => {
     let callbackSpy = mockAsync(),
       component = shallow(addUserJsx(callbackSpy)),
-      input = component.find("input").first()
+      input = component.find("input").first();
-    input.simulate("change", { target: { checked: true }})
+    input.simulate("change", { target: { checked: true } });
-    let submit = component.find("#submit")
+    let submit = component.find("#submit");
-    submit.simulate("click")
+    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenCalledWith([], true)
+    expect(callbackSpy).toHaveBeenCalledWith([], true);
-  })
+  });
 });

jsx/src/components/CreateGroup/CreateGroup.test.js

@@ -9,26 +9,27 @@ describe("CreateGroup Component: ", () => {
   var mockAsync = () =>
     jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
 
-  var createGroupJsx = (callbackSpy) => 
+  var createGroupJsx = (callbackSpy) => (
     <CreateGroup
       createGroup={callbackSpy}
       refreshGroupsData={callbackSpy}
-      history={{push: () => {}}}
+      history={{ push: () => {} }}
     />
+  );
 
   it("Renders", () => {
-    let component = shallow(createGroupJsx())
+    let component = shallow(createGroupJsx());
-    expect(component.find(".container").length).toBe(1)
+    expect(component.find(".container").length).toBe(1);
-  })
+  });
 
   it("Calls createGroup and refreshGroupsData on submit", () => {
     let callbackSpy = mockAsync(),
       component = shallow(createGroupJsx(callbackSpy)),
       input = component.find("input").first(),
-      submit = component.find("#submit").first()
+      submit = component.find("#submit").first();
-    input.simulate("change", { target: { value: "" } })
+    input.simulate("change", { target: { value: "" } });
-    submit.simulate("click")
+    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenNthCalledWith(1, "")
+    expect(callbackSpy).toHaveBeenNthCalledWith(1, "");
-    expect(callbackSpy).toHaveBeenNthCalledWith(2)
+    expect(callbackSpy).toHaveBeenNthCalledWith(2);
-  })
+  });
-})
+});

jsx/src/components/EditUser/EditUser.js

@@ -15,7 +15,7 @@ const withUserAPI = withProps((props) => ({
       "Cannot change username - either contains special characters or is too short."
     ),
   noChangeEvent: () => {
-    returns
+    returns;
   },
   refreshUserData: () =>
     jhapiRequest("/users", "GET")

jsx/src/components/EditUser/EditUser.pre.jsx

@@ -81,7 +81,7 @@ const EditUser = (props) => {
                   className="btn btn-primary"
                   onClick={() => {
                     if (updatedUsername == "" && admin == has_admin) {
-                      noChangeEvent()
+                      noChangeEvent();
                       return;
                     } else if (updatedUsername != "") {
                       if (
@@ -136,6 +136,7 @@ EditUser.propTypes = {
   editUser: PropTypes.func,
   deleteUser: PropTypes.func,
   failRegexEvent: PropTypes.func,
+  noChangeEvent: PropTypes.func,
   refreshUserData: PropTypes.func,
 };
 

jsx/src/components/GroupEdit/GroupEdit.test.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Enzyme, { mount, shallow } from "enzyme";
 import GroupEdit from "./GroupEdit.pre";
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-import { HashRouter } from 'react-router-dom'
+import { HashRouter } from "react-router-dom";
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -10,7 +10,7 @@ describe("GroupEdit Component: ", () => {
   var mockAsync = () =>
     jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
 
-  var groupEditJsx = (callbackSpy) => 
+  var groupEditJsx = (callbackSpy) => (
     <GroupEdit
       location={{
         state: {
@@ -25,38 +25,37 @@ describe("GroupEdit Component: ", () => {
       history={{ push: (a) => callbackSpy }}
       refreshGroupsData={() => {}}
     />
-  
+  );
+
   var deepGroupEditJsx = (callbackSpy) => (
-    <HashRouter>
+    <HashRouter>{groupEditJsx(callbackSpy)}</HashRouter>
-      {groupEditJsx(callbackSpy)}
-    </HashRouter>
   );
 
   it("Adds a newly selected user to group on submit", () => {
     let callbackSpy = mockAsync(),
       component = mount(deepGroupEditJsx(callbackSpy)),
       unselected = component.find(".unselected"),
-      submit = component.find("#submit")
+      submit = component.find("#submit");
-    unselected.simulate("click")
+    unselected.simulate("click");
-    submit.simulate("click")
+    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenCalledWith(['bar'], "group")
+    expect(callbackSpy).toHaveBeenCalledWith(["bar"], "group");
-  })
+  });
 
   it("Removes a user from group on submit", () => {
     let callbackSpy = mockAsync(),
       component = mount(deepGroupEditJsx(callbackSpy)),
       selected = component.find(".selected"),
-      submit = component.find("#submit")
+      submit = component.find("#submit");
-    selected.simulate("click")
+    selected.simulate("click");
-    submit.simulate("click")
+    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenCalledWith(['foo'], "group")
+    expect(callbackSpy).toHaveBeenCalledWith(["foo"], "group");
-  })
+  });
 
   it("Calls deleteGroup on button click", () => {
     let callbackSpy = mockAsync(),
       component = shallow(groupEditJsx(callbackSpy)),
-      deleteGroup = component.find("#delete-group").first()
+      deleteGroup = component.find("#delete-group").first();
-    deleteGroup.simulate("click")
+    deleteGroup.simulate("click");
-    expect(callbackSpy).toHaveBeenCalled()
+    expect(callbackSpy).toHaveBeenCalled();
-  })
+  });
 });

jsx/src/components/Multiselect/Multiselect.test.js

@@ -8,7 +8,8 @@ Enzyme.configure({ adapter: new Adapter() });
 describe("Multiselect Component: ", () => {
   var multiselectJsx = () => (
     <Multiselect
-      options={["foo", "bar", "wombat"]}s
+      options={["foo", "bar", "wombat"]}
+      s
       value={["wombat"]}
       onChange={() => {}}
     />