NavMenu adapted to changes in core

src/common/NavBar/NavMenu/NavMenu.js

@@ -2,17 +2,19 @@ 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');
 const useFullscreen = require('stremio/common/useFullscreen');
-const useUser = require('stremio/common/useUser');
+const useProfile = require('./useProfile');
 const styles = require('./styles');
 
 const NavMenu = ({ className }) => {
+    const { core } = useServices();
+    const profile = useProfile();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const [user, logout] = useUser();
     const popupLabelOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {
             toggleMenu();
@@ -22,7 +24,12 @@ const NavMenu = ({ className }) => {
         event.nativeEvent.togglePopupPrevented = true;
     }, []);
     const logoutButtonOnClick = React.useCallback(() => {
-        logout();
+        core.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'Logout'
+            }
+        });
     }, []);
     return (
         <Popup
@@ -40,17 +47,17 @@ const NavMenu = ({ className }) => {
                         <div
                             className={styles['avatar-container']}
                             style={{
-                                backgroundImage: user === null ?
+                                backgroundImage: profile.auth === null ?
                                     'url(\'/images/anonymous.png\')'
                                     :
-                                    `url('${user.avatar}'), url('/images/default_avatar.png')`
+                                    `url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
                             }}
                         />
                         <div className={styles['email-container']}>
-                            <div className={styles['email-label']}>{user === null ? 'Anonymous user' : user.email}</div>
+                            <div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
                         </div>
-                        <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 === null ? 'Log in / Sign up' : 'Log out'}</div>
+                        <Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
+                            <div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
                         </Button>
                     </div>
                     <div className={styles['nav-menu-section']}>

src/common/NavBar/NavMenu/useProfile.js

@@ -0,0 +1,23 @@
+const React = require('react');
+const { useServices } = require('stremio/services');
+const useModelState = require('stremio/common/useModelState');
+
+const mapProfileState = (ctx) => {
+    return ctx.profile;
+};
+
+const useProfile = () => {
+    const { core } = useServices();
+    const initProfileState = React.useCallback(() => {
+        const ctx = core.getState('ctx');
+        return mapProfileState(ctx);
+    }, []);
+    const profile = useModelState({
+        model: 'ctx',
+        init: initProfileState,
+        map: mapProfileState
+    });
+    return profile;
+};
+
+module.exports = useProfile;

src/common/index.js

@@ -27,7 +27,6 @@ const useFullscreen = require('./useFullscreen');
 const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
 const useModelState = require('./useModelState');
-const useUser = require('./useUser');
 
 module.exports = {
     AddonDetailsModal,
@@ -59,6 +58,5 @@ module.exports = {
     useFullscreen,
     useInLibrary,
     useLiveRef,
-    useModelState,
-    useUser
+    useModelState
 };

src/common/useUser.js

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