fix(notification): notification on fetch failed

* A notification is displayed when fetch data failed through the CustomComponentForApi class
* Notifier Component added for one shot notifications

Fixes #22

frontend/src/components/common/CustomComponentForAPI.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import Loading from "./Loading";
 import PropTypes from "prop-types";
 import { successActionsWithReads, getLatestRead } from "../../redux/api/utils";
+import Notifier from "./Notifier";
 
 /**
  * Custom react component to be used when called to the api are required to display data of the component.
@@ -81,7 +82,14 @@ class CustomComponentForAPI extends Component {
     // Override of the default react render behavior to wait for data to arrive.
     // You should use `customRender` instead of `render` in your components.
     if (this.checkPropsFailed()) {
-      return <p>Une erreur est survenue lors du téléchargement des données. Merci de recharger la page et si l'erreur persiste, merci de contacter les administrateurs du site.</p>;
+      return (
+        <>
+          <Notifier
+            message={"Une erreur est survenue sur le serveur. Merci de recharger le page."}
+          />
+          <p>Une erreur est survenue lors du téléchargement des données. Merci de recharger la page et si l'erreur persiste, merci de contacter les administrateurs du site.</p>
+        </>
+      );
     }
 
     if (!this.allApiDataIsReady()) {
@@ -335,7 +343,7 @@ class CustomComponentForAPI extends Component {
 }
 
 CustomComponentForAPI.propTypes = {
-  api: PropTypes.object.isRequired // should be given through redux connect of `mapDispatchToProps`
+  api: PropTypes.objectOf(PropTypes.func).isRequired, // should be given through redux connect of `mapDispatchToProps`
 };
 
 export default CustomComponentForAPI;

frontend/src/components/common/Notifier.js

+import React, { Component } from "react";
+import { withSnackbar } from "notistack";
+import PropTypes from "prop-types";
+
+/**
+ * Dumb component to display a one shot notification:
+ * notification will be created as the component is added to the DOM.
+ *
+ * @class Notifier
+ * @extends {Component}
+ */
+class Notifier extends Component {
+  constructor(props) {
+    super(props);
+
+    props.enqueueSnackbar(props.message, props.options);
+  }
+
+  render() {
+    return <></>;
+  }
+
+}
+
+Notifier.defaultProps = {
+  options: { variant: "error", autoHideDuration: 5000 }
+};
+
+Notifier.propTypes = {
+  enqueueSnackbar: PropTypes.func.isRequired,
+  message: PropTypes.string.isRequired,
+  options: PropTypes.object,
+};
+
+export default withSnackbar(Notifier);