connect monitoring endpoints

src/app/components/tanstak-table/MonitoringDropDown.tsx

@@ -2,29 +2,29 @@
 
 import { FileItem } from '@/app/components/tanstak-table/TanstakTable';
 import { useEffect, useState, useRef } from 'react';
-import { useClickOutside } from '@/app/hooks/useClickOutside';
 import { useTranslations } from 'next-intl';
 import { useQueryClient } from '@tanstack/react-query';
 import { createPortal } from 'react-dom';
+import { setMonitoring } from '@/app/actions/monitoringActions';
+import { toast } from 'sonner';
 
 export function MonitoringDropDown({ file }: {
 	file: FileItem
 }) {
 	const [isOpen, setIsOpen] = useState(false);
-	const [currentMonitoringStatus, setCurrentMonitoringStatus] = useState('without-monitoring');
+	const [currentMonitoringStatus, setCurrentMonitoringStatus] = useState(file.monitoring);
 	const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
 
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const buttonRef = useRef<HTMLButtonElement>(null);
 
-	const t = useTranslations('Global')
+	const t = useTranslations('Monitoring-status');
 	const queryClient = useQueryClient();
 
 	useEffect(() => {
 		if (!isOpen) return;
 
 		const handleClick = (event: MouseEvent) => {
-			console.log('click');
 			if (!dropdownRef?.current) {
 				return;
 			}
@@ -49,10 +49,10 @@ export function MonitoringDropDown({ file }: {
 	}, [dropdownRef, setIsOpen, isOpen]);
 
 	useEffect(() => {
-		if (file.status) {
-			setCurrentMonitoringStatus(file.status === 'ACTIVE' ? 'without-monitoring' : 'without-monitoring');
+		if (file.monitoring) {
+			setCurrentMonitoringStatus(file.monitoring ? file.monitoring : 'NONE');
 		}
-	}, [file]);
+	}, [file.monitoring]);
 
 	useEffect(() => {
 		if (isOpen && buttonRef.current) {
@@ -66,10 +66,16 @@ export function MonitoringDropDown({ file }: {
 	}, [isOpen]);
 
 	async function clickHandler(monitoring: string) {
-		console.log('click', file.id);
-		setCurrentMonitoringStatus(monitoring);
-		await queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
-		setIsOpen(false);
+
+		const response = await setMonitoring(file.id, monitoring);
+
+		if (response.success) {
+			await queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
+			setIsOpen(false);
+			toast.success(t('the-file-is monitored', { fileName: file.fileName }));
+		} else {
+			toast.warning(t('failed-to-establish-monitoring'));
+		}
 	}
 
 	return (
@@ -113,36 +119,36 @@ export function MonitoringDropDown({ file }: {
 				>
 					<ul className="dropdown-list" role="listbox">
 						<li
-							className={`dropdown-item ${currentMonitoringStatus === 'without-monitoring' ? 'current' : ''}`}
+							className={`dropdown-item ${currentMonitoringStatus === 'NONE' ? 'current' : ''}`}
 							onClick={() => {
-								clickHandler('without-monitoring')
+								clickHandler('NONE')
 							}}
 						>
-							{t('without-monitoring')}
+							{t('NONE')}
 						</li>
 						<li
-							className={`dropdown-item ${currentMonitoringStatus === 'every-day' ? 'current' : ''}`}
+							className={`dropdown-item ${currentMonitoringStatus === 'MONITORING_DAILY' ? 'current' : ''}`}
 							onClick={() => {
-								clickHandler('every-day')
+								clickHandler('MONITORING_DAILY')
 							}}
 						>
-							{t('every-day')}
+							{t('MONITORING_DAILY')}
 						</li>
 						<li
-							className={`dropdown-item ${currentMonitoringStatus === 'every-week' ? 'current' : ''}`}
+							className={`dropdown-item ${currentMonitoringStatus === 'MONITORING_WEEKLY' ? 'current' : ''}`}
 							onClick={() => {
-								clickHandler('every-week')
+								clickHandler('MONITORING_WEEKLY')
 							}}
 						>
-							{t('every-week')}
+							{t('MONITORING_WEEKLY')}
 						</li>
 						<li
-							className={`dropdown-item ${currentMonitoringStatus === 'every-month' ? 'current' : ''}`}
+							className={`dropdown-item ${currentMonitoringStatus === 'MONITORING_MONTHLY' ? 'current' : ''}`}
 							onClick={() => {
-								clickHandler('every-month')
+								clickHandler('MONITORING_MONTHLY')
 							}}
 						>
-							{t('every-month')}
+							{t('MONITORING_MONTHLY')}
 						</li>
 					</ul>
 				</div>,