Add invite links

2025-12-14 20:39:26 +07:00
parent d0b8eca600
commit 5db2f9c48d
11 changed files with 290 additions and 12 deletions
--- a/frontend/src/pages/InvitePage.tsx
+++ b/frontend/src/pages/InvitePage.tsx
@@ -0,0 +1,168 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { marathonsApi } from '@/api'
+import type { MarathonPublicInfo } from '@/types'
+import { useAuthStore } from '@/store/auth'
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+import { Users, Loader2, Trophy, UserPlus, LogIn } from 'lucide-react'
+
+export function InvitePage() {
+  const { code } = useParams<{ code: string }>()
+  const navigate = useNavigate()
+  const { isAuthenticated, setPendingInviteCode } = useAuthStore()
+
+  const [marathon, setMarathon] = useState<MarathonPublicInfo | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isJoining, setIsJoining] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadMarathon()
+  }, [code])
+
+  const loadMarathon = async () => {
+    if (!code) return
+
+    try {
+      const data = await marathonsApi.getByCode(code)
+      setMarathon(data)
+    } catch {
+      setError('Марафон не найден или ссылка недействительна')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleJoin = async () => {
+    if (!code) return
+
+    setIsJoining(true)
+    try {
+      const joined = await marathonsApi.join(code)
+      navigate(`/marathons/${joined.id}`)
+    } catch (err: unknown) {
+      const apiError = err as { response?: { data?: { detail?: string } } }
+      const detail = apiError.response?.data?.detail
+      if (detail === 'Already joined this marathon') {
+        // Already a member, just redirect
+        navigate(`/marathons/${marathon?.id}`)
+      } else {
+        setError(detail || 'Не удалось присоединиться')
+      }
+    } finally {
+      setIsJoining(false)
+    }
+  }
+
+  const handleAuthRedirect = (path: string) => {
+    if (code) {
+      setPendingInviteCode(code)
+    }
+    navigate(path)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+      </div>
+    )
+  }
+
+  if (error || !marathon) {
+    return (
+      <div className="max-w-md mx-auto">
+        <Card>
+          <CardContent className="text-center py-8">
+            <div className="text-red-400 mb-4">{error || 'Марафон не найден'}</div>
+            <Link to="/marathons">
+              <Button variant="secondary">К списку марафонов</Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const statusText = {
+    preparing: 'Подготовка',
+    active: 'Активен',
+    finished: 'Завершён',
+  }[marathon.status]
+
+  return (
+    <div className="max-w-md mx-auto">
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="flex items-center justify-center gap-2">
+            <Trophy className="w-6 h-6 text-primary-500" />
+            Приглашение в марафон
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Marathon info */}
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-white mb-2">{marathon.title}</h2>
+            {marathon.description && (
+              <p className="text-gray-400 text-sm mb-4">{marathon.description}</p>
+            )}
+            <div className="flex items-center justify-center gap-4 text-sm text-gray-400">
+              <span className="flex items-center gap-1">
+                <Users className="w-4 h-4" />
+                {marathon.participants_count} участников
+              </span>
+              <span className={`px-2 py-0.5 rounded text-xs ${
+                marathon.status === 'active' ? 'bg-green-900/50 text-green-400' :
+                marathon.status === 'preparing' ? 'bg-yellow-900/50 text-yellow-400' :
+                'bg-gray-700 text-gray-400'
+              }`}>
+                {statusText}
+              </span>
+            </div>
+            <p className="text-gray-500 text-xs mt-2">
+              Организатор: {marathon.creator_nickname}
+            </p>
+          </div>
+
+          {marathon.status === 'finished' ? (
+            <div className="text-center text-gray-400">
+              Этот марафон уже завершён
+            </div>
+          ) : isAuthenticated ? (
+            /* Authenticated - show join button */
+            <Button
+              className="w-full"
+              onClick={handleJoin}
+              isLoading={isJoining}
+            >
+              <UserPlus className="w-4 h-4 mr-2" />
+              Присоединиться к марафону
+            </Button>
+          ) : (
+            /* Not authenticated - show login/register options */
+            <div className="space-y-3">
+              <p className="text-center text-gray-400 text-sm">
+                Чтобы присоединиться, войдите или зарегистрируйтесь
+              </p>
+              <Button
+                className="w-full"
+                onClick={() => handleAuthRedirect('/login')}
+              >
+                <LogIn className="w-4 h-4 mr-2" />
+                Войти
+              </Button>
+              <Button
+                variant="secondary"
+                className="w-full"
+                onClick={() => handleAuthRedirect('/register')}
+              >
+                <UserPlus className="w-4 h-4 mr-2" />
+                Зарегистрироваться
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}