Added sign out button to user page

front/src/assets/signOut.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 20H6C4.89543 20 4 19.1046 4 18L4 6C4 4.89543 4.89543 4 6 4H14M10 12H21M21 12L18 15M21 12L18 9" stroke="rgb(185, 179, 170)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

front/src/components/BackHeader.tsx

@@ -2,22 +2,24 @@ import { Link } from 'react-router-dom'
 import { Navbar } from 'react-bootstrap'
 
 import BackButton from '../assets/backArrow.svg'
+import { PropsWithChildren } from 'react'
 
 type BackHeaderProps = {
     text: string
 }
 
-function BackHeader({ text }: BackHeaderProps) {
+function BackHeader({ text, children }: PropsWithChildren<BackHeaderProps>) {
     return (
         <Navbar>
             <Navbar.Brand as={Link} to='/'>
-                <img src={BackButton} alt='Go back' />
+                <img src={BackButton} alt='Назад' />
             </Navbar.Brand>
             <Navbar.Text className='me-auto'>
                 <h4 className='mb-0'>
                     {text}
                 </h4>
             </Navbar.Text>
+            {children}
         </Navbar>
     )
 }

front/src/components/Points.tsx

@@ -3,7 +3,7 @@ import { CSSProperties } from 'react'
 import handStarsIcon from '../assets/handStars.svg'
 
 type PointsProps = {
-    points?: number
+    points: number
 }
 
 const styles = {
@@ -16,6 +16,7 @@ const styles = {
     icon: {
         height: 24,
         paddingBottom: 5,
+        marginRight: 5,
     } as CSSProperties,
 }
 
@@ -24,7 +25,13 @@ function Points({ points }: PointsProps) {
         <div style={styles.container}>
             <h5>
                 Набрано очков:
-                <span style={styles.points}><img style={styles.icon} src={handStarsIcon} alt='Hand giving stars icon' /> {points}</span>
+                <span style={styles.points}>
+                    <img
+                        style={styles.icon}
+                        src={handStarsIcon}
+                        alt='Иконка руки, дающей звёзды' />
+                    {points}
+                </span>
             </h5>
         </div>
     )

front/src/components/SignOut.tsx

@@ -0,0 +1,22 @@
+import { Navbar } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { CSSProperties } from 'react'
+
+import { clearToken } from '../utils/auth'
+
+import signOutIcon from '../assets/signOut.svg'
+
+const styles = {
+    rightIcon: {
+        marginLeft: '1rem',
+        marginRight: 0
+    } as CSSProperties,
+}
+
+const SignOut = () => (
+    <Navbar.Brand style={styles.rightIcon} as={Link} to='/'>
+        <img onClick={clearToken} src={signOutIcon} alt='Выйти' />
+    </Navbar.Brand>
+)
+
+export default SignOut

front/src/components/index.ts

@@ -11,3 +11,4 @@ export { default as BackHeader } from './BackHeader'
 export { default as CategoryPreview } from './CategoryPreview'
 export { default as StoriesPreview } from './StoriesPreview'
 export { default as Points } from './Points'
+export { default as SignOut } from './SignOut'

front/src/pages/UserPage.tsx

@@ -1,9 +1,8 @@
 import { Container } from 'react-bootstrap'
 
-import BackHeader from '../components/BackHeader'
 import { useUser } from '../hooks/api'
 import { userCategories } from '../assets/userCategories'
-import { CategoryPreview, Points } from '../components'
+import { BackHeader, CategoryPreview, Points, SignOut } from '../components'
 import { gotError } from '../hooks/useFetch'
 
 function UserPage() {
@@ -12,11 +11,16 @@ function UserPage() {
     return (
         <Container style={{ maxWidth: 'calc(100vh*9/16)' }}>
             <BackHeader text={
-                gotError(user) ?
-                    user.error :
+                gotError(user) ? (
+                    user.error
+                ) : (
                     `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
-            } />
-            <Points points={user.data?.points} />
+                )
+            }>
+                <SignOut />
+            </BackHeader>
+
+            <Points points={gotError(user) ? -1 : user.data?.points} />
             {userCategories.map(cat => (
                 <CategoryPreview key={cat} category={cat} />
             ))}

front/src/utils/auth.ts

@@ -73,4 +73,4 @@ function getId() {
     }
 }
 
-export { getToken, setToken, getId }
+export { getToken, setToken, clearToken, getId }