Use redux hooks on admin components

frontend/js/components/admins/modules.js

@@ -1,28 +1,20 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { getAdminModules } from "../../actions/admins";
 
 import Modules from "../modules/modules";
 
-const AdminModulesConnected = ({ modules, loading, getAdminModules }) => {
+export const AdminModules = () => {
+  const dispatch = useDispatch();
+
+  const loading = useSelector((state) =>
+    state.adminStore.get("fetchingModules")
+  );
+  const modules = useSelector((state) => state.adminStore.get("modules"));
+
   useEffect(() => {
-    getAdminModules();
-  }, [getAdminModules]);
+    dispatch(getAdminModules());
+  }, [dispatch]);
 
   return <Modules modules={modules} isLoading={loading} />;
 };
-AdminModulesConnected.propTypes = {
-  modules: PropTypes.object,
-  loading: PropTypes.bool,
-  getAdminModules: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  loading: state.adminStore.get("fetchingModules"),
-  modules: state.adminStore.get("modules"),
-});
-
-export const AdminModules = connect(mapStateToProps, { getAdminModules })(
-  AdminModulesConnected
-);

frontend/js/components/admins/stats.js

@@ -1,15 +1,17 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { Stat } from "./stat";
 
 import { getStats } from "../../actions/admins";
 
-const StatsConnected = ({ stats, getStats }) => {
+export const Stats = () => {
+  const dispatch = useDispatch();
+  const stats = useSelector((state) => state.adminStore.get("stats"));
+
   useEffect(() => {
-    getStats();
-  }, [getStats]);
+    dispatch(getStats());
+  }, [dispatch]);
 
   return (
     <div className="row d-flex flex-wrap">
@@ -34,13 +36,3 @@ const StatsConnected = ({ stats, getStats }) => {
     </div>
   );
 };
-StatsConnected.propTypes = {
-  stats: PropTypes.object,
-  getStats: PropTypes.func,
-};
-
-const mapStateToProps = (state) => ({
-  stats: state.adminStore.get("stats"),
-});
-
-export const Stats = connect(mapStateToProps, { getStats })(StatsConnected);

frontend/js/components/admins/userEdit.js

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { List } from "immutable";
+import { useSelector, useDispatch } from "react-redux";
 
 import { updateUser, deleteUser } from "../../actions/admins";
 
@@ -11,7 +10,7 @@ import { PolochonSelect } from "../polochons/select";
 import { FormModal } from "../forms/modal";
 import { FormInput } from "../forms/input";
 
-const UserEditConnect = ({
+export const UserEdit = ({
   id,
   name,
   admin: initAdmin,
@@ -19,10 +18,10 @@ const UserEditConnect = ({
   polochonToken,
   polochonId: initPolochonId,
   polochonActivated: initPolochonActivated,
-  updateUser,
-  deleteUser,
-  publicPolochons,
 }) => {
+  const dispatch = useDispatch();
+  const publicPolochons = useSelector((state) => state.polochon.get("public"));
+
   const [modal, setModal] = useState(false);
   const [admin, setAdmin] = useState(initAdmin);
   const [activated, setActivated] = useState(initActivated);
@@ -38,15 +37,17 @@ const UserEditConnect = ({
     if (e) {
       e.preventDefault();
     }
-    updateUser({
-      userId: id,
-      polochonToken: token,
-      admin,
-      activated,
-      polochonId,
-      polochonActivated,
-      password,
-    });
+    dispatch(
+      updateUser({
+        userId: id,
+        polochonToken: token,
+        admin,
+        activated,
+        polochonId,
+        polochonActivated,
+        password,
+      })
+    );
     setModal(false);
   };
 
@@ -55,7 +56,7 @@ const UserEditConnect = ({
       e.preventDefault();
     }
     if (confirmDelete) {
-      deleteUser(name);
+      dispatch(deleteUser(name));
       setModal(false);
     } else {
       setConfirmDelete(true);
@@ -137,23 +138,12 @@ const UserEditConnect = ({
     </span>
   );
 };
-UserEditConnect.propTypes = {
+UserEdit.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string,
   activated: PropTypes.bool,
   admin: PropTypes.bool,
-  updateUser: PropTypes.func,
-  deleteUser: PropTypes.func,
   polochonToken: PropTypes.string,
   polochonId: PropTypes.string,
   polochonActivated: PropTypes.bool,
-  publicPolochons: PropTypes.instanceOf(List),
 };
-
-const mapStateToProps = (state) => ({
-  publicPolochons: state.polochon.get("public"),
-});
-
-export const UserEdit = connect(mapStateToProps, { updateUser, deleteUser })(
-  UserEditConnect
-);

frontend/js/components/admins/userList.js

@@ -1,23 +1,19 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { List } from "immutable";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { User } from "./user";
 
 import { getUsers } from "../../actions/admins";
 import { getPolochons } from "../../actions/polochon";
 
-const mapStateToProps = (state) => ({
-  users: state.adminStore.get("users"),
-});
-const mapDispatchToProps = { getUsers, getPolochons };
+export const UserList = () => {
+  const dispatch = useDispatch();
+  const users = useSelector((state) => state.adminStore.get("users"));
 
-const UserListConnect = ({ users, getUsers, getPolochons }) => {
   useEffect(() => {
-    getUsers();
-    getPolochons();
-  }, [getUsers, getPolochons]);
+    dispatch(getUsers());
+    dispatch(getPolochons());
+  }, [dispatch]);
 
   return (
     <div className="table-responsive my-2">
@@ -54,13 +50,3 @@ const UserListConnect = ({ users, getUsers, getPolochons }) => {
     </div>
   );
 };
-UserListConnect.propTypes = {
-  getUsers: PropTypes.func,
-  getPolochons: PropTypes.func,
-  users: PropTypes.PropTypes.instanceOf(List),
-};
-
-export const UserList = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(UserListConnect);