useUser implemented with useModelState

src/common/NavBar/NavMenu/NavMenu.js

@@ -2,7 +2,6 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
@@ -11,10 +10,9 @@ const useUser = require('stremio/common/useUser');
 const styles = require('./styles');
 
 const NavMenu = ({ className }) => {
-    const { core } = useServices();
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const user = useUser();
+    const [user, logout] = useUser();
     const popupLabelOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {
             toggleMenu();
@@ -24,12 +22,7 @@ const NavMenu = ({ className }) => {
         event.nativeEvent.togglePopupPrevented = true;
     }, []);
     const logoutButtonOnClick = React.useCallback(() => {
-        core.dispatch({
+        logout();
-            action: 'UserOp',
-            args: {
-                userOp: 'Logout'
-            }
-        });
     }, []);
     return (
         <Popup
@@ -48,17 +41,17 @@ const NavMenu = ({ className }) => {
                         <div
                             className={styles['avatar-container']}
                             style={{
-                                backgroundImage: !user ?
+                                backgroundImage: user === null ?
                                     `url('/images/anonymous.png')`
                                     :
                                     `url('${user.avatar}'), url('/images/default_avatar.png')`
                             }}
                         />
                         <div className={styles['email-container']}>
-                            <div className={styles['email-label']}>{!user ? 'Anonymous user' : user.email}</div>
+                            <div className={styles['email-label']}>{user === null ? 'Anonymous user' : user.email}</div>
                         </div>
-                        <Button className={styles['logout-button-container']} title={!user ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
+                        <Button className={styles['logout-button-container']} title={user === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
-                            <div className={styles['logout-label']}>{!user ? 'Log in / Sign up' : 'Log out'}</div>
+                            <div className={styles['logout-label']}>{user === null ? 'Log in / Sign up' : 'Log out'}</div>
                         </Button>
                     </div>
                     <div className={styles['nav-menu-section']}>

src/common/NavBar/NavMenu/useUser.js

@@ -1,13 +0,0 @@
-const React = require('react');
-
-const useUser = () => {
-    const [user] = React.useState({
-        email: '',
-        avatar: '',
-        anonymous: true,
-        logout: () => { }
-    });
-    return user;
-};
-
-module.exports = useUser;

src/common/useUser.js

@@ -1,23 +1,30 @@
 const React = require('react');
 const { useServices } = require('stremio/services');
+const useModelState = require('stremio/common/useModelState');
+
+const initUserState = () => null;
+
+const mapUserState = (ctx) => {
+    return ctx.content.auth ? ctx.content.auth.user : null;
+};
 
 const useUser = () => {
     const { core } = useServices();
-    const [user, setUser] = React.useState(() => {
+    const logout = React.useCallback(() => {
-        const state = core.getState();
+        core.dispatch({
-        return state.ctx.content.auth ? state.ctx.content.auth.user : null;
+            action: 'UserOp',
-    });
+            args: {
-    React.useEffect(() => {
+                userOp: 'Logout'
-        const onNewState = () => {
+            }
-            const state = core.getState();
+        });
-            setUser(state.ctx.content.auth ? state.ctx.content.auth.user : null);
-        };
-        core.on('NewModel', onNewState);
-        return () => {
-            core.off('NewModel', onNewState);
-        };
     }, []);
-    return user;
+    const user = useModelState({
+        model: 'ctx',
+        action: null,
+        map: mapUserState,
+        init: initUserState
+    });
+    return [user, logout];
 };
 
 module.exports = useUser;