redux: editor-panel: login-logout

src/components/logo/LogoDialog.jsx

@@ -3,29 +3,26 @@ import { LOGOS } from '$constants/logos';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';
 
-export class LogoDialog extends React.Component {
-  changeLogo = logo => {
-    this.props.editor.changeLogo(logo);
-  };
-
-  render() {
-    return (
-      <div className="helper logo-helper">
-        <div className="helper-back">
-          <Icon icon="icon-logo" size={200} />
-        </div>
-        {
-          Object.keys(LOGOS).map(logo => (
-            <div
-              className={classnames('helper-menu-item', { active: (logo === this.props.logo) })}
-              onClick={() => this.changeLogo(logo)}
-              key={logo}
-            >
-              {LOGOS[logo][0]}
-            </div>
-          ))
-        }
-      </div>
-    );
-  }
+type Props = {
+  logo: String,
+  setLogo: Function,
 }
+
+export const LogoDialog = ({ logo, setLogo }: Props)  => (
+  <div className="helper logo-helper">
+    <div className="helper-back">
+      <Icon icon="icon-logo" size={200} />
+    </div>
+    {
+      Object.keys(LOGOS).map(item => (
+        <div
+          className={classnames('helper-menu-item', { active: (item === logo) })}
+          onClick={() => setLogo(item)}
+          key={item}
+        >
+          {LOGOS[item][0]}
+        </div>
+      ))
+    }
+  </div>
+);

src/components/panels/EditorDialog.jsx

@@ -7,10 +7,23 @@ import { TrashDialog } from '$components/trash/TrashDialog';
 import { LogoDialog } from '$components/logo/LogoDialog';
 import { SaveDialog } from '$components/save/SaveDialog';
 import { CancelDialog } from '$components/save/CancelDialog';
+import type { UserType } from '$constants/types';
 
+type Props = {
+  mode: String,
+  routerPoints: Number,
+  editor: Object,
+  activeSticker: String,
+  logo: String,
+  user: UserType,
+  title: String,
+  address: String,
+
+  setLogo: Function,
+}
 export const EditorDialog = ({
-  mode, routerPoints, editor, activeSticker, logo, user, title, address,
-}) => {
+  mode, routerPoints, editor, activeSticker, logo, user, title, address, setLogo
+}: Props) => {
   const showDialog = (
     mode === MODES.ROUTER
     || (mode === MODES.STICKERS && !activeSticker)
@@ -26,7 +39,7 @@ export const EditorDialog = ({
         { mode === MODES.ROUTER && <RouterDialog routerPoints={routerPoints} editor={editor} /> }
         { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
         { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
-        { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} /> }
+        { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} setLogo={setLogo} /> }
         { mode === MODES.SAVE && <SaveDialog editor={editor} user={user} title={title} address={address} /> }
         { mode === MODES.CONFIRM_CANCEL && <CancelDialog editor={editor} /> }
       </div>

src/components/panels/EditorPanel.jsx

@@ -9,7 +9,7 @@ import { EditorDialog } from '$components/panels/EditorDialog';
 import { LogoPreview } from '$components/logo/LogoPreview';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { setMode, startEditing, stopEditing } from '$redux/user/actions';
+import { setMode, startEditing, stopEditing, setLogo } from '$redux/user/actions';
 import type { UserType } from '$constants/types';
 import { editor } from '$modules/Editor';
 
@@ -29,7 +29,7 @@ type Props = {
   setMode: Function,
   startEditing: Function,
   stopEditing: Function,
-
+  setLogo: Function,
 }
 
 class Component extends React.PureComponent<Props, void> {
@@ -76,6 +76,7 @@ class Component extends React.PureComponent<Props, void> {
           user={user}
           title={title}
           address={address}
+          setLogo={this.props.setLogo}
         />
 
         <LogoPreview logo={logo} />
@@ -209,6 +210,7 @@ function mapStateToProps(state) {
 
 const mapDispatchToProps = dispatch => bindActionCreators({
   setMode,
+  setLogo,
   startEditing,
   stopEditing,
 }, dispatch);

src/components/panels/UserPanel.jsx

@@ -5,8 +5,18 @@ import { SERVER } from '$constants/api';
 import { DEFAULT_USER, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
 import { UserMenu } from '$components/user/UserMenu';
+import { setUser, userLogout } from '$redux/user/actions';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import type { UserType } from '$constants/types';
 
-export class UserPanel extends React.PureComponent {
+type Props = {
+  user: UserType,
+  userLogout: Function,
+  setUser: Function,
+};
+
+export class Component extends React.PureComponent<Props, void> {
   state = {
     menuOpened: false,
   };
@@ -56,7 +66,7 @@ export class UserPanel extends React.PureComponent {
 
   render() {
     const {
-      props: { user, userLogout, editor, editing },
+      props: { user },
       state: { menuOpened },
     } = this;
 
@@ -71,7 +81,7 @@ export class UserPanel extends React.PureComponent {
             }
             {
               (user && user.role && user.role !== 'guest' && menuOpened) &&
-              <UserMenu user={user} userLogout={userLogout} />
+              <UserMenu user={user} userLogout={this.props.userLogout} />
             }
           </div>
         </div>
@@ -79,3 +89,20 @@ export class UserPanel extends React.PureComponent {
     );
   }
 }
+
+
+function mapStateToProps(state) {
+  const { user: { user } } = state;
+
+  return { user };
+}
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+  setUser,
+  userLogout,
+}, dispatch);
+
+export const UserPanel = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component);

src/components/user/GuestButton.jsx

@@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 
-export const GuestButton = ({ onClick }) => (
+type Props = {
+  onClick: Function,
+}
+
+export const GuestButton = ({ onClick }: Props) => (
   <div className="control-bar user-bar">
     <button
+      className="user-bar-guest"
       onClick={onClick}
     >
       <span>ВОЙТИ</span>

src/components/user/UserButton.jsx

@@ -1,23 +1,29 @@
+// @flow
 import React from 'react';
 import { UserPicture } from '$components/user/UserPicture';
+import type { UserType } from '$constants/types';
+
+type Props = {
+  user: UserType,
+  setMenuOpened: Function,
+};
+
+const getUserName = name => name.split(' ')[0];
 
 export const UserButton = ({
   setMenuOpened,
   user: {
-   id,
-   userdata: {
-     name,
-     photo,
-   }
+    id,
+    userdata: { name, photo }
   }
-}) => (
+}: Props) => (
   <div className="control-bar user-bar">
     <div className="user-button" onClick={setMenuOpened}>
       <UserPicture photo={photo} />
 
       <div className="user-button-fields">
-        <div className="user-button-name">{(name || id || '...')}</div>
-        <div className="user-button-text">{(id || 'пользователь')}</div>
+        <div className="user-button-name">{((name && getUserName(name)) || id || '...')}</div>
+        <div className="user-button-text">{((name && id) || 'пользователь')}</div>
       </div>
     </div>
   </div>

src/components/user/UserMenu.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 
-export const UserMenu = ({ userLogout, user: { id, userdata: { agent, ip } } }) => (
+type Props = {
+  userLogout: Function,
+}
+
+export const UserMenu = ({ userLogout }: Props) => (
   <div className="user-panel-menu">
-    <div className="user-panel-text small">
-      <div>Мы храним следующие данные о вас:</div>
-      { id && <div><u>ID:</u> {id}</div> }
-      { agent && <div><u>Браузер:</u> {agent}</div> }
-      { ip && <div><u>Адрес:</u> {ip}</div> }
-      <div>Мы используем их для авторизации и исправления ошибок.</div>
-    </div>
     <a className="user-panel-item gray" href="https://github.com/muerwre/orchidMap" target="_blank" rel="noopener noreferrer">
       Проект на github
     </a>
@@ -17,3 +14,13 @@ export const UserMenu = ({ userLogout, user: { id, userdata: { agent, ip } } })
     </div>
   </div>
 );
+
+/*
+  <div className="user-panel-text small">
+    <div>Мы храним следующие данные о вас:</div>
+    { id && <div><u>ID:</u> {id}</div> }
+    { agent && <div><u>Браузер:</u> {agent}</div> }
+    { ip && <div><u>Адрес:</u> {ip}</div> }
+    <div>Мы используем их для авторизации и исправления ошибок.</div>
+  </div>
+ */