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

src/redux/store.ts

@@ -12,7 +12,7 @@ import { routerMiddleware } from 'connected-react-router'
 
 const userPersistConfig: PersistConfig = {
   key: 'user',
-  whitelist: ['user', 'logo', 'provider', 'speed'],
+  whitelist: ['profile'],
   storage,
 };
 

src/redux/user/reducer.ts

@@ -7,8 +7,10 @@ export interface IUserProfile {
   username: string,
   email: string,
   role: string,
-  activated: boolean,
   token: string,
+
+  is_activated: boolean,
+  is_user: boolean,
 }
 
 export interface IUserFormStateLogin {
@@ -58,7 +60,8 @@ const INITIAL_STATE: IUserState = {
     email: '',
     role: '',
     token: '',
-    activated: false,
+    is_activated: false,
+    is_user: false,
   },
   form_state: {
     login: {

src/redux/user/sagas.ts

@@ -14,9 +14,9 @@ function* sendLoginRequestSaga({ username, password }: ReturnType<typeof ActionC
 
   if (!token) return yield put(userSetLoginError({ error: USER_STATUSES[status] || USER_ERRORS.INVALID_CREDENTIALS }));
 
-  const { id, role, email, activated } = user;
+  const { id, role, email, activated: is_activated } = user;
 
-  yield put(userSetUser({ token, id, role, email, username: user.username, activated, }));
+  yield put(userSetUser({ token, id, role, email, username: user.username, is_activated, is_user: true }));
   yield put(push('/'));
 }
 

src/styles/colors.scss

@@ -10,7 +10,7 @@ $main_text_color: white;
 $content_bg_color: #222222;
 $content_bg_secondary: darken($content_bg_color, 3%);
 
-$cell_bg: transparentize(white, 0.95);
+$cell_bg: transparentize(white, 0.98);
 
 $text_normal: 16px;
 $text_small: 14px;