cache reset

public/locales/en/translations.json

@@ -98,7 +98,8 @@
     },
     "Cache": {
       "Title": "Cache settings",
-      "Reset": "Reset"
+      "Reset": "Reset",
+      "ResetInfo": "Cache reset"
     },
     "Appearance": {
       "Title": "Appearance settings"

public/locales/ro/translations.json

@@ -89,7 +89,8 @@
     },
     "Cache": {
       "Title": "Setări cache",
-      "Reset": "Resetați"
+      "Reset": "Resetați",
+      "ResetInfo": "Cache resetat"
     },
     "Appearance": {
       "Title": "Appearance settings"

src/features/settings/system/CacheSettingsComponent.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { Paper, Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
@@ -13,7 +14,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const ResetCacheComponent = () => {
+const CacheSettingsComponent = ({ onResetCache }) => {
   const classes = useStyles();
   const { t } = useTranslation();
   const { sysAdmin } = usePermissions();
@@ -22,7 +23,12 @@ const ResetCacheComponent = () => {
     <Paper variant="outlined">
       <PaperTitle text={t("Settings.Cache.Title")} />
       <div className={classes.content}>
-        <Button variant="outlined" color="secondary" disabled={!sysAdmin}>
+        <Button
+          variant="outlined"
+          color="secondary"
+          disabled={!sysAdmin}
+          onClick={onResetCache}
+        >
           {t("Settings.Cache.Reset")}
         </Button>
       </div>
@@ -30,4 +36,8 @@ const ResetCacheComponent = () => {
   );
 };
 
-export default ResetCacheComponent;
+CacheSettingsComponent.propTypes = {
+  onResetCache: PropTypes.func.isRequired
+};
+
+export default CacheSettingsComponent;

src/features/settings/system/CacheSettingsContainer.js

@@ -0,0 +1,22 @@
+import React, { useCallback } from "react";
+import CacheSettingsComponent from "./CacheSettingsComponent";
+import { useTranslation } from "react-i18next";
+import { routes, post } from "utils/api";
+import { info } from "utils/toast";
+
+const CacheSettingsContainer = () => {
+  const { t } = useTranslation();
+  const handleResetCache = useCallback(async () => {
+    await post(
+      routes.resetCache,
+      {},
+      {
+        onCompleted: () => info(t("Settings.Cache.ResetInfo"))
+      }
+    );
+  }, [t]);
+
+  return <CacheSettingsComponent onResetCache={handleResetCache} />;
+};
+
+export default CacheSettingsContainer;

src/features/settings/system/SystemContainer.js

@@ -1,8 +1,8 @@
 import React from "react";
-import ResetCacheComponent from "./ResetCacheComponent";
+import CacheSettingsContainer from "./CacheSettingsContainer";
 
 const SystemContainer = () => {
-  return <ResetCacheComponent />;
+  return <CacheSettingsContainer />;
 };
 
 export default SystemContainer;

src/hooks/useToast.js

@@ -1,10 +1,4 @@
-import { toast } from "react-toastify";
-
-const info = message => toast.info(message);
-const success = message => toast.success(message);
-const warning = message => toast.warning(message);
-const error = message => toast.error(message);
-const dark = message => toast.dark(message);
+import { info, success, warning, error, dark } from "utils/toast";
 
 export const useToast = () => {
   return { info, success, warning, error, dark };

src/utils/toast.js

@@ -0,0 +1,9 @@
+import { toast } from "react-toastify";
+
+const info = message => toast.info(message);
+const success = message => toast.success(message);
+const warning = message => toast.warning(message);
+const error = message => toast.error(message);
+const dark = message => toast.dark(message);
+
+export { info, success, warning, error, dark };