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 (
@@ -38,10 +47,44 @@ export default function ProfileMenu() {
{title}
) : (
-
+ <>
+
+ !isLoadingExit && handleClosePopup('openPopupLogout')}
+ >
+
+
+ Хотите выйти из профиля?
+
+
+
+
+
+
+
+ >
)}
))}
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) => void;
checkAuthentication: () => Promise;
+ logout: () => Promise;
};
const AuthContext = createContext({
@@ -15,6 +17,7 @@ const AuthContext = createContext({
loading: true,
updateUsers: () => {},
checkAuthentication: () => Promise.resolve(),
+ logout: () => Promise.resolve(),
});
type AuthProviderProps = {
@@ -38,6 +41,14 @@ export const AuthProvider: React.FC = ({ children }) => {
}
};
+ const logout = () => {
+ return api.tokenLogoutCreate().finally(() => {
+ Cookies.remove('token');
+ setIsLoggedIn(false);
+ setUser({});
+ });
+ };
+
useEffect(() => {
checkAuthentication();
}, []);
@@ -48,7 +59,7 @@ export const AuthProvider: React.FC = ({ children }) => {
return (
{!loading && children}
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 = { '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')}`,
+ },
});
}