react-query-v2 : react-query intergrated inside attendance and gallery module #270
@ -51,7 +51,7 @@
|
||||
<!-- Timer Picker -->
|
||||
<!-- Flatpickr CSS -->
|
||||
<link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
|
||||
<link rel="stylesheet" href="./src/assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
|
||||
<link rel="stylesheet" href="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,109 +1,195 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
import AttendanceRepository from "../repositories/AttendanceRepository";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
|
||||
export const useAttendace =(projectId)=>{
|
||||
// export const useAttendace =(projectId)=>{
|
||||
|
||||
const [attendance, setAttendance] = useState([]);
|
||||
const[loading,setLoading] = useState(true)
|
||||
const [error, setError] = useState(null);
|
||||
// const [attendance, setAttendance] = useState([]);
|
||||
// const[loading,setLoading] = useState(true)
|
||||
// const [error, setError] = useState(null);
|
||||
|
||||
const fetchData = () => {
|
||||
const Attendance_cache = getCachedData("Attendance");
|
||||
if(!Attendance_cache || Attendance_cache.projectId !== projectId){
|
||||
// const fetchData = () => {
|
||||
// const Attendance_cache = getCachedData("Attendance");
|
||||
// if(!Attendance_cache || Attendance_cache.projectId !== projectId){
|
||||
|
||||
setLoading(true);
|
||||
AttendanceRepository.getAttendance(projectId)
|
||||
.then((response) => {
|
||||
setAttendance(response.data);
|
||||
cacheData( "Attendance", {data: response.data, projectId} )
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
setLoading(false)
|
||||
setError("Failed to fetch data.");
|
||||
})
|
||||
} else {
|
||||
setAttendance(Attendance_cache.data);
|
||||
setLoading(false)
|
||||
}
|
||||
};
|
||||
// setLoading(true);
|
||||
// AttendanceRepository.getAttendance(projectId)
|
||||
// .then((response) => {
|
||||
// setAttendance(response.data);
|
||||
// cacheData( "Attendance", {data: response.data, projectId} )
|
||||
// setLoading(false)
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// setLoading(false)
|
||||
// setError("Failed to fetch data.");
|
||||
// })
|
||||
// } else {
|
||||
// setAttendance(Attendance_cache.data);
|
||||
// setLoading(false)
|
||||
// }
|
||||
// };
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if ( projectId && projectId != 1 )
|
||||
{
|
||||
fetchData(projectId);
|
||||
}
|
||||
},[projectId])
|
||||
// useEffect(()=>{
|
||||
// if ( projectId && projectId != 1 )
|
||||
// {
|
||||
// fetchData(projectId);
|
||||
// }
|
||||
// },[projectId])
|
||||
|
||||
return {attendance,loading,error,recall:fetchData}
|
||||
}
|
||||
// return {attendance,loading,error,recall:fetchData}
|
||||
// }
|
||||
|
||||
export const useEmployeeAttendacesLog = (id) => {
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
// export const useEmployeeAttendacesLog = (id) => {
|
||||
// const [logs, setLogs] = useState([]);
|
||||
// const [loading, setLoading] = useState(false);
|
||||
// const [error, setError] = useState(null);
|
||||
|
||||
|
||||
const fetchData = () => {
|
||||
const AttendanceLog_cache = getCachedData("AttendanceLogs");
|
||||
if(!AttendanceLog_cache || AttendanceLog_cache.id !== id ){
|
||||
setLoading(true)
|
||||
AttendanceRepository.getAttendanceLogs(id).then((response)=>{
|
||||
setLogs(response.data)
|
||||
cacheData("AttendanceLogs", { data: response.data, id })
|
||||
setLoading(false)
|
||||
}).catch((error)=>{
|
||||
setError("Failed to fetch data.");
|
||||
setLoading(false);
|
||||
})
|
||||
}else{
|
||||
// const fetchData = () => {
|
||||
// const AttendanceLog_cache = getCachedData("AttendanceLogs");
|
||||
// if(!AttendanceLog_cache || AttendanceLog_cache.id !== id ){
|
||||
// setLoading(true)
|
||||
// AttendanceRepository.getAttendanceLogs(id).then((response)=>{
|
||||
// setLogs(response.data)
|
||||
// cacheData("AttendanceLogs", { data: response.data, id })
|
||||
// setLoading(false)
|
||||
// }).catch((error)=>{
|
||||
// setError("Failed to fetch data.");
|
||||
// setLoading(false);
|
||||
// })
|
||||
// }else{
|
||||
|
||||
setLogs(AttendanceLog_cache.data);
|
||||
}
|
||||
// setLogs(AttendanceLog_cache.data);
|
||||
// }
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// if (id) {
|
||||
// fetchData();
|
||||
// }
|
||||
|
||||
// }, [id]);
|
||||
|
||||
// return { logs, loading, error };
|
||||
// };
|
||||
|
||||
// export const useRegularizationRequests = ( projectId ) =>
|
||||
// {
|
||||
// const [regularizes, setregularizes] = useState([]);
|
||||
// const [loading, setLoading] = useState(false);
|
||||
// const [error, setError] = useState(null);
|
||||
|
||||
|
||||
// const fetchData = () => {
|
||||
// const regularizedList_cache = getCachedData("regularizedList");
|
||||
// if(!regularizedList_cache || regularizedList_cache.projectId !== projectId ){
|
||||
// setLoading(true)
|
||||
// AttendanceRepository.getRegularizeList(projectId).then((response)=>{
|
||||
// setregularizes( response.data )
|
||||
// cacheData("regularizedList", { data: response.data, projectId })
|
||||
// setLoading(false)
|
||||
// }).catch((error)=>{
|
||||
// setError("Failed to fetch data.");
|
||||
// setLoading(false);
|
||||
// })
|
||||
// }else{
|
||||
|
||||
// setregularizes(regularizedList_cache.data);
|
||||
// }
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// if (projectId) {
|
||||
// fetchData();
|
||||
// }
|
||||
|
||||
// }, [ projectId ] );
|
||||
// return {regularizes,loading,error,refetch:fetchData}
|
||||
// }
|
||||
|
||||
|
||||
// ----------------------------Query-----------------------------
|
||||
|
||||
|
||||
export const useAttendace = (projectId) => {
|
||||
const {
|
||||
data: attendance = [],
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch: recall,
|
||||
} = useQuery({
|
||||
queryKey: ["attendance", projectId],
|
||||
queryFn: async ({ queryKey }) => {
|
||||
const [, projectId] = queryKey;
|
||||
const response = await AttendanceRepository.getAttendance(projectId);
|
||||
return response.data;
|
||||
},
|
||||
enabled: !!projectId,
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Error while fetching Attendance", "error");
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
attendance,
|
||||
loading,
|
||||
error,
|
||||
recall,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchData();
|
||||
}
|
||||
|
||||
}, [id]);
|
||||
|
||||
return { logs, loading, error };
|
||||
};
|
||||
|
||||
export const useRegularizationRequests = ( projectId ) =>
|
||||
{
|
||||
const [regularizes, setregularizes] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
|
||||
const fetchData = () => {
|
||||
const regularizedList_cache = getCachedData("regularizedList");
|
||||
if(!regularizedList_cache || regularizedList_cache.projectId !== projectId ){
|
||||
setLoading(true)
|
||||
AttendanceRepository.getRegularizeList(projectId).then((response)=>{
|
||||
setregularizes( response.data )
|
||||
cacheData("regularizedList", { data: response.data, projectId })
|
||||
setLoading(false)
|
||||
}).catch((error)=>{
|
||||
setError("Failed to fetch data.");
|
||||
setLoading(false);
|
||||
})
|
||||
}else{
|
||||
|
||||
setregularizes(regularizedList_cache.data);
|
||||
}
|
||||
export const useEmployeeAttendacesLog = (id) => {
|
||||
const {
|
||||
data: logs = [],
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch: recall,
|
||||
} = useQuery({
|
||||
queryKey: ["employeeAttendanceLogs", id],
|
||||
queryFn: async () => {
|
||||
const response = await AttendanceRepository.getAttendanceLogs(id);
|
||||
return response.data;
|
||||
},
|
||||
enabled: !!id,
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Error while fetching Attendance Logs", "error");
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
logs,
|
||||
loading,
|
||||
error,
|
||||
recall,
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
fetchData();
|
||||
}
|
||||
export const useRegularizationRequests = (projectId) => {
|
||||
const {
|
||||
data: regularizes = [],
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ["regularizationRequests", projectId],
|
||||
queryFn: async () => {
|
||||
const response = await AttendanceRepository.getRegularizeList(projectId);
|
||||
return response.data;
|
||||
},
|
||||
enabled: !!projectId,
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Error while fetching Regularization Requests", "error");
|
||||
},
|
||||
});
|
||||
|
||||
}, [ projectId ] );
|
||||
return {regularizes,loading,error,refetch:fetchData}
|
||||
}
|
||||
return {
|
||||
regularizes,
|
||||
loading,
|
||||
error,
|
||||
refetch,
|
||||
};
|
||||
};
|
||||
|
||||
@ -190,41 +190,7 @@ const AttendancePage = () => {
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="nav-align-top nav-tabs-shadow">
|
||||
{/* <ul className="nav nav-tabs" role="tablist">
|
||||
<div
|
||||
className="dataTables_length text-start py-2 px-2 d-flex "
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
{loginUser && loginUser?.projects?.length > 1 && (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedProject}
|
||||
onChange={(e) => dispatch(setProjectId(e.target.value))}
|
||||
aria-label=""
|
||||
>
|
||||
{!projectLoading &&
|
||||
projects
|
||||
?.filter((project) =>
|
||||
loginUser?.projects?.map(String).includes(project.id)
|
||||
)
|
||||
.map((project) => (
|
||||
<option value={project.id} key={project.id}>
|
||||
{project.name}
|
||||
</option>
|
||||
))}
|
||||
{projectLoading && (
|
||||
<option value="Loading..." disabled>
|
||||
Loading...
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</ul> */}
|
||||
|
||||
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user