Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

useUser implemented with useModelState

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-05 17:28:37 +02:00
parent 15348b9ad6
commit 468f597673
3 changed files with 27 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/common/NavBar/NavMenu/NavMenu.js
View file

@ -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 (
<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}>
<div className={styles['logout-label']}>{!user ? 'Log in / Sign up' : 'Log out'}</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>
</div>
<div className={styles['nav-menu-section']}>

13
src/common/NavBar/NavMenu/useUser.js
View file

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

35
src/common/useUser.js
View file

@ -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;