Attendance Log Page Resets to First Page After Performing Action on Other Pages.

This commit is contained in:
Kartik Sharma 2025-07-24 12:03:38 +05:30
parent 1df2d50aba
commit 30b567d020

View File

@ -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 (
<>
<div
@ -246,20 +254,20 @@ const AttendanceLog = ({
type="checkbox"
className="form-check-input"
role="switch"
disabled={isFetching}
disabled={logsFetching} // Use logsFetching from Redux store
id="inactiveEmployeesCheckbox"
checked={showPending}
onChange={(e) => setShowPending(e.target.checked)}
checked={showOnlyCheckout} // Use the prop directly
onChange={(e) => setshowOnlyCheckout(e.target.checked)} // Use the prop setter
/>
<label className="form-check-label ms-0">Show Pending</label>
</div>
</div>
<div className="col-md-2 m-0 text-end">
<i
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
className={`bx bx-refresh cursor-pointer fs-4 ${logsLoading || isRefreshing ? "spin" : "" // Use logsLoading for overall loading, isRefreshing for local spinner
}`}
title="Refresh"
onClick={() => refetch()}
onClick={handleRefreshClick} // Call the new handler
/>
</div>
</div>
@ -286,13 +294,13 @@ const AttendanceLog = ({
</tr>
</thead>
<tbody>
{(loading || isRefreshing) && (
{(logsLoading || isRefreshing) && ( // Use logsLoading and isRefreshing
<tr>
<td colSpan={6}>Loading...</td>
</tr>
)}
{!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 = ({
</tbody>
</table>
) : (
!loading &&
!isRefreshing && (
!logsLoading && // Use logsLoading
!isRefreshing && ( // Use isRefreshing
<div
className="d-flex justify-content-center align-items-center text-muted"
style={{
@ -375,7 +383,7 @@ const AttendanceLog = ({
)
)}
</div>
{!loading && !isRefreshing && processedData.length > 20 && (
{!logsLoading && !isRefreshing && processedData.length > 20 && ( // Use logsLoading and isRefreshing
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>