137 lines
3.9 KiB
TypeScript
137 lines
3.9 KiB
TypeScript
'use client'
|
||
|
||
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
||
import { useActionState, useEffect, useState } from 'react';
|
||
import { useTranslations } from 'next-intl';
|
||
import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActions';
|
||
import { toast } from 'sonner';
|
||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||
|
||
interface complaintInfo {
|
||
id: number,
|
||
status: string,
|
||
complaint_text: string,
|
||
violation_id: number,
|
||
email: string,
|
||
created_at: string,
|
||
updated_at: string,
|
||
not_moderated: boolean
|
||
}
|
||
|
||
export default function CaseComplaint({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
|
||
const [showCreateCase, setShowCreateCase] = useState(false);
|
||
const t = useTranslations('Global');
|
||
const [state, formAction, isPending] = useActionState(createComplaint, undefined);
|
||
const queryClient = useQueryClient();
|
||
|
||
const { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
|
||
queryKey: ['complainInfo', selectedViolation.id],
|
||
queryFn: () => fetchComplainInfo(selectedViolation.id),
|
||
select: (data) => {
|
||
if (data) {
|
||
return data
|
||
}
|
||
},
|
||
enabled: selectedViolation.status !== 'NEW' &&
|
||
selectedViolation.status !== 'CREATED' &&
|
||
selectedViolation.status !== 'SHOWED',
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (state?.success) {
|
||
toast.success('Жалоба зарегистрирована');
|
||
queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
|
||
queryClient.invalidateQueries({ queryKey: ['complainInfo', selectedViolation.id] });
|
||
} else if (state && !state.success) {
|
||
toast.warning('Жалоба не зарегистрирована');
|
||
}
|
||
}, [state, queryClient, selectedViolation.id]);
|
||
|
||
function toggleForm() {
|
||
setShowCreateCase(!showCreateCase);
|
||
}
|
||
|
||
if (selectedViolation.status === 'NEW' || selectedViolation.status === 'CREATED' || selectedViolation.status === 'SHOWED') {
|
||
return (
|
||
<div className="violation-info-case">
|
||
{!showCreateCase ? (
|
||
<button
|
||
type="button"
|
||
className="btn-action btn-case"
|
||
onClick={toggleForm}
|
||
>
|
||
Подача жалобы
|
||
</button>
|
||
) : (
|
||
<div>
|
||
<button
|
||
type="button"
|
||
className="btn-action btn-case"
|
||
onClick={toggleForm}
|
||
>
|
||
{t('cancel')}
|
||
</button>
|
||
|
||
<div className="note-form">
|
||
<form action={formAction}>
|
||
<input type="hidden" name="violationId" value={selectedViolation.id} />
|
||
<textarea
|
||
name="note"
|
||
className="note-textarea"
|
||
placeholder="Текст нарушения...">
|
||
</textarea>
|
||
<button
|
||
type="submit"
|
||
className="btn-small btn-primary-small"
|
||
disabled={isPending}
|
||
>
|
||
Отправить нарушение
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} else {
|
||
if (isLoadingComplain) {
|
||
return (
|
||
<div className="violation-info-case">
|
||
<div>Загрузка...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="violation-info-case">
|
||
{complainInfo?.body.content ? (
|
||
|
||
<div>
|
||
{complainInfo.body.content.map((item: complaintInfo) => {
|
||
return (
|
||
<div key={item.id}>
|
||
<h3
|
||
className="mb-3"
|
||
>
|
||
Информация о жалобе
|
||
</h3>
|
||
<div className="complaint-details">
|
||
<p><strong>ID:</strong> {item.id}</p>
|
||
<p><strong>Статус:</strong> {item.status}</p>
|
||
<p><strong>Текст жалобы:</strong> {item.complaint_text}</p>
|
||
<p><strong>ID нарушения:</strong> {item.violation_id}</p>
|
||
<p><strong>Email:</strong> {item.email}</p>
|
||
<p><strong>Дата создания:</strong> {item.created_at}</p>
|
||
<p><strong>Дата обновления:</strong> {item.updated_at}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div>Нет информации о жалобе</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
} |