muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed idents

Browse source
This commit is contained in:
Fedor Katurov 2019-12-13 12:30:22 +07:00
parent 288c25e32c
commit 7bea7b9ed1
1 changed files with 99 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

167
src/components/panels/UserPanel.tsx
View file

@ -1,48 +1,71 @@
import * as React from 'react'; import * as React from "react";
import { GuestButton } from '$components/user/GuestButton'; import { GuestButton } from "$components/user/GuestButton";
import { DEFAULT_USER, IUser, ROLES } from '$constants/auth'; import { DEFAULT_USER, IUser, ROLES } from "$constants/auth";
import { UserButton } from '$components/user/UserButton'; import { UserButton } from "$components/user/UserButton";
import { UserMenu } from '$components/user/UserMenu'; import { UserMenu } from "$components/user/UserMenu";
import { setUser, userLogout, takeAShot, setDialog, gotVkUser, setDialogActive, openMapDialog, getGPXTrack } from '$redux/user/actions'; import {
import { bindActionCreators } from 'redux'; setUser,
import { connect } from 'react-redux'; userLogout,
import { Icon } from '$components/panels/Icon'; takeAShot,
setDialog,
gotVkUser,
setDialogActive,
openMapDialog,
getGPXTrack
} from "$redux/user/actions";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { Icon } from "$components/panels/Icon";
import classnames from 'classnames'; import classnames from "classnames";
import { CLIENT } from '$config/frontend'; import { CLIENT } from "$config/frontend";
import { DIALOGS, TABS } from '$constants/dialogs'; import { DIALOGS, TABS } from "$constants/dialogs";
import { IRootState } from "$redux/user/reducer"; import { IRootState } from "$redux/user/reducer";
import { Tooltip } from "$components/panels/Tooltip"; import { Tooltip } from "$components/panels/Tooltip";
import { TitleDialog } from "$components/dialogs/TitleDialog"; import { TitleDialog } from "$components/dialogs/TitleDialog";
interface Props extends IRootState { interface Props extends IRootState {
userLogout: typeof userLogout, userLogout: typeof userLogout;
setDialog: typeof setDialog, setDialog: typeof setDialog;
setDialogActive: typeof setDialogActive, setDialogActive: typeof setDialogActive;
gotVkUser: typeof gotVkUser, gotVkUser: typeof gotVkUser;
takeAShot: typeof takeAShot, takeAShot: typeof takeAShot;
openMapDialog: typeof openMapDialog, openMapDialog: typeof openMapDialog;
getGPXTrack: typeof getGPXTrack, getGPXTrack: typeof getGPXTrack;
} }
interface State { interface State {
menuOpened: boolean menuOpened: boolean;
} }
export class Component extends React.PureComponent<Props, State> { export class Component extends React.PureComponent<Props, State> {
state = { state = {
menuOpened: false, menuOpened: false
}; };
componentDidMount() { componentDidMount() {
window.addEventListener('message', e => { window.addEventListener("message", e => {
const { data } = e; const { data } = e;
if (!data || !data.type || data.type !== 'oauth_login' || !data.user || !data.user.id || !data.user.token) return; if (
!data ||
!data.type ||
data.type !== "oauth_login" ||
!data.user ||
!data.user.id ||
!data.user.token
)
return;
const { const {
id, token, role = 'vk', name = '', ip = '', photo = '', agent = '', id,
token,
role = "vk",
name = "",
ip = "",
photo = "",
agent = ""
} = data.user; } = data.user;
const user = { const user = {
@ -54,7 +77,7 @@ export class Component extends React.PureComponent<Props, State> {
name, name,
ip, ip,
agent, agent,
photo, photo
} }
}; };
@ -82,7 +105,7 @@ export class Component extends React.PureComponent<Props, State> {
window.open( window.open(
`https://oauth.vk.com/authorize?client_id=5987644&scope=&redirect_uri=${CLIENT.API_ADDR}/api/auth/vk`, `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` `location=no,width=700,height=370,scrollbars=no,top=${top},left=${left},resizable=no`
); );
}; };
@ -90,25 +113,26 @@ export class Component extends React.PureComponent<Props, State> {
render() { render() {
const { const {
props: { user, dialog, dialog_active, is_empty }, props: { user, dialog, dialog_active, is_empty },
state: { menuOpened }, state: { menuOpened }
} = this; } = this;
return ( return (
<div> <div>
{ <TitleDialog />
<TitleDialog />
}
<div className="panel active panel-user"> <div className="panel active panel-user">
<div className="user-panel"> <div className="user-panel">
{ {!user || user.role === ROLES.guest ? (
!user || user.role === ROLES.guest <GuestButton onClick={this.openOauthFrame} />
? <GuestButton onClick={this.openOauthFrame} /> ) : (
: <UserButton user={user} setMenuOpened={this.setMenuOpened} /> <UserButton user={user} setMenuOpened={this.setMenuOpened} />
} )}
{ {user && user.role && user.role !== "guest" && menuOpened && (
(user && user.role && user.role !== 'guest' && menuOpened) && <UserMenu
<UserMenu userLogout={this.props.userLogout} openAppInfoDialog={this.openAppInfoDialog} /> userLogout={this.props.userLogout}
} openAppInfoDialog={this.openAppInfoDialog}
/>
)}
</div> </div>
<div className="control-sep" /> <div className="control-sep" />
@ -116,7 +140,7 @@ export class Component extends React.PureComponent<Props, State> {
<div className="control-bar"> <div className="control-bar">
<button <button
className={classnames({ className={classnames({
active: dialog_active && (dialog === DIALOGS.MAP_LIST) active: dialog_active && dialog === DIALOGS.MAP_LIST
})} })}
onClick={this.openMapsDialog} onClick={this.openMapsDialog}
> >
@ -136,39 +160,46 @@ export class Component extends React.PureComponent<Props, State> {
<Icon icon="icon-shot-4" /> <Icon icon="icon-shot-4" />
</button> </button>
</div> </div>
{ {!is_empty && (
!is_empty && <React.Fragment>
<React.Fragment> <div className="control-sep" />
<div className="control-sep" />
<div className="control-bar"> <div className="control-bar">
<button <button
className={classnames({ active: false })} className={classnames({ active: false })}
onClick={this.props.getGPXTrack} onClick={this.props.getGPXTrack}
> >
<Tooltip>Экспорт GPX</Tooltip> <Tooltip>Экспорт GPX</Tooltip>
<Icon icon="icon-gpx-1" /> <Icon icon="icon-gpx-1" />
</button> </button>
</div> </div>
</React.Fragment> </React.Fragment>
} )}
</div> </div>
</div> </div>
); );
} }
} }
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(
const mapDispatchToProps = dispatch => bindActionCreators({ mapStateToProps,
setUser, mapDispatchToProps
userLogout, )(Component);
takeAShot,
setDialog,
gotVkUser,
setDialogActive,
openMapDialog,
getGPXTrack,
}, dispatch);
export const UserPanel = connect(mapStateToProps, mapDispatchToProps)(Component);