redux: editor-panel: login-logout

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>
+ */