diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 263b1e86..213897ed 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -4,7 +4,7 @@ import Avatar from "../common/Avatar"; import { convertShortTime } from "../../utils/dateUtils"; import RenderAttendanceStatus from "./RenderAttendanceStatus"; import { useSelector, useDispatch } from "react-redux"; -import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; +import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; import DateRangePicker from "../common/DateRangePicker"; import eventBus from "../../services/eventBus"; @@ -28,14 +28,15 @@ const usePagination = (data, itemsPerPage) => { } }, [maxPage]); - const resetPage = useCallback(() => setCurrentPage(1), []); // This is returned by the hook + // Ensure resetPage is returned by the hook + const resetPage = useCallback(() => setCurrentPage(1), []); return { currentPage, totalPages: maxPage, currentItems, paginate, - resetPage, // Ensure resetPage is returned here + resetPage, }; }; @@ -173,26 +174,30 @@ const AttendanceLog = ({ resetPage, // Destructure resetPage here } = usePagination(processedData, 20); -const handler = useCallback( - (msg) => { - const { startDate, endDate } = dateRange; - const checkIn = msg.response.checkInTime.substring(0, 10); - if ( - projectId === msg.projectId && - startDate <= checkIn && - checkIn <= endDate - ) { - const updatedAttendance = data.map((item) => - item.id === msg.response.id - ? { ...item, ...msg.response } - : item - ); + // Effect to reset pagination when search query changes + useEffect(() => { + resetPage(); + }, [searchQuery, resetPage]); // Add resetPage to dependencies - filtering(updatedAttendance); - } - }, - [projectId, dateRange, data, filtering] // ✅ removed resetPage from deps -); + const handler = useCallback( + (msg) => { + const { startDate, endDate } = dateRange; + const checkIn = msg.response.checkInTime.substring(0, 10); + if ( + projectId === msg.projectId && + startDate <= checkIn && + checkIn <= endDate + ) { + const updatedAttendance = data.map((item) => + item.id === msg.response.id + ? { ...item, ...msg.response } + : item + ); + dispatch(setAttendanceData(updatedAttendance)); // Update Redux store + } + }, + [projectId, dateRange, data, dispatch] + ); useEffect(() => { eventBus.on("attendance_log", handler); @@ -360,8 +365,7 @@ const handler = useCallback( No employee logs. ) - ) - } + )} {!loading && !isRefreshing && processedData.length > 20 && (