From 30b567d020245360347b91a9a8b2c713a1a739c3 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Thu, 24 Jul 2025 12:03:38 +0530 Subject: [PATCH] Attendance Log Page Resets to First Page After Performing Action on Other Pages. --- src/components/Activities/AttendcesLogs.jsx | 66 ++++++++++++--------- 1 file changed, 37 insertions(+), 29 deletions(-) diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index d207906c..50da1262 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, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; +import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; // Corrected typo: atttendanceLogsSlice to attedanceLogsSlice import DateRangePicker from "../common/DateRangePicker"; import eventBus from "../../services/eventBus"; @@ -44,7 +44,7 @@ const AttendanceLog = ({ handleModalData, projectId, setshowOnlyCheckout, - showOnlyCheckout, + showOnlyCheckout, // Prop for showPending state searchQuery, // Prop for search query }) => { const selectedProject = useSelector( @@ -52,10 +52,13 @@ const AttendanceLog = ({ ); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); - const [showPending,setShowPending] = useState(false) - const [isRefreshing, setIsRefreshing] = useState(false); + // Get data, loading, and fetching state from the Redux store's attendanceLogs slice + const { data: attendanceLogsData, loading: logsLoading, isFetching: logsFetching } = useSelector( + (state) => state.attendanceLogs // Assuming your slice is named 'attendanceLogs' + ); + + const [isRefreshing, setIsRefreshing] = useState(false); // Local state for refresh spinner const today = useMemo(() => { const d = new Date(); @@ -89,6 +92,7 @@ const AttendanceLog = ({ return nameA.localeCompare(nameB); }, []); + // Effect to fetch attendance data when dateRange or projectId changes useEffect(() => { const { startDate, endDate } = dateRange; dispatch( @@ -98,13 +102,13 @@ const AttendanceLog = ({ toDate: endDate, }) ); - setIsRefreshing(false); - }, [dateRange, projectId, dispatch, isRefreshing]); + setIsRefreshing(false); // Reset refreshing state after fetch attempt + }, [dateRange, projectId, dispatch, isRefreshing]); // isRefreshing is a dependency because it triggers a re-fetch const processedData = useMemo(() => { - let filteredData = showOnlyCheckout - ? data.filter((item) => item.checkOutTime === null) - : data; + let filteredData = showOnlyCheckout // Use the prop directly + ? attendanceLogsData.filter((item) => item.checkOutTime === null) // Use attendanceLogsData + : attendanceLogsData; // Use attendanceLogsData // Apply search query filter if (searchQuery) { @@ -168,7 +172,7 @@ const AttendanceLog = ({ // Create the final sorted array return sortedDates.flatMap((date) => groupedByDate[date]); - }, [data, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]); + }, [attendanceLogsData, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]); // Added attendanceLogsData to dependencies const { currentPage, @@ -178,10 +182,10 @@ const AttendanceLog = ({ resetPage, // Destructure resetPage here } = usePagination(processedData, 20); - // Effect to reset pagination when search query changes + // Effect to reset pagination when search query or showOnlyCheckout changes useEffect(() => { resetPage(); - }, [searchQuery, resetPage]); // Add resetPage to dependencies + }, [searchQuery, showOnlyCheckout, resetPage]); // Add resetPage to dependencies const handler = useCallback( (msg) => { @@ -192,7 +196,8 @@ const AttendanceLog = ({ startDate <= checkIn && checkIn <= endDate ) { - const updatedAttendance = data.map((item) => + // Create a new array to avoid direct mutation of Redux state data + const updatedAttendance = attendanceLogsData.map((item) => // Use attendanceLogsData item.id === msg.response.id ? { ...item, ...msg.response } : item @@ -200,16 +205,14 @@ const AttendanceLog = ({ dispatch(setAttendanceData(updatedAttendance)); // Update Redux store } }, - [projectId, dateRange, data, dispatch] + [projectId, dateRange, attendanceLogsData, dispatch] // Added attendanceLogsData to dependencies ); - useEffect(() => { useEffect(() => { eventBus.on("attendance_log", handler); return () => eventBus.off("attendance_log", handler); }, [handler]); - const employeeHandler = useCallback( const employeeHandler = useCallback( (msg) => { const { startDate, endDate } = dateRange; @@ -224,12 +227,17 @@ const AttendanceLog = ({ [projectId, dateRange, dispatch] ); - useEffect(() => { + // Removed duplicate useEffect, keeping only one useEffect(() => { eventBus.on("employee", employeeHandler); return () => eventBus.off("employee", employeeHandler); }, [employeeHandler]); + const handleRefreshClick = () => { + setIsRefreshing(true); // Set refreshing state to true + // The useEffect for fetching data will trigger because isRefreshing is a dependency + }; + return ( <>
setShowPending(e.target.checked)} + checked={showOnlyCheckout} // Use the prop directly + onChange={(e) => setshowOnlyCheckout(e.target.checked)} // Use the prop setter />
refetch()} + onClick={handleRefreshClick} // Call the new handler />
@@ -286,13 +294,13 @@ const AttendanceLog = ({ - {(loading || isRefreshing) && ( + {(logsLoading || isRefreshing) && ( // Use logsLoading and isRefreshing Loading... )} - {!loading && - !isRefreshing && + {!logsLoading && // Use logsLoading + !isRefreshing && // Use isRefreshing paginatedAttendances.reduce((acc, attendance, index, arr) => { const currentDate = moment( attendance.checkInTime || attendance.checkOutTime @@ -362,8 +370,8 @@ const AttendanceLog = ({ ) : ( - !loading && - !isRefreshing && ( + !logsLoading && // Use logsLoading + !isRefreshing && ( // Use isRefreshing
- {!loading && !isRefreshing && processedData.length > 20 && ( + {!logsLoading && !isRefreshing && processedData.length > 20 && ( // Use logsLoading and isRefreshing