diff --git a/src/common/NavBar/NavMenu/NavMenu.js b/src/common/NavBar/NavMenu/NavMenu.js index 329e93dfb..9a008a73e 100644 --- a/src/common/NavBar/NavMenu/NavMenu.js +++ b/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({ - action: 'UserOp', - args: { - userOp: 'Logout' - } - }); + logout(); }, []); return ( {
-
{!user ? 'Anonymous user' : user.email}
+
{user === null ? 'Anonymous user' : user.email}
-
diff --git a/src/common/NavBar/NavMenu/useUser.js b/src/common/NavBar/NavMenu/useUser.js deleted file mode 100644 index 0f3305809..000000000 --- a/src/common/NavBar/NavMenu/useUser.js +++ /dev/null @@ -1,13 +0,0 @@ -const React = require('react'); - -const useUser = () => { - const [user] = React.useState({ - email: '', - avatar: '', - anonymous: true, - logout: () => { } - }); - return user; -}; - -module.exports = useUser; diff --git a/src/common/useUser.js b/src/common/useUser.js index cb92a36b6..b344dfd8c 100644 --- a/src/common/useUser.js +++ b/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 state = core.getState(); - return state.ctx.content.auth ? state.ctx.content.auth.user : null; - }); - React.useEffect(() => { - 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); - }; + const logout = React.useCallback(() => { + core.dispatch({ + action: 'UserOp', + args: { + userOp: 'Logout' + } + }); }, []); - return user; + const user = useModelState({ + model: 'ctx', + action: null, + map: mapUserState, + init: initUserState + }); + return [user, logout]; }; module.exports = useUser;