Tatyana/Rehab_React_Vite_my_old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

адаптировала history.push() во всех компонентах

Browse Source
This commit is contained in:
Tatyana 2025-08-20 12:36:46 +03:00
parent e32ce04bb9
commit 00126080bf
9 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/BottomNavigation.tsx
View File

@ -3,6 +3,10 @@
import type React from "react"
import { useHistory, useLocation } from "react-router-dom"
import { getRouteHome } from "../shared/consts/router"
import { getRouteCourses } from "../shared/consts/router"
import { getRouteCourseExercises } from "../shared/consts/router"
import { getRouteSettings } from "../shared/consts/router"
const BottomNavigation: React.FC = () => {
const history = useHistory()
@ -80,15 +84,15 @@ const BottomNavigation: React.FC = () => {
)
const navItems = [
{ path: "/home", icon: HomeIcon, label: "Домой" },
{ path: "/courses", icon: CoursesIcon, label: "Курсы" },
{ path: "/course/${courseId}/exercises", icon: ExerciseIcon, label: "Тренировка" },
{ path: "/settings", icon: SettingsIcon, label: "Меню" },
{ path: getRouteHome(), icon: HomeIcon, label: "Домой" },
{ path: getRouteCourses(), icon: CoursesIcon, label: "Курсы" },
{ path: getRouteCourseExercises(':id'), icon: ExerciseIcon, label: "Тренировка" },
{ path: getRouteSettings(), icon: SettingsIcon, label: "Меню" },
]
const isActive = (path: string) => {
if (path === "/exercise/1") return location.pathname.includes("/exercise")
return location.pathname === path
// Проверка на совпадение или включение
return location.pathname === path || location.pathname.startsWith(path);
}
return (

9
src/components/CourseCard.tsx
View File

@ -2,6 +2,7 @@
import type React from "react"
import { useHistory } from "react-router-dom"
import { getRouteCourseExercises } from "../shared/consts/router"
interface CourseCardProps {
id: number
@ -14,13 +15,15 @@ interface CourseCardProps {
}
const CourseCard: React.FC<CourseCardProps> = ({
id,
name,
progress,
color,
icon,
}) => {
const history = useHistory()
const history = useHistory();
history.push(getRouteCourseExercises(':id'));
return (
@ -28,7 +31,7 @@ const CourseCard: React.FC<CourseCardProps> = ({
<div
onClick={() => history.push(`/course/${id}/exercises`)}
onClick={() => history.push(getRouteCourseExercises(':id'))}
className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
>
<div className="flex items-center space-x-5">

7
src/pages/CourseComplete.tsx
View File

@ -6,6 +6,9 @@ import { useHistory } from "react-router-dom"
import confetti from "../assets/Confetti.gif"
import { getRouteCourses } from "../shared/consts/router"
import { getRouteHome } from "../shared/consts/router"
const CourseComplete: React.FC = () => {
const history = useHistory()
const [animationPhase, setAnimationPhase] = useState(0)
@ -87,13 +90,13 @@ animationPhase >= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-transl
}`}
>
<button
onClick={() => history.push("/courses")}
onClick={() => history.push(getRouteCourses())}
className="w-full bg-white/20 backdrop-blur-lg hover:bg-white/30 text-white font-semibold py-3 px-6 rounded-xl border border-white/30 transition-all duration-200 transform hover:scale-105"
>
Выбрать новый курс
</button>
<button
onClick={() => history.push("/home")}
onClick={() => history.push(getRouteHome())}
className="w-full bg-transparent border-2 border-white/50 hover:bg-white/10 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200"
>
На главную

7
src/pages/CourseExercises.tsx
View File

@ -8,6 +8,9 @@ import HeaderNav from "../components/HeaderNav"
import BottomNavigation from "../components/BottomNavigation"
import video from "../assets/video.mov"
import { getRouteExercise } from "../shared/consts/router"
const CourseExercises: React.FC = () => {
const history = useHistory()
const { id } = useParams<{ id: string }>();
@ -154,7 +157,7 @@ const course = {
<button
onClick={() => history.push(getExerciseRoute(currentExercise.id))}
onClick={() => history.push(getRouteExercise(currentExercise.id))}
className="w-full bg-gradient-to-r bg-orange-400 text-white font-semibold py-4 px-6 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg backdrop-blur-sm"
>
Начать упражнение
@ -184,7 +187,7 @@ const course = {
{course.exercises.map((exercise, index) => (
<div
key={exercise.id}
onClick={() => history.push(`/exercise/${exercise.id}`)}
onClick={() => history.push(getRouteExercise(currentExercise.id))}
className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : ""
}`}
>

4
src/pages/Courses.tsx
View File

@ -5,7 +5,7 @@ import BottomNavigation from "../components/BottomNavigation"
import { useHistory } from "react-router-dom"
import HeaderNav from "../components/HeaderNav"
import { getRouteCourseExercises } from "../shared/consts/router"
const Home: React.FC = () => {
const history = useHistory()
@ -59,7 +59,7 @@ const Home: React.FC = () => {
{courses.map((course) => (
<div
key={course.id}
onClick={() => history.push(`/course/${course.id}/exercises`)}
onClick={() => history.push(getRouteCourseExercises(':id'))}
className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
>
<div className="flex items-center space-x-5">

3
src/pages/Exercise.tsx
View File

@ -4,6 +4,7 @@ import { useState, useEffect } from "react"
import { useHistory } from "react-router-dom"
import BottomNavigation from "../components/BottomNavigation"
import { getRouteCourseComplete } from "../shared/consts/router"
import HeaderNav from "../components/HeaderNav"
import video from "../assets/video.mov"
@ -25,7 +26,7 @@ const Exercise: React.FC = () => {
if (prev >= totalTime) {
setIsPlaying(false)
// Show completion animation
history.push("/course-complete")
history.push(getRouteCourseComplete())
return totalTime
}
return prev + 1

2
src/pages/ForgotPassword.tsx
View File

@ -143,7 +143,7 @@ const handleSubmit = async (e: React.FormEvent) => {
</div>
<div className="text-center">
<p className="text-gray-700/60 text-xs mb-4">Автоматический переход через 3 секунды...</p>
<button onClick={() => history.push("/login")} className="text-gray-700 font-semibold hover:underline">
<button onClick={() => history.push(getRouteLogin())} className="text-gray-700 font-semibold hover:underline">
Вернуться к входу
</button>
</div>

11
src/pages/Home.tsx
View File

@ -7,6 +7,11 @@ import { useHistory, Link } from "react-router-dom"
import HeaderNav from "../components/HeaderNav"
import BottomNavigation from "../components/BottomNavigation"
import CircularProgressDisplay from "../components/CircularProgressDisplay"
import { getRouteExercise } from "../shared/consts/router"
import { getRouteCourses } from "../shared/consts/router"
import { getRouteCourseExercises } from "../shared/consts/router"
export default function Home() {
const history = useHistory()
@ -98,7 +103,7 @@ export default function Home() {
</div>
</div>
</div>
<div onClick={() => history.push("/exercise/1")} className="px-4 sm:px-6 space-y-6 ">
<div onClick={() => history.push(getRouteExercise(':id'))} className="px-4 sm:px-6 space-y-6 ">
{/* Current Exercise */}
<div className="bg-gradient-to-r from-[#2BACBE] to-[#1E7F8C] rounded-3xl p-6 shadow-2xl text-white max-w-4xl mx-auto my-8 transition-transform transform hover:scale-105 duration-300">
{/* Заголовок и статус */}
@ -142,7 +147,7 @@ export default function Home() {
</div>
{/* Quick Stats (Total Exercises & Total Courses) */}
<div className="grid grid-cols-2 gap-4 md:gap-10">
<div onClick={() => history.push("/courses")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden">
<div onClick={() => history.push(getRouteCourses())} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
width={180}
@ -174,7 +179,7 @@ export default function Home() {
<div className="text-xl font-bold text-gray-800 mb-1 z-20 relative">Курсы</div>
<div className="text-base text-gray-600 z-20 relative">все назначенные</div>
</div>
<div onClick={() => history.push("/course/${courseId}/exercises")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden">
<div onClick={() => history.push(getRouteCourseExercises(':id'))} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
width={180}

4
src/pages/Settings.tsx
View File

@ -4,12 +4,14 @@ import type React from "react"
import { useHistory } from "react-router-dom"
import BottomNavigation from "../components/BottomNavigation"
import { getRouteLogin } from "../shared/consts/router"
const Settings: React.FC = () => {
const history = useHistory()
const handleLogout = () => {
localStorage.clear()
history.push("/login")
history.push(getRouteLogin())
}
return (