Add dynamic breadcrumbs to Header via React Context

Replace hardcoded "Coffee Project / Projects" with a BreadcrumbsContext that each page registers into via useBreadcrumbs(). The Header reads breadcrumb items dynamically, renders links for items with href, and makes "Coffee Project" clickable to open the navigation drawer. Also removes the unused currentScreenName from Redux appState. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-19 22:25:27 +03:00
parent 674d5d735b
commit 42ce5fa0fe
10 changed files with 307 additions and 34 deletions
@@ -0,0 +1,101 @@
+"use client"
+
+import type { JSX } from "react"
+
+import moment from "moment"
+import { FunctionComponent } from "react"
+
+import {
+	AvatarUpload,
+	ChangePasswordForm,
+	EditProfileForm,
+	LogoutButton,
+} from "@features/profile"
+import api from "@shared/api"
+import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
+import { StaticLoader } from "@shared/ui/Loader"
+import { Card } from "@shared/ui"
+
+import { IProfilePageProps } from "./ProfilePage.d"
+import styles from "./ProfilePage.module.scss"
+
+export const ProfilePage: FunctionComponent<
+	IProfilePageProps
+> = (): JSX.Element => {
+	useBreadcrumbs([{ label: "Profile" }])
+
+	const {
+		data: user,
+		isLoading,
+		refetch,
+	} = api.useQuery("get", "/api/users/me/")
+
+	const { mutate: updateUser } = api.useMutation(
+		"patch",
+		"/api/users/{user_id}/",
+	)
+
+	const handleAvatarChange = (url: string) => {
+		if (!user) return
+		updateUser(
+			{
+				params: { path: { user_id: user.id } },
+				body: { avatar: url },
+			},
+			{ onSuccess: () => refetch() },
+		)
+	}
+
+	if (isLoading) return <StaticLoader fullscreen />
+
+	if (!user) {
+		return (
+			<div className={styles.root} data-testid="ProfilePage">
+				<p>Не удалось загрузить данные пользователя</p>
+			</div>
+		)
+	}
+
+	return (
+		<div className={styles.root} data-testid="ProfilePage">
+			<div className={styles.container}>
+				<AvatarUpload
+					currentAvatarUrl={user.avatar}
+					onAvatarChange={handleAvatarChange}
+				/>
+
+				<Card className={styles.section}>
+					<EditProfileForm user={user} />
+				</Card>
+
+				<Card className={styles.section}>
+					<ChangePasswordForm />
+				</Card>
+
+				<Card className={styles.section}>
+					<h3 className={styles.sectionTitle}>Аккаунт</h3>
+					<div className={styles.infoList}>
+						<div className={styles.infoRow}>
+							<span className={styles.infoLabel}>Логин</span>
+							<span className={styles.infoValue}>{user.username}</span>
+						</div>
+						<div className={styles.infoRow}>
+							<span className={styles.infoLabel}>Дата регистрации</span>
+							<span className={styles.infoValue}>
+								{moment(user.date_joined).format("DD.MM.YYYY")}
+							</span>
+						</div>
+						<div className={styles.infoRow}>
+							<span className={styles.infoLabel}>Статус</span>
+							<span className={styles.infoValue}>
+								{user.is_active ? "Активен" : "Неактивен"}
+							</span>
+						</div>
+					</div>
+				</Card>
+
+				<LogoutButton />
+			</div>
+		</div>
+	)
+}