From 0103af243c72ed232be2a1b44d1959420beede79 Mon Sep 17 00:00:00 2001
From: Egor Kolesnikov <egor.koless@gmail.com>
Date: Sun, 19 Nov 2023 19:52:34 +1000
Subject: [PATCH] feat: add logout in profile

---
 .../profile-components/profile-menu/index.tsx | 61 ++++++++++++++++---
 .../profile-menu/profile-menu.module.scss     | 39 ++++++++++++
 src/contexts/auth-context.tsx                 | 13 +++-
 src/contexts/popup-context.tsx                |  2 +
 src/services/api.ts                           | 30 +++++++--
 5 files changed, 129 insertions(+), 16 deletions(-)

diff --git a/src/components/profile-components/profile-menu/index.tsx b/src/components/profile-components/profile-menu/index.tsx
index 765aebd3..b89d6d28 100644
--- a/src/components/profile-components/profile-menu/index.tsx
+++ b/src/components/profile-components/profile-menu/index.tsx
@@ -5,8 +5,11 @@ import ExitIcon from '@images/profile/exit.svg?react';
 import HeartIcon from '@images/profile/heart.svg?react';
 import MarkerIcon from '@images/profile/marker.svg?react';
 import UserIcon from '@images/profile/user.svg?react';
-// import { useAuth } from '@hooks/use-auth';
+import { useAuth } from '@hooks/use-auth';
 import clsx from 'clsx';
+import { usePopup } from '@hooks/use-popup';
+import Popup from '@components/popup';
+import { useState } from 'react';
 
 const menuArray = [
 	{ title: 'Мои заказы', Icon: BagIcon, path: '.' },
@@ -18,11 +21,17 @@ const menuArray = [
 
 export default function ProfileMenu() {
 	const navigate = useNavigate();
-	// const { logout } = useAuth();
+	const { logout } = useAuth();
+	const { handleOpenPopup, handleClosePopup, popupState } = usePopup();
+	const [isLoadingExit, setIsLoadingExit] = useState(false);
 
-	const onClick = () => {
-		// logout();
-		navigate('/');
+	const handleExit = () => {
+		setIsLoadingExit(true);
+		logout().then(() => {
+			handleClosePopup('openPopupLogout');
+			setIsLoadingExit(false);
+			navigate('/');
+		});
 	};
 	return (
 		<ul className={styles.list}>
@@ -38,10 +47,44 @@ export default function ProfileMenu() {
 							<span className={clsx('text_type_u', styles.link__title)}>{title}</span>
 						</NavLink>
 					) : (
-						<button className={styles.button} type="button" onClick={onClick}>
-							<Icon className={styles.button__icon} />
-							<span className={clsx('text_type_u', styles.button__title)}>{title}</span>
-						</button>
+						<>
+							<button
+								className={styles.button}
+								type="button"
+								onClick={() => handleOpenPopup('openPopupLogout')}
+							>
+								<Icon className={styles.button__icon} />
+								<span className={clsx('text_type_u', styles.button__title)}>{title}</span>
+							</button>
+							<Popup
+								openPopup={popupState.openPopupLogout}
+								onClickClose={() => !isLoadingExit && handleClosePopup('openPopupLogout')}
+							>
+								<div className={styles['popup-logout']}>
+									<h3 className={styles['popup-logout__title']}>
+										Хотите выйти из профиля?
+									</h3>
+									<div className={styles['popup-logout__buttons']}>
+										<button
+											onClick={handleExit}
+											type="button"
+											className={styles['popup-logout__button-confirm']}
+											disabled={isLoadingExit}
+										>
+											Да
+										</button>
+										<button
+											disabled={isLoadingExit}
+											onClick={() => handleClosePopup('openPopupLogout')}
+											type="button"
+											className={styles['popup-logout__button-cancel']}
+										>
+											Нет
+										</button>
+									</div>
+								</div>
+							</Popup>
+						</>
 					)}
 				</li>
 			))}
diff --git a/src/components/profile-components/profile-menu/profile-menu.module.scss b/src/components/profile-components/profile-menu/profile-menu.module.scss
index a344e5fa..cfafc6f5 100644
--- a/src/components/profile-components/profile-menu/profile-menu.module.scss
+++ b/src/components/profile-components/profile-menu/profile-menu.module.scss
@@ -76,3 +76,42 @@
 		fill: $accent-color-bright-green;
 	}
 }
+
+.popup-logout {
+	padding: 40px 72px;
+
+	&__title {
+		padding: 30px 0;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		gap: 40px;
+	}
+
+	&__button-confirm,
+	&__button-cancel {
+		padding: 8px 16px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border: none;
+		border-radius: 16px;
+		font-size: 18px;
+		font-family: $ubuntu-font;
+		line-height: 1.4;
+		cursor: pointer;
+	}
+
+	&__button-confirm {
+		color: #fff;
+		background: $form-button-color;
+	}
+
+	&__button-cancel {
+		background: #fff;
+		color: $active-text-color;
+		border: 1px solid $form-button-color;
+	}
+}
diff --git a/src/contexts/auth-context.tsx b/src/contexts/auth-context.tsx
index 3843e19a..e3727c69 100644
--- a/src/contexts/auth-context.tsx
+++ b/src/contexts/auth-context.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, useState, ReactNode, useEffect } from 'react';
 import api from '@services/api.ts';
+import Cookies from 'js-cookie';
 
 type AuthContextType = {
 	isLoggedIn: boolean;
@@ -7,6 +8,7 @@ type AuthContextType = {
 	loading: boolean;
 	updateUsers: (newUserData: Record<string, unknown>) => void;
 	checkAuthentication: () => Promise<void>;
+	logout: () => Promise<void>;
 };
 
 const AuthContext = createContext<AuthContextType>({
@@ -15,6 +17,7 @@ const AuthContext = createContext<AuthContextType>({
 	loading: true,
 	updateUsers: () => {},
 	checkAuthentication: () => Promise.resolve(),
+	logout: () => Promise.resolve(),
 });
 
 type AuthProviderProps = {
@@ -38,6 +41,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 		}
 	};
 
+	const logout = () => {
+		return api.tokenLogoutCreate().finally(() => {
+			Cookies.remove('token');
+			setIsLoggedIn(false);
+			setUser({});
+		});
+	};
+
 	useEffect(() => {
 		checkAuthentication();
 	}, []);
@@ -48,7 +59,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
 	return (
 		<AuthContext.Provider
-			value={{ isLoggedIn, user, updateUsers, loading, checkAuthentication }}
+			value={{ isLoggedIn, user, updateUsers, loading, checkAuthentication, logout }}
 		>
 			{!loading && children}
 		</AuthContext.Provider>
diff --git a/src/contexts/popup-context.tsx b/src/contexts/popup-context.tsx
index e7f0abc5..c5dc91eb 100644
--- a/src/contexts/popup-context.tsx
+++ b/src/contexts/popup-context.tsx
@@ -5,6 +5,7 @@ type PopupContextType = {
 		openPopup: boolean;
 		openPopupLogin: boolean;
 		openPopupRegistration: boolean;
+		openPopupLogout: boolean;
 	};
 	handleOpenPopup: (popupName: string) => void;
 	handleClosePopup: (popupName: string) => void;
@@ -17,6 +18,7 @@ export const PopupProvider: React.FC<{ children: ReactNode }> = ({ children }) =
 		openPopup: false,
 		openPopupLogin: false,
 		openPopupRegistration: false,
+		openPopupLogout: false,
 	});
 
 	const handleOpenPopup = (popupName: string) => {
diff --git a/src/services/api.ts b/src/services/api.ts
index 9327918c..d1db2136 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -32,6 +32,7 @@ class Api {
 
 	_checkResponse(res: Response) {
 		if (res.ok) {
+			if (res.status === 204) return res;
 			return res.json();
 		}
 		return Promise.reject(new Error(`Ошибка: ${res.statusText}`));
@@ -58,6 +59,9 @@ class Api {
 	tokenLogoutCreate() {
 		return this._request('token/logout/', {
 			method: 'POST',
+			headers: {
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 		});
 	}
 
@@ -99,6 +103,10 @@ class Api {
 	usersMeUpdate(data: User) {
 		return this._request('users/me/', {
 			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 			body: JSON.stringify(data),
 		});
 	}
@@ -106,6 +114,10 @@ class Api {
 	usersMePartialUpdate(data: User) {
 		return this._request('users/me/', {
 			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 			body: JSON.stringify(data),
 		});
 	}
@@ -198,12 +210,20 @@ class Api {
 	usersAddressesList(userId: string) {
 		return this._request(`users/${userId}/addresses/`, {
 			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 		});
 	}
 
 	usersAddressesRead(userId: string, id: string) {
 		return this._request(`users/${userId}/addresses/${id}/`, {
 			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 		});
 	}
 
@@ -270,14 +290,12 @@ class Api {
 
 	/* ----------------------------- Products ----------------------------- */
 	productsList(slug: string) {
-		const token = Cookies.get('token');
-		const headers: Record<string, unknown> = { 'Content-Type': 'application/json' };
-		if (token) {
-			headers.Authorization = `Token ${Cookies.get('token')}`;
-		}
 		return this._request(`products${'/' + slug}`, {
 			method: 'GET',
-			headers,
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 		});
 	}