1- import { Layout } from "@shared/ui/layout/Layout.tsx" ;
2- import { getJWTToken } from "@/shared/services/localStorage.service.ts" ;
3- import { Navigate , useNavigate } from "react-router-dom" ;
4- import { useEffect , useState } from "react" ;
5- import { getUserPractices } from "@/shared/services/axios.service.ts" ;
6- import { Practice } from "@/entities/Practice.ts" ;
1+ import { Layout } from "@shared/ui/layout/Layout.tsx" ;
2+ import { getJWTToken } from "@/shared/services/localStorage.service.ts" ;
3+ import { Navigate , useNavigate } from "react-router-dom" ;
4+ import { useEffect , useState } from "react" ;
5+ import { getUserPractices , getMe } from "@/shared/services/axios.service.ts" ;
6+ import { Practice } from "@/entities/Practice.ts" ;
7+ import { User } from "@/entities/User.ts" ;
78import {
89 Container ,
910 Grid ,
@@ -15,16 +16,10 @@ import {
1516 Tab ,
1617 Box ,
1718 Paper ,
18- Chip ,
19- Divider ,
20- List ,
21- ListItem ,
22- ListItemText ,
23- Link
19+ useMediaQuery ,
20+ useTheme ,
2421} from "@mui/material" ;
25- import AddIcon from '@mui/icons-material/Add' ;
26- import { User } from "@/entities/User.ts" ;
27- import { getMe } from "@/shared/services/axios.service.ts" ;
22+ import AddIcon from "@mui/icons-material/Add" ;
2823import { HandbookTab } from "./HandbookTab" ;
2924import { PracticeCard } from "./PracticeCard" ;
3025
@@ -35,12 +30,14 @@ export function PracticesIndexPage() {
3530 const [ activeTab , setActiveTab ] = useState ( 1 ) ;
3631 const navigate = useNavigate ( ) ;
3732
33+ const theme = useTheme ( ) ;
34+ const isMobile = useMediaQuery ( theme . breakpoints . down ( "sm" ) ) ; // Detect mobile
35+
3836 useEffect ( ( ) => {
39- getMe ( ) . then ( response => {
37+ getMe ( ) . then ( ( response ) => {
4038 const data : User = response . data ;
4139 setMe ( data ) ;
42-
43- getUserPractices ( data . userId ) . then ( response => {
40+ getUserPractices ( data . userId ) . then ( ( response ) => {
4441 setPractices ( response . data ) ;
4542 } ) ;
4643 } ) ;
@@ -50,39 +47,54 @@ export function PracticesIndexPage() {
5047 setActiveTab ( newValue ) ;
5148 } ;
5249
53- const activePractices = practices . filter ( practice => practice . status != ' Завершено' ) ;
54- const completedPractices = practices . filter ( practice => practice . status == ' Завершено' ) ;
50+ const activePractices = practices . filter ( ( p ) => p . status !== " Завершено" ) ;
51+ const completedPractices = practices . filter ( ( p ) => p . status === " Завершено" ) ;
5552
56- return tokenIsEmpty ? < Navigate to = "/login" replace /> : (
53+ return tokenIsEmpty ? (
54+ < Navigate to = "/login" replace />
55+ ) : (
5756 < Layout >
58- < Container maxWidth = "lg " sx = { { mt : 4 , p : 4 } } >
59- < Typography variant = " h4" align = "center" gutterBottom >
57+ < Container maxWidth = "md " sx = { { mt : 2 , p : isMobile ? 1 : 4 } } >
58+ < Typography variant = { isMobile ? "h5" : " h4"} align = "center" gutterBottom >
6059 Мои практики
6160 </ Typography >
6261
63- < Box sx = { { display : 'flex' , justifyContent : 'flex-end' , mb : 3 } } >
62+ < Box
63+ sx = { {
64+ display : "flex" ,
65+ justifyContent : "flex-end" ,
66+ mb : 2 ,
67+ } }
68+ >
6469 < Button
6570 variant = "contained"
66- startIcon = { < AddIcon /> }
71+ startIcon = { < AddIcon /> }
6772 onClick = { ( ) => navigate ( "/create/practice" ) }
73+ size = { isMobile ? "small" : "medium" }
6874 >
6975 Создать практику
7076 </ Button >
7177 </ Box >
7278
73- < Paper sx = { { mb : 3 } } >
74- < Tabs value = { activeTab } onChange = { handleTabChange } centered >
75- < Tab label = "Справочник" />
76- < Tab label = "Активные практики" />
77- < Tab label = "Завершенные практики" />
79+ < Paper sx = { { mb : 2 } } >
80+ < Tabs
81+ value = { activeTab }
82+ onChange = { handleTabChange }
83+ variant = { isMobile ? "scrollable" : "standard" }
84+ scrollButtons = { isMobile ? "auto" : undefined }
85+ centered = { ! isMobile }
86+ >
87+ < Tab label = "Справочник" />
88+ < Tab label = "Активные практики" />
89+ < Tab label = "Завершенные практики" />
7890 </ Tabs >
7991 </ Paper >
8092
81- < Grid container spacing = { 3 } >
93+ < Grid container spacing = { isMobile ? 1 : 3 } >
8294 { activeTab === 1 ? (
8395 activePractices . length > 0 ? (
84- activePractices . map ( ( practice , index ) => (
85- < Grid item xs = { 12 } key = { index } >
96+ activePractices . map ( ( practice ) => (
97+ < Grid item xs = { 12 } sm = { 6 } md = { 4 } key = { practice . id } >
8698 < PracticeCard
8799 practice = { practice }
88100 onClick = { ( ) => navigate ( `/practice/${ practice . id } ` ) }
@@ -98,8 +110,8 @@ export function PracticesIndexPage() {
98110 )
99111 ) : activeTab === 2 ? (
100112 completedPractices . length > 0 ? (
101- completedPractices . map ( ( practice , index ) => (
102- < Grid item xs = { 12 } key = { index } >
113+ completedPractices . map ( ( practice ) => (
114+ < Grid item xs = { 12 } sm = { 6 } md = { 4 } key = { practice . id } >
103115 < PracticeCard
104116 practice = { practice }
105117 onClick = { ( ) => navigate ( `/practices/${ practice . id } ` ) }
@@ -115,7 +127,7 @@ export function PracticesIndexPage() {
115127 )
116128 ) : (
117129 < Grid item xs = { 12 } >
118- < HandbookTab />
130+ < HandbookTab />
119131 </ Grid >
120132 ) }
121133 </ Grid >
0 commit comments