mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
cleaned out user reducer
This commit is contained in:
Fedor Katurov
parent
103097edbd
commit
af8d270460
13 changed files with 462 additions and 282 deletions
|
|
@ -8,13 +8,10 @@ import { LogoDialog } from '$components/dialogs/LogoDialog';
|
|||
import { SaveDialog } from '$components/dialogs/SaveDialog';
|
||||
import { CancelDialog } from '$components/dialogs/CancelDialog';
|
||||
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import * as USER_ACTIONS from '$redux/user/actions';
|
||||
import { ProviderDialog } from '$components/dialogs/ProviderDialog';
|
||||
import { ShotPrefetchDialog } from '$components/dialogs/ShotPrefetchDialog';
|
||||
import * as MAP_ACTIONS from '$redux/map/actions';
|
||||
import { selectUserMode } from '$redux/user/selectors';
|
||||
|
||||
const mapStateToProps = state => ({ mode: selectUserMode(state) });
|
||||
|
|
|
|||
|
|
@ -1,71 +1,72 @@
|
|||
// flow
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
import { PROVIDERS } from '$constants/providers';
|
||||
import { LOGOS } from '$constants/logos';
|
||||
import { setMode } from '$redux/user/actions';
|
||||
import * as USER_ACTIONS from '$redux/user/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { MODES } from '$constants/modes';
|
||||
import { IRootState } from "$redux/user";
|
||||
import { IRootState } from '$redux/user';
|
||||
|
||||
import { Tooltip } from "$components/panels/Tooltip";
|
||||
import { Tooltip } from '$components/panels/Tooltip';
|
||||
import { selectMap } from '$redux/map/selectors';
|
||||
import { selectUser } from '$redux/user/selectors';
|
||||
|
||||
interface Props extends IRootState {
|
||||
startProviderMode: () => void,
|
||||
startLogoMode: () => void,
|
||||
clearMode: () => void,
|
||||
}
|
||||
|
||||
const Component = ({
|
||||
provider, logo, startProviderMode, startLogoMode, clearMode, editing, markers_shown,
|
||||
}: Props) => (
|
||||
<div className="status-panel top right">
|
||||
{
|
||||
editing && !markers_shown &&
|
||||
<div className="status-bar pointer top-control padded warning icon-only tooltip-container">
|
||||
<Icon icon="icon-eye-1" size={24} />
|
||||
<Tooltip position="top">Приблизьте, чтобы редактировать кривую</Tooltip>
|
||||
</div>
|
||||
}
|
||||
<div className="status-bar pointer top-control padded tooltip-container" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
|
||||
<Tooltip position="top">Стиль карты</Tooltip>
|
||||
<Icon icon="icon-map-1" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
|
||||
</div>
|
||||
|
||||
<div className="status-bar pointer top-control padded tooltip-container" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
|
||||
<Tooltip position="top">Логотип</Tooltip>
|
||||
<Icon icon="icon-logo-3" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const {
|
||||
map: {
|
||||
provider,
|
||||
logo,
|
||||
},
|
||||
user: {
|
||||
markers_shown, editing
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
provider, logo, markers_shown, editing
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
startProviderMode: () => dispatch(setMode(MODES.PROVIDER)),
|
||||
startLogoMode: () => dispatch(setMode(MODES.LOGO)),
|
||||
clearMode: () => dispatch(setMode(MODES.NONE)),
|
||||
const mapStateToProps = state => ({
|
||||
map: selectMap(state),
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
||||
export const TopRightPanel = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Component);
|
||||
const mapDispatchToProps = {
|
||||
setMode: USER_ACTIONS.setMode,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const TopRightPanelUnconnected = ({
|
||||
map: { provider, logo },
|
||||
user: { markers_shown, editing },
|
||||
setMode,
|
||||
}: Props) => {
|
||||
const startProviderMode = useCallback(() => setMode(MODES.PROVIDER), [setMode]);
|
||||
const startLogoMode = useCallback(() => setMode(MODES.LOGO), [setMode]);
|
||||
const clearMode = useCallback(() => setMode(MODES.NONE), [setMode]);
|
||||
|
||||
return (
|
||||
<div className="status-panel top right">
|
||||
{editing && !markers_shown && (
|
||||
<div className="status-bar pointer top-control padded warning icon-only tooltip-container">
|
||||
<Icon icon="icon-eye-1" size={24} />
|
||||
<Tooltip position="top">Приблизьте, чтобы редактировать кривую</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="status-bar pointer top-control padded tooltip-container"
|
||||
onFocus={startProviderMode}
|
||||
onBlur={clearMode}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Tooltip position="top">Стиль карты</Tooltip>
|
||||
<Icon icon="icon-map-1" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="status-bar pointer top-control padded tooltip-container"
|
||||
onFocus={startLogoMode}
|
||||
onBlur={clearMode}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Tooltip position="top">Логотип</Tooltip>
|
||||
<Icon icon="icon-logo-3" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TopRightPanel = connect(mapStateToProps, mapDispatchToProps)(TopRightPanelUnconnected);
|
||||
|
||||
export { TopRightPanel };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from "react";
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { GuestButton } from "$components/user/GuestButton";
|
||||
import { DEFAULT_USER, IUser, ROLES } from "$constants/auth";
|
||||
import { UserButton } from "$components/user/UserButton";
|
||||
import { UserMenu } from "$components/user/UserMenu";
|
||||
import { GuestButton } from '$components/user/GuestButton';
|
||||
import { DEFAULT_USER, IUser, ROLES } from '$constants/auth';
|
||||
import { UserButton } from '$components/user/UserButton';
|
||||
import { UserMenu } from '$components/user/UserMenu';
|
||||
import {
|
||||
setUser,
|
||||
userLogout,
|
||||
|
|
@ -12,18 +12,17 @@ import {
|
|||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack
|
||||
} from "$redux/user/actions";
|
||||
import { bindActionCreators } from "redux";
|
||||
import { connect } from "react-redux";
|
||||
import { Icon } from "$components/panels/Icon";
|
||||
getGPXTrack,
|
||||
} from '$redux/user/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
|
||||
import classnames from "classnames";
|
||||
import { CLIENT } from "$config/frontend";
|
||||
import { DIALOGS, TABS } from "$constants/dialogs";
|
||||
import { IRootState } from "$redux/user";
|
||||
import { Tooltip } from "$components/panels/Tooltip";
|
||||
import { TitleDialog } from "$components/dialogs/TitleDialog";
|
||||
import classnames from 'classnames';
|
||||
import { CLIENT } from '$config/frontend';
|
||||
import { DIALOGS, TABS } from '$constants/dialogs';
|
||||
import { IRootState } from '$redux/user';
|
||||
import { Tooltip } from '$components/panels/Tooltip';
|
||||
import { TitleDialog } from '$components/dialogs/TitleDialog';
|
||||
|
||||
interface Props extends IRootState {
|
||||
userLogout: typeof userLogout;
|
||||
|
|
@ -39,34 +38,26 @@ interface State {
|
|||
menuOpened: boolean;
|
||||
}
|
||||
|
||||
export class Component extends React.PureComponent<Props, State> {
|
||||
export class UserPanelUnconnected extends PureComponent<Props, State> {
|
||||
state = {
|
||||
menuOpened: false
|
||||
menuOpened: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener("message", e => {
|
||||
window.addEventListener('message', e => {
|
||||
const { data } = e;
|
||||
|
||||
if (
|
||||
!data ||
|
||||
!data.type ||
|
||||
data.type !== "oauth_login" ||
|
||||
data.type !== 'oauth_login' ||
|
||||
!data.user ||
|
||||
!data.user.id ||
|
||||
!data.user.token
|
||||
)
|
||||
return;
|
||||
|
||||
const {
|
||||
id,
|
||||
token,
|
||||
role = "vk",
|
||||
name = "",
|
||||
ip = "",
|
||||
photo = "",
|
||||
agent = ""
|
||||
} = data.user;
|
||||
const { id, token, role = 'vk', name = '', ip = '', photo = '', agent = '' } = data.user;
|
||||
|
||||
const user = {
|
||||
...DEFAULT_USER,
|
||||
|
|
@ -77,8 +68,8 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
name,
|
||||
ip,
|
||||
agent,
|
||||
photo
|
||||
}
|
||||
photo,
|
||||
},
|
||||
};
|
||||
|
||||
this.setState({ menuOpened: false });
|
||||
|
|
@ -105,7 +96,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
|
||||
window.open(
|
||||
`https://oauth.vk.com/authorize?client_id=5987644&scope=&redirect_uri=${CLIENT.API_ADDR}/api/auth/vk`,
|
||||
"socialPopupWindow",
|
||||
'socialPopupWindow',
|
||||
`location=no,width=700,height=370,scrollbars=no,top=${top},left=${left},resizable=no`
|
||||
);
|
||||
};
|
||||
|
|
@ -113,13 +104,13 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
render() {
|
||||
const {
|
||||
props: { user, dialog, dialog_active, is_empty },
|
||||
state: { menuOpened }
|
||||
state: { menuOpened },
|
||||
} = this;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TitleDialog />
|
||||
|
||||
|
||||
<div className="panel active panel-user">
|
||||
<div className="user-panel">
|
||||
{!user || user.role === ROLES.guest ? (
|
||||
|
|
@ -127,7 +118,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
) : (
|
||||
<UserButton user={user} setMenuOpened={this.setMenuOpened} />
|
||||
)}
|
||||
{user && user.role && user.role !== "guest" && menuOpened && (
|
||||
{user && user.role && user.role !== 'guest' && menuOpened && (
|
||||
<UserMenu
|
||||
userLogout={this.props.userLogout}
|
||||
openAppInfoDialog={this.openAppInfoDialog}
|
||||
|
|
@ -140,7 +131,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
<div className="control-bar">
|
||||
<button
|
||||
className={classnames({
|
||||
active: dialog_active && dialog === DIALOGS.MAP_LIST
|
||||
active: dialog_active && dialog === DIALOGS.MAP_LIST,
|
||||
})}
|
||||
onClick={this.openMapsDialog}
|
||||
>
|
||||
|
|
@ -152,10 +143,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button
|
||||
className={classnames({ active: false })}
|
||||
onClick={this.props.takeAShot}
|
||||
>
|
||||
<button className={classnames({ active: false })} onClick={this.props.takeAShot}>
|
||||
<Tooltip>Снимок карты</Tooltip>
|
||||
<Icon icon="icon-shot-4" />
|
||||
</button>
|
||||
|
|
@ -165,10 +153,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button
|
||||
className={classnames({ active: false })}
|
||||
onClick={this.props.getGPXTrack}
|
||||
>
|
||||
<button className={classnames({ active: false })} onClick={this.props.getGPXTrack}>
|
||||
<Tooltip>Экспорт GPX</Tooltip>
|
||||
<Icon icon="icon-gpx-1" />
|
||||
</button>
|
||||
|
|
@ -181,25 +166,24 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = ({
|
||||
user: { dialog, dialog_active, user, is_empty }
|
||||
}) => ({ dialog, dialog_active, user, is_empty });
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators(
|
||||
{
|
||||
setUser,
|
||||
userLogout,
|
||||
takeAShot,
|
||||
setDialog,
|
||||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack
|
||||
},
|
||||
dispatch
|
||||
);
|
||||
const mapStateToProps = ({ user: { dialog, dialog_active, user, is_empty } }) => ({
|
||||
dialog,
|
||||
dialog_active,
|
||||
user,
|
||||
is_empty,
|
||||
});
|
||||
|
||||
export const UserPanel = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Component);
|
||||
const mapDispatchToProps = {
|
||||
setUser,
|
||||
userLogout,
|
||||
takeAShot,
|
||||
setDialog,
|
||||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack,
|
||||
};
|
||||
|
||||
const UserPanel = connect(mapStateToProps, mapDispatchToProps)(UserPanelUnconnected);
|
||||
|
||||
export { UserPanel };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue