cinnabarflower/sto-k-odnomu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

voice

Browse source
This commit is contained in:
Dmitry 2026-01-07 16:24:30 +03:00
parent 44c7fce2b7
commit e5d2e96a38
9 changed files with 188 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.claude/settings.local.json
View file

@ -7,7 +7,8 @@
"Bash(npx prisma generate:*)", "Bash(npx prisma generate:*)",
"Bash(npm run build:*)", "Bash(npm run build:*)",
"Bash(docker-compose up:*)", "Bash(docker-compose up:*)",
"Bash(npx prisma migrate:*)" "Bash(npx prisma migrate:*)",
"Bash(tree:*)"
] ]
} }
} }

54
admin/src/api/analytics.ts
View file

@ -1,55 +1,21 @@
import { adminApiClient } from './client' import { adminApiClient } from './client'
// Dashboard stats from backend /api/admin/analytics/dashboard
export interface DashboardStats { export interface DashboardStats {
users: number users: number
cards: number activeUsers: number
packs: number rooms: number
enabledPacks: number activeRooms: number
payments: number questionPacks: number
} publicPacks: number
gamesPlayed: number
export interface RecentUser { gamesToday: number
id: number
name?: string
email?: string
createdAt?: string
}
export interface TopPack {
id: number
title: string
cards: number
enabled: boolean
}
export interface ChartDataPoint {
date: string
registrations?: number
revenue?: number
}
export interface DashboardData {
stats: DashboardStats
recentUsers: RecentUser[]
topPacks: TopPack[]
} }
export const analyticsApi = { export const analyticsApi = {
// Get dashboard analytics // Get dashboard analytics
getDashboard: async (): Promise<DashboardData> => { getDashboard: async (): Promise<DashboardStats> => {
const response = await adminApiClient.get('/api/v2/admin/analytics/dashboard') const response = await adminApiClient.get('/api/admin/analytics/dashboard')
return response.data
},
// Get user registration chart data
getUsersChart: async (): Promise<{ data: ChartDataPoint[]; period: string }> => {
const response = await adminApiClient.get('/api/v2/admin/analytics/users/chart')
return response.data
},
// Get revenue chart data
getRevenueChart: async (): Promise<{ data: ChartDataPoint[]; period: string; currency: string }> => {
const response = await adminApiClient.get('/api/v2/admin/analytics/revenue/chart')
return response.data return response.data
}, },
} }

8
admin/src/api/packs.ts
View file

@ -43,7 +43,7 @@ export const packsApi = {
showDisabled?: boolean showDisabled?: boolean
}): Promise<PaginatedResponse<CardPackPreviewDto>> => { }): Promise<PaginatedResponse<CardPackPreviewDto>> => {
try { try {
const response = await adminApiClient.get('/api/v2/admin/packs', { const response = await adminApiClient.get('/api/admin/packs', {
params: { params: {
page: params?.page || 1, page: params?.page || 1,
limit: params?.limit || 20, limit: params?.limit || 20,
@ -82,7 +82,7 @@ export const packsApi = {
// Get pack details by ID for editing // Get pack details by ID for editing
getPack: async (packId: string): Promise<EditCardPackDto> => { getPack: async (packId: string): Promise<EditCardPackDto> => {
try { try {
const response = await adminApiClient.get(`/api/v2/admin/packs/${packId}`) const response = await adminApiClient.get(`/api/admin/packs/${packId}`)
return response.data return response.data
} catch (error) { } catch (error) {
const axiosError = error as AxiosError<{ error?: string; message?: string }> const axiosError = error as AxiosError<{ error?: string; message?: string }>
@ -110,7 +110,7 @@ export const packsApi = {
// Create or update pack // Create or update pack
upsertPack: async (pack: EditCardPackDto): Promise<{ success: boolean; pack: EditCardPackDto }> => { upsertPack: async (pack: EditCardPackDto): Promise<{ success: boolean; pack: EditCardPackDto }> => {
try { try {
const response = await adminApiClient.post('/api/v2/admin/packs', pack) const response = await adminApiClient.post('/api/admin/packs', pack)
return response.data return response.data
} catch (error) { } catch (error) {
const axiosError = error as AxiosError<{ error?: string; message?: string; field?: string; details?: string }> const axiosError = error as AxiosError<{ error?: string; message?: string; field?: string; details?: string }>
@ -146,7 +146,7 @@ export const packsApi = {
// Delete pack // Delete pack
deletePack: async (packId: string): Promise<{ success: boolean; message: string }> => { deletePack: async (packId: string): Promise<{ success: boolean; message: string }> => {
try { try {
const response = await adminApiClient.delete(`/api/v2/admin/packs/${packId}`) const response = await adminApiClient.delete(`/api/admin/packs/${packId}`)
return response.data return response.data
} catch (error) { } catch (error) {
const axiosError = error as AxiosError<{ error?: string; message?: string }> const axiosError = error as AxiosError<{ error?: string; message?: string }>

30
admin/src/api/users.ts
View file

@ -1,44 +1,36 @@
import { adminApiClient } from './client' import { adminApiClient } from './client'
import type { UserDto, PaginatedResponse, PaymentDto } from '@/types/models' import type { UserDto, PaginatedResponse } from '@/types/models'
export const usersApi = { export const usersApi = {
// Get all users with pagination // Get all users with pagination
getUsers: async (params?: { getUsers: async (params?: {
page?: number page?: number
limit?: number limit?: number
ids?: string[]
}): Promise<PaginatedResponse<UserDto>> => { }): Promise<PaginatedResponse<UserDto>> => {
const response = await adminApiClient.get('/api/v2/admin/users', { const response = await adminApiClient.get('/api/admin/users', {
params: { params: {
page: params?.page || 1, page: params?.page || 1,
limit: params?.limit || 20, limit: params?.limit || 20,
ids: params?.ids?.join(','),
}, },
}) })
return response.data return response.data
}, },
// Get user IDs list // Get single user by ID
getUserIds: async (): Promise<string[]> => { getUser: async (userId: string): Promise<UserDto> => {
const response = await adminApiClient.get('/api/v2/admin/users/ids') const response = await adminApiClient.get(`/api/admin/users/${userId}`)
return response.data.ids return response.data
}, },
// Get user purchases // Update user
getUserPurchases: async (userId: string): Promise<PaymentDto[]> => { updateUser: async (userId: string, user: Partial<UserDto>): Promise<UserDto> => {
const response = await adminApiClient.get(`/api/v2/admin/users/${userId}/purchases`) const response = await adminApiClient.patch(`/api/admin/users/${userId}`, user)
return response.data.payments
},
// Create or update user
upsertUser: async (user: UserDto): Promise<{ result: boolean }> => {
const response = await adminApiClient.post('/api/v2/admin/users', user)
return response.data return response.data
}, },
// Delete user // Delete user
deleteUser: async (userId: string): Promise<{ result: boolean }> => { deleteUser: async (userId: string): Promise<{ message: string }> => {
const response = await adminApiClient.delete(`/api/v2/admin/users/${userId}`) const response = await adminApiClient.delete(`/api/admin/users/${userId}`)
return response.data return response.data
}, },
} }

175
admin/src/pages/DashboardPage.tsx
View file

@ -1,9 +1,7 @@
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { Users, FileText, Package, DollarSign, TrendingUp, Clock } from 'lucide-react' import { Users, Package, TrendingUp, Activity } from 'lucide-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge' import { analyticsApi, type DashboardStats } from '@/api/analytics'
import { analyticsApi, type DashboardData, type ChartDataPoint } from '@/api/analytics'
import { useAuthStore } from '@/stores/authStore' import { useAuthStore } from '@/stores/authStore'
export default function DashboardPage() { export default function DashboardPage() {
@ -12,24 +10,12 @@ export default function DashboardPage() {
// Only make requests if authenticated and token exists // Only make requests if authenticated and token exists
const isReady = isAuthenticated && !!token && !!localStorage.getItem('admin_token') const isReady = isAuthenticated && !!token && !!localStorage.getItem('admin_token')
const { data: dashboardData, isLoading: dashboardLoading } = useQuery<DashboardData>({ const { data: dashboardData, isLoading: dashboardLoading } = useQuery<DashboardStats>({
queryKey: ['dashboard'], queryKey: ['dashboard'],
queryFn: analyticsApi.getDashboard, queryFn: analyticsApi.getDashboard,
enabled: isReady, enabled: isReady,
}) })
const { data: usersChartData } = useQuery<{ data: ChartDataPoint[] }>({
queryKey: ['users-chart'],
queryFn: analyticsApi.getUsersChart,
enabled: isReady,
})
const { data: revenueChartData } = useQuery<{ data: ChartDataPoint[] }>({
queryKey: ['revenue-chart'],
queryFn: analyticsApi.getRevenueChart,
enabled: isReady,
})
if (dashboardLoading) { if (dashboardLoading) {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@ -72,7 +58,7 @@ export default function DashboardPage() {
<Users className="h-4 w-4 text-muted-foreground" /> <Users className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{dashboardData?.stats.users || 0}</div> <div className="text-2xl font-bold">{dashboardData?.users || 0}</div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Registered users Registered users
</p> </p>
@ -81,165 +67,96 @@ export default function DashboardPage() {
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Cards</CardTitle> <CardTitle className="text-sm font-medium">Active Users</CardTitle>
<FileText className="h-4 w-4 text-muted-foreground" /> <Activity className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{dashboardData?.stats.cards || 0}</div> <div className="text-2xl font-bold">{dashboardData?.activeUsers || 0}</div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Game cards created Active in last 7 days
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Packs</CardTitle> <CardTitle className="text-sm font-medium">Question Packs</CardTitle>
<Package className="h-4 w-4 text-muted-foreground" /> <Package className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{dashboardData?.stats.enabledPacks || 0}</div> <div className="text-2xl font-bold">{dashboardData?.publicPacks || 0}</div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
of {dashboardData?.stats.packs || 0} total packs of {dashboardData?.questionPacks || 0} total packs
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Payments</CardTitle> <CardTitle className="text-sm font-medium">Games Today</CardTitle>
<DollarSign className="h-4 w-4 text-muted-foreground" /> <TrendingUp className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{dashboardData?.stats.payments || 0}</div> <div className="text-2xl font-bold">{dashboardData?.gamesToday || 0}</div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Successful transactions of {dashboardData?.gamesPlayed || 0} total games
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Charts */} {/* Rooms Stats */}
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>User Registrations</CardTitle> <CardTitle>Room Statistics</CardTitle>
<CardDescription> <CardDescription>
Daily user registrations for the last 30 days Current room status overview
</CardDescription>
</CardHeader>
<CardContent>
{usersChartData?.data && (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={usersChartData.data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="date"
tickFormatter={(value) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
/>
<YAxis />
<Tooltip
labelFormatter={(value) => new Date(value).toLocaleDateString()}
formatter={(value: number | undefined) => [value ?? 0, 'Registrations']}
/>
<Line
type="monotone"
dataKey="registrations"
stroke="#8884d8"
strokeWidth={2}
dot={{ fill: '#8884d8' }}
/>
</LineChart>
</ResponsiveContainer>
)}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Revenue Trend</CardTitle>
<CardDescription>
Daily revenue for the last 30 days
</CardDescription>
</CardHeader>
<CardContent>
{revenueChartData?.data && (
<ResponsiveContainer width="100%" height={300}>
<BarChart data={revenueChartData.data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="date"
tickFormatter={(value) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
/>
<YAxis />
<Tooltip
labelFormatter={(value) => new Date(value).toLocaleDateString()}
formatter={(value: number | undefined) => [`$${value ?? 0}`, 'Revenue']}
/>
<Bar dataKey="revenue" fill="#82ca9d" />
</BarChart>
</ResponsiveContainer>
)}
</CardContent>
</Card>
</div>
{/* Recent Users and Top Packs */}
<div className="grid gap-4 md:grid-cols-2">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Clock className="h-5 w-5" />
Recent Users
</CardTitle>
<CardDescription>
Latest user registrations
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{dashboardData?.recentUsers.slice(0, 5).map((user) => ( <div className="flex items-center justify-between">
<div key={user.id} className="flex items-center justify-between"> <div>
<div> <p className="font-medium">Total Rooms</p>
<p className="font-medium">{user.name || 'No name'}</p> <p className="text-sm text-muted-foreground">All time</p>
<p className="text-sm text-muted-foreground">{user.email || 'No email'}</p>
</div>
<div className="text-sm text-muted-foreground">
{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}
</div>
</div> </div>
)) || ( <div className="text-2xl font-bold">{dashboardData?.rooms || 0}</div>
<p className="text-muted-foreground">No recent users</p> </div>
)} <div className="flex items-center justify-between">
<div>
<p className="font-medium">Active Rooms</p>
<p className="text-sm text-muted-foreground">Currently playing or waiting</p>
</div>
<div className="text-2xl font-bold text-green-600">{dashboardData?.activeRooms || 0}</div>
</div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle>Game Statistics</CardTitle>
<TrendingUp className="h-5 w-5" />
Popular Packs
</CardTitle>
<CardDescription> <CardDescription>
Most popular card packs Overall game activity
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{dashboardData?.topPacks.map((pack) => ( <div className="flex items-center justify-between">
<div key={pack.id} className="flex items-center justify-between"> <div>
<div> <p className="font-medium">Total Games</p>
<p className="font-medium">{pack.title}</p> <p className="text-sm text-muted-foreground">All time completed games</p>
<p className="text-sm text-muted-foreground">{pack.cards} cards</p>
</div>
<Badge variant={pack.enabled ? "default" : "secondary"}>
{pack.enabled ? 'Active' : 'Disabled'}
</Badge>
</div> </div>
)) || ( <div className="text-2xl font-bold">{dashboardData?.gamesPlayed || 0}</div>
<p className="text-muted-foreground">No packs available</p> </div>
)} <div className="flex items-center justify-between">
<div>
<p className="font-medium">Today's Games</p>
<p className="text-sm text-muted-foreground">Completed today</p>
</div>
<div className="text-2xl font-bold text-blue-600">{dashboardData?.gamesToday || 0}</div>
</div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>

28
admin/src/types/models.ts
View file

@ -29,28 +29,20 @@ export interface CardPackPreviewDto {
order?: number order?: number
} }
// User model matching backend Prisma schema
export interface UserDto { export interface UserDto {
id?: number id: string
name?: string
email?: string email?: string
admin: boolean name?: string
packs: string[] role: 'USER' | 'ADMIN'
purchases: string[] telegramId?: string
subscription?: boolean createdAt: string
subscriptionFeatures: string[] gamesPlayed: number
userDataDto?: unknown gamesWon: number
userSettingsDto?: unknown totalPoints: number
} }
export interface PaymentDto { // Note: PaymentDto removed - no payment system exists in the backend
id: string
userId: string
amount: number
currency: string
status: string
createdAt: string
updatedAt: string
}
export interface SubscriptionPlanAdminDto { export interface SubscriptionPlanAdminDto {
id: string id: string

54
backend/src/admin/auth/admin-auth.service.ts
View file

@ -362,22 +362,46 @@ export class AdminAuthService implements OnModuleInit {
}); });
if (!user) { if (!user) {
// Create admin user for password login // Check if email is already taken by another user
user = await this.prisma.user.create({ const existingUserWithEmail = await this.prisma.user.findUnique({
data: { where: { email: adminUsername },
telegramId: passwordAdminTelegramId,
role: 'ADMIN',
name: 'Admin',
email: adminUsername,
},
select: {
id: true,
email: true,
name: true,
role: true,
telegramId: true,
},
}); });
if (existingUserWithEmail) {
// If email exists but with different telegramId, update it
user = await this.prisma.user.update({
where: { id: existingUserWithEmail.id },
data: {
telegramId: passwordAdminTelegramId,
role: 'ADMIN',
name: 'Admin',
},
select: {
id: true,
email: true,
name: true,
role: true,
telegramId: true,
},
});
} else {
// Create new admin user for password login
user = await this.prisma.user.create({
data: {
telegramId: passwordAdminTelegramId,
role: 'ADMIN',
name: 'Admin',
email: adminUsername,
},
select: {
id: true,
email: true,
name: true,
role: true,
telegramId: true,
},
});
}
} else if (user.role !== 'ADMIN') { } else if (user.role !== 'ADMIN') {
// Upgrade to admin if needed // Upgrade to admin if needed
await this.prisma.user.update({ await this.prisma.user.update({

38
src/pages/CreateRoom.jsx
View file

@ -3,10 +3,11 @@ import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext'; import { useAuth } from '../context/AuthContext';
import { useRoom } from '../hooks/useRoom'; import { useRoom } from '../hooks/useRoom';
import { questionsApi } from '../services/api'; import { questionsApi } from '../services/api';
import NameInputModal from '../components/NameInputModal';
const CreateRoom = () => { const CreateRoom = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { user } = useAuth(); const { user, loginAnonymous, loading: authLoading } = useAuth();
const { createRoom, loading: roomLoading } = useRoom(); const { createRoom, loading: roomLoading } = useRoom();
const [questionPacks, setQuestionPacks] = useState([]); const [questionPacks, setQuestionPacks] = useState([]);
@ -18,6 +19,27 @@ const CreateRoom = () => {
timerDuration: 30, timerDuration: 30,
}); });
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isNameModalOpen, setIsNameModalOpen] = useState(false);
// Проверка авторизации и показ модального окна для ввода имени
useEffect(() => {
if (!authLoading && !user) {
setIsNameModalOpen(true);
} else if (user) {
setIsNameModalOpen(false);
}
}, [authLoading, user]);
// Обработка ввода имени и авторизация
const handleNameSubmit = async (name) => {
try {
await loginAnonymous(name);
setIsNameModalOpen(false);
} catch (error) {
console.error('Login error:', error);
alert('Ошибка при авторизации. Попробуйте еще раз.');
}
};
useEffect(() => { useEffect(() => {
const fetchPacks = async () => { const fetchPacks = async () => {
@ -31,12 +53,16 @@ const CreateRoom = () => {
} }
}; };
fetchPacks(); if (user) {
fetchPacks();
} else {
setLoading(false);
}
}, [user]); }, [user]);
const handleCreateRoom = async () => { const handleCreateRoom = async () => {
if (!user) { if (!user) {
alert('Войдите в систему для создания комнаты'); setIsNameModalOpen(true);
return; return;
} }
@ -142,6 +168,12 @@ const CreateRoom = () => {
<button onClick={() => navigate('/')}>Назад</button> <button onClick={() => navigate('/')}>Назад</button>
</div> </div>
</div> </div>
<NameInputModal
isOpen={isNameModalOpen}
onSubmit={handleNameSubmit}
onCancel={null}
/>
</div> </div>
); );
}; };

30
src/pages/RoomPage.jsx
View file

@ -5,11 +5,12 @@ import { useRoom } from '../hooks/useRoom';
import { questionsApi } from '../services/api'; import { questionsApi } from '../services/api';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import QRModal from '../components/QRModal'; import QRModal from '../components/QRModal';
import NameInputModal from '../components/NameInputModal';
const RoomPage = () => { const RoomPage = () => {
const { roomCode } = useParams(); const { roomCode } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const { user } = useAuth(); const { user, loginAnonymous, loading: authLoading } = useAuth();
const { const {
room, room,
participants, participants,
@ -22,6 +23,7 @@ const RoomPage = () => {
const [qrCode, setQrCode] = useState(''); const [qrCode, setQrCode] = useState('');
const [joined, setJoined] = useState(false); const [joined, setJoined] = useState(false);
const [isQRModalOpen, setIsQRModalOpen] = useState(false); const [isQRModalOpen, setIsQRModalOpen] = useState(false);
const [isNameModalOpen, setIsNameModalOpen] = useState(false);
const [questionPacks, setQuestionPacks] = useState([]); const [questionPacks, setQuestionPacks] = useState([]);
const [selectedPackId, setSelectedPackId] = useState(''); const [selectedPackId, setSelectedPackId] = useState('');
const [loadingPacks, setLoadingPacks] = useState(false); const [loadingPacks, setLoadingPacks] = useState(false);
@ -51,6 +53,26 @@ const RoomPage = () => {
} }
}, [roomCode]); }, [roomCode]);
// Проверка авторизации и показ модального окна для ввода имени
useEffect(() => {
if (!authLoading && !user && room && !loading) {
setIsNameModalOpen(true);
} else if (user) {
setIsNameModalOpen(false);
}
}, [authLoading, user, room, loading]);
// Обработка ввода имени и авторизация
const handleNameSubmit = async (name) => {
try {
await loginAnonymous(name);
setIsNameModalOpen(false);
} catch (error) {
console.error('Login error:', error);
alert('Ошибка при авторизации. Попробуйте еще раз.');
}
};
useEffect(() => { useEffect(() => {
const handleJoin = async () => { const handleJoin = async () => {
if (room && user && !joined) { if (room && user && !joined) {
@ -247,6 +269,12 @@ const RoomPage = () => {
qrCode={qrCode} qrCode={qrCode}
roomCode={roomCode} roomCode={roomCode}
/> />
<NameInputModal
isOpen={isNameModalOpen}
onSubmit={handleNameSubmit}
onCancel={null}
/>
</div> </div>
); );
}; };