Add a button to show the modules statuses

It's really annoying to wait for the modules to be loaded while visiting
the user profile or admin panel.

frontend/js/components/admins/modules.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getAdminModules } from "../../actions/admins";
 
@@ -10,9 +10,15 @@ export const AdminModules = () => {
   const loading = useSelector((state) => state.admin.fetchingModules);
   const modules = useSelector((state) => state.admin.modules);
 
-  useEffect(() => {
+  const fetchModules = () => {
     dispatch(getAdminModules());
-  }, [dispatch]);
+  };
 
-  return <Modules modules={modules} isLoading={loading} />;
+  return (
+    <Modules
+      modules={modules}
+      isLoading={loading}
+      fetchModules={fetchModules}
+    />
+  );
 };

frontend/js/components/modules/modules.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Loader from "../loader/loader";
 import PropTypes from "prop-types";
 
@@ -7,11 +7,29 @@ import { upperCaseFirst } from "../../utils";
 // TODO: udpate this
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
-const Modules = ({ isLoading, modules }) => {
+const Modules = ({ isLoading, modules, fetchModules }) => {
+  const [show, setShow] = useState(false);
   if (isLoading) {
     return <Loader />;
   }
 
+  const handleClick = () => {
+    fetchModules();
+    setShow(true);
+  };
+
+  if (!show) {
+    return (
+      <div className="row">
+        <div className="col-12 col-md-8 offset-md-2 mb-3">
+          <div className="btn btn-secondary w-100" onClick={handleClick}>
+            Show modules status
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="row">
       {Object.keys(modules).map((type) => (
@@ -23,6 +41,7 @@ const Modules = ({ isLoading, modules }) => {
 Modules.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   modules: PropTypes.object.isRequired,
+  fetchModules: PropTypes.func.isRequired,
 };
 export default Modules;
 

frontend/js/components/users/profile.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { PolochonList } from "../polochons/list";
@@ -12,15 +12,19 @@ export const UserProfile = () => {
   const modules = useSelector((state) => state.user.modules);
   const modulesLoading = useSelector((state) => state.user.modulesLoading);
 
-  useEffect(() => {
+  const fetchModules = () => {
     dispatch(getUserModules());
-  }, [dispatch]);
+  };
 
   return (
     <div>
       <UserEdit />
       <PolochonList />
-      <Modules modules={modules} isLoading={modulesLoading} />
+      <Modules
+        modules={modules}
+        isLoading={modulesLoading}
+        fetchModules={fetchModules}
+      />
     </div>
   );
 };