user menu

src/components/main/Header/index.tsx

@@ -9,11 +9,10 @@ import { Filler } from '~/components/containers/Filler';
 import { selectUser } from '~/redux/auth/selectors';
 import { Group } from '~/components/containers/Group';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { DIALOGS } from '~/redux/modal/constants';
 import { pick } from 'ramda';
-import { Icon } from '~/components/input/Icon';
+import { UserButton } from '../UserButton';
-import { getURL } from '~/utils/dom';
-import { API } from '~/constants/api';
 
 const mapStateToProps = state => ({
   user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
@@ -22,40 +21,36 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   push: historyPush,
   showDialog: MODAL_ACTIONS.modalShowDialog,
+  authLogout: AUTH_ACTIONS.authLogout,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const HeaderUnconnected: FC<IProps> = memo(({ user: { username, is_user, photo }, showDialog }) => {
+const HeaderUnconnected: FC<IProps> = memo(
-  const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
+  ({ user, user: { username, is_user, photo }, showDialog, authLogout }) => {
+    const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
 
-  return (
+    return (
-    <div className={style.container}>
+      <div className={style.container}>
-      <Logo />
+        <Logo />
 
-      <Filler />
+        <Filler />
 
-      <div className={style.plugs}>
+        <div className={style.plugs}>
-        <Link to="/">flow</Link>
+          <Link to="/">flow</Link>
+        </div>
+
+        {is_user && <UserButton user={user} onLogout={authLogout} />}
+
+        {!is_user && (
+          <Group horizontal className={style.user_button} onClick={onLogin}>
+            <div>ВДОХ</div>
+          </Group>
+        )}
       </div>
-
+    );
-      {is_user && (
+  }
-        <Group horizontal className={style.user_button}>
+);
-          <div>{username}</div>
-          <div className={style.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
-            {(!photo || !photo.id) && <Icon icon="profile" />}
-          </div>
-        </Group>
-      )}
-
-      {!is_user && (
-        <Group horizontal className={style.user_button} onClick={onLogin}>
-          <div>ВДОХ</div>
-        </Group>
-      )}
-    </div>
-  );
-});
 
 const Header = connect(
   mapStateToProps,

src/components/main/Header/style.scss

@@ -4,6 +4,7 @@
   justify-content: flex-end;
   font-weight: 500;
   height: 120px;
+  z-index: 5;
 }
 
 .spacer {
@@ -63,38 +64,7 @@
 }
 
 .user_button {
-  align-items: center;
+  flex: 0;
-  border-radius: $input_radius;
+  padding-left: $gap / 2;
-  font: $font_16_semibold;
-  text-transform: uppercase;
-  flex: 0 !important;
   cursor: pointer;
-  margin-left: $gap;
-  white-space: nowrap;
-  box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px;
-  background: transparentize($content_bg, 0.1);
-  padding: 0 0 0 $gap;
-}
-
-.user_avatar {
-  @include outer_shadow();
-
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
-  background: white;
-  border-radius: $radius;
-  margin-left: ($gap + 2px) !important;
-  background: 50% 50% no-repeat $wisegreen;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-size: cover;
-
-  svg {
-    fill: #222222;
-    stroke: #222222;
-    width: 24px;
-    height: 24px;
-  }
 }

src/components/main/UserButton/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { Group } from '~/components/containers/Group';
+import styles from './styles.scss';
+import { getURL } from '~/utils/dom';
+import { Icon } from '~/components/input/Icon';
+import { IUser } from '~/redux/auth/types';
+
+interface IProps {
+  user: Partial<IUser>;
+  onLogout: () => void;
+}
+
+const UserButton: FC<IProps> = ({ user: { username, photo }, onLogout }) => (
+  <div className={styles.wrap}>
+    <Group horizontal className={styles.user_button}>
+      <div>{username}</div>
+      <div className={styles.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
+        {(!photo || !photo.id) && <Icon icon="profile" />}
+      </div>
+    </Group>
+
+    <div className={styles.menu}>
+      <div onClick={onLogout}>Выдох</div>
+    </div>
+  </div>
+);
+
+export { UserButton };

src/components/main/UserButton/styles.scss

@@ -0,0 +1,68 @@
+.wrap {
+  position: relative;
+  z-index: 2;
+
+  &:hover .menu {
+    display: flex;
+  }
+}
+
+.menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  padding: $gap;
+  background: $content_bg;
+  border-radius: 0 0 $radius $radius;
+  display: none;
+  z-index: 1;
+  background: $content_bg;
+  min-width: 100%;
+
+  & > div {
+    padding: $gap $gap * 2;
+    cursor: pointer;
+    opacity: 0.5;
+  }
+
+  &:hover > div {
+    opacity: 1;
+  }
+}
+
+.user_button {
+  align-items: center;
+  border-radius: $input_radius;
+  font: $font_16_semibold;
+  text-transform: uppercase;
+  flex: 0 !important;
+  cursor: pointer;
+  margin-left: $gap;
+  white-space: nowrap;
+  box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px;
+  background: transparentize($content_bg, 0.1);
+  padding: 0 0 0 $gap;
+}
+
+.user_avatar {
+  @include outer_shadow();
+
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: $radius;
+  margin-left: ($gap + 2px) !important;
+  background: 50% 50% no-repeat $wisegreen;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+
+  svg {
+    fill: #222222;
+    stroke: #222222;
+    width: 24px;
+    height: 24px;
+  }
+}

src/redux/auth/actions.ts

@@ -28,3 +28,7 @@ export const authSetUser = (profile: Partial<IUser>) => ({
   type: AUTH_USER_ACTIONS.SET_USER,
   profile,
 });
+
+export const authLogout = () => ({
+  type: AUTH_USER_ACTIONS.LOGOUT,
+});

src/redux/auth/constants.ts

@@ -6,6 +6,8 @@ export const AUTH_USER_ACTIONS = {
   SET_USER: 'SET_USER',
   SET_TOKEN: 'SET_TOKEN',
 
+  LOGOUT: 'LOGOUT',
+
   GOT_POST_MESSAGE: 'GOT_POST_MESSAGE',
 };
 

src/redux/auth/sagas.ts

@@ -85,8 +85,14 @@ function* gotPostMessageSaga({ token }: ReturnType<typeof gotPostMessage>) {
   if (is_shown && dialog === DIALOGS.LOGIN) yield put(modalSetShown(false));
 }
 
+function* logoutSaga() {
+  yield put(authSetToken(null));
+  yield put(authSetUser({ ...EMPTY_USER }));
+}
+
 function* authSaga() {
   yield takeLatest(REHYDRATE, checkUserSaga);
+  yield takeLatest(AUTH_USER_ACTIONS.LOGOUT, logoutSaga);
   yield takeLatest(AUTH_USER_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
   yield takeLatest(AUTH_USER_ACTIONS.GOT_POST_MESSAGE, gotPostMessageSaga);
 }