11 |
17 |
12 |
16 |
13 | {children}
14 |
15 |
9 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/api/generated/heleketPaymentWebhookResponseFrom.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | /**
10 | * Payer's wallet address
11 | * @nullable
12 | */
13 | export type HeleketPaymentWebhookResponseFrom = { [key: string]: unknown } | null;
14 |
--------------------------------------------------------------------------------
/src/api/generated/createLessonRequest.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | export interface CreateLessonRequest {
10 | /** Lesson title */
11 | title: string;
12 | /** Course ID to which the lesson belongs */
13 | courseId: string;
14 | }
15 |
--------------------------------------------------------------------------------
/src/api/instance.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | import { APP_CONFIG } from '../constants/app'
4 | import { cookies } from '../lib/cookie'
5 |
6 | export const api = axios.create({
7 | baseURL: APP_CONFIG.apiUrl
8 | })
9 |
10 | export const instance = axios.create({
11 | baseURL: APP_CONFIG.apiUrl,
12 | headers: {
13 | 'X-Session-Token': cookies.get('token') ?? ''
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/src/app/payment/success/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next'
2 |
3 | import { PaymentSuccess } from '@/src/components/payment/payment-success'
4 |
5 | export const metadata: Metadata = {
6 | title: 'Успешная оплата',
7 | robots: {
8 | index: false,
9 | follow: false
10 | }
11 | }
12 |
13 | export default function PaymentSuccessPage() {
14 | return {title}
10 |{description}
11 |
8 |
10 |
11 |
15 |
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/api/generated/mfaStatusResponse.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | export interface MfaStatusResponse {
10 | /** Indicates if TOTP MFA is enabled for the account */
11 | totpMfa: boolean;
12 | /** Indicates if Passkey MFA is enabled for the account */
13 | passkeyMfa: boolean;
14 | /** Indicates if recovery codes are active for the account */
15 | recoveryActive: boolean;
16 | }
17 |
--------------------------------------------------------------------------------
/src/api/generated/mfaControllerVerifyBody.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 | // @ts-nocheck
9 | import type { MfaPasskeyRequest } from './mfaPasskeyRequest'
10 | import type { MfaRecoveryRequest } from './mfaRecoveryRequest'
11 | import type { MfaTotpRequest } from './mfaTotpRequest'
12 |
13 | export type MfaControllerVerifyBody =
14 | | MfaTotpRequest
15 | | MfaPasskeyRequest
16 | | MfaRecoveryRequest
17 |
--------------------------------------------------------------------------------
/src/app/robots.ts:
--------------------------------------------------------------------------------
1 | import type { MetadataRoute } from 'next'
2 |
3 | import { APP_CONFIG } from '../constants'
4 |
5 | export default function robots(): MetadataRoute.Robots {
6 | return {
7 | rules: {
8 | userAgent: '*',
9 | allow: '/',
10 | disallow: [
11 | '/*?',
12 | '/*.html',
13 | '/auth/recovery/*',
14 | '/account/*',
15 | '/lesson/*',
16 | '*?*=*',
17 | '*?*=*&*=*',
18 | '*?*=*=*'
19 | ]
20 | },
21 | host: APP_CONFIG.baseUrl,
22 | sitemap: `${APP_CONFIG.baseUrl}/sitemap.xml`
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/lib/analytics/providers/posthog.ts:
--------------------------------------------------------------------------------
1 | import posthog from 'posthog-js'
2 |
3 | export const posthogProvider = {
4 | init() {
5 | if (typeof window === 'undefined') return
6 |
7 | posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY as string, {
8 | api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
9 | person_profiles: 'always',
10 | defaults: '2025-05-24'
11 | })
12 | },
13 |
14 | track(event: string, data?: RecordВнешний вид
9 |
12 |
14 |
8 | {[...Array(3)].map((_, i) => (
9 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/lib/analytics/index.ts:
--------------------------------------------------------------------------------
1 | import { authEvents } from './events'
2 | import { consoleProvider, metrikaProvider, posthogProvider } from './providers'
3 |
4 | const providers = [
5 | posthogProvider,
6 | metrikaProvider,
7 | ...(process.env.NODE_ENV === 'development' ? [consoleProvider] : [])
8 | ]
9 |
10 | export function initAnalytics() {
11 | if (typeof window === 'undefined') return
12 | providers.forEach(p => p.init?.())
13 | }
14 |
15 | export function track(event: string, data?: Record
18 |
20 | )
21 | }
22 |
23 | return <>{children}
24 | }
25 |
--------------------------------------------------------------------------------
/src/providers/fingerprint-provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
4 | import { type ReactNode } from 'react'
5 |
6 | interface FingerprintProviderProps {
7 | children: ReactNode
8 | }
9 |
10 | export function FingerprintProvider({ children }: FingerprintProviderProps) {
11 | return (
12 |
13 |
15 |
16 |
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/manifest.ts:
--------------------------------------------------------------------------------
1 | import { MetadataRoute } from 'next'
2 |
3 | import { SEO } from '../constants'
4 |
5 | export default function manifest(): MetadataRoute.Manifest {
6 | return {
7 | name: SEO.name,
8 | short_name: SEO.name,
9 | categories: SEO.keywords,
10 | lang: 'ru_RU',
11 | description: SEO.description,
12 | start_url: '/',
13 | display: 'standalone',
14 | background_color: '#FFFFFF',
15 | theme_color: '#2563EB',
16 | orientation: 'portrait',
17 | icons: [
18 | {
19 | src: '/touch-icons/192x192.png',
20 | sizes: '192x192',
21 | type: 'image/png'
22 | },
23 | {
24 | src: '/touch-icons/512x512.png',
25 | sizes: '512x512',
26 | type: 'image/png'
27 | }
28 | ]
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/api/generated/coursesResponse.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | export interface CoursesResponse {
10 | /** Unique identifier */
11 | id: string;
12 | /** Title of the course */
13 | title: string;
14 | /** Slug of the course (unique URL identifier) */
15 | slug: string;
16 | /**
17 | * Short description of the course
18 | * @nullable
19 | */
20 | shortDescription: string | null;
21 | /**
22 | * Identifier of the course thumbnail
23 | * @nullable
24 | */
25 | thumbnail: string | null;
26 | /** Number of lessons in the course */
27 | lessons: number;
28 | }
29 |
--------------------------------------------------------------------------------
/src/hooks/useCurrent.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 |
3 | import { useGetMe } from '../api/hooks'
4 | import { instance } from '../api/instance'
5 | import { cookies } from '../lib/cookie'
6 |
7 | import { useAuth } from './useAuth'
8 |
9 | export function useCurrent() {
10 | const { isAuthorized } = useAuth()
11 |
12 | const {
13 | data: user,
14 | isLoading,
15 | error
16 | } = useGetMe({
17 | retry: false,
18 | enabled: isAuthorized
19 | })
20 |
21 | useEffect(() => {
22 | if (error) {
23 | cookies.remove('token')
24 |
25 | delete instance.defaults.headers['X-Session-Token']
26 |
27 | window.location.reload()
28 | }
29 | }, [error])
30 |
31 | return {
32 | user,
33 | isLoading,
34 | error
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/api/generated/initPaymentRequestMethod.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | /**
10 | * Payment method
11 | */
12 | export type InitPaymentRequestMethod = typeof InitPaymentRequestMethod[keyof typeof InitPaymentRequestMethod];
13 |
14 |
15 | // eslint-disable-next-line @typescript-eslint/no-redeclare
16 | export const InitPaymentRequestMethod = {
17 | BANK_CARD: 'BANK_CARD',
18 | SBP: 'SBP',
19 | T_PAY: 'T_PAY',
20 | SBER_PAY: 'SBER_PAY',
21 | YOOMONEY: 'YOOMONEY',
22 | CRYPTO: 'CRYPTO',
23 | INTERNATIONAL_CARD: 'INTERNATIONAL_CARD',
24 | TELEGRAM_STARS: 'TELEGRAM_STARS',
25 | } as const;
26 |
--------------------------------------------------------------------------------
/src/api/generated/accountResponse.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | export interface AccountResponse {
10 | /** Unique identifier */
11 | id: string;
12 | /** Display name */
13 | displayName: string;
14 | /** Email address */
15 | email: string;
16 | /** Identifier of the user avatar */
17 | avatar: string;
18 | /** Indicates whether the user has verified their email address */
19 | isEmailVerified: boolean;
20 | /** Indicates whether auto billing is enabled for the user */
21 | isAutoBilling: boolean;
22 | /** Indicates whether the user has an active subscription */
23 | isPremium: boolean;
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/shared/captcha.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from 'next-themes'
2 | import Turnstile, { type TurnstileProps } from 'react-turnstile'
3 |
4 | interface CaptchaProps extends OmitПодписка
14 |
17 |
19 |
14 |
16 |
17 |
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/api/generated/userResponse.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | export interface UserResponse {
10 | /** Unique identifier */
11 | id: string;
12 | /** Account creation date */
13 | createdAt: string;
14 | /** Email address */
15 | email: string;
16 | /** Username */
17 | username: string;
18 | /** Display name */
19 | displayName: string;
20 | /**
21 | * Identifier of the user avatar
22 | * @nullable
23 | */
24 | avatar: string | null;
25 | /** Indicates whether the user is banned */
26 | isBanned: boolean;
27 | /** Indicates whether multi-factor authentication is enabled */
28 | isMfaEnabled: boolean;
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/icons/tbank-icon.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 |
3 | interface TBankIconProps extends SVGPropsАккаунт
15 |
18 |
21 |
14 |
16 |
17 |
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/account/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 |
3 | import { Header } from '@/src/components/layout/header'
4 | import { UserNavigation } from '@/src/components/layout/user-navigation'
5 | import { AccountProvider } from '@/src/providers'
6 |
7 | export default function AccountLayout({ children }: { children: ReactNode }) {
8 | return (
9 | Профиль
15 |
18 |
21 |
13 |
20 |
14 |
19 |
15 |
17 | {children}
18 |
9 | {/*
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/proxy.ts:
--------------------------------------------------------------------------------
1 | import { type NextRequest, NextResponse } from 'next/server'
2 |
3 | export default async function proxy(request: NextRequest) {
4 | const { cookies, url } = request
5 |
6 | const token = cookies.get('token')?.value
7 |
8 | const isAuthPage = url.includes('/auth')
9 | const isVerifyPage = url.includes('/auth/verify')
10 |
11 | if (isVerifyPage) {
12 | if (!token) {
13 | return NextResponse.redirect(new URL('/auth/login', url))
14 | }
15 | return NextResponse.next()
16 | }
17 |
18 | if (isAuthPage) {
19 | if (token) {
20 | return NextResponse.redirect(new URL('/account', url))
21 | }
22 | return NextResponse.next()
23 | }
24 |
25 | if (!token) {
26 | return NextResponse.redirect(new URL('/auth/login', url))
27 | }
28 | }
29 |
30 | export const config = {
31 | matcher: ['/auth/:path*', '/account/:path*', '/lesson/:path*']
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/layout/nav-links.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from 'next'
2 | import Link from 'next/link'
3 |
4 | import { ROUTES } from '@/src/constants'
5 |
6 | interface NavLink {
7 | title: string
8 | href: Route
9 | }
10 |
11 | export const navLinks: NavLink[] = [
12 | { title: 'Курсы', href: ROUTES.COURSES.ROOT },
13 | { title: 'Об основателе', href: ROUTES.ABOUT },
14 | { title: 'Подписка', href: ROUTES.PREMIUM }
15 | ]
16 |
17 | export function NavLinks() {
18 | return (
19 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/api/generated/heleketPaymentWebhookResponseStatus.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | /**
10 | * Payment status
11 | */
12 | export type HeleketPaymentWebhookResponseStatus = typeof HeleketPaymentWebhookResponseStatus[keyof typeof HeleketPaymentWebhookResponseStatus];
13 |
14 |
15 | // eslint-disable-next-line @typescript-eslint/no-redeclare
16 | export const HeleketPaymentWebhookResponseStatus = {
17 | confirm_check: 'confirm_check',
18 | paid: 'paid',
19 | paid_over: 'paid_over',
20 | fail: 'fail',
21 | wrong_amount: 'wrong_amount',
22 | cancel: 'cancel',
23 | system_fail: 'system_fail',
24 | refund_process: 'refund_process',
25 | refund_fail: 'refund_fail',
26 | refund_paid: 'refund_paid',
27 | } as const;
28 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | import * as LabelPrimitive from '@radix-ui/react-label'
2 | import { type VariantProps, cva } from 'class-variance-authority'
3 | import {
4 | type ComponentPropsWithoutRef,
5 | type ComponentRef,
6 | forwardRef
7 | } from 'react'
8 |
9 | import { cn } from '@/src/lib/utils'
10 |
11 | const labelVariants = cva(
12 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
13 | )
14 |
15 | const Label = forwardRef<
16 | ComponentRef
10 |
11 |
12 |
13 |
*/}
14 |
15 |
16 |
20 |
29 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/icons/yoomoney-icon.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 |
3 | interface YoomoneyIconProps extends SVGProps
29 | {isLoading &&
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/home/popular.tsx:
--------------------------------------------------------------------------------
1 | import { CourseCard } from '../course/course-card'
2 |
3 | import { CoursesResponse } from '@/src/api/generated'
4 |
5 | interface PopularProps {
6 | courses: CoursesResponse[]
7 | }
8 |
9 | export function Popular({ courses }: PopularProps) {
10 | return (
11 | Загрузка...
} 30 |
12 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronLeft } from 'lucide-react'
2 | import type { Metadata } from 'next'
3 | import Link from 'next/link'
4 |
5 | import { Button } from '../components/ui/button'
6 | import { ROUTES } from '../constants/routes'
7 |
8 | export const metadata: Metadata = {
9 | title: 'Страница не найдена'
10 | }
11 |
12 | export default function NotFoundPage() {
13 | return (
14 | 13 | Популярные курсы 14 |
15 |16 | Cамые популярные курсы среди пользователей платформы 17 |
18 |
19 | {courses.map((course, index) => (
20 |
23 |
15 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/api/generated/courseResponse.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generated by orval v7.4.1 🍺
3 | * Do not edit manually.
4 | * TeaCoder API
5 | * API for Teacoder educational platform
6 | * OpenAPI spec version: 1.0.0
7 | */
8 |
9 | export interface CourseResponse {
10 | /** Unique identifier */
11 | id: string;
12 | /** Title of the course */
13 | title: string;
14 | /** Slug of the course (unique URL identifier) */
15 | slug: string;
16 | /**
17 | * Short description of the course
18 | * @nullable
19 | */
20 | shortDescription: string | null;
21 | /**
22 | * Full description of the course
23 | * @nullable
24 | */
25 | fullDescription: string | null;
26 | /**
27 | * Identifier of the course thumbnail
28 | * @nullable
29 | */
30 | thumbnail: string | null;
31 | /**
32 | * YouTube URL for course content or trailer
33 | * @nullable
34 | */
35 | youtubeUrl: string | null;
36 | /** Number of views the course has */
37 | views: number;
38 | /** Date when the course was created */
39 | createdAt: string;
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/home/telegram-cta.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import { FaTelegram } from 'react-icons/fa6'
3 |
4 | import { Button } from '../ui/button'
5 |
6 | export function TelegramCTA() {
7 | return (
8 |
16 |
29 | 404
17 |18 | Кажется, мы потеряли эту страницу. 19 |
20 |
21 |
27 |
28 |
9 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/icons/sberbank-icon.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 |
3 | interface SberbankIconProps extends SVGProps10 | Присоединяйся в Telegram 11 |
12 | 13 |14 | Подписывайся на наш канал! Получай последние новости, общайся с 15 | единомышленниками и будь в курсе самых актуальных событий. 16 |
17 | 18 | 33 |
24 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/src/constants/sso-providers.ts:
--------------------------------------------------------------------------------
1 | import type { IconType } from 'react-icons'
2 | import { FaDiscord, FaGithub } from 'react-icons/fa6'
3 | import { FcGoogle } from 'react-icons/fc'
4 | import { RiTelegram2Fill } from 'react-icons/ri'
5 |
6 | export interface SsoProviderMeta {
7 | id: string
8 | name: string
9 | description: string
10 | icon: IconType
11 | color?: string
12 | }
13 |
14 | export const SSO_PROVIDERS: Record
25 | {label && (
26 | {label}
27 | )}
28 | {isShowPercentage && (
29 |
30 | {progress}%
31 |
32 | )}
33 |
34 |
18 |
26 | 19 | Курсы 20 |
21 |22 | Здесь собраны курсы по веб-разработке, которые помогут вам 23 | освоить самые востребованные технологии и инструменты. 24 |
25 |
27 | {courses.map((course, index) => (
28 |
31 | 33 | Чтобы завершить подтверждение почты, нажми на кнопку ниже. 34 |
35 | 44 |
23 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/account/sessions/remove-all-sessions.tsx:
--------------------------------------------------------------------------------
1 | import { useQueryClient } from '@tanstack/react-query'
2 | import { useState } from 'react'
3 | import { toast } from 'sonner'
4 |
5 | import { ConfirmDialog } from '../../shared/confirm-dialog'
6 | import { Button } from '../../ui/button'
7 |
8 | import { useRemoveAllSessions } from '@/src/api/hooks'
9 |
10 | export function RemoveAllSessions() {
11 | const [isOpen, setIsOpen] = useState(false)
12 |
13 | const queryClient = useQueryClient()
14 |
15 | const { mutate, isPending } = useRemoveAllSessions({
16 | onSuccess() {
17 | queryClient.invalidateQueries({ queryKey: ['get sessions'] })
18 | setIsOpen(false)
19 | },
20 | onError(error: any) {
21 | toast.error(
22 | error.response?.data?.message ?? 'Ошибка при отключении'
23 | )
24 | }
25 | })
26 |
27 | return (
28 |
24 |
25 |
38 |
39 |
30 |
37 |
17 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/account/connections/unlink-provider.tsx:
--------------------------------------------------------------------------------
1 | import { useQueryClient } from '@tanstack/react-query'
2 | import { useState } from 'react'
3 | import { toast } from 'sonner'
4 |
5 | import { ConfirmDialog } from '../../shared/confirm-dialog'
6 | import { Button } from '../../ui/button'
7 |
8 | import { useUnlinkAccount } from '@/src/api/hooks'
9 |
10 | interface UnlinkProviderProps {
11 | provider: string
12 | }
13 |
14 | export function UnlinkProvider({ provider }: UnlinkProviderProps) {
15 | const [isOpen, setIsOpen] = useState(false)
16 |
17 | const queryClient = useQueryClient()
18 |
19 | const { mutate, isPending } = useUnlinkAccount({
20 | onSuccess() {
21 | queryClient.invalidateQueries({
22 | queryKey: ['sso status']
23 | })
24 | setIsOpen(false)
25 | },
26 | onError(error: any) {
27 | toast.error(
28 | error.response?.data?.message ?? 'Ошибка при отключении'
29 | )
30 | }
31 | })
32 |
33 | return (
34 |
18 | {isLoading ? (
19 |
24 |
41 | )}
42 |
43 |
20 |
22 | ) : (
23 |
25 |
31 |
32 | {data?.map((session, index) => (
33 |
40 |
20 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/layout/user-navigation.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { ChartArea, LinkIcon, MonitorSmartphone, Settings } from 'lucide-react'
4 | import Link from 'next/link'
5 | import { usePathname } from 'next/navigation'
6 |
7 | import { buttonVariants } from '../ui/button'
8 |
9 | import { ROUTES } from '@/src/constants'
10 | import { cn } from '@/src/lib/utils'
11 |
12 | export const links = [
13 | {
14 | title: 'Мой прогресс',
15 | href: ROUTES.ACCOUNT.ROOT,
16 | icon: ChartArea
17 | },
18 | {
19 | title: 'Настройки аккаунта',
20 | href: ROUTES.ACCOUNT.SETTINGS,
21 | icon: Settings
22 | },
23 | {
24 | title: 'Устройства',
25 | href: ROUTES.ACCOUNT.SESSIONS,
26 | icon: MonitorSmartphone
27 | },
28 | {
29 | title: 'Связанные аккаунты',
30 | href: ROUTES.ACCOUNT.CONNECTIONS,
31 | icon: LinkIcon
32 | }
33 | ]
34 |
35 | export function UserNavigation() {
36 | const pathname = usePathname()
37 |
38 | return (
39 |
21 |
27 |
28 |
33 |
34 | {course.title}
29 |30 | {course.shortDescription} 31 |
32 |
35 |
40 | {lessons.length > 0 && (
41 | <>
42 |
43 | О курсе
36 |37 | {course.fullDescription} 38 |
39 |
40 |
64 |
65 | )
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import { type VariantProps, cva } from 'class-variance-authority'
2 | import { type ComponentPropsWithoutRef, forwardRef } from 'react'
3 |
4 | import { cn } from '@/src/lib/utils'
5 |
6 | const badgeVariants = cva(
7 | 'inline-flex items-center gap-x-1 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium ring-1 ring-inset',
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | 'bg-blue-50 text-blue-900 ring-blue-600/30 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30',
13 | neutral:
14 | 'bg-gray-50 text-gray-900 ring-gray-500/30 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20',
15 | success:
16 | 'bg-emerald-50 text-emerald-900 ring-emerald-600/30 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/20',
17 | error: 'bg-red-50 text-red-900 ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20',
18 | warning:
19 | 'bg-yellow-50 text-yellow-900 ring-yellow-600/30 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20'
20 | }
21 | },
22 | defaultVariants: {
23 | variant: 'default'
24 | }
25 | }
26 | )
27 |
28 | interface BadgeProps
29 | extends ComponentPropsWithoutRef<'span'>,
30 | VariantProps
23 |
29 |
30 | 0 ? 'default' : 'error'}
46 | className='mt-3'
47 | >
48 | {course.lessons > 0 ? (
49 | <>
50 |
60 |
61 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/account/sessions/session-item.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardContent } from '../../ui/card'
2 |
3 | import { RevokeSession } from './remove-session'
4 | import { SessionResponse } from '@/src/api/generated'
5 | import { formatDate, getBrowserIcon } from '@/src/lib/utils'
6 |
7 | interface SessionItemProps {
8 | session: SessionResponse
9 | isCurrentSession?: boolean
10 | }
11 |
12 | export function SessionItem({ session, isCurrentSession }: SessionItemProps) {
13 | const Icon = getBrowserIcon(session.browser)
14 |
15 | return (
16 | 31 | {course.title} 32 |
33 |42 | {course.shortDescription} 43 |
44 |
19 |
46 | {!isCurrentSession &&
20 |
22 |
23 |
45 | 24 | {session.browser}, {session.os} 25 |
26 |27 | {isCurrentSession && ( 28 | 29 | 30 | 31 | 32 | 33 | 34 | Текущее устройство 35 | 36 | • 37 | 38 | )} 39 | {session.city}, {session.country} 40 | {!isCurrentSession && ( 41 | <> • {formatDate(session.createdAt)} 42 | )} 43 |
44 |
23 |
63 | )
64 | }
65 |
--------------------------------------------------------------------------------
/src/app/(public)/courses/[slug]/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next'
2 | import { notFound } from 'next/navigation'
3 |
4 | import { getCourse, getCourseLessons, getCourses } from '@/src/api/requests'
5 | import { CourseDetails } from '@/src/components/course/course-details'
6 | import { getMediaSource } from '@/src/lib/utils'
7 | import { CourseProvider } from '@/src/providers/course-provider'
8 |
9 | export async function generateStaticParams() {
10 | const courses = await getCourses()
11 |
12 | const paths = courses.map(course => {
13 | return {
14 | params: { slug: course.slug }
15 | }
16 | })
17 |
18 | return paths
19 | }
20 |
21 | export async function generateMetadata({
22 | params
23 | }: {
24 | params: Promise<{ slug: string }>
25 | }): Promise
24 |
35 |
36 | Обзор
37 | Курсы
38 | Рейтинг
39 |
40 |
41 |
42 | setActiveTab('courses')}
45 | />
46 | setActiveTab('leaderboard')}
50 | />
51 |
52 |
53 |
54 |
56 |
57 |
58 |
60 |
61 |
62 | {description}
53 |
37 | {data?.map(course => (
38 |
56 |
39 |
54 | ))}
55 |
40 |
48 |
41 | {course.title}
42 |
43 |
44 | {course.completedLessons}/
45 | {course.totalLessons} уроков
46 |
47 |
35 |
37 |
38 |
59 |
60 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import { type HTMLAttributes, forwardRef } from 'react'
2 |
3 | import { cn } from '@/src/lib/utils'
4 |
5 | const Card = forwardRefДействия
36 |
39 |
58 |
40 | mutate()}
53 | >
54 |
55 |
56 |
57 |
41 |
47 | Выход
42 |43 | Завершите сеанс, чтобы выйти из аккаунта на 44 | этом устройстве. 45 |
46 |{children}
62 |
14 |
24 | {isPassword && (
25 |
65 | )
66 | }
67 | )
68 | Input.displayName = 'Input'
69 |
70 | export { Input }
71 |
--------------------------------------------------------------------------------
/src/components/course/course-actions.tsx:
--------------------------------------------------------------------------------
1 | import { useMutation } from '@tanstack/react-query'
2 | import { DownloadCloud } from 'lucide-react'
3 | import Link from 'next/link'
4 | import { useRouter } from 'next/navigation'
5 | import { FaYoutube } from 'react-icons/fa'
6 | import { toast } from 'sonner'
7 |
8 | import { Button } from '../ui/button'
9 |
10 | import type { CourseResponse } from '@/src/api/generated'
11 | import { generateDownloadLink, resolveDownloadToken } from '@/src/api/requests'
12 | import { APP_CONFIG, ROUTES } from '@/src/constants'
13 | import { useAuth, useCurrent } from '@/src/hooks'
14 |
15 | interface CourseActionsProps {
16 | course: CourseResponse
17 | }
18 |
19 | export function CourseActions({ course }: CourseActionsProps) {
20 | const router = useRouter()
21 | const { isAuthorized } = useAuth()
22 | const { user } = useCurrent()
23 |
24 | const { mutateAsync: generate, isPending: isGenerating } = useMutation({
25 | mutationFn: (courseId: string) => generateDownloadLink(courseId),
26 | onError() {
27 | toast.error('Не удалось сгенерировать ссылку')
28 | }
29 | })
30 |
31 | const handleDownload = async () => {
32 | if (!isAuthorized || !user?.isPremium)
33 | return router.push(ROUTES.PREMIUM)
34 |
35 | try {
36 | const { url } = await generate(course.id)
37 |
38 | window.open(url)
39 | } catch (err) {
40 | console.error(err)
41 | }
42 | }
43 |
44 | return (
45 |
30 |
62 |
63 | )}
64 |
46 |
72 | )
73 | }
74 |
--------------------------------------------------------------------------------
/src/app/auth/telegram-oauth-finish/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useRouter } from 'next/navigation'
4 | import { useEffect } from 'react'
5 |
6 | import { TelegramAuthRequest } from '@/src/api/generated'
7 | import { useTelegramAuth } from '@/src/api/hooks'
8 | import { instance } from '@/src/api/instance'
9 | import { EllipsisLoader } from '@/src/components/shared/ellipsis-loader'
10 | import { ROUTES } from '@/src/constants'
11 | import { useFingerprint } from '@/src/hooks'
12 | import { cookies } from '@/src/lib/cookie'
13 |
14 | function base64DecodeUnicode(str: string) {
15 | try {
16 | return decodeURIComponent(
17 | atob(str.replace(/-/g, '+').replace(/_/g, '/'))
18 | .split('')
19 | .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
20 | .join('')
21 | )
22 | } catch (err) {
23 | console.error('Ошибка декодирования Base64:', err)
24 | return null
25 | }
26 | }
27 |
28 | export default function TelegramAuthFinishPage() {
29 | const router = useRouter()
30 |
31 | const { data: fingerprint } = useFingerprint()
32 |
33 | const { mutate } = useTelegramAuth({
34 | onSuccess(data) {
35 | cookies.set('token', data.token, { expires: 30 })
36 |
37 | instance.defaults.headers['X-Session-Token'] = data.token
38 |
39 | router.push(ROUTES.ACCOUNT.ROOT)
40 | }
41 | })
42 |
43 | useEffect(() => {
44 | const hashString = window.location.hash.replace('#tgAuthResult=', '')
45 |
46 | if (hashString) {
47 | const decoded = base64DecodeUnicode(hashString)
48 |
49 | if (decoded) {
50 | try {
51 | const user: TelegramAuthRequest = JSON.parse(decoded)
52 |
53 | if (typeof user !== 'object' || user === null)
54 | throw new Error('Decoded value is not an object')
55 |
56 | mutate({
57 | ...user,
58 | ...(fingerprint && {
59 | visitorId: fingerprint.visitorId,
60 | requestId: fingerprint.requestId
61 | })
62 | })
63 | } catch (err) {
64 | console.error(
65 | 'Ошибка парсинга JSON после декодирования:',
66 | err
67 | )
68 | router.push(ROUTES.AUTH.LOGIN())
69 | }
70 | } else {
71 | router.push(ROUTES.AUTH.LOGIN())
72 | }
73 | }
74 | }, [fingerprint, mutate, router])
75 |
76 | return (
77 | 47 | Дополнительно 48 |
49 |50 | Скачайте готовый код или смотрите курс на YouTube 51 |
52 |
53 |
62 | {course.youtubeUrl && (
63 |
69 | )}
70 |
71 |
78 |
80 | )
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/course/course-details.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useQuery } from '@tanstack/react-query'
4 |
5 | import { Skeleton } from '../ui/skeleton'
6 |
7 | import { CourseContent } from './course-content'
8 | import { CourseSidebar } from './course-sidebar'
9 | import type { CourseResponse, LessonResponse } from '@/src/api/generated'
10 | import { getCompletedLessons } from '@/src/api/requests'
11 | import { useAuth, useCurrent } from '@/src/hooks'
12 |
13 | interface CourseDetailsProps {
14 | course: CourseResponse
15 | lessons: LessonResponse[]
16 | }
17 |
18 | export function CourseDetails({ course, lessons }: CourseDetailsProps) {
19 | const { isAuthorized } = useAuth()
20 |
21 | const { isLoading: isUserLoading } = useCurrent()
22 |
23 | const { data: completedLessons, isLoading } = useQuery({
24 | queryKey: ['get completed lessons'],
25 | queryFn: () => getCompletedLessons(course.id),
26 | enabled: isAuthorized
27 | })
28 |
29 | if (isUserLoading || isLoading) {
30 | return (
31 |
32 |
50 | )
51 | }
52 |
53 | return (
54 |
33 |
49 |
34 |
43 |
44 |
45 |
48 |
55 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yaml:
--------------------------------------------------------------------------------
1 | name: Build and Deploy
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | workflow_dispatch:
8 |
9 | jobs:
10 | install:
11 | name: 📦 Install dependencies
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout repository
15 | uses: actions/checkout@v4
16 |
17 | - name: Setup Bun
18 | uses: oven-sh/setup-bun@v2
19 | with:
20 | bun-version: latest
21 |
22 | - name: Install dependencies
23 | run: bun install
24 |
25 | build:
26 | name: 🏗️ Build Next.js
27 | runs-on: ubuntu-latest
28 | needs: install
29 | env:
30 | NEXT_PUBLIC_APP_URL: ${{ secrets.NEXT_PUBLIC_APP_URL }}
31 | NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
32 | steps:
33 | - name: Checkout repository
34 | uses: actions/checkout@v4
35 |
36 | - name: Setup Bun
37 | uses: oven-sh/setup-bun@v2
38 | with:
39 | bun-version: latest
40 |
41 | - name: Restore dependencies
42 | run: bun install
43 |
44 | - name: Build Next.js project
45 | run: bun run build
46 |
47 | deploy:
48 | name: 🚀 Deploy to Dokploy
49 | runs-on: ubuntu-latest
50 | needs: build
51 | env:
52 | DOKPLOY_URL: ${{ secrets.DOKPLOY_URL }}
53 | DOKPLOY_API_KEY: ${{ secrets.DOKPLOY_API_KEY }}
54 | DOKPLOY_APP_ID: ${{ secrets.DOKPLOY_APP_ID }}
55 | steps:
56 | - name: Checkout repository
57 | uses: actions/checkout@v4
58 |
59 | - name: Setup Bun
60 | uses: oven-sh/setup-bun@v2
61 | with:
62 | bun-version: latest
63 |
64 | - name: Deploy to Dokploy
65 | run: |
66 | echo "🚀 Deploying frontend to Dokploy..."
67 | curl -X POST "$DOKPLOY_URL/api/application.deploy" \
68 | -H "accept: application/json" \
69 | -H "Content-Type: application/json" \
70 | -H "x-api-key: $DOKPLOY_API_KEY" \
71 | -d '{
72 | "applicationId": "'"$DOKPLOY_APP_ID"'"
73 | }'
74 |
--------------------------------------------------------------------------------
/src/lib/cookie.ts:
--------------------------------------------------------------------------------
1 | export interface CookieSetOptions {
2 | domain?: string
3 | path?: string
4 | expires?: number | Date
5 | secure?: boolean
6 | httpOnly?: boolean
7 | sameSite?: 'lax' | 'strict' | 'none'
8 | }
9 |
10 | const DEFAULT_DOMAIN =
11 | typeof process !== 'undefined'
12 | ? process.env.NEXT_PUBLIC_COOKIES_DOMAIN
13 | : undefined
14 |
15 | function serializeCookie(
16 | name: string,
17 | value: string,
18 | options: CookieSetOptions = {}
19 | ): string {
20 | let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
21 |
22 | if (options.expires) {
23 | const expires =
24 | typeof options.expires === 'number'
25 | ? new Date(Date.now() + options.expires * 864e5)
26 | : options.expires
27 |
28 | cookie += `; Expires=${expires.toUTCString()}`
29 | }
30 |
31 | cookie += `; Path=${options.path ?? '/'}`
32 |
33 | const domain = options.domain ?? DEFAULT_DOMAIN
34 | if (domain) cookie += `; Domain=${domain}`
35 |
36 | if (options.secure !== false) cookie += `; Secure`
37 | if (options.httpOnly) cookie += `; HttpOnly`
38 | if (options.sameSite) cookie += `; SameSite=${options.sameSite}`
39 |
40 | return cookie
41 | }
42 |
43 | function parseCookieString(cookieString: string) {
44 | const output: Record
56 |
67 |
53 |
67 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/home/features.tsx:
--------------------------------------------------------------------------------
1 | import { AreaChart, BookOpen, Code } from 'lucide-react'
2 |
3 | export const Features = () => {
4 | const features = [
5 | {
6 | icon:
68 |
73 | Аватарка
69 |70 | Форматы: JPEG, PNG, WEBP, GIF. Макс. размер: 10 МБ. 71 |
72 |
28 |
59 |
29 |
38 | 30 | Что тебя ждёт на платформе? 31 |
32 |33 | Получи доступ к удобным курсам по программированию, 34 | отслеживай свой прогресс и практикуйся с реальными 35 | примерами кода 36 |
37 |
39 | {features.map((reason, index) => (
40 |
58 |
44 |
56 | ))}
57 |
45 |
55 |
46 | {reason.icon}
47 |
48 | 49 | {reason.title} 50 |
51 |52 | {reason.description} 53 |
54 |
59 | {char}
60 | {hasFakeCaret && (
61 |
66 | )
67 | }
68 |
69 | function InputOTPSeparator({ ...props }: ComponentProps<'div'>) {
70 | return (
71 |
62 |
63 |
64 | )}
65 |
72 |
74 | )
75 | }
76 |
77 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
78 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 0 0% 3.9%;
9 |
10 | --card: 0 0% 100%;
11 | --card-foreground: 0 0% 3.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 0 0% 3.9%;
15 |
16 | --primary: 0 0% 9%;
17 | --primary-foreground: 0 0% 98%;
18 |
19 | --secondary: 0 0% 96.1%;
20 | --secondary-foreground: 0 0% 9%;
21 |
22 | --muted: 0 0% 96.1%;
23 | --muted-foreground: 0 0% 45.1%;
24 |
25 | --accent: 0 0% 96.1%;
26 | --accent-foreground: 0 0% 9%;
27 |
28 | --destructive: 0 84.2% 60.2%;
29 | --destructive-foreground: 0 0% 98%;
30 |
31 | --border: 0 0% 89.8%;
32 | --input: 0 0% 89.8%;
33 | --ring: 0 0% 3.9%;
34 |
35 | --chart-1: 12 76% 61%;
36 | --chart-2: 173 58% 39%;
37 | --chart-3: 197 37% 24%;
38 | --chart-4: 43 74% 66%;
39 | --chart-5: 27 87% 67%;
40 |
41 | --radius: 0.5rem;
42 | }
43 |
44 | .dark {
45 | --background: 0 0% 10%;
46 | --foreground: 0 0% 98%;
47 |
48 | --card: 0 0% 10%;
49 | --card-foreground: 0 0% 98%;
50 |
51 | --popover: 0 0% 10%;
52 | --popover-foreground: 0 0% 98%;
53 |
54 | --primary: 0 0% 98%;
55 | --primary-foreground: 0 0% 98%;
56 |
57 | --secondary: 0 0% 15%;
58 | --secondary-foreground: 0 0% 98%;
59 |
60 | --muted: 0 0% 15%;
61 | --muted-foreground: 0 0% 63.9%;
62 |
63 | --accent: 0 0% 15%;
64 | --accent-foreground: 0 0% 98%;
65 |
66 | --destructive: 0 84% 60%;
67 | --destructive-foreground: 0 0% 98%;
68 |
69 | --border: 0 0% 20%;
70 | --input: 0 0% 20%;
71 | --ring: 0 0% 83.1%;
72 |
73 | --chart-1: 0 0% 60%;
74 | --chart-2: 0 0% 45%;
75 | --chart-3: 0 0% 30%;
76 | --chart-4: 0 0% 75%;
77 | --chart-5: 0 0% 50%;
78 | }
79 | }
80 |
81 | @layer base {
82 | * {
83 | @apply border-border;
84 | }
85 |
86 | body {
87 | @apply bg-background text-foreground;
88 |
89 | font-family: var(--font-geist-sans), sans-serif;
90 | }
91 |
92 | ::-webkit-scrollbar {
93 | width: 5px;
94 | }
95 |
96 | ::-webkit-scrollbar-track {
97 | background: transparent;
98 | }
99 |
100 | ::-webkit-scrollbar-thumb {
101 | background: hsl(var(--border));
102 | border-radius: 5px;
103 | }
104 |
105 | * {
106 | scrollbar-width: thin;
107 | scrollbar-color: hsl(var(--border)) transparent;
108 | }
109 | }
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot, Slottable } from '@radix-ui/react-slot'
2 | import { type VariantProps, cva } from 'class-variance-authority'
3 | import { Loader2 } from 'lucide-react'
4 | import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from 'react'
5 |
6 | import { cn } from '@/src/lib/utils'
7 |
8 | const buttonVariants = cva(
9 | 'inline-flex items-center justify-center gap-2 whitespace-nowrap select-none rounded-lg transition-all will-change-transform active:hover:scale-[0.98] active:hover:transform text-sm font-medium ring-offset-background focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
10 | {
11 | variants: {
12 | variant: {
13 | default:
14 | 'bg-primary text-primary-foreground hover:bg-primary/90',
15 | destructive:
16 | 'bg-gradient-to-t from-red-600 to-red-500 text-destructive-foreground hover:opacity-90',
17 | outline:
18 | 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
19 | secondary: 'bg-white text-black hover:bg-white/90',
20 | ghost: 'hover:bg-accent hover:text-accent-foreground',
21 | link: 'text-primary underline-offset-4 hover:underline',
22 | primary:
23 | 'bg-gradient-to-t from-blue-600 to-blue-500 text-primary-foreground hover:opacity-90'
24 | },
25 | size: {
26 | default: 'h-10 px-4 py-2',
27 | sm: 'h-9 rounded-lg px-5 py-2',
28 | xs: 'h-9 rounded-lg px-3 text-xs',
29 | lg: 'h-11 rounded-lg px-8',
30 | icon: 'h-10 w-10'
31 | }
32 | },
33 | defaultVariants: {
34 | variant: 'default',
35 | size: 'default'
36 | }
37 | }
38 | )
39 |
40 | export interface ButtonProps
41 | extends ButtonHTMLAttributes
39 |
87 |
40 |
86 |
41 |
45 |
49 |
50 |
52 |
53 |
85 |
54 | {isAuthorized ? (
55 |
81 |
58 |
68 |
78 |
79 | )}
80 |
82 |
84 |
57 |
95 | )
96 | }
97 |
--------------------------------------------------------------------------------
/src/components/account/settings/auto-billing-form.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useMutation, useQueryClient } from '@tanstack/react-query'
4 | import { CreditCardIcon } from 'lucide-react'
5 | import { useState } from 'react'
6 | import { toast } from 'sonner'
7 |
8 | import { ConfirmDialog } from '../../shared/confirm-dialog'
9 | import { Button } from '../../ui/button'
10 |
11 | import type { AccountResponse } from '@/src/api/generated'
12 | import { toggleAutoBilling } from '@/src/api/requests'
13 |
14 | interface AutoBillingFormProps {
15 | user: AccountResponse | undefined
16 | }
17 |
18 | export function AutoBillingForm({ user }: AutoBillingFormProps) {
19 | const [isOpen, setIsOpen] = useState(false)
20 |
21 | const queryClient = useQueryClient()
22 |
23 | const { mutate } = useMutation({
24 | mutationKey: ['toggle auto billing', user?.id],
25 | mutationFn: toggleAutoBilling,
26 | onSuccess: () => {
27 | setIsOpen(false)
28 | queryClient.invalidateQueries({ queryKey: ['get me'] })
29 | toast.success(
30 | user?.isAutoBilling
31 | ? 'Автосписания отключены'
32 | : 'Автосписания включены'
33 | )
34 | },
35 | onError: (error: any) => {
36 | toast.error(
37 | error.response?.data?.message ??
38 | 'Не удалось изменить автосписания'
39 | )
40 | }
41 | })
42 |
43 | return (
44 |
58 | {isLoading || isFpLoading
59 | ? Array.from({ length: 4 }).map((_, i) => (
60 |
93 | {/*
45 |
82 | )
83 | }
84 |
--------------------------------------------------------------------------------
/src/components/account/progress/courses-tab.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query'
2 | import Link from 'next/link'
3 |
4 | import { CourseProgress } from '../../shared/course-progress'
5 |
6 | import { getMeProgress } from '@/src/api/requests'
7 | import { Button } from '@/src/components/ui/button'
8 | import {
9 | Card,
10 | CardContent,
11 | CardDescription,
12 | CardHeader,
13 | CardTitle
14 | } from '@/src/components/ui/card'
15 | import { Separator } from '@/src/components/ui/separator'
16 | import { ROUTES } from '@/src/constants'
17 |
18 | export function CoursesTab() {
19 | const { data, isLoading } = useQuery({
20 | queryKey: ['get me progress'],
21 | queryFn: () => getMeProgress()
22 | })
23 |
24 | return (
25 |
46 |
59 |
47 |
49 |
50 |
58 | 51 | Автоматическое списание 52 |
53 |54 | Ежемесячно плата списывается автоматически. 55 | Автопродление можно отключить в любой момент. 56 |
57 |
60 | {user?.isAutoBilling ? (
61 |
68 |
74 |
75 | ) : (
76 |
79 | )}
80 |
81 |
32 | {data?.map(course => (
33 |
87 |
34 |
85 | ))}
86 |
35 |
43 |
36 | {course.title}
37 |
38 |
39 | {course.completedLessons}/
40 | {course.totalLessons} уроков
41 |
42 |
44 |
57 |
58 |
59 | Последний доступ:{' '}
60 | {new Date(
61 | course.lastAccessed
62 | ).toLocaleDateString()}
63 |
64 | {course.lastLesson && (
65 |
79 | )}
80 |
81 | {course.id !== data[data.length - 1].id && (
82 |
55 |
90 | )
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/account/progress/user-stats.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query'
2 | import { BookOpen, Crown, Medal, Trophy } from 'lucide-react'
3 | import React from 'react'
4 | import { CircularProgressbar } from 'react-circular-progressbar'
5 | import 'react-circular-progressbar/dist/styles.css'
6 |
7 | import { getMeStatistics } from '@/src/api/requests'
8 | import {
9 | Card,
10 | CardContent,
11 | CardHeader,
12 | CardTitle
13 | } from '@/src/components/ui/card'
14 |
15 | export function UserStats() {
16 | const { data, isLoading } = useQuery({
17 | queryKey: ['get me statistics'],
18 | queryFn: () => getMeStatistics()
19 | })
20 |
21 | return isLoading ? (
22 |
56 |
89 |
57 |
68 |
88 | 58 | {isCompleted 59 | ? 'Вы завершили этот урок!' 60 | : 'Вы готовы завершить этот урок?'} 61 |
62 |63 | {isCompleted 64 | ? 'Отличная работа! Вы можете посмотреть свою статистику в личном кабинете.' 65 | : 'Не забудьте завершить урок, когда будете готовы.'} 66 |
67 |
23 | {/*
26 | ) : (
27 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
47 |
48 |
49 |
50 |
51 |
52 |
55 |
56 |
57 |
87 |
88 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/src/components/course/course-lessons.tsx:
--------------------------------------------------------------------------------
1 | import { CheckCircle } from 'lucide-react'
2 | import Link from 'next/link'
3 |
4 | import type { LessonResponse } from '@/src/api/generated'
5 | import { ROUTES } from '@/src/constants'
6 | import { useAuth } from '@/src/hooks'
7 | import { lessonsTranslator } from '@/src/lib/utils'
8 |
9 | interface CourseLessonsProps {
10 | lessons: LessonResponse[]
11 | completedLessons: string[]
12 | }
13 |
14 | export function CourseLessons({
15 | lessons = [],
16 | completedLessons = []
17 | }: CourseLessonsProps) {
18 | const { isAuthorized } = useAuth()
19 |
20 | const totalLessons = lessons?.length ?? 0
21 | const completedCount = completedLessons?.length ?? 0
22 |
23 | return (
24 |
37 |
46 |
38 |
45 |
39 | {data?.totalPoints}
40 |
41 |
42 | Всего очков
43 |
44 |
58 |
86 |
59 |
66 |
60 | {data?.lessonsCompleted}
61 |
62 |
63 | Пройдено уроков
64 |
65 |
67 |
85 |
25 |
87 | )
88 | }
89 |
--------------------------------------------------------------------------------
26 |
34 | Уроки
27 | {isAuthorized && ( 28 |29 | {totalLessons} {lessonsTranslator(totalLessons)} •{' '} 30 | {completedCount} выполнено 31 |
32 | )} 33 |-
35 | {lessons.map(lesson => {
36 | const isCompleted = completedLessons.includes(lesson.id)
37 |
38 | return (
39 |
-
40 |
52 | 53 |81 | 82 |54 | {isCompleted ? ( 55 |62 | 63 |
56 | ) : ( 57 | 58 | {lesson.position} 59 | 60 | )} 61 | 64 |80 |65 | {lesson.title} 66 |
67 | {lesson.description && ( 68 |76 | {lesson.description} 77 |
78 | )} 79 |
83 | )
84 | })}
85 |