Implement API error handling

1 files changed, 20 insertions, 3 deletions

diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js
index 124bb40a..c67f252b 100644
--- a/modern/src/reactHelper.js
+++ b/modern/src/reactHelper.js
@@ -1,4 +1,6 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { errorsActions } from './store';
 
 export const usePrevious = (value) => {
   const ref = useRef();
@@ -10,14 +12,29 @@ export const usePrevious = (value) => {
 
 /* eslint-disable */
 export const useEffectAsync = (effect, deps) => {
+  const dispatch = useDispatch();
   const ref = useRef();
   useEffect(() => {
-    effect().then((result) => ref.current = result);
+    effect()
+      .then((result) => ref.current = result)
+      .catch((error) => dispatch(errorsActions.push(error.message)));
+      
     return () => {
       const result = ref.current;
       if (result) {
         result();
       }
     };
-  }, deps);
+  }, [...deps, dispatch]);
+};
+
+export const useCatch = (method) => {
+  const dispatch = useDispatch();
+  return (...parameters) => {
+    method(...parameters).catch((error) => dispatch(errorsActions.push(error.message)));
+  };
+};
+
+export const useCatchCallback = (method, deps) => {
+  return useCallback(useCatch(method), deps);
 };