Attendance Log Page Resets to First Page After Performing Action on Other Pages.
This commit is contained in:
parent
1df2d50aba
commit
30b567d020
@ -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" : ""}`}>
|
||||
|
Loading…
x
Reference in New Issue
Block a user