mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
Add files via upload
This commit is contained in:
Egor
GitHub
243
src/pages/Polls.tsx
Normal file
243
src/pages/Polls.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { pollsApi, PollInfo, PollQuestion } from '../api/polls'
|
||||
|
||||
const ClipboardIcon = () => (
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const GiftIcon = () => (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const CheckIcon = () => (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default function Polls() {
|
||||
const { t } = useTranslation()
|
||||
const queryClient = useQueryClient()
|
||||
const [selectedPoll, setSelectedPoll] = useState<PollInfo | null>(null)
|
||||
const [currentQuestion, setCurrentQuestion] = useState<PollQuestion | null>(null)
|
||||
const [questionIndex, setQuestionIndex] = useState(0)
|
||||
const [totalQuestions, setTotalQuestions] = useState(0)
|
||||
const [completionMessage, setCompletionMessage] = useState<{ reward: number | null; message: string } | null>(null)
|
||||
|
||||
const { data: polls, isLoading, error } = useQuery({
|
||||
queryKey: ['polls'],
|
||||
queryFn: pollsApi.getPolls,
|
||||
})
|
||||
|
||||
const startPollMutation = useMutation({
|
||||
mutationFn: pollsApi.startPoll,
|
||||
onSuccess: (data) => {
|
||||
setCurrentQuestion(data.question)
|
||||
setQuestionIndex(data.current_question_index)
|
||||
setTotalQuestions(data.total_questions)
|
||||
setCompletionMessage(null)
|
||||
},
|
||||
})
|
||||
|
||||
const answerMutation = useMutation({
|
||||
mutationFn: ({
|
||||
responseId,
|
||||
questionId,
|
||||
optionId,
|
||||
}: {
|
||||
responseId: number
|
||||
questionId: number
|
||||
optionId: number
|
||||
}) => pollsApi.answerQuestion(responseId, questionId, optionId),
|
||||
onSuccess: (data) => {
|
||||
if (data.is_completed) {
|
||||
setCurrentQuestion(null)
|
||||
setCompletionMessage({
|
||||
reward: data.reward_granted,
|
||||
message: data.message || t('polls.completed'),
|
||||
})
|
||||
queryClient.invalidateQueries({ queryKey: ['polls'] })
|
||||
} else if (data.next_question) {
|
||||
setCurrentQuestion(data.next_question)
|
||||
setQuestionIndex(data.current_question_index || 0)
|
||||
setTotalQuestions(data.total_questions)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleStartPoll = (poll: PollInfo) => {
|
||||
setSelectedPoll(poll)
|
||||
startPollMutation.mutate(poll.response_id)
|
||||
}
|
||||
|
||||
const handleAnswer = (optionId: number) => {
|
||||
if (selectedPoll && currentQuestion) {
|
||||
answerMutation.mutate({
|
||||
responseId: selectedPoll.response_id,
|
||||
questionId: currentQuestion.id,
|
||||
optionId,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleClosePoll = () => {
|
||||
setSelectedPoll(null)
|
||||
setCurrentQuestion(null)
|
||||
setCompletionMessage(null)
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-64">
|
||||
<div className="w-10 h-10 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="card bg-red-500/10 border-red-500/20">
|
||||
<p className="text-red-400">{t('polls.error')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<ClipboardIcon />
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-dark-50">{t('polls.title')}</h1>
|
||||
</div>
|
||||
|
||||
{/* Poll Modal */}
|
||||
{selectedPoll && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60">
|
||||
<div className="card max-w-lg w-full max-h-[80vh] overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold">{selectedPoll.title}</h2>
|
||||
<button onClick={handleClosePoll} className="text-dark-400 hover:text-dark-200">
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{startPollMutation.isPending && (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{completionMessage && (
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-success-500/20 text-success-400 text-center">
|
||||
<CheckIcon />
|
||||
<p className="font-medium mt-2">{completionMessage.message}</p>
|
||||
{completionMessage.reward && (
|
||||
<p className="text-sm mt-1">
|
||||
+{completionMessage.reward} {t('polls.reward')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={handleClosePoll} className="w-full btn-secondary">
|
||||
{t('common.close')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentQuestion && !completionMessage && (
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm text-dark-400">
|
||||
{t('polls.question')} {questionIndex + 1} {t('polls.of')} {totalQuestions}
|
||||
</div>
|
||||
<div className="w-full bg-dark-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-accent-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${((questionIndex + 1) / totalQuestions) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-lg font-medium">{currentQuestion.text}</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
{currentQuestion.options.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => handleAnswer(option.id)}
|
||||
disabled={answerMutation.isPending}
|
||||
className="w-full p-4 text-left bg-dark-700 hover:bg-dark-600 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{option.text}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{answerMutation.isPending && (
|
||||
<div className="flex justify-center">
|
||||
<div className="w-6 h-6 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Polls List */}
|
||||
{polls && polls.length > 0 ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{polls.map((poll) => (
|
||||
<div key={poll.id} className="card">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg">{poll.title}</h3>
|
||||
{poll.description && (
|
||||
<p className="text-dark-400 text-sm mt-1">{poll.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 mt-2 text-sm text-dark-400">
|
||||
<span>
|
||||
{poll.answered_questions}/{poll.total_questions} {t('polls.questions')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{poll.reward_amount && (
|
||||
<div className="flex items-center gap-1 text-accent-400">
|
||||
<GiftIcon />
|
||||
<span className="text-sm font-medium">+{poll.reward_amount}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
{poll.is_completed ? (
|
||||
<button disabled className="w-full btn-secondary opacity-50 cursor-not-allowed">
|
||||
<CheckIcon />
|
||||
<span className="ml-2">{t('polls.completed')}</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleStartPoll(poll)}
|
||||
className="w-full btn-primary"
|
||||
>
|
||||
{poll.answered_questions > 0 ? t('polls.continue') : t('polls.start')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="card text-center py-12">
|
||||
<ClipboardIcon />
|
||||
<p className="text-dark-400 mt-4">{t('polls.noPolls')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user