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

cleaned out user reducer

Browse source
This commit is contained in:
Fedor Katurov 2020-01-08 14:25:46 +07:00
parent 103097edbd
commit af8d270460
13 changed files with 462 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

123
src/components/panels/TopRightPanel.tsx
View file

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