From 50c2b0a61588a5aa5626ec43ab0123a6733ab373 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Thu, 27 Jul 2023 20:07:25 +0300
Subject: [PATCH] Added sign out button to user page

---
 front/src/assets/signOut.svg        |  4 ++++
 front/src/components/BackHeader.tsx |  6 ++++--
 front/src/components/Points.tsx     | 13 ++++++++++---
 front/src/components/SignOut.tsx    | 22 ++++++++++++++++++++++
 front/src/components/index.ts       |  1 +
 front/src/pages/UserPage.tsx        | 16 ++++++++++------
 front/src/utils/auth.ts             |  2 +-
 7 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 front/src/assets/signOut.svg
 create mode 100644 front/src/components/SignOut.tsx

diff --git a/front/src/assets/signOut.svg b/front/src/assets/signOut.svg
new file mode 100644
index 0000000..fdaeff6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/front/src/components/BackHeader.tsx b/front/src/components/BackHeader.tsx
index e8ba89f..dca8c0b 100644
--- a/front/src/components/BackHeader.tsx
+++ b/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>
     )
 }
diff --git a/front/src/components/Points.tsx b/front/src/components/Points.tsx
index fee87ff..184d876 100644
--- a/front/src/components/Points.tsx
+++ b/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,
 }
 
@@ -23,8 +24,14 @@ function Points({ points }: PointsProps) {
     return (
         <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>
     )
diff --git a/front/src/components/SignOut.tsx b/front/src/components/SignOut.tsx
new file mode 100644
index 0000000..9e01c3c
--- /dev/null
+++ b/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
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
index 6d26007..4ec2ca0 100644
--- a/front/src/components/index.ts
+++ b/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'
diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx
index 8d8b310..7ba9603 100644
--- a/front/src/pages/UserPage.tsx
+++ b/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} />
             ))}
diff --git a/front/src/utils/auth.ts b/front/src/utils/auth.ts
index 0f37b67..65fac6e 100644
--- a/front/src/utils/auth.ts
+++ b/front/src/utils/auth.ts
@@ -73,4 +73,4 @@ function getId() {
     }
 }
 
-export { getToken, setToken, getId }
+export { getToken, setToken, clearToken, getId }