generic useModelState hook implemented

src/common/index.js

@@ -23,6 +23,7 @@ const useFullscreen = require('./useFullscreen');
 const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
 const useLocationHash = require('./useLocationHash');
+const useModelState = require('./useModelState');
 const useRouteActive = require('./useRouteActive');
 const useSpreadState = require('./useSpreadState');
 const useUser = require('./useUser');
@@ -53,6 +54,7 @@ module.exports = {
     useInLibrary,
     useLiveRef,
     useLocationHash,
+    useModelState,
     useRouteActive,
     useSpreadState,
     useUser

src/common/useModelState.js

@@ -0,0 +1,32 @@
+const React = require('react');
+const throttle = require('lodash.throttle');
+const { useRouteFocused } = require('stremio-router');
+const { useServices } = require('stremio/services');
+const useDeepEqualState = require('stremio/common/useDeepEqualState');
+
+const useModelState = ({ model, action, timeout, map, init }) => {
+    const modelRef = React.useRef(model);
+    const { core } = useServices();
+    const routeFocused = useRouteFocused();
+    const [state, setState] = useDeepEqualState(init);
+    React.useLayoutEffect(() => {
+        core.dispatch(action, modelRef.current);
+    }, [action]);
+    React.useLayoutEffect(() => {
+        const onNewState = throttle(() => {
+            const state = core.getState(modelRef.current);
+            setState(typeof map === 'function' ? map(state) : state);
+        }, timeout);
+        if (routeFocused) {
+            core.on('NewState', onNewState);
+            onNewState.call();
+        }
+        return () => {
+            onNewState.cancel();
+            core.off('NewState', onNewState);
+        };
+    }, [routeFocused]);
+    return state;
+};
+
+module.exports = useModelState;