redux: editor-panel: login-logout

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