persisted user profile

src/components/main/Header/index.tsx

@@ -1,25 +1,37 @@
 import * as React from 'react';
 import { Logo } from "$components/main/Logo";
+import { connect } from 'react-redux';
+import { IUserProfile, IUserState } from "$redux/user/reducer";
 
 const style = require('./style.scss');
 
-export const Header = () => (
+interface IHeaderProps {
+  username?: IUserProfile['username'],
+  is_user?: IUserProfile['is_user'],
+}
+
+export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_user }) => (
   <div className="default_container head_container">
     <div className={style.container}>
       <Logo />
       <div className={style.spacer} />
+      {
+        is_user && username &&
+        <div className={style.user_button}>
+          <div className={style.user_avatar} />
+          {username}
+        </div>
+      }
       <div className={style.plugs}>
         <div>depth</div>
         <div>boris</div>
         <div>flow</div>
       </div>
+
     </div>
   </div>
 );
 
-/*
-  <div className={style.user_button}>
-    <div className={style.user_avatar} />
-    gvorcek
-  </div>
- */
+const mapStateToProps = ({ user: { profile: { username, is_user } } }: { user: IUserState }) => ({ username, is_user });
+
+export const Header = connect(mapStateToProps)(Component);

src/components/main/Header/style.scss

@@ -14,6 +14,7 @@
 
 .plugs {
   display: flex;
+  user-select: none;
 
   > div {
     //margin: 8px;
@@ -31,6 +32,10 @@
       display: block;
     }
 
+    &:first-child {
+      padding-left: $spc + $gap;
+    }
+
     &:last-child {
       padding-right: 0;
 
@@ -50,11 +55,16 @@
   padding: 0 $gap;
   display: flex;
   align-items: center;
+  background: white;
+  color: $main_bg_color;
+  height: 20px;
+  border-radius: $input_radius;
+  font-size: $text_small;
 }
 
 .user_avatar {
-  width: 16px;
-  height: 16px;
-  background: transparentize(white, 0.5);
-  margin-right: $gap;
+  //width: 16px;
+  //height: 16px;
+  //background: transparentize(white, 0.5);
+  //margin-right: $gap;
 }