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>
 		);