feat: adapt avatar update form and header in authorized state

Medical-Information-Portal-Stethoscope · Oct 27, 2023 · cdc72f7 · cdc72f7
1 parent 3fb8a42
commit cdc72f7
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 10 deletions.
diff --git a/src/components/header/billet/billet.module.scss b/src/components/header/billet/billet.module.scss
@@ -1,4 +1,6 @@
 @import 'assets/styles/abstracts/variables/colors';
+@import 'assets/styles/abstracts/variables/fonts.scss';
+@import 'assets/styles/abstracts/variables/media-queries.scss';
 
 .billet {
   border-top-left-radius: 24px;
@@ -22,15 +24,29 @@
   height: 5px;
   border-radius: 100px;
   background-color: $color-neutral-400;
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    width: 38px;
+  }
 }
 
 .buttons {
   display: flex;
   flex-direction: column;
   row-gap: 24px;
 
-  button {
+  &_unauth {
     padding-right: 83px;
     padding-left: 83px;
+    font-size: $font-size-text-medium-small;
+    line-height: $font-line-height-text-medium-small;
+  }
+
+  &_auth {
+    height: 48px;
+    padding-right: 56px;
+    padding-left: 56px;
+    font-size: $font-size-text-medium-small;
+    line-height: $font-line-height-text-medium-small;
   }
 }
diff --git a/src/components/header/billet/billet.tsx b/src/components/header/billet/billet.tsx
@@ -1,23 +1,33 @@
 import classNames from 'classnames';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Button from 'shared/buttons/button/button';
 import routes from 'utils/routes';
+import { useAppSelector } from '../../../services/app/hooks';
+import { showUserPersonalData } from '../../../services/features/user/selectors';
+import { Icon } from '../../../shared/icons';
 import styles from './billet.module.scss';
 
 interface IBilletProps {
   extraClass?: string;
   onSwipeStart: (evt: React.TouchEvent<HTMLDivElement>) => void;
   onSwipeEnd: (evt: React.TouchEvent<HTMLDivElement>) => void;
+  onLogout: () => void;
 }
 
 export const Billet = ({
   extraClass,
   onSwipeStart,
   onSwipeEnd,
+  onLogout,
 }: IBilletProps) => {
   const navigate = useNavigate();
 
+  const { pathname } = useLocation();
+  const isProfilePage = pathname.endsWith(routes.profile);
+
+  const { user } = useAppSelector(showUserPersonalData);
+
   return (
     <div
       className={classNames(styles.billet, extraClass)}
@@ -31,16 +41,23 @@ export const Billet = ({
             type="button"
             model="primary"
             size="small"
-            label="Зарегистрироваться"
-            onClick={() => navigate(routes.signup)}
+            label={user ? 'Перейти в личный кабинет' : 'Зарегистрироваться'}
+            onClick={
+              user
+                ? () => navigate(routes.profile)
+                : () => navigate(routes.signup)
+            }
+            extraClass={user ? styles.buttons_auth : styles.buttons_unauth}
+            isDisabled={isProfilePage}
           />
           <Button
             type="button"
             model="secondary"
             size="small"
-            label="Войти"
+            label={user ? 'Выйти' : 'Войти'}
             hasBorder
-            onClick={() => navigate(routes.signin)}
+            customIcon={user && <Icon icon="LogoutTwoIcon" color="blue" />}
+            onClick={user ? onLogout : () => navigate(routes.signin)}
           />
         </div>
       </div>

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import classNames from 'classnames';
-import { useAppSelector } from 'services/app/hooks';
+import { useAppDispatch, useAppSelector } from 'services/app/hooks';
 import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import { showUserPersonalData } from 'services/features/user/selectors';
 import Tooltip from 'shared/tooltip/tooltip';
@@ -18,6 +18,7 @@ import { UserProfileIcon } from '../user-profile-icon';
 import { Search } from './search';
 import { Menu } from './menu';
 import { Billet } from './billet/billet';
+import { logoutUser } from '../../services/features/user/api';
 import styles from './header.module.scss';
 
 interface IHeaderProps {
@@ -65,6 +66,7 @@ export const Header = ({
   }, [isHamburgerMenuOpened]);
 
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
 
   const { user } = useAppSelector(showUserPersonalData);
   const userName = `${user?.first_name[0]}${user?.last_name[0]}`;
@@ -82,6 +84,18 @@ export const Header = ({
       : 'Открыть модальное окно с переходами на страницы регистрации и авторизации';
   };
 
+  const handleUserOut = () => {
+    const token = localStorage.getItem('auth_token');
+
+    if (!token) return;
+
+    dispatch(logoutUser(token)).then(() =>
+      navigate(routes.home, { replace: true })
+    );
+
+    setIsPopupOpened(false);
+  };
+
   return (
     <>
       <header className={styles.header}>
@@ -112,7 +126,9 @@ export const Header = ({
                 role="button"
                 tabIndex={0}
                 aria-label={createAriaLabel()}
-                onClick={user ? navigateToUserProfile : handleTogglePopup}
+                onClick={
+                  user && isDesktop ? navigateToUserProfile : handleTogglePopup
+                }
               >
                 <UserProfileIcon
                   avatar={user?.avatar || ''}
@@ -124,7 +140,7 @@ export const Header = ({
               </div>
             </div>
 
-            {isDesktop && (
+            {isDesktop && !user && (
               <div
                 className={classNames(styles.tooltip, {
                   [styles[`tooltip--open`]]: isPopupOpened,
@@ -157,6 +173,7 @@ export const Header = ({
             })}
             onSwipeStart={swipeStart}
             onSwipeEnd={swipeEnd}
+            onLogout={handleUserOut}
           />
         </OverlayingPopup>
       )}

diff --git a/src/components/sidebar/components/avatar-modal/avatar-modal.module.scss b/src/components/sidebar/components/avatar-modal/avatar-modal.module.scss
@@ -2,6 +2,7 @@
 @import 'assets/styles/abstracts/variables/fonts';
 @import 'assets/styles/abstracts/variables/animations';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/variables/media-queries.scss';
 
 .wrapper {
   position: relative;
@@ -11,10 +12,23 @@
   padding: 56px 128px;
   background-color: $color-neutral-0;
   border-radius: 24px;
+
+  @media screen and (max-width: $media-tablet-large) {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    margin-top: 240px;
+    padding: 32px 0 0;
+  }
 }
 
 .heading {
   @extend %heading-size-small;
+
+  @media screen and (max-width: $media-tablet-large) {
+    font-size: $font-size-article;
+    line-height: $font-line-height-article;
+  }
 }
 
 .placemat {
@@ -28,6 +42,14 @@
   border-radius: 140px;
   background-color: $color-brand-primary-100;
 
+  @media screen and (max-width: $media-tablet-large) {
+    margin: 270px 0 80px;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    margin-top: 75px;
+  }
+
   &--error {
     border: 2px dashed $color-system-error;
     box-sizing: border-box;
@@ -48,6 +70,7 @@
   > button {
     height: max-content;
     padding: 0;
+    color: $color-system-error;
   }
 }
 
@@ -72,6 +95,11 @@
   width: 24px;
   height: 24px;
 
+  @media screen and (max-width: $media-tablet-large) {
+    top: 32px;
+    right: 32px;
+  }
+
   svg {
     fill: $color-brand-primary-900;
   }

diff --git a/src/components/user-profile-icon/index.tsx b/src/components/user-profile-icon/index.tsx
@@ -33,7 +33,14 @@ export const UserProfileIcon: FC<UserInfo> = ({
         [styles['user__icon-header']]: isHeader,
       })}
     >
-      {isDoctor && <PlusIcon color="red" className={styles.user__plus} />}
+      {isDoctor && (
+        <PlusIcon
+          color="red"
+          className={classNames(styles.user__plus, {
+            [styles['user__plus-header']]: isHeader,
+          })}
+        />
+      )}
       {avatar ? (
         <img
           className={styles.user__avatar}

diff --git a/src/components/user-profile-icon/styles.module.scss b/src/components/user-profile-icon/styles.module.scss
@@ -36,6 +36,16 @@
     background-color: $color-neutral-0;
 
     &-header {
+      @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+        width: 40px;
+        height: 40px;
+      }
+
+      @media screen and (max-width: $media-tablet-large) {
+        width: 24px;
+        height: 24px;
+      }
+
       svg {
         fill: $color-brand-secondary-900;
       }
@@ -94,6 +104,13 @@
     position: absolute;
     top: -2px;
     right: 0;
+
+    &-header {
+      @media screen and (max-width: $media-tablet-large) {
+        width: 12px;
+        height: 12px;
+      }
+    }
   }
 
   &:hover {