update work with marched files

src/app/ui/file-page/violation-table/case-complaint.tsx

@@ -19,39 +19,57 @@ interface complaintInfo {
 }
 
 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 [showCreateCase, setShowCreateCase] = useState(false);
+	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
+	const [state, formAction, isPending] = useActionState(createComplaint, undefined);
+
+	useEffect(() => {
+		setLocalViolation(selectedViolation);
+	}, [selectedViolation]);
+
 	const { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
-		queryKey: ['complainInfo', selectedViolation.id],
-		queryFn: () => fetchComplainInfo(selectedViolation.id),
+		queryKey: ['complainInfo', localViolation.id],
+		queryFn: () => fetchComplainInfo(localViolation.id),
 		select: (data) => {
 			if (data) {
 				return data
 			}
 		},
-		enabled: selectedViolation.status !== 'NEW' &&
-			selectedViolation.status !== 'CREATED' &&
-			selectedViolation.status !== 'SHOWED',
+		enabled: localViolation.status !== 'NEW' &&
+			localViolation.status !== 'CREATED' &&
+			localViolation.status !== 'SHOWED',
 	});
 
 	useEffect(() => {
 		if (state?.success) {
-			toast.success('Жалоба зарегистрирована');
+			toast.success(t('the-complaint-has-been-registered'));
+
+			setLocalViolation(prev => ({
+				...prev,
+				status: 'COMPLAINT_IN_WORK'
+			}));
+
 			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
-			queryClient.invalidateQueries({ queryKey: ['complainInfo', selectedViolation.id] });
+			queryClient.invalidateQueries({ queryKey: ['complainInfo', localViolation.id] });
+
+			setShowCreateCase(false);
 		} else if (state && !state.success) {
-			toast.warning('Жалоба не зарегистрирована');
+			if (state.errorMessage) {
+				toast.warning(t(state.errorMessage));
+			} else {
+				toast.warning(t('the-complaint-has-not-been-registered'));
+			}
 		}
-	}, [state, queryClient, selectedViolation.id]);
+	}, [state, queryClient, localViolation.id]);
 
 	function toggleForm() {
 		setShowCreateCase(!showCreateCase);
 	}
 
-	if (selectedViolation.status === 'NEW' || selectedViolation.status === 'CREATED' || selectedViolation.status === 'SHOWED') {
+	if (localViolation.status === 'NEW' || localViolation.status === 'CREATED' || localViolation.status === 'SHOWED') {
 		return (
 			<div className="violation-info-case">
 				{!showCreateCase ? (
@@ -60,7 +78,7 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 						className="btn-action btn-case"
 						onClick={toggleForm}
 					>
-						Подача жалобы
+						{t('filing-complaint')}
 					</button>
 				) : (
 					<div>
@@ -74,18 +92,18 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 
 						<div className="note-form">
 							<form action={formAction}>
-								<input type="hidden" name="violationId" value={selectedViolation.id} />
+								<input type="hidden" name="violationId" value={localViolation.id} />
 								<textarea
 									name="note"
 									className="note-textarea"
-									placeholder="Текст нарушения...">
+									placeholder={`${t('text-of-the-complaint')}...`}>
 								</textarea>
 								<button
 									type="submit"
 									className="btn-small btn-primary-small"
 									disabled={isPending}
 								>
-									Отправить нарушение
+									{t('submit-violation')}
 								</button>
 							</form>
 						</div>
@@ -97,7 +115,7 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 		if (isLoadingComplain) {
 			return (
 				<div className="violation-info-case">
-					<div>Загрузка...</div>
+					<div>{t('loading')}...</div>
 				</div>
 			);
 		}
@@ -105,31 +123,30 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 		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 className="mb-3">
+										{t('complaint-Information')}
 									</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>
+										<p><strong>{t('status')}:</strong> {item.status}</p>
+										<p><strong>{t('text-of-the-complaint')}:</strong> {item.complaint_text}</p>
+										<p><strong>{t('violation-id')}:</strong> {item.violation_id}</p>
+										<p><strong>{t('email')}:</strong> {item.email}</p>
+										<p><strong>{t('date-of-creation')}:</strong> {item.created_at}</p>
+										<p><strong>{t('date-of-update')}:</strong> {item.updated_at}</p>
 									</div>
 								</div>
 							);
 						})}
 					</div>
 				) : (
-					<div>Нет информации о жалобе</div>
+					<div>
+						{t('no-information-about-the-complaint')}
+					</div>
 				)}
 			</div>
 		);

src/app/ui/file-page/violation-table/file-page-violation-info.tsx

@@ -8,7 +8,7 @@ import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
 import CaseViolation from '@/app/ui/file-page/violation-table/case-violation';
 import { updateMatchStatus } from '@/app/actions/violationActions';
 import { useQueryClient } from '@tanstack/react-query';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { MatchStatus } from '@/app/actions/violationActions';
 import { toast } from 'sonner';
 
@@ -16,18 +16,44 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 	const t = useTranslations('Global');
 	const tStatus = useTranslations('Match-status');
 	const queryClient = useQueryClient();
+	const [localViolation, setLocalViolation] = useState<ViolationFileDetail | null>(null);
+	const [isUpdating, setIsUpdating] = useState(false);
+
+	useEffect(() => {
+		setLocalViolation(selectedViolation);
+	}, [selectedViolation]);
+
 
 	const updateStatusHandler = useCallback(async (id: number, status: MatchStatus) => {
-		const response = await updateMatchStatus(id, status);
-		if (response) {
-			if (status === 'AUTHORIZED_USE') {
-				toast.success('Статус обновлен');
+		setIsUpdating(true);
+
+		// Оптимистичное обновление UI
+		setLocalViolation(prev => prev ? { ...prev, status } : null);
+
+		try {
+			const response = await updateMatchStatus(id, status);
+			if (response) {
+				if (status === 'AUTHORIZED_USE') {
+					toast.success('Статус обновлен');
+				}
+				// Инвалидируем кэш, чтобы данные синхронизировались с сервером
+				queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
+				return true;
+			} else {
+				// Если ошибка - откатываем изменение
+				setLocalViolation(selectedViolation);
+				toast.error('Ошибка при обновлении статуса');
+				return false;
 			}
-			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
-			return true;
+		} catch (error) {
+			// При ошибке откатываем
+			setLocalViolation(selectedViolation);
+			toast.error('Ошибка при обновлении статуса');
+			return false;
+		} finally {
+			setIsUpdating(false);
 		}
-		return false;
-	}, [queryClient]);
+	}, [queryClient, selectedViolation]);
 
 	useEffect(() => {
 		const updateStatus = async () => {
@@ -94,7 +120,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 								{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
 							</span>
 							{/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/}
-							{selectedViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
+							{localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
 								<>
 									<span className="source-status legal_in_work">
 										{tStatus('LEGAL_IN_WORK')}
@@ -104,9 +130,11 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 									</span>
 								</>
 							) : (
-								<span className={`source-status ${selectedViolation?.status.toLowerCase()}`}>
-									{tStatus(selectedViolation?.status)}
-								</span>
+								localViolation?.status && (
+									<span className={`source-status ${localViolation?.status.toLowerCase()}`}>
+										{tStatus(localViolation?.status)}
+									</span>
+								)
 							)}
 						</div>
 						<div
@@ -115,8 +143,11 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 							<button
 								className="btn-action btn-success"
 								onClick={() => {
-									updateStatusHandler(selectedViolation?.id, 'AUTHORIZED_USE');
+									if (selectedViolation?.id) {
+										updateStatusHandler(selectedViolation.id, 'AUTHORIZED_USE');
+									}
 								}}
+								disabled={isUpdating}
 							>
 								{t('mark-as-solved')}
 							</button>
@@ -127,8 +158,8 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 				<div
 					className="violation-info-case-grid"
 				>
-					<CaseComplaint selectedViolation={selectedViolation} />
-					<CaseViolation selectedViolation={selectedViolation} />
+					<CaseComplaint key={"complaint_" + selectedViolation.id} selectedViolation={selectedViolation} />
+					<CaseViolation key={"violation_" + selectedViolation.id} selectedViolation={selectedViolation} />
 				</div>
 			</div>
 		</div>